/* ==========================================================================
   Mosaic Nursery LLC
   COLOUR THEME: every colour on the page is derived from ONE base hue
   taken from the logo. Base = plum, measured off the logo's own indigo
   (#241854) and purple (#602478).

   Surfaces, borders and body type are that hue at low chroma. The nine
   tile colours from the logo are kept at identical lightness and chroma
   so no single one shouts. The call-to-action is the wordmark magenta,
   deepened until white text on it clears WCAG AA.

   Shared stylesheet. Plain CSS, no build step.
   Drop-in replacement: overwrite styles.css with this file. Nothing else
   needs to change. See the override block at the bottom of this file.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #FAF8FF;
  --paper-2: #F4F1FB;
  --paper-3: #ECE8F5;
  --clay: #DBB59D;
  --clay-soft: #F5DED0;
  --sage: #73688A;
  --sage-soft: #E9E2F8;
  --sage-deep: #312941;
  --terracotta: #B24E56;
  --terracotta-dark: #9C3B44;
  --ink: #25202F;
  --ink-soft: #4A4455;
  --grey: #6B6674;
  --line: #DBD6E6;
  --white: #FFFFFF;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1.0rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.1vw, 2.9rem);
  --text-3xl: clamp(2.2rem, 1.5rem + 2.9vw, 3.7rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --maxw: 1240px;
  --maxw-narrow: 760px;
  --header-h: 76px;

  --shadow-sm: 0 1px 2px rgba(46, 42, 38, .05), 0 4px 14px rgba(46, 42, 38, .05);
  --shadow-md: 0 2px 6px rgba(46, 42, 38, .06), 0 18px 40px rgba(46, 42, 38, .09);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  /* subtle paper grain */
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); margin: 0 0 var(--space-4); line-height: 1.14; letter-spacing: -0.015em; font-variation-settings: "SOFT" 20, "WONK" 0; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); line-height: 1.25; }
h4 { font-size: var(--text-md); line-height: 1.3; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--terracotta-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.15rem; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }

:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: var(--r-sm);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--space-4); color: var(--paper); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); position: relative; z-index: 1; }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--paper2 { background: var(--paper-2); }
.section--sage { background: var(--sage); color: var(--sage-soft); }
.section--sage h2, .section--sage h3, .section--sage h4 { color: var(--white); }
.section--ink { background: var(--ink); color: #B0ABB9; }
.section--ink h2, .section--ink h3 { color: var(--white); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--terracotta-dark); margin: 0 0 var(--space-3);
}
.section--sage .eyebrow, .section--ink .eyebrow { color: var(--clay); }
.lede { font-size: var(--text-md); color: var(--ink-soft); line-height: 1.7; }
.section--sage .lede, .section--ink .lede { color: #F5F1FF; }
.muted { color: var(--grey); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.measure { max-width: 68ch; }
.section-head { max-width: 62ch; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em;
  padding: .82rem 1.5rem; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--terracotta); color: #FFF1F1; }
.btn--primary:hover { background: var(--terracotta-dark); color: #FFF1F1; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-3); color: var(--ink); border-color: var(--clay); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--white); color: var(--ink); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: var(--white); }
.btn--sm { padding: .58rem 1.05rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper); box-shadow: 0 1px 0 rgba(46,42,38,.04);
  border-bottom: 1px solid var(--line);
}
.header__bar { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand__mark { color: var(--sage); flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
.brand__sub { font-size: .58rem; letter-spacing: .19em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  font-size: .86rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: .5rem .62rem; border-radius: var(--r-sm); white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--paper-3); }
.nav a[aria-current="page"] { color: var(--terracotta-dark); font-weight: 600; }
.header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-4); }
.header__tel { font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.header__tel:hover { color: var(--terracotta-dark); }

.hamburger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; margin-left: auto;
}
.hamburger span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: .25s var(--ease); }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: .25s var(--ease); }
.hamburger span::before { top: -6px; }
.hamburger span::after { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .header__actions { display: none; }
  .hamburger { display: flex; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none;
}
.drawer[data-open="true"] { visibility: visible; pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(46,42,38,.42); opacity: 0; transition: opacity .28s var(--ease); }
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw);
  background: var(--paper); box-shadow: var(--shadow-md); padding: var(--space-5);
  transform: translateX(102%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.drawer__close { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: var(--r-sm); font-size: 1.2rem; cursor: pointer; color: var(--ink); line-height: 1; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: .82rem 0; border-bottom: 1px solid var(--line); text-decoration: none;
  color: var(--ink); font-size: 1.02rem; font-family: var(--font-display); font-weight: 500;
}
.drawer nav a[aria-current="page"] { color: var(--terracotta-dark); }
.drawer__foot { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.drawer__foot .small { color: var(--grey); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--space-8) var(--space-7); }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--space-8); align-items: center; }
.hero__title { margin-bottom: var(--space-5); }
.hero__title em { font-style: italic; color: var(--sage); }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3.1; object-fit: cover; width: 100%; }
.hero__badge {
  position: absolute; left: -22px; bottom: -22px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); max-width: 220px;
}
.hero__badge .n { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--sage); display: block; }
.hero__badge .t { font-size: var(--text-xs); color: var(--grey); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-top: .4rem; display: block; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__badge { left: auto; right: 12px; bottom: -18px; }
}

