/* Shared page scaffolding for the four centre sites.
   Layout + web-scale sizing only — every colour, font, radius and shadow
   comes from the Organic design system stylesheet. Derived from the
   system's landing template. */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  --lead-100: var(--color-accent-100);
  --lead-200: var(--color-accent-200);
  --lead-300: var(--color-accent-300);
  --lead-700: var(--color-accent-700);
  --lead-800: var(--color-accent-800);
  --second-100: var(--color-accent-2-100);
  --second-300: var(--color-accent-2-300);
  --second-700: var(--color-accent-2-700);
  --second-800: var(--color-accent-2-800);
}
body.lead-sage {
  --lead-100: var(--color-accent-2-100);
  --lead-200: var(--color-accent-2-100);
  --lead-300: var(--color-accent-2-300);
  --lead-700: var(--color-accent-2-700);
  --lead-800: var(--color-accent-2-800);
  --second-100: var(--color-accent-100);
  --second-300: var(--color-accent-200);
  --second-700: var(--color-accent-700);
  --second-800: var(--color-accent-800);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — masthead — */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); gap: var(--space-3); }
.nav a { white-space: nowrap; }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nav-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 999px;
  background: #fff; padding: 3px; box-sizing: border-box; flex: none; }
.nav-brand .brand-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.1; }
.nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary[aria-current='page'] { color: var(--color-bg); }
@media (max-width: 900px) { .nav a:not(.btn):not(.nav-brand) { display: none; } }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--lead-700);
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — shared section headings — */
.section-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.2vw, 38px); line-height: calc(1.5 * var(--leading)); margin: 0;
  text-box: trim-both cap alphabetic; }
.section-note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure);
  text-box: trim-both cap alphabetic; }

/* — photography — the site's radius language, one step softer than the cards — */
.hero-figure, .split-figure, .band-figure, .patch-figure, .shot {
  margin: 0; overflow: hidden; border-radius: calc(2 * var(--radius-lg));
  background: var(--color-surface); }
.hero-figure img, .split-figure img, .band-figure img, .patch-figure img, .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block; }
figure picture { display: block; height: 100%; }

/* — hero — */
.hero { position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(28px, 5vw, 80px);
  padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.hero::before { content: ""; position: absolute; right: -180px; top: -220px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--second-100); pointer-events: none; z-index: -1; }
@media (max-width: 1420px) { .hero::before { right: 0; } }
.hero-figure { aspect-ratio: 5 / 4; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(2 * var(--leading)); }
  .hero-figure { aspect-ratio: 3 / 2; }
}
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 5.4vw, 70px);
  line-height: clamp(41px, 5.83vw, 76px);
  letter-spacing: 0; margin: 0; margin-left: -0.028em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading);
  align-items: center; }
/* margin: 0 matters — align-items centres the margin box, so the inherited
   bottom margin on <p> would lift the text off the button's centre line. */
.hero .row .callnote, .patch .row .callnote {
  margin: 0; font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.hero .row .callnote a, .patch .row .callnote a { font-weight: 600; }

/* — the facts bed: soft circles, thrown not sown — */
.bed { display: flex; flex-wrap: wrap; gap: var(--leading) var(--half);
  align-items: center; justify-content: flex-start;
  padding: var(--leading) 0 calc(2.5 * var(--leading)); }
.seed { border-radius: 50%; aspect-ratio: 1; width: clamp(170px, 21vw, 240px);
  display: grid; place-content: center; text-align: center;
  padding: var(--space-4); box-sizing: border-box; }
.seed:nth-child(1) { background: var(--lead-100); }
.seed:nth-child(2) { background: var(--second-300); transform: translateY(var(--leading)); }
.seed:nth-child(3) { background: var(--lead-300); }
.seed:nth-child(4) { background: var(--second-100); transform: translateY(var(--leading)); }
.seed .stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.6vw, 38px); line-height: calc(1.5 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; }
.seed:nth-child(1) .stat-num, .seed:nth-child(3) .stat-num { color: var(--lead-800); }
.seed:nth-child(2) .stat-num, .seed:nth-child(4) .stat-num { color: var(--second-800); }
.seed .stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; max-width: 14ch; text-wrap: balance; }
@media (max-width: 720px) { .seed { width: clamp(160px, 42vw, 210px); } }

/* — feature rows — */
.features { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.25 * var(--leading)) 0; }
.f-title { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.f-title::before { content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px);
  width: 18px; height: 18px; border-radius: 50%; background: var(--lead-700); }
@media (max-width: 1280px) { .f-title::before { display: none; } }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }
@media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); } }

/* — imagery split — */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); margin: 0;
  text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.split-figure { width: min(420px, 100%); justify-self: end; position: relative; }
.split-figure picture { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .split-figure { justify-self: start; } }
.day { display: grid; gap: var(--half); margin: calc(1.5 * var(--leading)) 0 0; padding: 0; list-style: none; }
.day li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3);
  font-size: 15.5px; line-height: var(--leading); }
