/* ==========================================================================
   Rooted Web — site stylesheet
   One file for every page. Sections:
   1. Tokens      2. Base          3. Layout        4. Typography
   5. Colour contexts               6. Header & nav  7. Components
   8. Page sections                 9. Footer        10. Decoration
   11. Motion     12. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand colours (Rooted Web design system) */
  --olive: #555B35;
  --sage: #858951;
  --terracotta: #A5553F;
  --terracotta-dark: #8E4733;
  --blush: #F6D3CB;
  --oat: #F0E3D0;
  --cream: #F8F3E9;
  --earth: #40352E;
  --hairline: rgba(64, 53, 46, .2);

  /* Type */
  --font-display: "Pink Sunset", "Fraunces", Georgia, serif;
  --font-hand: "Verveine", "Patrick Hand SC", "Patrick Hand", sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 104px;
  --gutter: 40px;

  /* Radius */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 30px;
  --radius-pill: 999px;

  /* Context colours (overridden by .on-dark etc.) */
  --text: var(--earth);
  --text-muted: var(--earth);
  --heading: var(--olive);
  --eyebrow: var(--terracotta);
  --link: var(--terracotta);
  --link-hover: var(--olive);
}

/* Self-hosted fonts --------------------------------------------------------- */
@font-face {
  font-family: "Pink Sunset";
  src: url("../fonts/PinkSunset-Regular.woff2") format("woff2"),
       url("../fonts/PinkSunset-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pink Sunset";
  src: url("../fonts/PinkSunset-Italic.woff2") format("woff2"),
       url("../fonts/PinkSunset-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 27px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.on-dark a:focus-visible { outline-color: var(--oat); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. Layout ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: 860px; }
.wrap--medium { max-width: 900px; }
.section { padding-top: var(--space-7); padding-bottom: var(--space-7); position: relative; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack--center { align-items: center; text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.row--center { justify-content: center; }
.row--between { justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.measure { max-width: 620px; }
.mb-6 { margin-bottom: var(--space-6); }
.mb-48 { margin-bottom: 48px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }

/* Split: text on one side, full-height media on the other */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.split__text {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  width: 100%; max-width: 600px; justify-self: end;
  padding: var(--space-7) var(--space-6) var(--space-7) var(--gutter);
}
.split__media { position: relative; min-height: 560px; }
.split__media--arch { display: flex; align-items: flex-end; justify-content: center; padding: var(--space-6) var(--gutter) 0; }
.split--flip .split__text { order: 2; justify-self: start; padding: var(--space-7) var(--gutter) var(--space-7) var(--space-6); }
.split--flip .split__media { order: 1; }

/* 4. Typography ------------------------------------------------------------ */
.display-xl {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 6.6vw, 88px); line-height: 1.04; letter-spacing: -0.015em;
  color: var(--heading);
}
.display-l {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 3.8vw, 48px); line-height: 1.12;
  color: var(--heading);
}
.display-m {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.4vw, 42px); line-height: 1.15;
  color: var(--heading);
}
.display-cta {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5.2vw, 68px); line-height: 1.06;
  color: var(--heading);
}
.statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2;
}
.intro-text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px); line-height: 1.25;
  color: var(--heading);
}
.heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 34px; color: var(--heading);
}
.heading-s {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 30px; color: var(--heading);
}
.eyebrow {
  font-family: var(--font-hand); font-size: 18px; line-height: 24px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow);
}
.tagline {
  font-family: var(--font-hand); font-size: 24px; line-height: 30px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--eyebrow);
}
.lead { font-size: 19px; line-height: 30px; }
.body-s { font-size: 15px; line-height: 24px; }
.caption { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .02em; }
.muted { color: var(--text-muted); }
.text-link { font-size: 15px; font-weight: 700; letter-spacing: .02em; }

/* 5. Colour contexts ------------------------------------------------------- */
.bg-cream { background: var(--cream); }
.bg-oat { background: var(--oat); }
.on-dark {
  --text: var(--cream);
  --text-muted: var(--oat);
  --heading: var(--cream);
  --eyebrow: var(--oat);
  --link: var(--cream);
  --link-hover: var(--oat);
  color: var(--text);
}
.bg-olive { background: var(--olive); }
.bg-sage { background: var(--sage); }
.bg-earth { background: var(--earth); }