/* Page header (interior pages) */
.pagehead { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--line); }
.pagehead__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-7); align-items: end; }
@media (max-width: 900px) { .pagehead__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.pagehead img { border-radius: var(--r-lg); aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.crumbs { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: var(--space-4); }
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--terracotta-dark); }

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--line); background: var(--paper-2); }
.trust__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: var(--space-5) var(--space-4); border-right: 1px solid var(--line); text-align: center; }
.trust__item:last-child { border-right: 0; }
.trust__item .k { font-family: var(--font-display); font-size: 1.28rem; color: var(--sage); display: block; line-height: 1.2; }
.trust__item .v { font-size: var(--text-xs); color: var(--grey); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; margin-top: .3rem; display: block; }
@media (max-width: 760px) {
  .trust__row { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(2n) { border-right: 0; }
  .trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--ink-soft); font-size: var(--text-sm); }
.card__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--sage-soft); color: var(--sage-deep); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.card--plain { background: transparent; box-shadow: none; border-color: transparent; padding: 0; }
.card--plain:hover { transform: none; box-shadow: none; }
.card--flat { box-shadow: none; background: var(--paper-2); }
.card--flat:hover { transform: none; box-shadow: var(--shadow-sm); }
.card__media { border-radius: var(--r-sm); overflow: hidden; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5); border-radius: var(--r-md) var(--r-md) 0 0; }
.card__media img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.card__tag { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-deep); background: var(--sage-soft); padding: .25rem .6rem; border-radius: var(--r-pill); margin-bottom: var(--space-3); align-self: flex-start; }
.card__foot { margin-top: auto; padding-top: var(--space-4); }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--r-lg); width: 100%; object-fit: cover; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .split--reverse .split__media { order: 0; }
}

/* Stat / spec list */
.specs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.specs li { display: flex; justify-content: space-between; gap: var(--space-4); padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; font-size: var(--text-sm); }
.specs li span:first-child { color: var(--grey); }
.specs li span:last-child { font-weight: 600; text-align: right; }

/* Checklist */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 1.75rem; font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 12px; height: 7px;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg);
}
.section--sage .checks li { color: #F5F1FF; }
.section--sage .checks li::before { border-color: var(--clay); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.timeline li { position: relative; padding-left: var(--space-6); padding-bottom: var(--space-5); margin: 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--clay); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--clay-soft); }
.timeline .t { font-family: var(--font-display); font-size: var(--text-sm); color: var(--terracotta-dark); font-weight: 600; letter-spacing: .04em; display: block; }
.timeline h4 { margin: .1rem 0 .3rem; }
.timeline p { font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- Quote / testimonial ---------- */
.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-6); display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-md); line-height: 1.5; color: var(--ink); }
.quote figcaption { font-size: var(--text-sm); color: var(--grey); margin-top: auto; }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.stars { color: var(--clay); letter-spacing: .12em; font-size: .9rem; margin-bottom: var(--space-3); }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); font-weight: 500;
  padding: var(--space-5) var(--space-6) var(--space-5) 0; position: relative; line-height: 1.3;
}
.acc__btn:hover { color: var(--terracotta-dark); }
.acc__btn::after, .acc__btn::before {
  content: ""; position: absolute; right: 6px; top: 50%; background: var(--sage); transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.acc__btn::before { width: 15px; height: 1.5px; margin-top: -.5px; }
.acc__btn::after { width: 1.5px; height: 15px; margin-top: -7.5px; right: 12.75px; }
.acc__btn[aria-expanded="true"]::after { transform: rotate(90deg); opacity: 0; }
.acc__panel { display: none; padding: 0 var(--space-6) var(--space-5) 0; }
.acc__panel[data-open="true"] { display: block; }
.acc__panel p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 78ch; }
.acc__panel .note { font-size: var(--text-xs); color: var(--grey); font-style: italic; margin-top: var(--space-3); }

