/* CommonGround - Production Stylesheet with Official Brand System */

/* Lato and Playfair Display are served from this origin rather than from
   fonts.googleapis.com. Two reasons:

   1. Layout stability. The Google Fonts stylesheet is a second request that has
      to resolve and download before the font files are even discovered, so with
      font-display: swap the headings rendered in the fallback and then reflowed
      — the h1 on the home page and the survey moved everything below it up by
      about 70px, which was the site's largest remaining layout shift. Same
      origin means the two critical files can be preloaded from each page head
      and are usually there for first paint.
   2. These were the site's only third-party requests. Nothing about the visitor
      is now disclosed to another host in order to render a page.

   Both families are OFL-licensed, which permits redistribution this way.
   Playfair Display is the variable file, so 500/600/700/800 are all real
   weights; Lato is static, so only the four weights actually used are here
   (400, 400 italic, 700, and 900 for .stat-number). The latin-ext files carry
   the accented characters outside Latin-1 and are only fetched if a page uses
   one — unicode-range decides that, not the browser guessing.

   Do not add an @import for a hosted font here — it would serialise another
   request behind this stylesheet, which is the problem this replaced. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lato-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lato-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lato-400i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/lato-400i-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/lato-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/lato-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/lato-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/lato-900-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-var-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Official CommonGround Brand Palette */
  --cg-forest: #1F3B2E;
  --cg-sage: #6B7C5A;
  --cg-stone: #BDAF9A;
  --cg-wood: #8B5E34;
  --cg-charcoal: #2B2B2B;
  --cg-cream: #F2EFE6;
  --cg-terracotta: #C46A4A;

  /* Accessible variants.
     The brand terracotta and wood are correct for decorative fills, but white
     text on them falls below WCAG AA 4.5:1 at body and badge sizes. These
     darker tones stay inside the brand family and are used wherever text sits
     on the colour, or the colour is used as small text itself. */
  --cg-terracotta-strong: #AA5438;       /* white text: 5.21:1 */
  --cg-terracotta-strong-hover: #98472F; /* white text: 6.41:1 */
  --cg-wood-text: #7C532C;               /* on sand: 5.23:1, on white: 6.71:1 */

  /* Theme Mapping & Semantic Aliases */
  --color-primary: var(--cg-forest);
  --color-primary-hover: #162a1f;
  --color-primary-light: #2b4f3e;
  --color-accent: var(--cg-wood);
  --color-accent-text: var(--cg-wood-text);
  --color-accent-light: var(--cg-stone);
  --color-terracotta: var(--cg-terracotta);
  --color-sage: var(--cg-sage);
  --color-wood: var(--cg-wood);

  --color-bg-light: var(--cg-cream);
  --color-bg-sand: #E8E3D5;
  --color-bg-stone: var(--cg-stone);
  --color-bg-dark: var(--cg-forest);
  --color-bg-card: #FFFFFF;

  --color-text-main: var(--cg-charcoal);
  --color-text-muted: #525753;
  --color-text-light: var(--cg-cream);
  --color-border: var(--cg-stone);
  --color-border-dark: #375345;

  /* Status Stage Colors */
  --status-vision: #4A5568;
  --status-proposed: #2B6CB0;
  --status-assessment: #D69E2E;
  --status-development: var(--cg-terracotta-strong);
  --status-validation: var(--cg-sage);
  --status-confirmed: var(--cg-forest);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, "Times New Roman", serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-xxl: 4rem;

  --container-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(31, 59, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(31, 59, 46, 0.12);
  --shadow-lg: 0 10px 25px rgba(31, 59, 46, 0.16);

  --transition: all 0.2s ease-in-out;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  background-color: var(--color-bg-light);
  color: var(--color-text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

[id] {
  /* Clears the sticky header at every viewport with room to spare, so an
     anchored heading is never left tucked underneath it. */
  scroll-margin-top: 104px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* Accessibility Focus States */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--color-primary);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

.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;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.875rem; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: 0.75rem; }
h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }

p {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
}

p.lead, .page-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text-main);
  max-width: 48ch;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition);
}

a:hover {
  color: var(--color-primary-light);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-text);
  margin-bottom: 0.5rem;
}

.eyebrow.light {
  color: var(--color-accent-light);
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.section {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

.section-sand {
  background-color: var(--color-bg-sand);
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark p {
  color: var(--color-text-light);
}

/* The eyebrow's wood tone is tuned for light backgrounds; on forest it drops to
   1.82:1. Stone keeps the same role in the palette and clears AA at 5.7:1. */
.section-dark .eyebrow {
  color: var(--color-accent-light);
}

.section-dark p {
  opacity: 0.9;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--spacing-xl);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: start;
}

@media (max-width: 868px) {
  .split-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

/* Header & Navigation */
.site-header {
  background-color: var(--cg-forest);
  border-bottom: 1px solid var(--color-border-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.875rem 0;
  box-shadow: var(--shadow-md);
  color: var(--cg-cream);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* 44px so the wordmark is a comfortable target on a phone; the logo mark is
     only 36px on its own. */
  min-height: 44px;
  text-decoration: none;
  font-size: 1.25rem;
  color: var(--cg-cream);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-family: var(--font-heading);
}

.brand strong {
  font-weight: 700;
  color: #ffffff;
}

.brand img {
  display: block;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  text-decoration: none;
  color: rgba(242, 239, 230, 0.88);
  font-weight: 500;
  font-size: 0.9375rem;
  /* The row of nav links is the site's most-used control: give each one a full
     44px of height rather than the 36px the text alone occupies. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0;
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
  color: #ffffff;
}

/* The header is one crowded row, and the body font arrives after first paint
   (font-display: swap). With the fallback metrics the nav CTA wrapped to two
   lines, so the header was 89px tall until Lato loaded and then snapped to
   73px — moving every page's content up 16px and producing the site's largest
   layout shift. Nothing in the header row may wrap. */
.nav-link,
.primary-nav .button {
  white-space: nowrap;
}

/* Above the menu-button breakpoint the whole row has to fit inside the 1200px
   container on the page with the longest nav (/partners/), which it does not at
   the base gap and type size. */
@media (min-width: 1200px) {
  .primary-nav {
    gap: 1rem;
  }

  .nav-link {
    font-size: 0.875rem;
  }

  .primary-nav .button-small {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }
}

.nav-link.active::after {
  content: "";
  position: absolute;
  /* Flush with the bottom of the (now 44px) link box, which keeps the same
     visual gap under the label as the old -4px on a 36px box. */
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--cg-terracotta);
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-sm);
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--cg-cream);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* The desktop nav is eight links plus a call to action: measured at 1014px, it
   does not fit a 1024px tablet in landscape, where it used to wrap to a second
   row and change the header height after the web font loaded. Everything below
   1200px therefore uses the menu button. */
@media (max-width: 1199px) {
  .menu-toggle {
    display: flex;
  }

  .primary-nav {
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cg-forest);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--spacing-lg);
    gap: 1.25rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    /* visibility is discrete, so transitioning it flips it halfway through the
       animation. Opening is instant — otherwise the newly opened menu is not
       focusable yet and the first Tab escapes it — and only the close is
       delayed, so the panel is still seen sliding away. */
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
    overflow-y: auto;
  }

  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0s linear 0s;
  }

  .primary-nav .nav-link {
    font-size: 1.125rem;
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-dark);
    color: var(--cg-cream);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Buttons & CTAs */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cg-wood);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--cg-wood);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1.2;
  text-align: center;
}

.button:hover {
  background-color: #734c28;
  border-color: #734c28;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.button-terracotta {
  background-color: var(--cg-terracotta-strong);
  border-color: var(--cg-terracotta-strong);
  color: #ffffff !important;
}

.button-terracotta:hover {
  background-color: var(--cg-terracotta-strong-hover);
  border-color: var(--cg-terracotta-strong-hover);
  color: #ffffff !important;
}