/* 6. Header & nav ---------------------------------------------------------- */
.announce {
  background: var(--olive); color: var(--cream);
  text-align: center; padding: 10px 16px;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .02em;
}
.announce a { color: var(--cream); font-weight: 700; }

.site-header { background: var(--cream); }
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--space-4);
  padding-top: 18px; padding-bottom: 18px;
}
.site-header__cta { justify-self: end; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.nav a { color: var(--earth); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--olive); text-decoration: underline; text-underline-offset: 6px; }
.brand-mark { display: inline-flex; width: 104px; height: 104px; border-radius: var(--radius-pill); }
.brand-mark img { width: 104px; height: 104px; }

/* 7. Components ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 24px;
  border-radius: var(--radius-s);
  background: var(--terracotta); color: var(--cream);
  text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  transition: transform .25s ease, background-color .25s ease;
}
.btn:hover { color: var(--cream); background: var(--terracotta-dark); transform: translateY(-2px); }
.btn--sm { min-height: 44px; padding: 0 22px; }
.btn--lg { min-height: 50px; padding: 0 28px; font-size: 15px; letter-spacing: .02em; }

/* Photo placeholder (swap for <img> when photos are ready) */
.photo-ph {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5); text-align: center;
  background: var(--oat); color: var(--earth);
}
.photo-ph--olive { background: var(--olive); color: var(--cream); }
.photo-ph > span { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .02em; }

/* Arch-topped photo frame */
.arch {
  width: 100%; max-width: 380px; min-height: 480px; height: 100%;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  overflow: hidden;
}
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* Seedling tick list */
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; }
.ticks svg { flex: none; width: 18px; height: 24px; margin-top: 2px; color: var(--sage); }
.ticks strong { color: var(--olive); }

/* Location chips */
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-s); background: var(--cream); color: var(--olive);
  text-decoration: none; font-size: 14px; font-weight: 700;
  transition: background-color .25s ease;
}
.chip:hover { background: var(--oat); color: var(--olive); }

/* Process steps */
.steps { list-style: none; padding: 0; position: relative; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step__num {
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream); border: 2px solid var(--olive); color: var(--olive);
  font-family: var(--font-hand); font-size: 22px;
}
.step__num--filled { background: var(--olive); color: var(--cream); }
.process__line { position: absolute; left: var(--gutter); width: calc(100% - 2 * var(--gutter)); height: 40px; margin-top: 8px; color: var(--sage); }

/* Article cards */
.post { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--earth); }
.post:hover { color: var(--earth); }
.post:hover .heading-s { text-decoration: underline; text-underline-offset: 5px; }
.post__img { aspect-ratio: 4 / 3; border-radius: var(--radius-pill) var(--radius-pill) var(--radius-m) var(--radius-m); overflow: hidden; }

/* 8. Page sections --------------------------------------------------------- */
/* Hero */
.hero { position: relative; overflow: hidden; background: var(--earth); }
.hero__bg { position: absolute; inset: 0; background: var(--earth) url("../images/hero-forest.jpg") center 45% / cover no-repeat; }
.hero__shade { position: absolute; inset: 0; background: rgba(43, 36, 31, .42); }
.hero__content {
  position: relative; max-width: 900px; margin: 0 auto;
  padding: 150px 16px 230px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4);
}
.hero__content .btn { margin-top: 8px; }

/* Wave edges: .wave sits at the bottom of a section, .wave--top above one */
.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 90px; }
.wave--hero { height: 110px; }
.wave--top { display: block; width: 100%; height: 90px; }

/* Olive intro band */
.intro { position: relative; }
.intro .wrap { padding-top: 48px; padding-bottom: 150px; }
.seal {
  position: absolute; left: 50%; bottom: 14px; z-index: 2;
  width: 104px; height: 104px; margin-left: -52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--cream); border: 2px dotted var(--sage);
  color: var(--olive);
}
.seal svg { width: 40px; height: 54px; }

/* Statement band */
.statement-band { position: relative; overflow: hidden; }
.statement-band .wrap { padding-top: 96px; padding-bottom: 96px; }