/* ---------- Table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: var(--text-sm); }
caption { text-align: left; padding: var(--space-4) var(--space-5); font-size: var(--text-xs); color: var(--grey); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--line); }
th, td { text-align: left; padding: .82rem var(--space-5); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--paper-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td:not(:first-child), th:not(:first-child) { white-space: nowrap; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.filters button {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); transition: .2s var(--ease);
}
.filters button:hover { border-color: var(--clay); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--white); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }
.gallery__item { position: relative; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--r-md); overflow: hidden; display: block; }
.gallery__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--ease); }
.gallery__item:hover img { transform: scale(1.035); }
.gallery__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--space-5) var(--space-4) var(--space-3);
  background: linear-gradient(transparent, rgba(46,42,38,.72)); color: #fff; font-size: var(--text-xs);
  text-align: left; letter-spacing: .04em; opacity: 0; transition: opacity .3s var(--ease);
}
.gallery__item:hover figcaption, .gallery__item:focus-visible figcaption { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 140; background: rgba(30,27,24,.94); display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.lightbox[data-open="true"] { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 78vh; border-radius: var(--r-md); object-fit: contain; }
.lightbox__cap { color: #AFACB8; font-size: var(--text-sm); text-align: center; margin-top: var(--space-4); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: var(--space-5); right: var(--space-5); }
.lightbox__nav--prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-5); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--text-xs); color: var(--grey); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .72rem .85rem; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft); outline: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(181,101,74,.14); }
.field .err { font-size: var(--text-xs); color: var(--terracotta-dark); font-weight: 600; min-height: 0; }
.field .err:empty { display: none; }
.checkline { display: flex; gap: .7rem; align-items: flex-start; }
.checkline input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: .22rem; accent-color: var(--sage); }
.checkline label { font-weight: 400; font-size: var(--text-sm); color: var(--ink-soft); }
.agebadge {
  font-size: var(--text-sm); background: var(--sage-soft); color: var(--sage-deep); border-radius: var(--r-sm);
  padding: .6rem .85rem; display: none;
}
.agebadge[data-show="true"] { display: block; }
.form__actions { display: grid; gap: var(--space-3); }
.form__note { font-size: var(--text-xs); color: var(--grey); }
.form-success { display: none; background: var(--sage-soft); border: 1px solid #D4CCE7; border-radius: var(--r-md); padding: var(--space-6); }
.form-success[data-show="true"] { display: block; }
.form-success h3 { color: var(--sage-deep); }

/* ---------- CTA band ---------- */
.ctaband { background: var(--sage); color: #F5F1FF; border-radius: var(--r-lg); padding: var(--space-8) var(--space-7); text-align: center; }
.ctaband h2 { color: var(--white); }
.ctaband p { color: #F5F1FF; max-width: 56ch; margin-inline: auto; }
.ctaband .btn-row { justify-content: center; margin-top: var(--space-5); }
@media (max-width: 640px) { .ctaband { padding: var(--space-6) var(--space-5); } }

/* ---------- Info / location block ---------- */
.mapblock { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: stretch; }
@media (max-width: 900px) { .mapblock { grid-template-columns: 1fr; } }
.mapcard {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper-2);
  min-height: 320px; position: relative;
}
.mapcard svg { display: block; width: 100%; height: 100%; }
.mapcard__legend { position: absolute; left: var(--space-4); bottom: var(--space-4); background: rgba(250,247,242,.94); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .8rem; font-size: var(--text-xs); color: var(--ink-soft); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.modal[data-open="true"] { display: flex; }
.modal__scrim { position: absolute; inset: 0; background: rgba(46,42,38,.5); }
.modal__panel {
  position: relative; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: var(--space-6);
}
.modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink); }
@media (max-width: 640px) { .modal__panel { padding: var(--space-5); } }