.day li span { font-weight: 600; color: var(--lead-700); font-feature-settings: "tnum" 1; }

/* — captions: a tinted bar inside the rounded card, not floating text — */
.shot figcaption, .split-figure figcaption, .patch-figure figcaption {
  font-size: 13.5px; line-height: var(--half); margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--lead-100); color: var(--lead-800); }

/* — the room gallery — columns, so portrait and landscape shots each keep
     their own proportions and nothing gets cropped — */
.rooms { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.gallery { columns: 3; column-gap: var(--leading); margin-top: calc(1.75 * var(--leading)); }
.shot { break-inside: avoid; margin: 0 0 var(--leading); }
.shot img { height: auto; }
@media (max-width: 1000px) { .gallery { columns: 2; } }
@media (max-width: 640px) { .gallery { columns: 1; } }

/* — the outdoor band — */
.band { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.band-figure { margin-top: calc(1.75 * var(--leading)); }
.band-figure picture { aspect-ratio: 20 / 9; }
@media (max-width: 720px) { .band-figure picture { aspect-ratio: 4 / 3; } }

/* — quote — */
.quote { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(23px, 2.4vw, 30px); line-height: calc(1.5 * var(--leading));
  max-width: 34ch; margin: 0; text-indent: -0.559em; text-box: trim-both cap alphabetic;
}
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0; text-indent: -1.347em;
  text-box: trim-both cap alphabetic; }
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }

/* — the rounded patch (the close) — */
.close { padding: 0 0 calc(2 * var(--leading)); }
.patch { background: var(--second-100); border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px);
  display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: calc(1.5 * var(--leading)) clamp(28px, 4vw, 64px); }
.patch-figure picture { aspect-ratio: 4 / 3; }
.patch-figure figcaption { background: var(--color-bg); color: var(--color-text); }
@media (max-width: 860px) { .patch { grid-template-columns: 1fr; } }
.patch h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; line-height: calc(1.25 * var(--leading)); margin: 0;
  text-box: trim-both cap alphabetic; }
.patch .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.patch .row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
  margin-top: var(--leading); }

/* — enquiry page — */
.form-page { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: calc(2 * var(--leading)) clamp(32px, 6vw, 96px); align-items: start;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
@media (max-width: 900px) { .form-page { grid-template-columns: 1fr; } }
.form-head { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; margin: 0 0 0 -0.028em;
  text-box: trim-both cap alphabetic; }
.form-intro { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(var(--leading) - 1cap) 0 calc(2 * var(--leading)); text-box: trim-both cap alphabetic; }
form.enquiry { display: grid; gap: var(--leading); max-width: 560px; }
form.enquiry .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { form.enquiry .pair { grid-template-columns: 1fr; } }
form.enquiry textarea.input { min-height: calc(4 * var(--leading)); resize: vertical;
  border-radius: var(--radius-lg); font-family: var(--font-body); }
form.enquiry .hint { font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0; }
/* Honeypot — off-screen rather than display:none, which some bots skip. */
form.enquiry .trap { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }
form.enquiry .form-error { margin: 0; font-size: 14.5px; line-height: var(--leading);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-accent-100); color: var(--color-accent-800); }
.aside-figure { margin: calc(1.5 * var(--leading)) 0 0; overflow: hidden;
  border-radius: calc(1.5 * var(--radius-lg)); }
.aside-figure picture { display: block; aspect-ratio: 3 / 2; }
.aside-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aside-card { background: var(--lead-100); border-radius: calc(2 * var(--radius-lg));
  padding: calc(1.5 * var(--leading)) clamp(20px, 3vw, 36px); }
.aside-card h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); margin: 0 0 var(--half);
  text-box: trim-both cap alphabetic; }
.aside-card dl { display: grid; gap: var(--half); margin: 0; font-size: 15.5px; line-height: var(--leading); }
.aside-card dt { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--lead-800); }
.aside-card dd { margin: 0; }

/* — success page — */
.done { display: grid; justify-items: start; gap: var(--leading);
  padding: calc(4 * var(--leading)) 0 calc(5 * var(--leading)); max-width: 56ch; }
.done .mark { width: 96px; height: 96px; border-radius: 50%; background: var(--lead-300);
  display: grid; place-content: center; }
.done h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; margin: 0 0 0 -0.028em;
  text-box: trim-both cap alphabetic; }
.done p { font-size: 17px; line-height: var(--leading); margin: 0; }

/* — footer — */
footer.site { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading));
  font-size: 14px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--leading) clamp(24px, 4vw, 64px); }
footer.site h2 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--lead-700); margin: 0 0 var(--half); font-family: var(--font-body); }
footer.site p { margin: 0; }
footer.site .rating { display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--half); }
footer.site .ack { margin-top: calc(2 * var(--leading)); max-width: 78ch; font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
footer.site .fine { margin-top: var(--leading); font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); }