.button-small {
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  /* Smaller type, but still a real target: 0.5rem padding alone left these at
     37px. */
  min-height: 44px;
}

.button-ghost {
  background-color: transparent;
  color: var(--cg-forest) !important;
  border: 2px solid var(--cg-forest);
}

.button-ghost:hover {
  background-color: var(--color-primary);
  color: #ffffff !important;
}

.button-light {
  background-color: #ffffff;
  color: var(--color-primary) !important;
  border-color: #ffffff;
}

.button-light:hover {
  background-color: var(--color-bg-sand);
  border-color: var(--color-bg-sand);
}

.button:disabled, .button.is-loading {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Status Badges */
.status-badge, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border-radius: 50px;
  color: #ffffff;
}

.status-badge::before, .status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-badge.vision, .status-pill.vision { background-color: var(--status-vision); }
.status-badge.proposed, .status-pill.proposed { background-color: var(--status-proposed); }
.status-badge.assessment, .status-pill.assessment { background-color: var(--status-assessment); color: #1a1a1a; }
.status-badge.development, .status-pill.development { background-color: var(--status-development); }
.status-badge.validation, .status-pill.validation { background-color: var(--status-validation); }
.status-badge.confirmed, .status-pill.confirmed { background-color: var(--status-confirmed); }
.status-badge.coming-soon, .status-pill.coming-soon { background-color: var(--cg-wood-text); color: #ffffff; }

/* Button Color Variants */
.button-wood {
  background-color: var(--cg-wood-text);
  color: #ffffff;
  border: 1px solid var(--cg-wood);
}
.button-wood:hover, .button-wood:focus {
  background-color: #613e20;
  color: #ffffff;
}

.button-sage {
  background-color: var(--cg-sage);
  color: #ffffff;
  border: 1px solid var(--cg-sage);
}
.button-sage:hover, .button-sage:focus {
  background-color: #556749;
  color: #ffffff;
}

.button-forest {
  background-color: var(--cg-forest);
  color: #ffffff;
  border: 1px solid var(--cg-forest);
}
.button-forest:hover, .button-forest:focus {
  background-color: #142a20;
  color: #ffffff;
}

/* ==========================================================================
   Explore CommonGround Page & Destination Showcase Styles
   ========================================================================== */

/* Category Filter Bar */
.filter-bar-container {
  margin-bottom: 2.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-width: max-content;
}

.filter-btn {
  background: var(--color-bg-card);
  color: var(--cg-forest);
  border: 1px solid var(--cg-stone);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-btn:hover, .filter-btn:focus-visible {
  border-color: var(--cg-forest);
  background: var(--cg-cream);
  color: var(--cg-forest);
}

.filter-btn.active {
  background: var(--cg-forest);
  color: #ffffff;
  border-color: var(--cg-forest);
  box-shadow: var(--shadow-sm);
}

.filter-btn .count-badge {
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-weight: 700;
}

.filter-btn.active .count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Destination Cards Grid */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
}

@media (max-width: 576px) {
  .destination-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.destination-card {
  background: var(--color-bg-card);
  border: 1px solid #E2DACD;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(31, 59, 46, 0.06);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
  position: relative;
}

.destination-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(31, 59, 46, 0.14);
  border-color: var(--cg-wood);
}

.destination-card.is-hidden {
  display: none !important;
}

/* Card Visual Image Header */
.destination-card-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background-color: var(--cg-cream);
}

.destination-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.destination-card:hover .destination-card-visual img {
  transform: scale(1.06);
}

.destination-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 33, 28, 0.1) 0%, rgba(18, 33, 28, 0.55) 100%);
  pointer-events: none;
}

.destination-card-top-badges {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  right: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.destination-card-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cg-forest);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.destination-card-icon-badge svg {
  width: 20px;
  height: 20px;
}

/* Card Content Body */
.destination-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.destination-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cg-wood-text);
}

.destination-card-title {
  font-size: 1.375rem;
  color: var(--cg-forest);
  margin-bottom: 0.625rem;
  line-height: 1.3;
}

.destination-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}

.destination-card-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.destination-card-highlights li {
  font-size: 0.78125rem;
  background: var(--cg-cream);
  color: var(--cg-forest);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  border: 1px solid #E2DACD;
  font-weight: 600;
}

.destination-card-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #F0EAE1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.destination-card-footer .button {
  width: 100%;
  justify-content: center;
}

/* Interactive Master Site Map Section */
.master-map-wrapper {
  background: #F8F5EE;
  border: 2px solid #DCD4C8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: 1.5rem;
  position: relative;
}

.master-map-header {
  background: var(--cg-forest);
  color: #ffffff;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.master-map-header h3 {
  color: #ffffff;
  margin: 0;
  font-size: 1.25rem;
}

.master-map-header p {
  color: var(--cg-stone);
  margin: 0;
  font-size: 0.875rem;
}

.master-map-svg-container {
  position: relative;
  width: 100%;
  background: #F2EFE6;
  padding: 1rem;
}

.map-hotspot {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.map-hotspot:hover, .map-hotspot:focus-visible {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

.map-hotspot circle {
  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}

.map-hotspot.is-active circle {
  stroke: var(--cg-terracotta);
  stroke-width: 3px;
  fill: #ffffff;
}

.map-tooltip {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid var(--cg-wood);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  max-width: 420px;
  width: calc(100% - 2rem);
  z-index: 10;
  display: flex;
  gap: 1rem;
  align-items: center;
  animation: mapTooltipFade 0.25s ease-out;
}

@keyframes mapTooltipFade {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.map-tooltip-content {
  flex: 1;
}

.map-tooltip-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--cg-forest);
  margin-bottom: 0.25rem;
}

.map-tooltip-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.map-disclaimer-banner {
  background: #E8E2D5;
  border-top: 1px solid #D0C6B8;
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--cg-forest);
  text-align: center;
  font-weight: 500;
}

/* Seasonal Cards Section */
.seasons-section {
  background-color: var(--color-bg-sand);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.season-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.season-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid #DCD4C8;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.season-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.season-card-banner {
  padding: 1.25rem 1.5rem;
  color: #ffffff;
  position: relative;
}