/* ---------- Floating actions ---------- */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%; background: #647D41; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  text-decoration: none; transition: transform .2s var(--ease);
}
.fab:hover { transform: scale(1.06); color: #fff; }
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 79; display: none;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(250,247,242,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  gap: .6rem;
}
.mobile-cta .btn { flex: 1; }
@media (max-width: 720px) {
  .mobile-cta { display: flex; }
  .fab { bottom: 82px; }
  body { padding-bottom: 68px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #AFACB8; padding-block: var(--space-8) var(--space-5); margin-top: var(--space-9); }
.footer a { color: #AFACB8; text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-6); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: var(--white); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .11em; font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-4); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; font-size: var(--text-sm); }
.footer p { font-size: var(--text-sm); }
.footer .brand { color: var(--white); }
.footer .brand__mark { color: var(--clay); }
.footer .brand__sub { color: #8E8A97; }
.socials { display: flex; gap: .6rem; margin-top: var(--space-4); }
.socials a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.socials a:hover { background: rgba(255,255,255,.1); }
.footer__base {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between;
  font-size: var(--text-xs); color: #8E8A97;
  /* The WhatsApp button is position:fixed at the bottom-right, so once the page
     is scrolled to the end it sits on top of this last row. Reserve the button's
     width plus its offset so the final line is never covered. */
  padding-bottom: 90px;
}
.footer__base > :last-child { padding-right: 72px; }
@media (max-width: 720px) {
  .footer__base { padding-bottom: 100px; }
  .footer__base > :last-child { padding-right: 0; }
}

/* ---------- Utility ---------- */
.pill-note {
  display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-xs); font-weight: 600;
  background: var(--clay-soft); color: #805B44; padding: .35rem .8rem; border-radius: var(--r-pill);
}
.notice { background: var(--paper-2); border-left: 3px solid var(--clay); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--ink-soft); }
.stack > * + * { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-6 { margin-bottom: var(--space-6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:hover, .card:hover, .fab:hover { transform: none; }
}

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: var(--space-10); }
.notfound .code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 8rem); color: var(--clay); line-height: 1; margin-bottom: var(--space-4); }

/* ---- additions: narrow pages, prose, faq search, 404 ---- */
.mt-8 { margin-top: var(--space-8); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pagehead--plain { padding-block: var(--space-8) var(--space-6); }
.pagehead--plain h1 { max-width: 18ch; }

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-4); color: var(--ink-2); }
.prose ul { margin-bottom: var(--space-4); }
.prose > .checks { margin-bottom: var(--space-5); }

.faq-search { margin-bottom: var(--space-6); }
.faq-search input[type="search"] {
  width: 100%; max-width: 520px; font: inherit; font-size: var(--text-base);
  padding: .85rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; color: var(--ink); -webkit-appearance: none;
}
.faq-search input[type="search"]:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-color: var(--sage); }
.faq-search p { margin-top: .6rem; }
.acc__item[hidden] { display: none; }

.err404 { padding-block: var(--space-9) var(--space-9); text-align: center; }
.err404__mark { color: var(--clay); display: flex; justify-content: center; margin-bottom: var(--space-5); }
.err404__mark svg { width: 96px; height: 96px; }
.err404 h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.err404 .lede { margin-inline: auto; max-width: 46ch; }
.err404 .btn-row { justify-content: center; margin-top: var(--space-6); }
@media (max-width: 700px) { .err404 { padding-block: var(--space-7); } }

/* ---- two-column variants that collapse properly ---- */
.mapblock--aside { grid-template-columns: 1fr 2fr; align-items: start; gap: var(--space-8); }
.mapblock--form { grid-template-columns: 1.35fr 1fr; align-items: start; gap: var(--space-8); }
@media (max-width: 980px) {
  .mapblock--aside, .mapblock--form { grid-template-columns: 1fr; gap: var(--space-6); }
  .mapblock--aside > aside { order: 2; }
}