/* Process */
.process__head { margin-bottom: var(--space-6); }
.process__seedling { width: 48px; height: 64px; color: var(--sage); }

/* CTA band */
.cta { position: relative; overflow: hidden; }
.cta .wrap { padding-top: 48px; padding-bottom: 112px; }
.cta .lead { max-width: 560px; }
.cta .row { margin-top: 8px; }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer { background: var(--earth); color: var(--oat); }
.site-footer .wrap { padding-top: 72px; padding-bottom: 36px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.footer-about { display: flex; flex-direction: column; gap: 18px; max-width: 360px; }
.footer-logo { display: inline-block; width: 260px; max-width: 100%; }
.footer-logo img { width: 100%; height: auto; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col__title { margin-bottom: 6px; font-family: var(--font-hand); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.flink { color: var(--oat); text-decoration: none; }
.flink:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; }
.flink--strong { font-size: 15px; font-weight: 700; }
.footer-bottom {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(240, 227, 208, .25);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .02em;
}

/* 10. Decoration ----------------------------------------------------------- */
.deco { position: absolute; pointer-events: none; }
.c-terracotta { color: var(--terracotta); }
.c-sage { color: var(--sage); }
.c-olive { color: var(--olive); }
.c-cream { color: var(--cream); }
.c-oat { color: var(--oat); }

.sprig { width: 120px; height: 220px; color: var(--oat); }
.sprig--sm { width: 90px; height: 165px; }
.flip-x { transform: scaleX(-1); }
.spark { width: 28px; height: 28px; }
.spark--sm { width: 16px; height: 16px; }

/* Placements (one per decorative item) */
.intro__sprig-l { left: 4%; top: 30px; }
.intro__sprig-r { right: 4%; top: 70px; }
.about__spark-1 { top: 40px; right: 12%; }
.about__spark-2 { top: 80px; right: 9%; }
.statement__spark-1 { top: 56px; left: 10%; }
.statement__spark-2 { bottom: 64px; right: 12%; }
.local__sprig { right: 6%; bottom: 40px; }
.cta__sprig { left: 6%; bottom: 60px; }
.cta__spark { top: 140px; right: 12%; }

/* 11. Motion --------------------------------------------------------------- */
/* Add class="motion" to <body> to switch animations on. */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes zoomOut { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }
@keyframes drawIn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rv { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes floatUp { from { transform: translateY(70px) rotate(-25deg); } to { transform: translateY(-70px) rotate(30deg); } }
@keyframes floatDown { from { transform: translateY(-60px) rotate(15deg); } to { transform: translateY(60px) rotate(-20deg); } }
@keyframes sway { from { transform: translateY(40px) rotate(-14deg); } to { transform: translateY(-40px) rotate(10deg); } }
@keyframes swayR { from { transform: translateY(-30px) rotate(12deg); } to { transform: translateY(40px) rotate(-12deg); } }
@keyframes grow { from { transform: scale(.25); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes archIn { from { clip-path: inset(30% 0 0 0 round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* On page load */
  .motion .in { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .motion .in-pop { animation: popIn .9s cubic-bezier(.2, .9, .3, 1.3) both; }
  .motion .hero__bg { animation: zoomOut 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .motion .d1 { animation-delay: .15s; }
  .motion .d2 { animation-delay: .35s; }
  .motion .d3 { animation-delay: .55s; }
  .motion .d4 { animation-delay: .75s; }
  .motion .twinkle { animation: twinkle 3.2s ease-in-out infinite; }
  .motion .twinkle--alt { animation-delay: 1.6s; }
}

/* On scroll (Chrome, Edge, Safari 26+; other browsers show everything statically) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .motion .rv.s2 { animation-range: entry 8% entry 95%; }
    .motion .rv.s3 { animation-range: entry 16% entry 100%; }
    .motion .rv.s4 { animation-range: entry 24% cover 30%; }
    .motion .up { animation: floatUp linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .motion .down { animation: floatDown linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .motion .sway { transform-origin: 50% 100%; animation: sway linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .motion .sway-r { transform-origin: 50% 100%; animation: swayR linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .motion .grow { transform-origin: 50% 100%; animation: grow linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .motion .arch-in { animation: archIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .motion .line-draw path { stroke-dasharray: 1; animation: drawIn linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  }
}

/* 12. Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .site-header__cta { justify-self: center; }
  .site-header .nav { order: 2; justify-content: center; }
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); }
  .split__text, .split--flip .split__text { order: 1; max-width: none; justify-self: stretch; padding: var(--space-6) var(--gutter); }
  .split__media, .split--flip .split__media { order: 2; min-height: 360px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .line-draw, .hide-md { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .split__text, .split--flip .split__text { padding: 56px var(--gutter); }
  .grid-3, .grid-4, .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Small utilities */
.relative { position: relative; }
.mt-12 { margin-top: 12px; }
.wave--on-cream { background: var(--cream); }

/* Full-bleed photo filling a split__media panel */
.split__media > img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch { position: relative; }
.arch img { position: absolute; inset: 0; }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__img img.focus-low { object-position: center 62%; }
.post__img img.focus-mid { object-position: center 45%; }

/* Blog ------------------------------------------------------------------- */
.page-hero { position: relative; }
.page-hero .split__text { padding-bottom: 150px; }
.page-hero .split__media { min-height: 520px; }
.page-hero .wave { z-index: 2; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.post-feature {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px; align-items: center; margin-bottom: 88px;
}
.post-feature .stack { gap: 16px; }
.post__img--feature { display: block; aspect-ratio: 4 / 3; }
article.post { color: var(--text); }
.post__link { color: inherit; text-decoration: none; }
.post__link:hover { color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.post .eyebrow { margin-top: 6px; }
@media (max-width: 900px) {
  .post-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 64px; }
  .page-hero .split__text { padding-bottom: var(--space-6); }
  .page-hero .split__media { min-height: 320px; padding-bottom: 80px; }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Article ---------------------------------------------------------------- */
.wrap--article { max-width: 760px; }
.article-hero { padding-top: 72px; }
.article-hero .wrap--article { display: flex; flex-direction: column; gap: 20px; }
.breadcrumb { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--sage); display: flex; gap: 8px; }
.breadcrumb a { color: var(--terracotta); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.article-meta { font-size: 14px; line-height: 22px; color: var(--earth); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.article-meta span[aria-hidden] { color: var(--sage); }
.article-figure { margin: 48px auto 0; max-width: 1000px; }
.article-figure img {
  width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center 35%;
  border-radius: var(--radius-pill) var(--radius-pill) var(--radius-m) var(--radius-m);
}
.article-body { padding-top: 72px; }

.prose { font-size: 18px; line-height: 30px; }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  margin-top: 56px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 34px); line-height: 1.2; color: var(--olive);
}
.prose h2 + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 10px; }
.prose ul li::marker { color: var(--terracotta); }
.prose ol li::marker { color: var(--olive); font-weight: 700; }
.prose strong { color: var(--olive); }
.prose a { color: var(--terracotta); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--hairline); }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 23px; }
.prose th { text-align: left; background: var(--olive); color: var(--cream); font-weight: 700; padding: 12px 16px; }
.prose td { padding: 14px 16px; border-top: 1px solid var(--hairline); vertical-align: top; background: var(--cream); }
.prose tbody tr:nth-child(even) td { background: var(--oat); }
.prose td:nth-child(2) { white-space: nowrap; font-weight: 700; color: var(--olive); }

.callout { background: var(--oat); border-radius: var(--radius-m); padding: 28px 32px; }
.callout__title { font-family: var(--font-hand); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); }
.callout ul { margin-top: 10px; font-size: 16px; line-height: 26px; }
.sources { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 22px; color: var(--earth); }

@media (max-width: 640px) {
  .article-hero { padding-top: 48px; }
  .article-figure { margin-top: 32px; }
  .prose { font-size: 17px; line-height: 28px; }
  .callout { padding: 22px 20px; }
  .prose td:nth-child(2) { white-space: normal; }
}
.article-figure img.pos-55 { object-position: center 55%; }
.article-figure img.pos-50 { object-position: center 50%; }
.sources ul { margin-top: 8px; padding-left: 18px; }
.sources li + li { margin-top: 4px; }
.sources p + ul + p { margin-top: 12px; }

/* Location pages ----------------------------------------------------------- */
.on-dark .breadcrumb { color: var(--oat); }
.on-dark .breadcrumb a { color: var(--cream); }
.loc-hero .split__text { gap: 18px; }
.loc-hero .lead { max-width: 520px; }
.loc-hero .row { margin-top: 8px; }
.btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--oat); }
.btn--ghost:hover { background: var(--cream); color: var(--olive); }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact {
  background: var(--oat); border-radius: var(--radius-m);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 8px;
}
.fact__num { font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); line-height: 1.05; color: var(--olive); }
.fact__label { font-size: 15px; line-height: 22px; }
.fact__src { margin-top: auto; padding-top: 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--earth); opacity: .8; }

.loc-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.loc-intro .prose { font-size: 17px; line-height: 28px; }
.loc-intro .prose h3 {
  margin-top: 32px; font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.2; color: var(--olive);
}
.loc-intro .prose h3:first-child { margin-top: 0; }

.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.help {
  background: var(--cream); border-radius: var(--radius-m); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.help svg { width: 22px; height: 30px; color: var(--sage); }
.help .text-link { margin-top: auto; padding-top: 6px; }

.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--oat); border-radius: var(--radius-m); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative;
  font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--olive);
  border-radius: var(--radius-m);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--terracotta); border-bottom: 2px solid var(--terracotta);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.faq .faq__a { padding: 0 24px 22px; font-size: 16px; line-height: 26px; }
