:root{
  --sage: #8EA593;
  --sage-deep: #33413A; /* text-only accent, never a large fill */
  --cream: #FCF4EA;
  --fig: #6D5261;
  --fig-hover: #5A4551;
  --ink: #2B2622;
  --line: rgba(43,38,34,0.14);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.005em;
}

em{ font-style: italic; }
a{ color: inherit; }
img{ max-width: 100%; display: block; }

.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* Strapline bar — small, so Fig works well here as an accent */
.topbar{
  background: var(--fig);
  color: var(--cream);
  text-align: center;
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
}

/* Header */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.brand{ display: block; }
.brand img{ height: 58px; width: auto; }

nav{ display: flex; align-items: center; }

nav a{
  text-decoration: none;
  font-size: 15px;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.2s ease;
  margin-left: 34px;
}
nav a:first-child{ margin-left: 0; }
nav a:hover{ opacity: 1; }
nav a.current{ opacity: 1; border-bottom: 1px solid var(--fig); padding-bottom: 3px; }

.nav-book{
  background: var(--fig);
  color: var(--cream) !important;
  padding: 10px 22px;
  border-radius: 999px;
  opacity: 1 !important;
  border-bottom: none !important;
}
.nav-book:hover{ background: var(--fig-hover); }
.nav-book.current{ background: var(--fig-hover); }

.menu-toggle{ display: none; }