/* horizontal scroll affordance for wide tables on small screens */
@media (max-width: 760px) {
  .table-scroll { position: relative; }
  .table-scroll::after {
    content: "Scroll the table sideways to see all columns \2192";
    display: block; padding: .7rem 1rem 0; font-size: var(--text-xs);
    color: var(--grey); position: sticky; left: 0;
  }
}

@media (max-width: 640px) {
  .ctaband { padding: var(--space-6) var(--space-4); }
  .ctaband h2 { font-size: var(--text-xl); hyphens: auto; }
}

/* ---------------- Security / privacy additions ---------------- */

/* Honeypot: must be unreachable and invisible to humans and screen readers,
   but still a real, fillable input as far as an automated bot is concerned.
   Deliberately NOT display:none — some bots skip those. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Just-in-time privacy notice beside the consent checkbox. */
.privacy-jit {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--paper-2, rgba(92,112,96,.05));
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius-sm, 8px);
}
.privacy-jit p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--grey);
}
.privacy-jit p:last-child { margin-bottom: 0; }
.privacy-jit strong { color: var(--ink); font-weight: 600; }
.privacy-jit a { color: var(--sage); text-underline-offset: 2px; }

/* ==========================================================================
   Restructure v2 — mosaic accents, real logo, programmes, team, testimonials
   --------------------------------------------------------------------------
   The calm cream/sage base is unchanged. The logo colours below supply accent
   only: one colour per programme, gallery filter chips, small tile motifs and
   testimonial avatars. Body text, buttons and large surfaces stay in the base
   palette; terracotta remains the only primary CTA colour.
   ========================================================================== */

:root {
  --m-pink: #AC5D70;
  --m-red: #AE5F58;
  --m-orange: #A76537;
  --m-yellow: #996C21;
  --m-green: #617E36;
  --m-teal: #008479;
  --m-cyan: #007FA1;
  --m-blue: #5874B4;
  --m-purple: #9065A4;
  /* the real logo lockup is taller than the old text wordmark */
  --header-h: 104px;
}
@media (max-width: 720px) { :root { --header-h: 88px; } }

/* ---------- Brand logo ---------- */
.brand__logo { width: 124px; height: auto; }
.brand__logo--footer { width: 150px; }
.brand__logo--drawer { width: 104px; }
@media (max-width: 720px) { .brand__logo { width: 104px; } }

/* ---------- Mosaic tile motif ---------- */
.motif { display: block; height: 14px; width: auto; margin-bottom: var(--space-3); opacity: .92; }
.tile-divider { display: flex; justify-content: center; padding-block: var(--space-6); }
.tile-divider .motif { height: 12px; margin: 0; opacity: .8; }

/* ---------- Programme chips (sticky jump row) ---------- */
.pchips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pchip {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .45rem .95rem; background: var(--white);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.pchip:hover, .pchip:focus-visible { color: var(--ink); border-color: var(--pc, var(--clay)); background: var(--paper-2); }
.pchip__tile { width: 11px; height: 11px; border-radius: 3px; background: var(--pc, var(--sage)); flex: 0 0 11px; }
.pchip__age { color: var(--grey); font-weight: 500; font-size: var(--text-xs); }

/* ---------- Programme strip (home) ---------- */
.pstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.pcard {
  scroll-snap-align: start; text-decoration: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-5);
  display: flex; flex-direction: column; gap: .25rem; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.pcard__rule { display: block; height: 4px; width: 46px; border-radius: 2px; background: var(--pc, var(--sage)); margin-bottom: var(--space-3); }
.pcard__age { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--grey); }
.pcard__name { font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); line-height: 1.2; }
.pcard__room { font-size: var(--text-sm); color: var(--ink-soft); }
.pcard__ratio { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); margin-top: auto; padding-top: var(--space-3); }
.pcard--tinted { border-top: 4px solid var(--pc, var(--sage)); }
/* CONTRAST: the accent scale is too light for white text at these sizes, so
   text-bearing accent surfaces either use an outline treatment or darken the
   accent with a 45% ink overlay, which clears 4.5:1 for every colour in use. */