.faq .faq__a p + p { margin-top: 10px; }

.areas-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.areas-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-s);
  background: var(--oat); color: var(--olive); text-decoration: none; font-size: 14px; font-weight: 700;
}
.areas-list a:hover { background: var(--olive); color: var(--cream); }
.loc-sources { max-width: 820px; margin: 48px auto 0; }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .help-grid { grid-template-columns: minmax(0, 1fr); }
  .faq summary { font-size: 19px; padding: 18px 48px 18px 18px; }
  .faq .faq__a { padding: 0 18px 18px; }
}
.facts-head { margin-bottom: 24px; }
.pt-0 { padding-top: 0; }
.mt-64 { margin-top: 64px; }

/* Services & About ----------------------------------------------------------- */
.svc-hero .wrap { padding-top: 88px; padding-bottom: 150px; gap: 20px; }
.svc-jump { margin-top: 12px; }
.svc-jump a { background: var(--cream); }
.svc { scroll-margin-top: 24px; }
.svc .split__media { min-height: 640px; }
.svc__sub {
  margin-top: 8px; font-family: var(--font-hand); font-size: 18px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--terracotta); font-weight: 400;
}
.svc .ticks { font-size: 16px; line-height: 25px; }
.svc__good { font-size: 15px; line-height: 24px; padding: 14px 18px; border-radius: var(--radius-s); background: rgba(133, 137, 81, .14); }
.svc__good strong { color: var(--olive); }
.faq--cream details { background: var(--cream); }
.areas-list--dark a { background: var(--cream); color: var(--olive); }
.areas-list--dark a:hover { background: var(--oat); color: var(--olive); }
.about-portrait { min-height: 500px; }
@media (max-width: 900px) {
  .svc .split__media { min-height: 360px; }
  .svc-hero .wrap { padding-top: 56px; padding-bottom: 120px; }
}
.about-portrait img { object-position: 50% 28%; }