.season-card.spring .season-card-banner {
  background: linear-gradient(135deg, #2D5A3A 0%, #4A7A54 100%);
}

.season-card.summer .season-card-banner {
  background: linear-gradient(135deg, #A8522A 0%, #D47A41 100%);
}

.season-card.fall .season-card-banner {
  background: linear-gradient(135deg, #7C4523 0%, #B26435 100%);
}

.season-card.winter .season-card-banner {
  background: linear-gradient(135deg, #214354 0%, #3A697E 100%);
}

.season-card-title {
  color: #ffffff;
  font-size: 1.5rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.season-card-months {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  margin-top: 0.25rem;
}

.season-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.season-experience-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
}

.season-experience-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: 0.9rem;
  color: var(--color-text-main);
  line-height: 1.4;
}

.season-experience-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cg-sage);
  font-weight: 800;
}

.season-quote {
  margin-top: auto;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--cg-forest);
  background: var(--cg-cream);
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--cg-wood);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Large CTA Section */
.explore-cta-section {
  background: var(--cg-forest);
  color: var(--cg-cream);
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.explore-cta-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.explore-cta-box h2 {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.explore-cta-box p {
  color: var(--cg-stone);
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto 2.25rem auto;
  line-height: 1.6;
}

.explore-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.explore-cta-buttons .button {
  min-width: 210px;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

/* Hero Section */
.page-hero {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-bg-sand);
  border-bottom: 1px solid var(--color-border);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--spacing-xl);
  align-items: center;
}

@media (max-width: 868px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Once the hero stacks, 64px of padding plus a 40px gap pushes the supporting
     visual a long way down. Tightening both keeps the headline, lead and first
     call to action on the first screen of a 360x800 phone. */
  .page-hero {
    padding: 2.5rem 0;
  }

  .page-hero-grid {
    gap: 1.75rem;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Cards & Pathways */
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pathway-card {
  border-top: 4px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pathway-card .card-header {
  margin-bottom: 1rem;
}

.pathway-card .card-body {
  flex: 1;
  margin-bottom: 1.5rem;
}

.pathway-card ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.pathway-card li {
  margin-bottom: 0.375rem;
}

.pathway-status-box {
  background-color: var(--color-bg-sand);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* Forms */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group.full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-main);
  margin-bottom: 0.375rem;
}

/* The asterisk that marks a required field. It also appears inside a <legend>
   on the property-fit assessment, where each radio group is a fieldset. */
label span.required,
legend span.required {
  color: #c53030;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  color: var(--color-text-main);
  transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(23, 59, 49, 0.15);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 0.125rem;
}

/* Every checkbox and radio on the site, not only those in a .checkbox-label:
   the browser default is a 13px box, which is a poor target on a phone. The
   clickable label around it is the effective target, but the control itself
   should still be easy to hit and easy to see when checked. */
input[type="checkbox"],
input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

/* Keeps a checkbox row a comfortable target even when the label text is short.
   Alignment is left to each label so multi-line consent text still lines its
   control up with the first line. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  min-height: 2.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-status-alert {
  padding: 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-weight: 500;
  display: none;
}

.form-status-alert.error {
  display: block;
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
  color: #c53030;
}

.form-status-alert.success {
  display: block;
  background-color: #f0fff4;
  border: 1px solid #9ae6b4;
  color: #276749;
}

/* CommonGround One Visuals */
.one-hero-screen {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 1rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.one-hero-screen img, .one-hero-screen svg {
  width: 100%;
  height: auto;
  display: block;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.module-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  position: relative;
}

.module-card span {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-text);
  display: block;
  margin-bottom: 0.5rem;
}

.workflow-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.workflow-step {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-dark);
  padding: 1.25rem;
  border-radius: var(--radius-md);
}

.workflow-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-accent);
  color: #12211c;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 0.75rem;
}

/* Timeline & Status Table */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-border);
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.05rem;
  top: 0.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.status-table th, .status-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.status-table th {
  background-color: var(--color-bg-sand);
  font-weight: 700;
  color: var(--color-primary);
}

/* Footer */
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xl);
  border-top: 1px solid var(--color-border-dark);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xxl);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

.footer-brand {
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.footer-statement {
  color: var(--color-accent-light);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

.footer-heading {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: block;
  /* Padding rather than margin, so the growth is inside the target: a 24px
     line box in a column of links is easy to mis-tap on a phone. */
  padding: 0.375rem 0;
  margin-bottom: 0.125rem;
  font-size: 0.9375rem;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* The global `p` colour is a dark grey for light backgrounds. Inside the forest
   footer that lands at 1.65:1, so any paragraph without its own class — a
   copyright line, a tagline — is given the footer's own light tone.
   :not([class]) keeps .footer-statement and .footer-note in charge of theirs. */
.site-footer p:not([class]) {
  color: rgba(255, 255, 255, 0.75);
}

.footer-note {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  margin-top: 1rem;
}

.footer-bottom {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
}

/* Land Partnership System */
.land-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(194, 142, 70, 0.18), transparent 28rem),
    linear-gradient(135deg, #f5f1e9 0%, #ebe5da 100%);
}

.land-status-panel {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.land-status-panel::after {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  right: -5rem;
  bottom: -6rem;
  border: 1px solid rgba(232, 208, 169, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(232, 208, 169, 0.04), 0 0 0 5rem rgba(232, 208, 169, 0.03);
}

.land-status-panel h2,
.land-status-panel p {
  color: var(--color-text-light);
  position: relative;
  z-index: 1;
}

.land-status-panel p:last-child {
  opacity: 0.78;
  margin-bottom: 0;
}

.partnership-intro {
  max-width: 780px;
  margin-bottom: 2.5rem;
}

.land-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.land-value-grid article {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--color-border);
}

.land-value-grid article:last-child {
  border-right: 0;
}

.land-value-grid article > span,
.form-section-heading > span {
  color: var(--color-accent-text);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

.land-value-grid h3 {
  font-size: 1.25rem;
  margin-top: 1rem;
}

.land-value-grid p {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.partnership-thesis .split-layout {
  align-items: center;
}

.structure-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.structure-card {
  grid-column: span 4;
  min-height: 13rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
}

.structure-card:nth-child(5),
.structure-card:nth-child(6),
.structure-card:nth-child(7) {
  grid-column: span 4;
}

.structure-card h3 {
  font-size: 1.2rem;
}

.structure-card p {
  margin-bottom: 0;
  font-size: 0.9375rem;
}

.property-characteristics .centered-actions {
  text-align: center;
  margin-top: 2.5rem;
}

.partnership-process {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: 2.5rem;
}

.partnership-process-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  background: var(--color-bg-light);
  padding: 1.5rem;
}

.partnership-process-step > span {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--color-primary);
}

.partnership-process-step h3 {
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

.partnership-process-step p {
  margin-bottom: 0;
  font-size: 0.9375rem;
}

.non-binding-notice,
.status-statement {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-accent);
  background: #fff;
}

.non-binding-notice span {
  color: var(--color-text-muted);
}

.faq-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--spacing-xxl);
  align-items: start;
}

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1.25rem 2.25rem 1.25rem 0;
  position: relative;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 1.05rem;
  color: var(--color-accent-text);
  font-size: 1.5rem;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  padding: 0 2rem 1.25rem 0;
}

.button-on-dark {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.7);
}

.compact-hero {
  padding: 3.5rem 0;
}

.narrow-container {
  max-width: 880px;
}

.compact-hero .page-lead {
  max-width: 65ch;
}

.assessment-layout {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.assessment-sidebar {
  position: sticky;
  top: 7rem;
}

.assessment-sidebar h2 {
  font-size: 1.65rem;
}

.check-list {
  list-style: none;
  margin: 1.5rem 0;
}

.check-list li {
  border-top: 1px solid var(--color-border);
  padding: 0.65rem 0 0.65rem 1.5rem;
  position: relative;
  color: var(--color-text-muted);
}

.check-list li::before {
  content: "✓";
  color: var(--color-accent-text);
  position: absolute;
  left: 0;
  font-weight: 700;
}

.text-link {
  font-weight: 700;
  /* Used on its own as a navigational action rather than inside a sentence, so
     it needs to be a target in its own right: the text alone is 19px tall. */
  display: inline-block;
  padding: 0.375rem 0;
}

.assessment-fields {
  display: grid;
  gap: 1rem;
}

.assessment-question {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
}

fieldset.assessment-question {
  min-width: 0;
}

.assessment-question > label,
.assessment-question > legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
  margin-bottom: 0.75rem;
}

/* The first child span of an assessment label is the numbered circle. The
   :not(.required) guard is what keeps the required asterisk — also a direct
   child span — from being drawn as a second badge. */
.assessment-question > label > span:not(.required),
.assessment-question > legend > span:not(.required) {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg-sand);
  color: var(--color-accent-text);
  font-size: 0.75rem;
}

.field-help {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: -0.25rem 0 0.75rem;
}

.assessment-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.assessment-options label {
  margin: 0;
  height: 100%;
  cursor: pointer;
}

.assessment-options input {
  position: absolute;
  opacity: 0;
}

.assessment-options label span {
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: var(--transition);
}

.assessment-options input:checked + span {
  border-color: var(--color-primary);
  background: #edf3f0;
  color: var(--color-primary);
  box-shadow: inset 3px 0 var(--color-accent);
}

.assessment-options input:focus-visible + span {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.assessment-submit {
  margin-top: 1.5rem;
  background: var(--color-primary);
  padding: 1.75rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.assessment-submit p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  margin: 0;
  max-width: 54ch;
}

.assessment-submit .button {
  flex: 0 0 auto;
  background: #fff;
  border-color: #fff;
  color: var(--color-primary) !important;
}

.assessment-result {
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--status-assessment);
  background: #fff;
}