.pcard__tag { color: var(--ink); background: var(--white); border: 1px solid var(--pc, var(--sage)); }
.avatar, .booknum, .filters button[aria-pressed="true"] {
  background-color: var(--pc, var(--sage));
  background-image: linear-gradient(rgba(46, 42, 38, .45), rgba(46, 42, 38, .45));
}

/* Small colour dot used inside table row headers */
.tdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--pc, var(--sage)); margin-right: .45rem; }

/* ---------- Programme sections ---------- */
.prog { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.prog__rule { display: block; height: 5px; width: 60px; border-radius: 3px; background: var(--pc, var(--sage)); margin-bottom: var(--space-4); }
.prog__meta { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.prog__meta li { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.prog__meta li span { color: var(--grey); font-weight: 500; display: block; letter-spacing: .08em; }

/* ---------- Sticky in-page sub-navigation ---------- */
.subnav {
  position: sticky; top: var(--header-h); z-index: 70;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.subnav__row { display: flex; gap: .15rem; overflow-x: auto; padding-block: .55rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav__row::-webkit-scrollbar { display: none; }
.subnav a {
  font-size: .84rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  padding: .45rem .7rem; border-radius: var(--r-sm);
}
.subnav a:hover { background: var(--paper-3); color: var(--ink); }
main [id] { scroll-margin-top: calc(var(--header-h) + 76px); }
/* On narrow screens the chips scroll sideways so the sticky stack stays one row
   tall. From 1024px up there is room to wrap, so nothing is ever clipped. */
.subnav .pchips { flex-wrap: nowrap; }
.subnav .pchip { white-space: nowrap; }
@media (min-width: 1024px) {
  .subnav__row { overflow-x: visible; }
  .subnav .pchips { flex-wrap: wrap; gap: .4rem; }
}

/* ---------- Book a Tour block ---------- */
.booknum {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: var(--pc, var(--sage)); color: #fff; font-weight: 600;
  font-size: var(--text-sm); margin-bottom: var(--space-4);
}
.slotrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.slot {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .4rem .9rem;
}

/* ---------- Testimonials (CSS-only scroll-snap row) ---------- */
.tscroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 340px);
  gap: var(--space-5); overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: var(--space-4); -webkit-overflow-scrolling: touch;
}
.tscroll .quote { scroll-snap-align: start; }
.quote__head { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-4); }
.avatar {
  width: 40px; height: 40px; border-radius: 10px; background: var(--pc, var(--sage)); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
  font-weight: 600; font-size: var(--text-sm); letter-spacing: .04em;
}
.verified { font-size: var(--text-xs); color: var(--grey); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--space-3); }
.verified svg { color: var(--sage); flex: 0 0 auto; }
.scrollhint { font-size: var(--text-xs); color: var(--grey); margin-top: var(--space-2); }

/* ---------- Team ---------- */
.teamband { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--space-7); }
.teamband img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
@media (max-width: 700px) { .teamband img { aspect-ratio: 4/3; } }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .team { grid-template-columns: minmax(0, 1fr); } }
.person { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.person__body { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 4px solid var(--pc, var(--sage)); }
.person__body h3 { font-size: var(--text-md); margin-bottom: .2rem; }
.person__role { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; margin-bottom: .35rem; }
.person__qual { font-size: var(--text-xs); color: var(--grey); margin-bottom: var(--space-3); }
.person__word { font-size: var(--text-sm); color: var(--ink-soft); font-style: italic; }

.letter { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-7); align-items: start; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-7); }
@media (max-width: 860px) { .letter { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); } }
.letter img { width: 100%; border-radius: var(--r-md); aspect-ratio: 4/5; object-fit: cover; }
.letter__sig { font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); margin-top: var(--space-5); }
.letter__sig span { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--grey); font-weight: 500; }

/* ---------- Gallery filter chips in brand colours ---------- */
.filters button { padding-left: 1.9rem; position: relative; }
.filters button::before {
  content: ""; position: absolute; left: .8rem; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--pc, var(--sage));
}
.filters button[aria-pressed="true"] { border-color: var(--pc, var(--sage)); color: var(--white); }
.filters button[aria-pressed="true"]::before { background: rgba(255,255,255,.92); }