/* Individual service pages ------------------------------------------------- */
.included { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.included .stack { position: sticky; top: 32px; }
.included__list { background: var(--cream); border-radius: var(--radius-m); padding: 32px; }
.areas-list--cream a { background: var(--cream); }
.areas-list--cream a:hover { background: var(--olive); color: var(--cream); }
.svc__more { margin-left: 18px; }
@media (max-width: 900px) {
  .included { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .included .stack { position: static; }
}
@media (max-width: 640px) {
  .included__list { padding: 22px 18px; }
  .svc__more { display: inline-block; margin: 14px 0 0; }
}

/* Fix: no cream strip above the call-to-action wave --------------------------- */
.wave--on-cream { background: transparent; }
.cta.bg-olive {
  margin-top: -90px;
  background: linear-gradient(to bottom, transparent 89px, var(--olive) 89px);
}

/* Services dropdown ----------------------------------------------------------- */
.site-header { position: relative; z-index: 50; }
.nav { align-items: center; }
.nav-item--sub { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--earth); cursor: pointer;
}
.sub-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.sub-toggle:hover { background: var(--oat); }
.sub-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.sub {
  position: absolute; top: calc(100% + 10px); left: -16px; z-index: 60;
  min-width: 250px; margin: 0; padding: 10px; list-style: none;
  background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius-m);
  box-shadow: 0 18px 40px rgba(64, 53, 46, .14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  text-align: left;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav .sub a {
  display: block; padding: 10px 14px; border-radius: var(--radius-s);
  font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--earth); text-decoration: none;
}
.nav .sub a:hover, .nav .sub a:focus-visible { background: var(--oat); color: var(--olive); text-decoration: none; }
.nav .sub a[aria-current="page"] { color: var(--terracotta); }
.sub__all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.nav-item--sub:hover .sub, .nav-item--sub:focus-within .sub, .nav-item--sub.is-open .sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav-item--sub:hover .sub-toggle svg, .nav-item--sub.is-open .sub-toggle svg { transform: rotate(180deg); }
@media (max-width: 900px) {
  .sub { left: 50%; transform: translate(-50%, -6px); }
  .nav-item--sub:hover .sub, .nav-item--sub:focus-within .sub, .nav-item--sub.is-open .sub { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .sub, .sub-toggle svg { transition: none; } }

/* Supporting photos beside "why" sections on service pages ------------------- */
.why-side { display: flex; flex-direction: column; gap: 32px; }
.why-figs { display: grid; gap: 14px; }
.why-figs img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); }
.why-figs--1 img { aspect-ratio: 4 / 3; border-radius: var(--radius-pill) var(--radius-pill) var(--radius-m) var(--radius-m); }
.why-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-figs--2 img { aspect-ratio: 3 / 4; }
.why-figs--2 img:first-child { border-radius: var(--radius-pill) var(--radius-pill) var(--radius-m) var(--radius-m); }
.why-figs--2 img:last-child { margin-top: 40px; }
@media (max-width: 640px) { .why-figs--2 img:last-child { margin-top: 24px; } }