/* Buttons — Fig fill by default (works on Cream or Sage backgrounds) */
.btn{
  display: inline-block;
  background: var(--fig);
  color: var(--cream);
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover{ background: var(--fig-hover); }
.btn-outline{
  display: inline-block;
  background: transparent;
  color: var(--fig);
  text-decoration: none;
  padding: 14px 29px;
  border-radius: 999px;
  border: 1px solid var(--fig);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline:hover{ background: var(--fig); color: var(--cream); }
.hero-actions{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* On a Fig-coloured section, invert so the button still stands out */
.cta-strip .btn{ background: var(--cream); color: var(--fig); }
.cta-strip .btn:hover{ background: var(--sage); color: var(--sage-deep); }

/* Hero — Cream, not a colour fill; ring + Fig accent word carry the brand */
.hero{
  background: var(--cream);
  color: var(--ink);
  padding: 76px 32px 72px;
  position: relative;
  overflow: hidden;
}
.hero-inner{ max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.hero .eyebrow{ color: var(--fig); font-size: 15px; margin-bottom: 12px; letter-spacing: 0.02em; font-weight: 600; }
.hero h1{ font-size: clamp(40px, 6vw, 68px); line-height: 1.1; max-width: 15ch; margin-bottom: 18px; color: var(--sage-deep); }
.hero h1 em{ color: var(--fig); font-style: italic; }
.hero p{ font-size: 18px; max-width: 46ch; color: rgba(43,38,34,0.78); margin-bottom: 40px; }

.ring{
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(142,165,147,0.6);
  z-index: 1;
}
.ring::before{
  content: "";
  position: absolute;
  inset: 46px;
  border-radius: 50%;
  border: 1px solid rgba(109,82,97,0.35);
}

/* Page header (interior pages) — Cream, with a rule to separate from content below */
.page-header{
  background: var(--cream);
  color: var(--ink);
  padding: 48px 32px 36px;
  border-bottom: 1px solid var(--line);
}
.page-header-inner{ max-width: 1080px; margin: 0 auto; }
.page-header .eyebrow{ color: var(--fig); font-size: 15px; margin-bottom: 6px; font-weight: 600; }
.page-header h1{ font-size: clamp(34px, 5vw, 48px); max-width: 22ch; color: var(--sage-deep); }
.page-header p{ font-size: 17px; max-width: 52ch; color: rgba(43,38,34,0.78); margin-top: 8px; }
.page-header p a{ color: var(--fig); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.back-link{ display: inline-block; font-size: 14px; color: var(--fig); text-decoration: none; font-weight: 600; margin-bottom: 10px; }
.back-link:hover{ text-decoration: underline; }

/* Generic content sections */
.section{ padding: 72px 32px; }
.section-inner{ max-width: 1080px; margin: 0 auto; }
.section.tight{ padding: 52px 32px; }
/* .deep and .sage are both the same soft mid-tone accent block — Sage bg, dark text */
.section.deep, .section.sage{ background: var(--sage); color: var(--ink); }

.two-col{ display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: start; }
.two-col h2{ font-size: 32px; color: var(--sage-deep); line-height: 1.2; }
.deep .two-col h2, .sage .two-col h2{ color: var(--sage-deep); }
.two-col .copy p{ font-size: 17px; max-width: 58ch; margin-bottom: 18px; color: rgba(43,38,34,0.85); }
.deep .two-col .copy p, .sage .two-col .copy p{ color: rgba(43,38,34,0.85); }
.two-col .copy p:last-child{ margin-bottom: 0; }
.two-col .copy a{ color: var(--fig); font-weight: 600; }

/* Services / offering list (on the Sage accent block) */
.services{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-top: 1px solid rgba(43,38,34,0.2);
  border-bottom: 1px solid rgba(43,38,34,0.2);
  position: relative;
}
.services::before{ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(43,38,34,0.2); }
.service{ padding: 26px 0; display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(43,38,34,0.2); }
.services > .service:nth-last-child(-n+2){ border-bottom: none; }
.service h3{ font-size: 19px; font-weight: 500; color: var(--sage-deep); }
.service p{ font-size: 15px; color: rgba(43,38,34,0.75); text-align: right; max-width: 30ch; }

/* Three-column variant (no center divider, used for café/crèche/profile) */
.services-3{
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(43,38,34,0.2);
  border-bottom: 1px solid rgba(43,38,34,0.2);
}
.services-3 .service{
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 32px 28px 0;
  margin-right: 32px;
  border-bottom: none;
  border-right: 1px solid rgba(43,38,34,0.2);
}
.services-3 .service:last-child{ border-right: none; margin-right: 0; padding-right: 0; }
.services-3 .service p{ text-align: left; max-width: none; }
@media (max-width: 760px){
  .services-3{ flex-direction: column; }
  .services-3 .service{ border-right: none; border-bottom: 1px solid rgba(43,38,34,0.2); margin-right: 0; padding-right: 0; }
  .services-3 .service:last-child{ border-bottom: none; }
}

/* Offering page — fuller detail rows on light background */
.offer-row{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.offer-row:last-child{ border-bottom: 1px solid var(--line); }
.offer-row h3{ font-size: 22px; color: var(--sage-deep); font-weight: 500; }
.offer-row p{ font-size: 16px; color: rgba(43,38,34,0.78); max-width: 60ch; }
.offer-row a{ color: var(--fig); font-weight: 600; }

/* Level ladder / feature list, used on dedicated space pages */
.ladder{ display: flex; flex-direction: column; gap: 18px; margin: 8px 0 4px; }
.ladder-item{ display: flex; gap: 16px; align-items: baseline; }
.ladder-num{ font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: var(--fig); width: 28px; flex-shrink: 0; }
.ladder-item div h4{ font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.ladder-item div p{ font-size: 15px; color: rgba(43,38,34,0.75); margin: 0; }

/* Placeholder note for widgets not yet wired up */
.widget-pending{
  border: 1px dashed rgba(43,38,34,0.3);
  border-radius: 4px;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: rgba(43,38,34,0.6);
  max-width: 820px;
  margin: 0 auto;
}

/* Small accent info card (e.g. availability hours) — Fig, used sparingly */
.info-card{
  background: var(--fig);
  color: var(--cream);
  border-radius: 6px;
  padding: 28px 32px;
  max-width: 420px;
}
.info-card h4{ font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(252,244,234,0.75); margin-bottom: 16px; }
.info-card-row{ display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(252,244,234,0.2); }
.info-card-row:first-of-type{ border-top: none; }
.info-card-row span:first-child{ font-size: 14px; color: rgba(252,244,234,0.85); }
.info-card-row span:last-child{ font-family: 'Playfair Display', Georgia, serif; font-size: 19px; }

/* Three-stat row (e.g. markers / duration / re-check) */
.stat-row{ display: flex; flex-wrap: wrap; margin: 8px 0 32px; }
.stat{ margin-right: 48px; }
.stat .num{ font-family: 'Playfair Display', Georgia, serif; font-size: 40px; color: var(--fig); line-height: 1; }
.stat .label{ font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(43,38,34,0.6); margin-top: 6px; }

.disclaimer{ font-size: 13px; color: rgba(43,38,34,0.55); max-width: 780px; margin: 24px auto 0; text-align: center; }

/* Treatment detail blocks (Coming Soon page) */
.kicker{ font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fig); font-weight: 700; margin-bottom: 8px; }
.group-intro{ max-width: 70ch; color: rgba(43,38,34,0.8); font-size: 16px; margin-bottom: 28px; }
.treatment-group{ margin-bottom: 44px; }
.treatment-group:last-child{ margin-bottom: 0; }
.treatment{ padding: 22px 0; border-top: 1px solid rgba(43,38,34,0.15); }
.treatment:last-of-type{ border-bottom: 1px solid rgba(43,38,34,0.15); }
.treatment h3{ font-size: 21px; color: var(--sage-deep); margin-bottom: 4px; }
.treatment .tagline{ font-style: italic; color: var(--fig); font-size: 15px; margin-bottom: 10px; }
.treatment p.body{ max-width: 68ch; font-size: 16px; color: rgba(43,38,34,0.85); margin-bottom: 12px; }
.tag-list{ font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(43,38,34,0.55); }
.catch-all{ font-size: 15px; color: rgba(43,38,34,0.75); max-width: 70ch; margin: 0 auto 0; text-align: center; font-style: italic; }

/* Pricing / voucher cards (Prices & Gift Vouchers pages) */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:8px 0 4px; }
.price-card{ border:1px solid var(--line); border-radius:6px; padding:30px 26px; background:var(--cream); display:flex; flex-direction:column; }
.sage .price-card{ background:rgba(252,244,234,0.6); border-color:rgba(43,38,34,0.22); }
.price-card.featured{ border-color:var(--fig); box-shadow:0 0 0 1px var(--fig); }
.price-card h3{ font-size:19px; color:var(--sage-deep); margin-bottom:8px; font-weight:500; }
.price-card .amount{ font-family:'Playfair Display', Georgia, serif; font-size:34px; color:var(--fig); margin-bottom:10px; line-height:1; }
.price-card .amount .per{ font-family:'Plus Jakarta Sans', sans-serif; font-size:13px; color:rgba(43,38,34,0.55); font-weight:600; margin-left:4px; }
.price-card p{ font-size:14.5px; color:rgba(43,38,34,0.75); flex-grow:1; }
.price-card .btn{ margin-top:18px; padding:10px 22px; font-size:14px; align-self:flex-start; }
@media (max-width:760px){ .price-grid{ grid-template-columns:1fr; } }

/* Simple price-list rows (reuses hours-table look for a plain item/price list) */
.price-list{ width:100%; border-collapse:collapse; }
.price-list th, .price-list td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:15px; }
.price-list th{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--fig); font-weight:600; border-bottom:1px solid rgba(43,38,34,0.3); }
.price-list td:last-child{ text-align:right; font-family:'Playfair Display', Georgia, serif; color:var(--sage-deep); font-size:17px; }
.price-list tr:last-child td{ border-bottom:none; }
@media (max-width:760px){ .price-list th, .price-list td{ padding:10px 8px; font-size:13.5px; } }

/* Draft placeholder callout — visible marker for content still to be filled in */
.draft-note{ background:rgba(109,82,97,0.08); border:1px dashed var(--fig); border-radius:6px; padding:18px 22px; font-size:14px; color:var(--fig); font-weight:600; max-width:820px; margin:0 auto 32px; }

/* Small "coming soon" badge */
.badge{
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fig);
  border: 1px solid var(--fig);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* Contact */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.contact-block h3{ font-size: 13px; letter-spacing: 0.04em; color: var(--fig); margin-bottom: 10px; font-family: 'Plus Jakarta Sans'; font-weight: 600; text-transform: uppercase; }
.contact-block p, .contact-block address{ font-size: 17px; font-style: normal; margin-bottom: 24px; color: rgba(43,38,34,0.9); }
.contact-block a{ color: var(--fig); }
.map-frame{ border: 1px solid var(--line); border-radius: 3px; overflow: hidden; height: 340px; }
.map-frame iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* Opening hours table */
.hours-table{ width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td{ text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.hours-table th{ font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fig); font-weight: 600; border-bottom: 1px solid rgba(43,38,34,0.3); }
.hours-table td:first-child{ font-weight: 600; color: var(--sage-deep); }
.hours-table tr:last-child td{ border-bottom: none; }
@media (max-width: 760px){
  .hours-table{ font-size: 13px; }
  .hours-table th, .hours-table td{ padding: 10px 8px; }
}

/* Booking */
.book-head{ text-align: center; margin-bottom: 12px; }
.book-head h2{ font-size: 34px; color: var(--sage-deep); margin-bottom: 6px; }
.book-head p{ font-size: 16px; color: rgba(43,38,34,0.7); }
.widget-frame{ background: transparent; max-width: 820px; margin: 0 auto; }

/* Quick jump links between widget sections */
.jump-links{ display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
.jump-links a{ text-decoration: none; font-size: 14px; color: var(--fig); font-weight: 600; border-bottom: 1px solid transparent; }
.jump-links a:hover{ border-bottom-color: var(--fig); }

/* CTA strip — Fig, small band, cream text (good contrast, tasteful accent use) */
.cta-strip{ background: var(--fig); color: var(--cream); padding: 64px 32px; text-align: center; }
.cta-strip h2{ font-size: 30px; margin-bottom: 14px; }
.cta-strip p{ font-size: 16px; color: rgba(252,244,234,0.85); margin-bottom: 30px; }

/* Footer — Cream, matching brand collateral; the Sage pillar band below carries the colour */
footer{ background: var(--cream); color: rgba(43,38,34,0.75); padding: 60px 32px 36px; border-top: 1px solid var(--line); }
.footer-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 40px;
  font-size: 14px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .wordmark{ font-family: 'Playfair Display', Georgia, serif; color: var(--sage-deep); font-size: 21px; margin-bottom: 10px; }
.footer-brand p{ max-width: 32ch; color: rgba(43,38,34,0.65); }
.social-links{ margin-top: 14px; }
.footer-col .social-links{ display: flex; flex-direction: row; align-items: center; }
.social-links a{ margin-left: 0; margin-right: 18px; font-size: 13px; font-weight: 600; color: var(--fig); text-decoration: underline; text-underline-offset: 3px; }
.footer-col h3{ font-family: 'Plus Jakarta Sans'; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fig); margin-bottom: 14px; font-weight: 600; }
.footer-col nav{ display: flex; flex-direction: column; align-items: flex-start; }
.footer-col nav a{ margin-left: 0; margin-bottom: 10px; opacity: 0.82; font-size: 14px; }
.footer-col nav a:hover{ opacity: 1; }
.footer-col address, .footer-col p{ font-style: normal; margin-bottom: 10px; color: rgba(43,38,34,0.78); }
.footer-col a{ text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom{ max-width: 1080px; margin: 20px auto 0; font-size: 13px; color: rgba(43,38,34,0.5); }
address{ font-style: normal; }

/* Four-pillar band, matching brand collateral — the one full-Sage band on the page */
.pillars{ background: var(--sage); color: var(--cream); padding: 26px 32px; }
.pillars-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.pillar{ flex: 1 1 150px; }
.pillar h4{ font-size: 12px; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 4px; }
.pillar p{ font-size: 12.5px; color: rgba(252,244,234,0.85); }
.pillar-brand{ text-align: right; }
.pillar-brand .wordmark{ font-family: 'Playfair Display', Georgia, serif; font-size: 20px; }
.pillar-brand span{ display: block; font-size: 10.5px; letter-spacing: 0.1em; margin-top: 2px; color: rgba(252,244,234,0.85); }
@media (max-width: 760px){
  .pillar-brand{ text-align: left; }
}

@media (max-width: 760px){
  .header-inner{ padding: 10px 20px; }
  .brand img{ height: 46px; }
  nav{
    position: fixed; inset: 68px 0 0 0; background: var(--cream);
    flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 22px;
    transform: translateX(100%); transition: transform 0.25s ease;
  }
  nav a{ margin-left: 0; }
  nav.open{ transform: translateX(0); }
  .menu-toggle{ display: block; background: none; border: none; font-family: inherit; font-size: 15px; cursor: pointer; color: var(--sage-deep); }
  .topbar{ font-size: 10px; letter-spacing: 0.1em; padding: 8px 12px; }
  .hero{ padding: 80px 20px 60px; }
  .page-header{ padding: 52px 20px 40px; }
  .ring{ display: none; }
  .section{ padding: 64px 20px; }
  .two-col{ grid-template-columns: 1fr; gap: 32px; }
  .services{ grid-template-columns: 1fr; }
  .services::before{ display: none; }
  .service{ flex-direction: column; gap: 6px; }
  .service p{ text-align: left; }
  .offer-row{ grid-template-columns: 1fr; gap: 12px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
  .footer-inner{ grid-template-columns: 1fr; gap: 32px; }
}

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