/* ---------- Vision / mission / philosophy ---------- */
.vmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 860px) { .vmp { grid-template-columns: 1fr; } }
.vmp article { border: 1px solid var(--line); border-top: 4px solid var(--pc, var(--sage)); background: var(--white); border-radius: var(--r-md); padding: var(--space-6) var(--space-5); }

/* ---------- Journey timeline with mosaic dots ---------- */
.timeline--mosaic li::before { background: var(--pc, var(--clay)); box-shadow: 0 0 0 2px var(--paper-3); }
.timeline--mosaic .t { color: var(--ink-soft); }

/* ---------- Honest contrast pairs (what we are / what we are not) ---------- */
.contrast { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.contrast li { margin: 0; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--pc, var(--sage)); border-radius: var(--r-sm); padding: var(--space-4) var(--space-5); }
.contrast b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); margin-bottom: .3rem; }
.contrast .not { color: var(--grey); font-size: var(--text-sm); }
.subnav a[aria-current="true"] { color: var(--terracotta-dark); background: var(--paper-3); font-weight: 600; }
.card__icon--tile {
  color: #fff;
  background-color: var(--pc, var(--sage));
  background-image: linear-gradient(rgba(46, 42, 38, .45), rgba(46, 42, 38, .45));
}


/* ==========================================================================
   COLOUR THEME OVERRIDE — one base hue, everything else derived
   --------------------------------------------------------------------------
   WHY THIS BLOCK EXISTS
   Every page loads theme.css AFTER styles.css, so anything theme.css declares
   on :root would normally win and replacing styles.css alone would do nothing.
   The doubled :root:root selector below has higher specificity than the plain
   :root in theme.css, so these values win whichever file loads last. That is
   what lets you change the whole site by replacing this one file.

   HOW THE PALETTE IS BUILT
   1. One base hue is chosen from the logo. Everything structural — page
      backgrounds, card borders, headings, body copy — is that single hue at
      very low chroma, so the page reads as a calm neutral that is quietly
      related to the logo rather than grey.
   2. The nine logo tile colours are normalised to the SAME lightness and the
      SAME chroma, varying only in hue. That is why none of them jumps out:
      the logo's raw yellow is far lighter than its raw purple, and putting
      them side by side untreated is what made the first version look noisy.
   3. Text colours are not picked by eye. Each one was walked along the
      lightness axis until it measured at least 4.5:1 against the exact
      surface it sits on, so every pair on the site passes WCAG AA.

   TO RE-HUE THE SITE
   Replace the values in this block with one of the alternative base blocks
   commented out underneath it. Nothing else in the file needs to change.
   ========================================================================== */

:root:root {
  --paper:             #FAF8FF;
  --paper-2:           #F4F1FB;
  --paper-3:           #ECE8F5;
  --line:              #DBD6E6;
  --white:             #FFFFFF;
  --ink:               #25202F;
  --ink-soft:          #4A4455;
  --grey:              #6B6674;
  --sage:              #73688A;
  --sage-soft:         #E9E2F8;
  --sage-deep:         #312941;
  --clay:              #DBB59D;
  --clay-soft:         #F5DED0;
  --terracotta:        #B24E56;
  --terracotta-dark:   #9C3B44;
  --m-pink:            #AC5D70;
  --m-red:             #AE5F58;
  --m-orange:          #A76537;
  --m-yellow:          #996C21;
  --m-green:           #617E36;
  --m-teal:            #008479;
  --m-cyan:            #007FA1;
  --m-blue:            #5874B4;
  --m-purple:          #9065A4;
}

/* --------------------------------------------------------------------------
   CONTRAST CORRECTIONS
   Three colour decisions in the original stylesheet only worked because the
   old palette happened to be very dark in one place and very warm in another.
   Re-hued, they fell below WCAG AA, so they are corrected here.

   1. The dark bands (.section--sage and .ctaband) now use the deepest tone in
      the palette rather than the mid tone. Several pages set light text on
      those bands with inline styles (#CBD6C8, #E4EAE1, #fff, #BFCCBC) that
      cannot be reached from a stylesheet, so the band itself is deepened to
      carry them. This also matches the logo's own darkest colour.
   2. Star glyphs were the pale clay tone, which measures under 2:1 on white.
      They now use the deep gold from the logo's yellow tile.
   3. The eyebrow on a dark band was clay on mid plum. It now uses the light
      on-dark tint.
   -------------------------------------------------------------------------- */