/* Blog index: three equal columns ------------------------------------------- */
.blog-grid { row-gap: 56px; column-gap: 32px; }
.blog-grid .post { height: 100%; }
.blog-grid .post__more { margin-top: auto; padding-top: 4px; }
@media (max-width: 900px) and (min-width: 641px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contact page ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.contact-list { display: grid; gap: 16px; margin-top: 8px; }
.contact-list dt { font-family: var(--font-hand); color: var(--terracotta); font-size: 18px; }
.contact-list dd { margin: 2px 0 0; }
.contact-next { background: var(--oat); border-radius: var(--radius-m); padding: 24px 28px; margin-top: 8px; }
.contact-next ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.contact-form { background: var(--oat); border-radius: var(--radius-l); padding: 40px; display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; color: var(--olive); font-size: 16px; }
.field .opt { font-weight: 400; color: var(--earth); opacity: .75; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--earth); background: var(--cream);
  border: 1px solid var(--hairline); border-radius: var(--radius-s); padding: 12px 14px; width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: transparent; }
.contact-form .btn { justify-self: start; }
.form-note { opacity: .8; }

/* FAQ page ----------------------------------------------------------------- */
.faq-page { max-width: 860px; display: grid; gap: 64px; }
.faq-group { scroll-margin-top: 110px; }
.faq-group h2 { margin-bottom: 24px; }
.faq-group .faq { max-width: none; margin: 0; }
.faq-more { text-align: center; }

/* Areas page --------------------------------------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.area-block { background: var(--oat); border-radius: var(--radius-l); padding: 40px; display: grid; gap: 16px; align-content: start; }
.town-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.town-list li > * { display: inline-block; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--cream); font-size: 15px; }
.town-list a { color: var(--olive); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--sage); }
.town-list a:hover { background: var(--olive); color: var(--cream); }
.area-note { margin-top: 32px; text-align: center; }

@media (max-width: 900px) {
  .contact-grid, .area-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form, .area-block { padding: 28px 22px; }
}

.form-error { color: var(--terracotta-dark); font-weight: 600; }