.assessment-result.strong { border-top-color: var(--status-confirmed); }
.assessment-result.potential { border-top-color: var(--status-assessment); }
.assessment-result.unknowns { border-top-color: var(--status-development); }

.assessment-disclaimer {
  padding: 1rem;
  background: var(--color-bg-sand);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.form-page-layout {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form-guidance {
  position: sticky;
  top: 7rem;
}

.form-guidance h2 {
  font-size: 1.65rem;
}

.guidance-card {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.guidance-card h3,
.guidance-card li {
  color: #fff;
}

.guidance-card h3 {
  font-size: 1.1rem;
}

.guidance-card ol {
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.guidance-card li {
  margin-bottom: 0.45rem;
  opacity: 0.86;
}

.small-note {
  font-size: 0.8125rem;
}

.land-form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 3rem);
  box-shadow: var(--shadow-md);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-section-heading {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.form-section-heading:first-of-type {
  margin-top: 0;
}

.form-section-heading h2 {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}

.form-section-heading p {
  font-size: 0.875rem;
  margin: 0;
}

.optional {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.consent-panel {
  background: var(--color-bg-sand);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
}

.form-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.form-submit-row p {
  font-size: 0.8125rem;
  max-width: 52ch;
  margin: 0;
}

.form-submit-row .button {
  flex: 0 0 auto;
}

.confirmation-main {
  background: var(--color-bg-sand);
  display: grid;
  align-items: center;
}

.confirmation-card {
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 7vw, 5rem);
  box-shadow: var(--shadow-lg);
}

.confirmation-mark {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.confirmation-next {
  border-left: 3px solid var(--color-accent);
  padding-left: 1.25rem;
  margin-top: 2rem;
}

.confirmation-next h2 {
  font-size: 1.25rem;
}

@media (max-width: 900px) {
  .land-value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .land-value-grid article:nth-child(2) {
    border-right: 0;
  }

  .land-value-grid article:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }

  .structure-card {
    grid-column: span 6 !important;
  }

  .assessment-layout,
  .form-page-layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .assessment-sidebar,
  .form-guidance {
    position: static;
  }
}

@media (max-width: 640px) {
  .land-value-grid,
  .partnership-process,
  .assessment-options {
    grid-template-columns: 1fr;
  }

  .land-value-grid article,
  .land-value-grid article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .land-value-grid article:last-child {
    border-bottom: 0;
  }

  .structure-card {
    grid-column: 1 / -1 !important;
    min-height: 0;
  }

  .partnership-process-step {
    grid-template-columns: 2.5rem 1fr;
    padding: 1.25rem;
  }

  .assessment-submit,
  .form-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-submit .button,
  .form-submit-row .button {
    width: 100%;
  }

  .land-form-card {
    border-radius: var(--radius-md);
  }
}

/* Visual Storytelling & Common Good Styles */
.visual-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.visual-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.visual-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-sand);
  overflow: hidden;
}

.visual-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visual-caption {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.visual-caption strong {
  color: var(--color-primary);
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

/* Expandable Lightbox Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.gallery-item {
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
  background: #ffffff;
  transition: var(--transition);
}

.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.gallery-item-image {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.gallery-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item-expand-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(18, 33, 28, 0.85);
  /* Cream rather than stone: the badge sits over arbitrary artwork, and cream
     still clears 4.5:1 against the badge even over a pure-white image. */
  color: var(--cg-cream);
  padding: 0.5rem 0.85rem;
  /* This is the only way into the lightbox on a phone, so it gets a full-size
     target instead of the 26px the small caps text occupied. */
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  backdrop-filter: blur(4px);
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(18, 33, 28, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  /* visibility is a discrete property: transitioning it would flip it halfway
     through, which delays the dialog becoming focusable by ~125ms and silently
     drops the focus() call that moves a keyboard user into it. Opening is
     therefore instant, and only the close is delayed so the fade-out is seen. */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox-modal.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.lightbox-content {
  background: #ffffff;
  max-width: 900px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.lightbox-image-wrapper {
  background: #12211c;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 65vh;
}

.lightbox-image-wrapper img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
}

.lightbox-details {
  padding: 1.5rem;
  overflow-y: auto;
}

.lightbox-details h2, .lightbox-details h3 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 10;
  display: grid;
  place-items: center;
  /* Deliberately not `all`: this button inherits its visibility from the dialog,
     and transitioning `all` would transition that inherited change too —
     leaving the button unfocusable for 100ms after the dialog opens, which is
     long enough to silently drop the focus() that moves a keyboard user in. */
  transition: background-color 0.2s ease-in-out;
}

.lightbox-close:hover {
  background: var(--color-accent);
}

/* Stat & Food Security Cards */
.stat-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.stat-source-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-sand);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

.resource-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-card h3 {
  margin-bottom: 0.25rem;
  font-size: 1.2rem;
}

.resource-card p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.guardrail-notice {
  background: var(--color-bg-sand);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  color: var(--color-text-main);
}

.guardrail-notice strong {
  color: var(--color-primary);
}

/* ==========================================================================
   CommonGround Official Brand Design System Components
   ========================================================================== */

.brand-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem auto;
}

.brand-section-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--cg-forest);
  margin-bottom: 0.75rem;
}

/* 1. Color Palette Grid */
.cg-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.swatch-card {
  background: #ffffff;
  border: 1px solid var(--cg-stone);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.swatch-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--cg-sage);
}

.swatch-chip {
  height: 120px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 1rem;
}

.swatch-hex-badge {
  font-family: monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

.swatch-chip.light-text .swatch-hex-badge {
  background: rgba(255, 255, 255, 0.75);
  color: var(--cg-charcoal);
}

.swatch-info {
  padding: 1.25rem;
}

.swatch-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cg-forest);
  margin-bottom: 0.25rem;
}

.swatch-usage {
  font-size: 0.875rem;
  color: var(--cg-charcoal);
  opacity: 0.85;
  line-height: 1.45;
}