.section--sage { background: var(--sage-deep); }
.ctaband       { background: var(--sage-deep); }
.section--sage .eyebrow { color: #F5F1FF; }

/* !important is needed only where the value is written inline in the HTML and
   there is no other way to reach it from this file. */
.stars,
.hero__badge .n span { color: #8E6212 !important; }

/* --------------------------------------------------------------------------
   THE JLT MAP
   The map on the home and contact pages is an inline SVG with its colours
   written into the markup as fill="..." and stroke="..." attributes. A CSS
   rule always beats a presentation attribute, so the map is re-pointed at the
   theme here rather than by editing the HTML.
   -------------------------------------------------------------------------- */

svg [fill="#FAF7F2"] { fill: var(--paper); }
svg [fill="#F3EEE6"] { fill: var(--paper-2); }
svg [fill="#EDE6DB"] { fill: var(--paper-3); }
svg [fill="#E2DACE"] { fill: var(--line); }
svg [fill="#DCE3DA"] { fill: var(--sage-soft); }
svg [fill="#8A8179"] { fill: var(--grey); }
svg [fill="#5C7060"] { fill: var(--sage); }
svg [fill="#B5654A"] { fill: var(--terracotta); }
svg [fill="#4A443D"] { fill: var(--ink-soft); }
svg [fill="#2E2A26"] { fill: var(--ink); }
svg [stroke="#D8CFC0"] { stroke: var(--line); }
svg [stroke="#C9A392"] { stroke: var(--clay); }

/* --------------------------------------------------------------------------
   ALTERNATIVE BASES — uncomment one to replace the block above.

   ---- BASE: TEAL  (from the logo teal #009084) ----
   Swap this in for the block above to re-hue the entire site.

:root:root {
  --paper:             #F2FBFA;
  --paper-2:           #E9F6F3;
  --paper-3:           #DEEFEC;
  --line:              #CADEDB;
  --white:             #FFFFFF;
  --ink:               #102825;
  --ink-soft:          #374D49;
  --grey:              #5B6D6A;
  --sage:              #457670;
  --sage-soft:         #D1EDE9;
  --sage-deep:         #0D3531;
  --clay:              #DBB59D;
  --clay-soft:         #F5DED0;
  --terracotta:        #B24E56;
  --terracotta-dark:   #9C3B44;
  --m-pink:            #AC5D70;
  --m-red:             #AE5F58;
  --m-orange:          #A76537;
  --m-yellow:          #996C21;
  --m-green:           #617E36;
  --m-teal:            #008479;
  --m-cyan:            #007FA1;
  --m-blue:            #5874B4;
  --m-purple:          #9065A4;
}

   ---- BASE: INDIGO  (from the logo indigo #241854 and blue #3E5DA8) ----
   Swap this in for the block above to re-hue the entire site.

:root:root {
  --paper:             #F7F9FF;
  --paper-2:           #EFF2FC;
  --paper-3:           #E6EAF7;
  --line:              #D4D9E8;
  --white:             #FFFFFF;
  --ink:               #1E2231;
  --ink-soft:          #424757;
  --grey:              #646876;
  --sage:              #636D8F;
  --sage-soft:         #DFE6FB;
  --sage-deep:         #262C45;
  --clay:              #DBB59D;
  --clay-soft:         #F5DED0;
  --terracotta:        #B24E56;
  --terracotta-dark:   #9C3B44;
  --m-pink:            #AC5D70;
  --m-red:             #AE5F58;
  --m-orange:          #A76537;
  --m-yellow:          #996C21;
  --m-green:           #617E36;
  --m-teal:            #008479;
  --m-cyan:            #007FA1;
  --m-blue:            #5874B4;
  --m-purple:          #9065A4;
}
   -------------------------------------------------------------------------- */