/* Swatch Colors */
.bg-cg-forest { background-color: #1F3B2E; }
.bg-cg-sage { background-color: #6B7C5A; }
.bg-cg-stone { background-color: #BDAF9A; }
.bg-cg-wood { background-color: #8B5E34; }
.bg-cg-charcoal { background-color: #2B2B2B; }
.bg-cg-cream { background-color: #F2EFE6; }
.bg-cg-terracotta { background-color: #C46A4A; }

/* 2. Typography Specimen Cards */
.type-specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.type-card {
  background: #ffffff;
  border: 1px solid var(--cg-stone);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.type-role-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.625rem;
  border-radius: 50px;
  background-color: var(--cg-cream);
  color: var(--cg-wood);
  border: 1px solid var(--cg-stone);
  margin-bottom: 1rem;
}

.type-font-title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.type-font-title.serif {
  font-family: var(--font-heading);
  color: var(--cg-forest);
}

.type-font-title.sans {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--cg-charcoal);
}

.type-alphabet {
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 1rem 0;
  color: var(--cg-charcoal);
  opacity: 0.9;
}

.type-font-title.serif + .type-alphabet {
  font-family: var(--font-heading);
}

.type-font-title.sans + .type-alphabet {
  font-family: var(--font-body);
}

/* 3. Brand Personality Badges */
.personality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.personality-card {
  background: #ffffff;
  border: 1px solid var(--cg-stone);
  border-top: 4px solid var(--cg-sage);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.personality-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--cg-forest);
  margin-bottom: 0.5rem;
}

.personality-card p {
  font-size: 0.9375rem;
  margin-bottom: 0;
  color: var(--cg-charcoal);
}

/* 4. Purpose & Values Section */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.value-box {
  background: #ffffff;
  border: 1px solid var(--cg-stone);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  position: relative;
}

.value-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cg-wood);
  line-height: 1;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

.value-box h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--cg-forest);
  margin-bottom: 0.5rem;
}

/* 5. Materials & Design Philosophy */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.material-card {
  background: #ffffff;
  border: 1px solid var(--cg-stone);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.material-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--cg-forest);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 6. Brand Visual Cards with WEBP optimization & Lightbox support */
.brand-visual-card {
  background: #ffffff;
  border: 1px solid var(--cg-stone);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.brand-visual-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.brand-visual-card .card-caption {
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border-top: 1px solid var(--cg-stone);
}

.brand-visual-card .card-caption h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--cg-forest);
  margin-bottom: 0.25rem;
}

.brand-visual-card .card-caption p {
  font-size: 0.875rem;
  margin-bottom: 0;
  color: var(--cg-charcoal);
}

/* Master Brand Board Callout */
.master-board-callout {
  background: var(--cg-forest);
  color: var(--cg-cream);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: var(--shadow-lg);
  margin-top: 3rem;
}

.master-board-callout h3, .master-board-callout h2 {
  color: #ffffff;
  font-family: var(--font-heading);
}

.master-board-callout p {
  color: var(--cg-cream);
  opacity: 0.92;
}

/* Scroll lock while a full-screen panel — the mobile nav or the lightbox — is
   open, so the page behind it does not move under the user's finger. */
body.nav-open {
  overflow: hidden;
}

/* Validation message for checkbox groups that require at least one choice.
   `required` on the individual boxes would demand all of them. */
.group-error {
  color: #c53030;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.group-error[hidden] {
  display: none;
}

/* These fieldsets carry an inline `border: 0`, so the invalid state has to
   override it explicitly. */
[data-require-one][aria-invalid="true"] {
  border-left: 3px solid #c53030 !important;
  padding-left: 0.75rem !important;
}

/* Inline guidance shown beneath a field. */
.field-hint {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: 0.375rem;
}

/* Images that open in the lightbox are keyboard-operable buttons. */
[data-expandable] {
  cursor: zoom-in;
  position: relative;
}

.expand-trigger {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  z-index: 2;
}

/* Used when a card has no existing "Expand" badge to convert. */
.expand-trigger-corner {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: auto;
}

/* --------------------------------------------------------------------------
   Brand messaging framework (/our-story/, /messaging-guide/)

   Both pages are long-form reading rather than dense interface, so everything
   here is typographic: one anchor list, one pull-quote, one commitment block
   and two paired lists. Nothing new is introduced that an existing class
   already covers — cards, grids and status badges are reused as-is.
   -------------------------------------------------------------------------- */

/* The header is sticky at 65px, so any section linked from the jump list needs
   room above it or its heading lands underneath the nav. */
.jump-target {
  scroll-margin-top: 5.5rem;
}

/* Anchor list under a page hero. Links, not buttons: they move within the page
   rather than commit the reader to anything. */
.page-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.page-jump-nav a {
  display: inline-block;
  min-height: 44px;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-jump-nav a:hover,
.page-jump-nav a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* The one sentence a section is built around. Set in the heading serif at
   sub-heading size so it reads as the brand speaking, not as body copy. */
.promise-statement {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-primary);
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--color-accent);
}

.section-dark .promise-statement {
  color: #ffffff;
  border-left-color: var(--cg-stone);
}

.promise-statement:last-child {
  margin-bottom: 0;
}

/* One commitment (local business, families, agriculture, nature, community). */
.commitment-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%;
}

.commitment-card h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.commitment-card .promise-statement {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  margin-bottom: 1.25rem;
}

.commitment-card .check-list {
  margin-bottom: 1.25rem;
}

.commitment-card > :last-child {
  margin-bottom: 0;
}

/* Paired guidance: what the voice does on the left, what it avoids on the
   right. The border colour carries the meaning, so each column also states it
   in the heading for anyone who cannot see the colour. */
.voice-pair {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.voice-pair.use {
  border-top: 4px solid var(--cg-sage);
}

.voice-pair.avoid {
  border-top: 4px solid var(--cg-terracotta-strong);
}

.voice-pair h3 {
  margin-bottom: 1rem;
}

/* A bank of words or phrases. Reads as a reference list, not a sentence. */
.word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
}

.word-bank li {
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

.word-bank.avoid li {
  background: #ffffff;
  border-style: dashed;
  color: var(--color-text-muted);
}

/* .check-list li sets its own colour, so a list placed on a forest-green
   section would otherwise render muted charcoal on dark. */
.section-dark .check-list li {
  color: var(--cg-cream);
  border-top-color: var(--color-border-dark);
}

.section-dark .check-list li::before {
  color: var(--cg-stone);
}

/* A line rewritten into the house voice. */
.rewrite-example {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.rewrite-example > div {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-border);
  background: var(--color-bg-light);
}

.rewrite-example .after {
  border-left-color: var(--cg-sage);
  background: #ffffff;
}

.rewrite-example span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

.rewrite-example p {
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .rewrite-example {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Living master vision */
.vision-map-section {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 12% 20%, rgba(153, 172, 139, 0.18), transparent 32%),
    linear-gradient(180deg, #f4f0e6 0%, #e8e3d5 100%);
}

.vision-map-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: 2rem;
}

.vision-map-intro h2 { max-width: 15ch; margin-bottom: 0; }
.vision-map-intro > p { max-width: 58ch; margin: 0 0 0.4rem; color: var(--color-text-muted); line-height: 1.75; }
.vision-map-crosslink { margin: 0 0 2rem; }

.vision-map-shell {
  --vision-ink: #173b31;
  --vision-moss: #6f816c;
  --vision-stone: #d8d0c2;
  --vision-cream: #f8f5ee;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(65, 83, 69, 0.26);
  border-radius: 22px;
  background: #f8f5ee;
  box-shadow: 0 28px 80px rgba(30, 53, 43, 0.18);
}

.vision-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--vision-ink);
  color: #fff;
}

.vision-map-header h3 { margin: 0.1rem 0 0; color: #fff; font-size: clamp(1.15rem, 2vw, 1.55rem); }
.vision-map-kicker { color: #ddcba4; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.vision-map-header-actions { display: flex; gap: 0.65rem; }
.vision-map-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 700 0.76rem var(--font-body);
  cursor: pointer;
}
.vision-map-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vision-map-action:first-child svg { fill: currentColor; stroke: none; }
.vision-map-action:hover { background: rgba(255, 255, 255, 0.16); }
.vision-map-action:focus-visible { outline: 3px solid #f2d58f; outline-offset: 2px; }

.vision-map-filters {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 253, 248, 0.96);
  scrollbar-width: thin;
}
.vision-map-filters button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.5rem 0.85rem;
  border: 1px solid #cfc6b8;
  border-radius: 999px;
  background: transparent;
  color: var(--vision-ink);
  font: 800 0.72rem var(--font-body);
  cursor: pointer;
}
.vision-map-filters button:hover { border-color: var(--vision-moss); background: #f0ede4; }
.vision-map-filters button.is-active { border-color: var(--vision-ink); background: var(--vision-ink); color: #fff; }
.vision-map-filters button:focus-visible { outline: 3px solid rgba(170, 84, 56, 0.3); outline-offset: 2px; }

.vision-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 0; }
.vision-map-viewport {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: #bcc5ae;
  isolation: isolate;
}
.vision-map-viewport.is-panning { cursor: grabbing; }
.vision-map-viewport:focus-visible { outline: 4px solid var(--cg-terracotta-strong); outline-offset: -4px; }
.vision-map-canvas {
  --map-counter-scale: 1;
  position: absolute;
  width: 1672px;
  height: 941px;
  transform-origin: 0 0;
  will-change: transform;
}
.vision-map-canvas.is-guided { transition: transform 1.15s cubic-bezier(0.22, 0.76, 0.22, 1); }
.vision-map-canvas picture,
.vision-map-image { display: block; width: 100%; height: 100%; }
.vision-map-image { object-fit: cover; user-select: none; -webkit-user-drag: none; filter: saturate(0.92) contrast(0.98); }
.vision-map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(237, 240, 232, 0.08), transparent 35%),
    radial-gradient(circle at 51% 48%, transparent 0 22%, rgba(23, 59, 49, 0.08) 74%, rgba(23, 59, 49, 0.16) 100%);
}
.vision-map-future-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 83% 31%, rgba(224, 230, 222, 0.72) 0 11%, rgba(224, 230, 222, 0.35) 20%, transparent 35%),
    repeating-linear-gradient(113deg, transparent 0 24px, rgba(242, 239, 230, 0.1) 25px 26px);
  mix-blend-mode: screen;
}
.vision-map-drawing { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vision-map-drawing path { fill: none; vector-effect: non-scaling-stroke; }
.vision-route-primary { stroke: rgba(245, 239, 222, 0.8); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 16; }
.vision-route-secondary { stroke: rgba(238, 226, 197, 0.68); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 13; }
.vision-future-contour { stroke: rgba(50, 83, 77, 0.52); stroke-width: 2; stroke-dasharray: 8 9; }
.vision-map-marker-layer { position: absolute; z-index: 4; inset: 0; }

.vision-map-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: max-content;
  max-width: 205px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vision-ink);
  font: 800 0.74rem var(--font-body);
  text-align: left;
  transform: translate(-50%, -50%) scale(var(--map-counter-scale));
  transform-origin: center;
  cursor: pointer;
}
.vision-marker-pin {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid rgba(255, 253, 248, 0.96);
  border-radius: 50% 50% 50% 13px;
  rotate: -45deg;
  background: var(--vision-ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(20, 43, 34, 0.34);
  transition: transform 0.2s ease, background 0.2s ease;
}
.vision-marker-pin b { rotate: 45deg; font-size: 0.65rem; letter-spacing: 0.02em; }
.vision-marker-name {
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: rgba(250, 247, 239, 0.9);
  box-shadow: 0 5px 18px rgba(20, 43, 34, 0.14);
  backdrop-filter: blur(5px);
}
.vision-map-marker.future .vision-marker-pin { border-style: dashed; background: #718176; }
.vision-map-marker.future .vision-marker-name { border-style: dashed; background: rgba(240, 242, 237, 0.82); color: #526158; }
.vision-map-marker.is-quiet .vision-marker-pin { background: #496b60; }
.vision-map-marker.is-route .vision-marker-pin { box-shadow: 0 0 0 4px rgba(176, 207, 205, 0.78), 0 8px 22px rgba(20, 43, 34, 0.3); }
.vision-map-marker:hover .vision-marker-pin,
.vision-map-marker:focus-visible .vision-marker-pin,
.vision-map-marker.is-selected .vision-marker-pin { transform: scale(1.13); background: var(--cg-terracotta-strong); }
.vision-map-marker:focus-visible { outline: none; }
.vision-map-marker:focus-visible .vision-marker-name { outline: 3px solid #fff; outline-offset: 2px; }

.vision-map-controls {
  position: absolute;
  z-index: 15;
  left: 0.9rem;
  bottom: 0.9rem;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(51, 72, 60, 0.22);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 10px 28px rgba(20, 43, 34, 0.2);
}
.vision-map-controls button {
  display: grid;
  width: 42px;
  height: 40px;
  place-items: center;
  border: 0;
  border-bottom: 1px solid #d9d2c7;
  background: transparent;
  color: var(--vision-ink);
  font: 700 1.2rem var(--font-body);
  cursor: pointer;
}
.vision-map-controls button:last-child { border-bottom: 0; }
.vision-map-controls button:hover { background: #eee9df; }
.vision-map-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.vision-map-controls button:focus-visible { outline: 3px solid var(--cg-terracotta-strong); outline-offset: -3px; }

.vision-map-loading,
.vision-map-error {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 2rem;
  background: rgba(239, 237, 227, 0.92);
  color: var(--vision-ink);
  text-align: center;
}
.vision-map-loading-line { width: min(300px, 70%); height: 9px; border-radius: 999px; background: linear-gradient(90deg, #d8d5ca, #f6f3eb, #d8d5ca); background-size: 200% 100%; animation: vision-skeleton 1.5s linear infinite; }
.vision-map-loading-line.short { width: min(210px, 50%); }
.vision-map-loading p { margin: 0.3rem 0 0; font-size: 0.82rem; }
.vision-map-error { inset: 1rem auto auto 50%; width: min(430px, calc(100% - 2rem)); transform: translateX(-50%); border: 1px solid #cbbfae; border-radius: 10px; background: rgba(255, 252, 245, 0.94); box-shadow: var(--shadow-md); font-size: 0.78rem; }
.vision-map-error span { color: var(--color-text-muted); }
@keyframes vision-skeleton { to { background-position: -200% 0; } }

.vision-landmark-rail {
  min-width: 0;
  border-left: 1px solid var(--color-border);
  background: #fbf9f4;
}
.vision-landmark-heading { padding: 1.15rem 1.15rem 0.9rem; border-bottom: 1px solid var(--color-border); }
.vision-landmark-heading h3 { margin: 0.15rem 0 0.35rem; font-size: 1.25rem; }
.vision-landmark-heading p { margin: 0; color: var(--color-text-muted); font-size: 0.75rem; }
.vision-landmark-list { max-height: min(610px, 54vw); margin: 0; padding: 0.55rem; overflow-y: auto; list-style: none; }
.vision-landmark-list li { margin: 0; }
.vision-landmark-list button,
.vision-landmark-list a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.65rem;
  border: 0;
  border-bottom: 1px solid #e0d9cd;
  background: transparent;
  color: var(--vision-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.vision-landmark-list button > span:first-child { color: #87755b; font: 800 0.67rem var(--font-body); letter-spacing: 0.08em; }
.vision-landmark-list strong { display: block; font-size: 0.82rem; line-height: 1.25; }
.vision-landmark-list small { display: block; margin-top: 0.18rem; color: var(--color-text-muted); font-size: 0.64rem; line-height: 1.35; }
.vision-landmark-list button:hover,
.vision-landmark-list button.is-selected,
.vision-landmark-list a:hover { border-radius: 8px; background: #ede8dd; }
.vision-landmark-list button:focus-visible,
.vision-landmark-list a:focus-visible { outline: 3px solid rgba(170, 84, 56, 0.3); outline-offset: -2px; }
.vision-landmark-empty { padding: 2rem 1rem; color: var(--color-text-muted); text-align: center; }

.vision-place-panel {
  position: absolute;
  z-index: 30;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(390px, calc(100% - 2rem));
  overflow-y: auto;
  border: 1px solid rgba(47, 68, 56, 0.22);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 22px 60px rgba(18, 39, 31, 0.28);
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.vision-place-panel.is-open { opacity: 1; transform: none; }
.vision-place-close {
  position: absolute;
  z-index: 3;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(24, 55, 43, 0.88);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}
.vision-place-close:focus-visible { outline: 3px solid #f2d58f; outline-offset: 2px; }
.vision-place-image { position: relative; aspect-ratio: 3 / 2; margin: 0; overflow: hidden; border-radius: 15px 15px 0 0; background: #d8d4c8; }
.vision-place-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.vision-place-image figcaption { position: absolute; left: 0.7rem; bottom: 0.7rem; padding: 0.38rem 0.55rem; border-radius: 999px; background: rgba(22, 50, 39, 0.82); color: #fff; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.vision-place-body { padding: 1.2rem 1.25rem 1.35rem; }
.vision-place-status-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.vision-place-status,
.vision-place-flag { display: inline-flex; padding: 0.34rem 0.5rem; border-radius: 999px; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.vision-place-status { background: #e7ece4; color: var(--vision-ink); }
.vision-place-status.future { border: 1px dashed #718176; background: #f0f2ed; color: #526158; }
.vision-place-flag.quiet { background: #e4ece8; color: #35594e; }
.vision-place-flag.route { background: #e2eff0; color: #315f62; }
.vision-place-body h2 { margin: 0.7rem 0 0.65rem; font-size: clamp(1.65rem, 3vw, 2.2rem); }
.vision-place-body > p { color: var(--color-text-muted); line-height: 1.65; }
.vision-place-caution { padding: 0.75rem; border-left: 3px solid #6e9999; background: #eef4f2; font-size: 0.76rem; }
.vision-place-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 1rem; }
.vision-place-actions .text-link { color: var(--vision-ink); font-size: 0.76rem; font-weight: 800; }

.vision-journey-controls {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 1rem;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 0.45rem;
  width: min(720px, calc(100% - 7rem));
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(22, 50, 39, 0.92);
  color: #fff;
  box-shadow: 0 18px 45px rgba(18, 39, 31, 0.32);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}
.vision-journey-controls > div { min-width: 0; padding: 0 0.35rem; }
.vision-journey-controls span { display: block; color: #ddcba4; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.vision-journey-controls strong { display: block; overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.vision-journey-controls button { min-height: 34px; padding: 0.42rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 800 0.66rem var(--font-body); cursor: pointer; }
.vision-journey-controls button:hover { background: rgba(255, 255, 255, 0.18); }
.vision-journey-controls button:focus-visible { outline: 3px solid #f2d58f; outline-offset: 1px; }

.vision-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--color-border);
  background: #f8f5ee;
}
.vision-map-legend { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.vision-map-legend span { display: inline-flex; align-items: center; gap: 0.38rem; color: #526158; font-size: 0.65rem; font-weight: 800; }
.vision-map-legend i { display: inline-block; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: var(--vision-ink); box-shadow: 0 0 0 1px #718176; }
.vision-map-legend i.future { border-style: dashed; background: #a9b3a9; }
.vision-map-legend i.quiet { background: #496b60; }
.vision-map-legend i.route { background: #5c8584; box-shadow: 0 0 0 3px #d7e8e7; }
.vision-map-footer p { max-width: 56ch; margin: 0; color: var(--color-text-muted); font-size: 0.67rem; line-height: 1.45; text-align: right; }

.vision-map-shell.is-fullscreen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 0;
  border-radius: 0;
}
.vision-map-shell.is-fullscreen .vision-map-layout { min-height: 0; }
.vision-map-shell.is-fullscreen .vision-map-viewport { height: 100%; aspect-ratio: auto; }
.vision-map-shell.is-fullscreen .vision-landmark-list { max-height: calc(100vh - 245px); }
.vision-map-fullscreen-open { overflow: hidden; }

@media (max-width: 980px) {
  .vision-map-layout { grid-template-columns: 1fr; }
  .vision-landmark-rail { border-top: 1px solid var(--color-border); border-left: 0; }
  .vision-landmark-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 330px; }
  .vision-map-fullscreen-button { display: none; }
}

@media (max-width: 700px) {
  .vision-map-intro { grid-template-columns: 1fr; gap: 1rem; }
  .vision-map-intro h2 { max-width: none; }
  .vision-map-shell { margin-inline: -0.6rem; border-radius: 15px; }
  .vision-map-header { align-items: flex-start; padding: 0.9rem 0.85rem 0.85rem 1rem; }
  .vision-map-action { padding-inline: 0.7rem; font-size: 0.69rem; }
  .vision-map-action svg { display: none; }
  .vision-map-filters { padding-inline: 0.65rem; }
  .vision-map-viewport { min-height: 470px; aspect-ratio: auto; }
  .vision-marker-name { display: none; }
  .vision-marker-pin { width: 44px; height: 44px; }
  .vision-landmark-heading { padding-inline: 0.9rem; }
  .vision-landmark-list { grid-template-columns: 1fr; max-height: 320px; padding: 0.4rem; }
  .vision-map-footer { align-items: flex-start; flex-direction: column; }
  .vision-map-footer p { text-align: left; }
  .vision-map-legend { gap: 0.55rem 0.8rem; }
  .vision-place-panel {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 76%;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    opacity: 1;
    transform: translateY(102%);
  }
  .vision-place-panel::before { content: ""; position: absolute; z-index: 4; top: 0.48rem; left: 50%; width: 42px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.72); transform: translateX(-50%); }
  .vision-place-panel.is-open { transform: none; }
  .vision-place-image { aspect-ratio: 16 / 8.7; }
  .vision-journey-controls {
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.65rem;
    grid-template-columns: 1fr repeat(4, auto);
    width: auto;
    transform: none;
  }
  .vision-journey-controls strong { max-width: 120px; }
  .vision-journey-controls button { padding-inline: 0.42rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vision-map-canvas.is-guided,
  .vision-place-panel,
  .vision-marker-pin { transition: none !important; }
  .vision-map-loading-line { animation: none; }
}

.data-source-status {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-cream, #fffdf8));
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.progress-data-list { padding-left: 0; list-style: none; color: var(--color-text-muted); }
.progress-data-list li { display: grid; gap: 0.35rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); }
.progress-data-list li:last-child { border-bottom: 0; }
.progress-data-list strong { color: var(--color-text); }
.progress-data-list small, .construction-layer-grid small { color: var(--color-text-muted); line-height: 1.55; }
.construction-layer-grid { margin-top: 2rem; }

/* Art-directed illustrative concept imagery */
.home-concept-hero {
  position: relative;
  min-height: clamp(640px, 56.3vw, 940px);
  padding: 0;
  display: grid;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-primary-hover);
}

.home-concept-media,
.home-concept-media picture,
.home-concept-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-concept-media { z-index: 0; }
.home-concept-media img { object-fit: cover; object-position: center center; }
.home-concept-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 39, 31, 0.88) 0%, rgba(17, 39, 31, 0.68) 35%, rgba(17, 39, 31, 0.12) 68%, rgba(17, 39, 31, 0.08) 100%),
    linear-gradient(0deg, rgba(17, 39, 31, 0.56) 0%, transparent 32%);
}

.home-concept-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  align-items: center;
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

.home-concept-copy {
  width: min(650px, 54%);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  background: rgba(21, 47, 37, 0.76);
  box-shadow: 0 24px 70px rgba(14, 31, 25, 0.28);
  backdrop-filter: blur(8px);
}

.home-concept-copy h1,
.home-concept-copy .page-lead { color: #fffdf7; }
.home-concept-copy .page-lead { max-width: 58ch; }
.home-concept-copy .eyebrow { color: #e6cf9e; }
.home-concept-copy .button-ghost { border-color: rgba(255, 255, 255, 0.72); color: #fff; background: rgba(255, 255, 255, 0.08); }
.home-concept-copy .button-ghost:hover { background: #fffdf7; color: var(--color-primary); }
.home-concept-caption {
  position: absolute;
  right: 1.5rem;
  bottom: 1.25rem;
  max-width: 48ch;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(17, 39, 31, 0.78);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  line-height: 1.5;
}
.home-concept-caption strong { color: #fff; }

.concept-visual .visual-card-image { aspect-ratio: 3 / 2; }
.concept-image-label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(24, 55, 43, 0.82);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.concept-visual-caption {
  margin: 0;
  padding: 0.8rem 1rem 0.95rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.status-concept-section { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.status-concept-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.status-concept-strip picture { min-height: 340px; }
.status-concept-strip img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.status-concept-strip figcaption { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); color: rgba(255, 255, 255, 0.86); }
.status-concept-strip h2 { color: #fff; font-size: clamp(1.65rem, 3vw, 2.5rem); }
.status-concept-strip .eyebrow { color: #e6cf9e; }

@media (max-width: 868px) {
  .home-concept-hero { min-height: 760px; }
  .home-concept-media img { object-position: 58% center; }
  .home-concept-hero::after { background: linear-gradient(0deg, rgba(17, 39, 31, 0.92) 0%, rgba(17, 39, 31, 0.62) 68%, rgba(17, 39, 31, 0.18) 100%); }
  .home-concept-content { align-items: flex-end; padding-top: 7rem; padding-bottom: 5.5rem; }
  .home-concept-copy { width: 100%; backdrop-filter: none; }
  .home-concept-caption { left: 1rem; right: 1rem; bottom: 0.75rem; max-width: none; }
  .status-concept-strip { grid-template-columns: 1fr; }
  .status-concept-strip picture { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .destination-card-visual img,
  .visual-card,
  .home-concept-copy { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   2026 site-wide refinement
   A quiet, editorial layer shared by every public route.
   ----------------------------------------------------------------------- */

:root {
  --cg-ink: #17231d;
  --cg-moss: #29483a;
  --cg-linen: #f7f3e9;
  --cg-paper: #fffdf8;
  --cg-copper: #a85439;
  --cg-hairline: rgba(31, 59, 46, 0.16);
  --container-max: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(23, 35, 29, 0.06);
  --shadow-md: 0 12px 36px rgba(23, 35, 29, 0.1);
  --shadow-lg: 0 28px 80px rgba(23, 35, 29, 0.16);
  --transition: 180ms cubic-bezier(.2, .75, .25, 1);
}

html {
  background: var(--cg-linen);
  scroll-padding-top: 8rem;
}

body {
  overflow-x: clip;
  background:
    radial-gradient(circle at 8% 8%, rgba(189, 175, 154, 0.16), transparent 28rem),
    var(--cg-paper);
  color: var(--cg-ink);
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  content: "";
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

main {
  overflow: clip;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cg-ink);
  text-wrap: balance;
}

h1 {
  max-width: 15ch;
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 4.2vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

h3 {
  line-height: 1.15;
  letter-spacing: -0.025em;
}

p, li {
  text-wrap: pretty;
}

p.lead, .page-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  line-height: 1.7;
}

.container {
  width: min(calc(100% - 3rem), var(--container-max));
}

.section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section-header {
  margin-bottom: clamp(2.25rem, 5vw, 4.25rem);
}

.eyebrow {
  margin-bottom: 0.9rem;
  color: var(--cg-copper);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}

.eyebrow::before {
  display: inline-block;
  width: 1.8rem;
  height: 1px;
  margin-right: 0.7rem;
  vertical-align: middle;
  background: currentColor;
  content: "";
}

.button, button.button, input[type="submit"] {
  min-height: 3.2rem;
  padding: 0.82rem 1.35rem;
  border: 1px solid var(--cg-forest);
  border-radius: 999px;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.button:hover, button.button:hover, input[type="submit"]:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(23, 35, 29, 0.16);
}

.button:active, button.button:active, input[type="submit"]:active {
  transform: translateY(0);
}

.button-secondary, .button-outline {
  background: transparent;
  color: var(--cg-forest);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(23, 44, 34, 0.94);
  box-shadow: 0 8px 36px rgba(17, 31, 25, 0.12);
  backdrop-filter: blur(18px) saturate(125%);
}

.header-inner {
  min-height: 76px;
}

.brand {
  gap: 0.7rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}

.brand:hover img {
  transform: rotate(-8deg) scale(1.05);
}

.primary-nav {
  gap: 0.15rem;
}

.primary-nav .nav-link {
  position: relative;
  padding: 0.65rem 0.72rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.primary-nav .nav-link:hover,
.primary-nav .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.primary-nav .nav-link.active::after {
  position: absolute;
  right: 0.85rem;
  bottom: 0.22rem;
  left: 0.85rem;
  height: 1px;
  background: #d8b89e;
  content: "";
}

.primary-nav .nav-cta {
  margin-left: 0.6rem;
  border-color: #e3c5aa;
  background: #e3c5aa;
  color: var(--cg-ink);
}

.primary-nav .nav-cta:hover {
  border-color: #fff3e4;
  background: #fff3e4;
  color: var(--cg-ink);
}

.project-stage-bar {
  position: relative;
  z-index: 80;
  border-bottom: 1px solid var(--cg-hairline);
  background: #efe8d9;
  color: var(--cg-ink);
  font-size: 0.76rem;
  letter-spacing: 0.035em;
}

.stage-bar-inner {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.stage-bar-inner strong {
  margin-right: 0.55rem;
  color: var(--cg-copper);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.stage-bar-inner a {
  font-weight: 700;
  text-decoration: none;
}

.page-hero,
.compact-hero,
.participation-hero,
.land-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 9rem);
  background:
    radial-gradient(circle at 82% 20%, rgba(196, 106, 74, 0.1), transparent 25rem),
    linear-gradient(145deg, #f7f3e9 0%, #f1eadc 100%);
}

.page-hero::before,
.compact-hero::before,
.participation-hero::before,
.land-hero::before {
  position: absolute;
  top: -12rem;
  right: -10rem;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  border: 1px solid rgba(31, 59, 46, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(31, 59, 46, 0.025), 0 0 0 8rem rgba(31, 59, 46, 0.02);
  content: "";
}

.page-hero-grid {
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.page-hero img,
.page-hero svg,
.visual-card img,
.visual-card svg,
.card img {
  border-radius: var(--radius-lg);
}

.card,
.pathway-card,
.visual-card,
.feature-card,
.principle-card,
.product-card {
  border: 1px solid var(--cg-hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.card:hover,
.pathway-card:hover,
.visual-card:hover,
.feature-card:hover,
.principle-card:hover {
  border-color: rgba(31, 59, 46, 0.28);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

input, select, textarea {
  min-height: 3.15rem;
  border: 1px solid rgba(31, 59, 46, 0.28) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--cg-ink);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  min-height: 1.15rem;
  flex: 0 0 1.15rem;
  padding: 0;
  border-radius: 3px !important;
  box-shadow: none !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

textarea {
  min-height: 8rem;
}

input:hover, select:hover, textarea:hover {
  border-color: rgba(31, 59, 46, 0.52) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cg-forest) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(31, 59, 46, 0.12) !important;
  outline: none;
}

.site-footer {
  position: relative;
  padding-top: clamp(4.5rem, 8vw, 7rem);
  background:
    radial-gradient(circle at 12% 15%, rgba(107, 124, 90, 0.24), transparent 28rem),
    #172c22;
}

.footer-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-intro h2 {
  max-width: 15ch;
  margin: 0;
  color: #fff;
}

.footer-intro p {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.08rem;
  line-height: 1.75;
}

.site-footer .footer-grid {
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: 3.5rem;
}

.footer-heading {
  color: #d8b89e;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer a:not(.brand) {
  width: fit-content;
  color: rgba(255, 255, 255, 0.72);
  text-decoration-color: transparent;
}

.site-footer a:not(.brand):hover {
  color: #fff;
  text-decoration-color: #d8b89e;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.2, .75, .25, 1), transform 700ms cubic-bezier(.2, .75, .25, 1);
}

.motion-ready .reveal-item.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 1199px) {
  .primary-nav {
    top: 76px;
    height: calc(100dvh - 76px);
    padding: 1.5rem;
    background: rgba(23, 44, 34, 0.985);
  }

  .primary-nav .nav-link {
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 6vw, 2.2rem);
    font-weight: 600;
  }

  .primary-nav .nav-link.active::after {
    display: none;
  }

  .primary-nav .nav-cta {
    width: 100%;
    margin: 1rem 0 0;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 2rem), var(--container-max));
  }

  .stage-bar-inner {
    min-height: 44px;
  }

  .stage-bar-inner span {
    line-height: 1.25;
  }

  .stage-bar-inner a {
    white-space: nowrap;
  }

  .footer-intro,
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-intro {
    align-items: start;
  }

  .site-footer .footer-grid {
    gap: 2.5rem;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(2.55rem, 13vw, 3.75rem);
  }

  .stage-bar-inner strong {
    display: block;
    margin: 0;
  }

  .stage-bar-inner a span {
    display: none;
  }

  .hero-actions,
  .button-group {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button,
  .button-group .button {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .motion-ready .reveal-item { opacity: 1; transform: none; }
}