/*
Theme Name: Sara and Stephanie Community Schedule (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Caveat:wght@600&display=swap');

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */
:root {
  --cream: #fdf8f0;
  --cream-2: #f5ede1;
  --white: #ffffff;
  --ink: #1f2933;
  --ink-soft: #52606d;
  --terra: #c05621;
  --terra-deep: #9c4221;
  --terra-100: #fbede3;
  --blush: #e8a87c;
  --sage: #4a7c59;
  --sage-deep: #35603f;
  --sage-100: #eaf0ea;
  --line: #e7dccb;
  --line-strong: #8c7b62;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:
    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --script: 'Caveat', 'Segoe Script', cursive;
  --r-sm: 8px;
  --r-btn: 10px;
  --r: 16px;
  --r-lg: 28px;
  --r-organic: 26px 26px 26px 84px;
  --sh-sm: 0 2px 10px rgba(31, 41, 51, 0.06);
  --sh-md: 0 12px 30px rgba(31, 41, 51, 0.1);
  --sh-lg: 0 30px 60px rgba(31, 41, 51, 0.14);
  --gut: clamp(1.25rem, 6vw, 70px);
  --sec: clamp(3.5rem, 8vw, 7rem);
  --max: 1700px;
  --nav-h: 7.1rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-ui: 0.2s;
  --t-card: 0.25s;
  --t-slow: 0.7s;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  text-size-adjust: 100%;
}
body {
  margin: 0px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0313rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-locked {
  overflow: hidden;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0px 0px 0.6em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra-deep);
}
p {
  margin: 0px 0px 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0px;
}
a {
  color: var(--terra-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--terra);
}
img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button {
  font: inherit;
  color: inherit;
}
ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.sprite {
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow {
  max-width: 780px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
  border: 0px;
}
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0px);
  color: var(--cream);
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--terra-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.9;
}
.ico--flip {
  transform: scaleX(-1);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--terra-deep);
  margin: 0px 0px 1rem;
}
.hero .wrap {
	position: relative;
}
.hero .eyebrow,
.section--dark .eyebrow,
.section--terra .eyebrow,
.modal__head .eyebrow {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgb(255, 255, 255);
  backdrop-filter: blur(4px);
}
.hero .eyebrow::before,
.section--dark .eyebrow::before,
.section--terra .eyebrow::before,
.modal__head .eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blush);
  flex: 0 0 auto;
}
.modal__head .eyebrow {
  background: var(--terra-100);
  border-color: rgb(240, 220, 203);
  color: var(--terra-deep);
}
.modal__head .eyebrow::before {
  background: var(--terra);
}
.lead {
  font-size: clamp(1.0313rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.script-accent {
  font-family: var(--script);
  color: var(--terra-deep);
  font-size: 1.7em;
  line-height: 1;
  font-weight: 600;
}
.fine-print {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.section {
  padding-block: 80px;
  position: relative;
}
/* section[id] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
} */
 section[id] {
	scroll-margin-top: 0!important;
}
.section--tight {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.section--cream {
  background: var(--cream-2);
}
.section--band {
  background: var(--sage-100);
  padding-block: 80px!important;
}
.section--dark {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.section--dark h2,
.section--dark h3 {
  color: var(--cream);
}
.section--dark h2 em {
  color: var(--blush);
}
.section--terra {
  background: var(--terra);
  color: var(--white);
}
.section--terra h2 {
  color: var(--white);
}
.section--terra h2 em {
  color: rgb(255, 230, 210);
}
.section-head {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head .lead {
  margin: 0.9rem auto 0px;
}
.section-head .section__sub {
  margin: 0.9rem auto 0px;
}
.section-cta {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  text-align: center;
}
.section__title {
  margin-bottom: 0px;
}
.section__sub {
  color: var(--ink-soft);
  font-size: 1.0313rem;
  max-width: 62ch;
  margin: 0px;
}
.section--dark .lead,
.section--terra .lead,
.section--dark .section__sub,
.section--terra .section__sub {
  color: rgba(253, 248, 240, 0.84);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  min-height: 2.875rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease),
    background var(--t-ui) var(--ease),
    color var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0px) scale(0.98);
}
.btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
  min-height: 2.5rem;
}
.btn--lg {
  padding: 1rem 1.6rem;
  font-size: 1.0625rem;
  min-height: 3.25rem;
}
.btn--primary {
  background: var(--terra);
  color: var(--white);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover {
  background: var(--terra-deep);
  color: var(--white);
  box-shadow: var(--sh-md);
}
.btn--secondary,
.btn--ghost {
  background: rgba(192, 86, 33, 0.07);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
  backdrop-filter: blur(6px);
}
.btn--secondary:hover,
.btn--ghost:hover {
  background: rgba(192, 86, 33, 0.14);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
}
.btn--cream {
  background: var(--cream);
  color: var(--ink);
}
.btn--cream:hover {
  background: var(--white);
  color: var(--ink);
}
.btn--outline-cream {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}
.btn--outline-cream:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-color: var(--white);
}
.hero .btn--secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: rgb(255, 255, 255);
}
.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--terra-deep);
}
.link-cta:hover {
  color: var(--terra);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.pill .ico {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke-width: 2.1;
  color: var(--sage-deep);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.9rem;
}
.trust-row .pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgb(255, 255, 255);
  backdrop-filter: blur(4px);
  box-shadow: none;
}
.trust-row .pill .ico {
  color: var(--blush);
}
.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.filters--wrap {
  flex-wrap: wrap;
  overflow: visible;
}
.filters__count {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0px 0px 1.25rem;
}
#resSearchCount {
	margin-top: 20px;
}
#orgFilters {
  justify-content: center;
}
#orgCount {
  text-align: center;
}
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.375rem;
  padding: 0.45rem 1rem;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.chip:hover {
  border-color: var(--terra);
  color: var(--terra-deep);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: var(--sh-md);
}
.chip .ico {
  width: 1rem;
  height: 1rem;
}
.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--white);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  color: var(--ink);
  border-left: 4px solid var(--sage);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom:0rem;
  font-size: 0.9688rem;
  box-shadow: var(--sh-sm);
}
.callout .ico {
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.callout p {
  margin: 0px;
}
.callout--alert {
  background: var(--terra-100);
  border-color: rgb(240, 220, 203);
}
.callout--alert .ico {
  color: var(--terra-deep);
}
.topbar {
	background: var(--ink);
	color: rgba(253, 248, 240, 0.9);
	font-size: 0.8438rem;
	width: 100vw;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding-block: 0.35rem;
}
.topbar__tagline {
  margin: 0px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.topbar__link {
  background: none;
/*   border-width: 0px 0px 1px;
  border-style: none none solid;
  border-color: currentcolor currentcolor transparent; */
  border-image: none;
  padding: 0.25rem 0px;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
  font-weight: 500;
  text-decoration: none;
}
.topbar__link:hover {
	color: var(--blush);
	border-bottom-color: none;
	border: none;
}
.site-header {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgba(253, 248, 240, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s;
}
.site-header.is-stuck {
  box-shadow: var(--sh-sm);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.brand__mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
  transition: font-size 0.25s;
}
.site-header.is-stuck .brand__mark {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
}
.brand:hover .brand__mark {
  color: var(--terra-deep);
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.nav__menu a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.4rem 0px;
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 2px;
  background: currentcolor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.nav__menu a:hover {
  color: var(--terra-deep);
}
.nav__menu a:hover::after {
  transform: scaleX(1);
}
.nav__tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-toggle {
  display: none;
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(80svh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 10vh, 6rem) clamp(5.5rem, 13vh, 8rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0px;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(20, 14, 8, 0.8) 0%,
      rgba(20, 14, 8, 0.55) 44%,
      rgba(20, 14, 8, 0.18) 100%
    ),
    linear-gradient(
      to top,
      rgba(20, 14, 8, 0.72) 0%,
      rgba(20, 14, 8, 0.16) 42%,
      rgba(20, 14, 8, 0.3) 76%,
      rgba(20, 14, 8, 0.62) 100%
    );
}
.hero__inner {
	max-width: 46rem;
	margin-inline: 0;
	color: var(--cream);
	position: relative;
	z-index: 9;
  padding: 0!important;
}
.hero__title {
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 20ch;
  margin: 0px;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--blush);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -0.04em;
  height: 0.075em;
  border-radius: 6px;
  background: var(--blush);
  transform: scaleX(0);
  transform-origin: left center;
  animation: 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s 1 normal forwards
    running heroUnderline;
}
@keyframes heroUnderline {
  100% {
    transform: scaleX(1);
  }
}
.hero__sub {
  margin-top: 1.3rem;
  max-width: 52ch;
  color: rgba(253, 248, 240, 0.94);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.hero__badge {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(2.5rem, 7vw, 4.5rem);
  z-index: 2;
  background: rgba(20, 14, 8, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 1.15rem 1.35rem;
  max-width: 17.5rem;
}
.hero__badge .script-accent {
  color: var(--blush);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.35rem;
}
.hero__badge p:last-child {
  color: rgb(242, 231, 218);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0px;
}
@media (max-width: 1100px) {
  .hero__badge {
    display: none;
  }
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(253, 248, 240, 0.72);
  text-decoration: none;
  font: 700 0.66rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll:hover {
  color: rgb(255, 255, 255);
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    rgba(253, 248, 240, 0.75),
    rgba(253, 248, 240, 0)
  );
  animation: 1.9s ease-in-out 0s infinite normal none running heroScroll;
}
@keyframes heroScroll {
  0%,
  100% {
    transform: scaleY(0.55);
    transform-origin: center top;
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .hero__scroll {
    display: none;
  }
}
body.home .hero {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3.5rem));
/*   min-height: min(88svh, 48rem);
 */  min-height: 100vh!important;
}
body.home .topbar {
  position: relative;
  z-index: 110;
}
body.home .site-header {
  background: rgba(253, 248, 240, 0.1);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.28);
  box-shadow: rgba(20, 14, 8, 0.1) 0px 4px 24px;
  transition:
    background var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
body.home .site-header.is-stuck {
  background: rgba(253, 248, 240, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}
body.home .site-header:not(.is-stuck) .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a {
  color: rgb(255, 255, 255);
  text-shadow: rgba(20, 14, 8, 0.45) 0px 1px 12px;
}
body.home .site-header:not(.is-stuck) .brand:hover .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a:hover {
  color: var(--blush);
}
body.home .site-header:not(.is-stuck) .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: rgb(255, 255, 255);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
body.home .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: rgb(255, 255, 255);
}
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle {
  background: var(--white);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: var(--ink);
}
.hero__rail {
  position: absolute;
  left: clamp(0.7rem, 1.8vw, 1.6rem);
  top: 50%;
  z-index: 2;
  margin: 0px;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.72);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero__rail::after {
  content: '';
  width: 1px;
  height: 66px;
  background: rgba(253, 248, 240, 0.42);
}
@media (max-width: 900px) {
  .hero__rail {
    display: none;
  }
}
.media-figure {
  position: relative;
  margin: 0px;
  overflow: hidden;
  border-radius: var(--r-organic);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 5;
}
.media-figure picture {
  display: block;
  height: 100%;
}
.media-figure img {
  position: absolute;
  inset: -22px 0px;
  width: 100%;
  height: calc(100% + 44px);
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}
.media-figure__mark {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terra);
  color: rgb(255, 255, 255);
  box-shadow: rgba(31, 41, 51, 0.22) 0px 12px 26px;
}
.media-figure__mark svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-figure--wide {
  aspect-ratio: 4 / 3;
}
.about-slideshow {
  isolation: isolate;
  background: var(--ink);
}
.about-slideshow__viewport {
  position: absolute;
  inset: 0px;
  overflow: hidden;
}
.about-slideshow::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0px 0px;
  height: 32%;
  background: linear-gradient(transparent, rgba(31, 41, 51, 0.58));
  pointer-events: none;
}
.about-slideshow .about-slideshow__slide {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 1.1s var(--ease),
    transform 6.8s ease-out;
  will-change: opacity, transform;
}
.about-slideshow .about-slideshow__slide:nth-child(3) {
  object-position: 50% 38%;
}
.about-slideshow .about-slideshow__slide.is-active {
  opacity: 1;
  transform: scale(1.045);
}
.about-slideshow__caption {
  position: absolute;
  z-index: 2;
  left: 3.25rem;
  bottom: 1.15rem;
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: rgba(31, 41, 51, 0.5) 0px 2px 12px;
}
.about-slideshow .media-figure__mark {
  z-index: 3;
}
.marquee {
  overflow: hidden;
  min-height: 6.35rem;
  margin: 0px 0px 0;
  padding: 0.3rem 0px;
  mask: linear-gradient(
    90deg,
    transparent,
    rgb(0, 0, 0) 10%,
    rgb(0, 0, 0) 90%,
    transparent
  );
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  animation: 55s linear 0s infinite normal none paused marquee;
  transition: opacity 0.25s;
}
.marquee.is-ready .marquee__track {
  opacity: 1;
  animation-play-state: running;
}
.marquee.is-ready:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 13rem;
  height: 5.75rem;
  margin-right: 1rem;
  padding: 0.65rem 1.15rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.marquee__chip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 10.75rem;
  max-height: 4.25rem;
  object-fit: contain;
  user-select: none;
}
.marquee__chip--dark {
  background: var(--ink);
  border-color: var(--ink);
}
.marquee__chip--text {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap-style: balance;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.18;
  color: var(--ink-soft);
  text-align: center;
}
@keyframes marquee {
  100% {
    transform: translateX(-50%);
  }
}
.split {
  display: grid;
  grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split__intro {
  position: sticky;
  top: calc(var(--nav-h) + 1.2rem);
}
.split__intro h2,
.split__intro h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  margin: 0px 0px 1rem;
}
.split__intro .lead {
  margin: 0px;
}
.split__main {
  min-width: 0px;
}
.split__aside {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.split__aside-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.split__aside-b {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.split__aside .btn {
  width: 100%;
  max-width: 17.5rem;
}
.aside-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0px 0px 1.1rem;
}
.aside-person img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--sh-sm);
}
.aside-person figcaption {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.split__aside-tel {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--terra-deep);
  text-decoration: none;
}
.split__aside-tel:hover {
  color: var(--terra);
}
.reasons__title {
  margin-bottom: 1.75rem;
}
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.reason__ic {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--terra-deep);
}
.reason__ic .ico {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}
.reason__txt h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0px 0px 0.3rem;
}
.reason__txt p {
  margin: 0px;
  color: var(--ink-soft);
}
.watermark {
  position: absolute;
  right: -30px;
  bottom: -70px;
  z-index: 0;
  color: rgb(255, 255, 255);
  opacity: 0.06;
  pointer-events: none;
  line-height: 0;
}
.watermark svg {
  width: min(70vw, 40rem);
  height: auto;
  fill: none;
  stroke: currentcolor;
  stroke-width: 0.8;
}
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 20px;
}
.quick__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  min-width: 0px;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.quick__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.quick__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 0.35rem;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.quick__card:hover .quick__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.quick__icon--terra {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.quick__icon--sage {
  background: var(--sage-100);
  color: var(--sage-deep);
}
.quick__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
}
.quick__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1 1 0%;
}
.quick__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  margin-top: 0.35rem;
}
.quick__go .ico {
  transition: transform 0.18s;
}
.quick__card:hover .quick__go .ico {
  transform: translateX(3px);
}
.events {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
#events .section-cta {
	margin-bottom: 0;
}
.eventcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.eventcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.eventcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
  overflow: hidden;
}
.eventcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eventcard:hover .eventcard__media img {
  transform: scale(1.04);
}
.eventcard__date {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--cream);
  border-radius: 12px;
  padding: 0.4rem 0.6rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--sh-md);
  min-width: 3.25rem;
}
.eventcard__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.eventcard__date span {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-top: 0.2rem;
}
.eventcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.2rem;
  flex: 1 1 0%;
}
.eventcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0px;
}
.eventcard__cat .ico {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2;
}
.cat--terra {
  color: var(--terra-deep);
}
.cat--sage {
  color: var(--sage-deep);
}
.cat--ink {
  color: var(--ink-soft);
}
.eventcard__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0px;
}
.eventcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.eventcard__meta span {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.eventcard__meta .ico {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}
.eventcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.eventcard__org {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.tag .ico {
  width: 0.875rem;
  height: 0.875rem;
}
.tag--full {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.tag--ext {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.events__empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.events__empty p {
  color: var(--ink-soft);
}
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.about__body .lead {
  margin-bottom: 1em;
}
.about__body p {
  color: var(--ink-soft);
}
.about__signature {
  display: block;
  font-size: 2.1rem;
  margin-top: 1.25rem !important;
}
.calcta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.calcta__body p {
  color: rgba(253, 248, 240, 0.84);
  font-size: 1.0313rem;
  margin-bottom: 1.75rem;
  max-width: 42ch;
}
.minical {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  box-shadow: var(--sh-lg);
  color: var(--ink);
}
.minical__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.minical__month {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.minical__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--terra-deep);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.minical__dow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
}
.minical__cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
button.minical__cell {
  border: 0px;
  padding: 0px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--t-ui),
    color var(--t-ui),
    transform var(--t-ui);
}
button.minical__cell:hover {
  background: var(--sage-100);
  color: var(--sage-deep);
  transform: translateY(-1px);
}
.minical__cell.is-muted {
  color: rgb(191, 180, 162);
}
.minical__cell.is-today {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
}
.minical__cell.has-events {
  background: var(--terra-100);
  color: var(--terra-deep);
  font-weight: 700;
}
.minical__cell.has-events.is-today {
  background: var(--terra);
  color: var(--white);
}
.minical__cell.has-events::after {
  content: '';
  position: absolute;
  bottom: 0.18rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentcolor;
}
.restiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.restile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-width: 0px;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.05rem;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease);
}
.restile::after {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.restile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.restile:hover::after {
  transform: scaleX(1);
}
.restile__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.restile__name {
  font-weight: 700;
  font-size: 0.9688rem;
  line-height: 1.25;
  color: var(--ink);
}
.restile__count {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.resources-section {
  position: relative;
  isolation: isolate;
}
#resources .callout {
	margin-bottom: 0;
}
.resources__bg {
  position: absolute;
  inset: 0px;
  z-index: -2;
}
.resources__bg img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.resources__scrim {
  position: absolute;
  inset: 0px;
  z-index: -1;
  background: linear-gradient(
    rgba(31, 41, 51, 0.88) 0%,
    rgba(31, 41, 51, 0.8) 32%,
    rgba(31, 41, 51, 0.5) 100%
  );
}
.involve__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.involve__media {
  aspect-ratio: 3 / 4;
}
.involve__body {
  display: flex;
  flex-direction: column;
}
.involve__intro {
  margin-bottom: 2rem;
}
.involve__intro .section__sub {
  margin: 0.9rem 0px 1em;
}
.involve__intro h3 {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.involve {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.involve__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0px;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.involve__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.involve__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--terra-100);
  color: var(--terra-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.involve__icon .ico {
  width: 34px;
  height: 34px;
}
.involve__card:hover .involve__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.involve__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.involve__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1 1 0%;
}
.involve__time {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-deep);
  background: var(--sage-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.orgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.orgs--modal {
  grid-template-columns: repeat(2, 1fr);
}
.orgcard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.45rem 1.45rem 1.25rem;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.orgcard:hover {
  box-shadow: var(--sh-md);
  border-color: var(--line-strong);
}
.orgcard__head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.orgcard__mark {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
.orgcard__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0px 0px 0.15rem;
}
.orgcard__type {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.orgcard__blurb {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1 1 0%;
  margin: 0px;
}
.orgcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.orgcard__tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.orgcard__area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.orgcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.orgcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  transition: color var(--t-ui) var(--ease);
}
.orgcard__link:hover {
  color: var(--terra);
  text-decoration: underline;
}
.orgcard__link .ico {
  flex: 0 0 auto;
}
.evt__rsvp--external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.evt__rsvp--external .btn {
  margin-top: 0.6rem;
}
.orgcard__area .ico {
  width: 1rem;
  height: 1rem;
}
.submit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.submit__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0px;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.submit__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.submit__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.submit__card:hover .submit__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(74, 124, 89, 0.18);
}
.submit__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.submit__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1 1 0%;
}
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.faq__item.is-open {
  border-color: var(--terra);
  box-shadow: var(--sh-sm);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0px;
  padding: 1rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.faq__q:hover {
  color: var(--terra-deep);
}
.faq__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--terra-deep);
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--sans);
  transition:
    background 0.2s,
    color 0.2s;
}
.faq__item.is-open .faq__toggle {
  background: var(--terra);
  color: rgb(255, 255, 255);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding: 0px 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.9688rem;
  line-height: 1.6;
  margin: 0px;
}
.finalcta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.finalcta__bg {
  position: absolute;
  inset: 0px;
  z-index: -2;
}
.finalcta__bg img {
  position: absolute;
  inset: -90px 0px;
  width: 100%;
  height: calc(100% + 180px);
  object-fit: cover;
  object-position: 50% 38%;
  will-change: transform;
}
.finalcta__scrim {
  position: absolute;
  inset: 0px;
  z-index: -1;
  background: linear-gradient(
    160deg,
    rgba(140, 58, 28, 0.78) 0%,
    rgba(156, 66, 33, 0.74) 45%,
    rgba(140, 58, 28, 0.79) 100%
  );
}
.finalcta {
  text-align: center;
}
.finalcta p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.finalcta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}
.news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.news__intro p {
  color: var(--ink-soft);
  margin: 0px;
}
.news__aside {
  display: flex;
  flex-direction: column;
}
.news__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 26rem;
  margin: 0px 0px 0.85rem;
}
.news__form .field {
  width: 100%;
  margin: 0px;
}
.footer {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.78);
  padding-block: clamp(3rem, 7vw, 4.5rem) 0px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 0.5rem;
}
.footer__brand .brand__mark {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--cream);
  margin-bottom: 0.85rem;
}
.footer__brand p {
  font-size: 0.9375rem;
  max-width: 32ch;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.35rem;
  font-size: 0.9375rem;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer__contact .ico {
  color: var(--blush);
}
.footer a {
  color: rgba(253, 248, 240, 0.8);
  text-decoration: none;
}
.footer a:hover {
    color: var(--blush);

}
.footer__col h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.footer__col button {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.8);
  font-size: 0.9375rem;
  text-align: left;
}
.footer__col button:hover {
    color: var(--blush);

}
.footer__soon {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(253, 248, 240, 0.5);
}
.footer__social {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.35rem;
}
.footer__social a {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(253, 248, 240, 0.09);
  border: 1px solid rgba(253, 248, 240, 0.18);
  color: rgba(253, 248, 240, 0.85);
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}
.footer__social a:hover {
  background: rgba(253, 248, 240, 0.2);
  border-color: rgba(253, 248, 240, 0.4);
  color: var(--white);
  text-decoration: none;
}
.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(253, 248, 240, 0.14);
  margin-top: 2.5rem;
  padding-block: 1.4rem;
  font-size: 0.8438rem;
}
.footer__legal p {
  margin: 0px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.15rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label,
.fieldset legend {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.req {
  color: var(--terra-deep);
}
.opt {
  font-weight: 400;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-btn);
  padding: 0.75rem 0.9rem;
  min-height: 2.875rem;
  width: 100%;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.field textarea {
  min-height: auto;
  resize: vertical;
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgb(138, 133, 120);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-soft);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--terra-deep);
  box-shadow: rgba(156, 66, 33, 0.14) 0px 0px 0px 3px;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: rgb(163, 37, 42);
  background: rgb(253, 244, 244);
}
.field__err {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgb(163, 37, 42);
  margin: 0px;
}
.field--search {
  position: relative;
}
.field--search .field__ico {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.field--search input {
  padding-left: 2.7rem;
}
.fieldset {
  border: 0px;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.checks p,
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
}
.check:hover {
  border-color: var(--line-strong);
}
.check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin-top: 0.12rem;
  accent-color: var(--terra);
}
.check:has(input:checked) {
  border-color: var(--terra);
  background: var(--terra-100);
}
.news__form .check {
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: none;
}
.news__form .check:has(input:checked) {
  background: none;
}
.form__foot {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}
.form__fine {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0px;
}
.formstatus {
  margin: 0px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.formstatus.is-ok {
  color: var(--sage-deep);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.9rem 1.05rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
}
.formstatus.is-bad {
  color: rgb(163, 37, 42);
}
.modal {
  position: fixed;
  inset: 0px;
  z-index: 300;
  display: grid;
  place-items: end center;
}
.modal[hidden] {
  display: none;
}
.modal__backdrop {
  position: absolute;
  inset: 0px;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(3px);
  animation: 0.2s ease 0s 1 normal none running fade;
  border: 0px;
}
.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: min(92svh, 60rem);
  background: var(--cream);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-lg);
  animation: 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running rise;
}
.modal__panel--wide {
  width: min(100%, 68rem);
}
@media (min-width: 720px) {
  .modal {
    place-items: center;
    padding: 1.5rem;
  }
  .modal__panel {
    border-radius: var(--r-lg);
    max-height: min(90svh, 60rem);
  }
}
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.modal__head h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin: 0px;
}
.modal__head .eyebrow {
  margin-bottom: 0.6rem;
}
.modal__x {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
}
.modal__x:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 2rem;
}
.modal__lede {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.modal__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.modal__foot p {
  margin: 0px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.tab {
  flex: 1 1 0%;
  min-height: 2.625rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 0px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition:
    background 0.16s,
    color 0.16s,
    box-shadow 0.16s;
}
.tab:hover {
  color: var(--ink);
}
.tab.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.calbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.calnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calnav__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.calnav__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}
.calnav__label {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0px;
  min-width: 11ch;
  text-align: center;
}
.calviews {
  display: flex;
  gap: 0.4rem;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.cal__dow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
}
.calday {
  position: relative;
  min-height: 5.5rem;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  font: inherit;
  color: inherit;
}
.calday:not(.is-muted) {
  cursor: pointer;
  transition:
    background var(--t-ui),
    border-color var(--t-ui),
    box-shadow var(--t-ui),
    transform var(--t-ui);
}
.calday:not(.is-muted):hover {
  background: var(--terra-100);
  border-color: var(--terra);
  transform: translateY(-1px);
}
.calday.is-muted {
  background: transparent;
  border-color: transparent;
}
.calday.is-muted .calday__n {
  color: rgb(195, 184, 166);
}
.calday:not(.has-events):not(.is-muted) {
  background: transparent;
  border-color: var(--line);
}
.calday.has-events {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}
.calday.is-selected {
  background: var(--terra-100);
  border-color: var(--terra);
  box-shadow: rgba(192, 86, 33, 0.25) 0px 0px 0px 2px;
}
.calday.is-today .calday__n {
  background: var(--ink);
  color: var(--cream);
}
.calday__n {
  align-self: flex-start;
  min-width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calday__pip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.calday__pip i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentcolor;
}
.calday__more {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: auto;
}
.cal__hint {
  margin: 1rem 0px 0px;
  font-size: 0.8438rem;
  color: var(--ink-soft);
  text-align: center;
}
.callist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.callist__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: var(--sh-sm);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.callist__item:hover {
  border-color: var(--terra);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.callist__date {
  flex: 0 0 auto;
  text-align: center;
  min-width: 3.25rem;
  line-height: 1.1;
}
.callist__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.callist__date span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.callist__main {
  flex: 1 1 0%;
  min-width: 0px;
}
.callist__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0.2rem 0px;
}
.callist__meta {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  margin: 0px;
}
.callist__empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}
.caldetail {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.caldetail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.caldetail__head h3 {
  font-size: 1.25rem;
  margin: 0px;
}
.caldetail__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--cream-2);
  border-radius: var(--r-btn);
}
.caldetail__empty p {
  margin: 0px;
  color: var(--ink-soft);
}
.evt__media {
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 1.35rem;
  aspect-ratio: 16 / 9;
  background: var(--cream-2);
}
.evt__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evt__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.evt__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.85rem 0.95rem;
}
.evt__fact .ico {
  color: var(--terra-deep);
  margin-top: 0.1rem;
}
.evt__fact dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.evt__fact dd {
  margin: 0px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.evt__desc {
  color: var(--ink-soft);
  margin-bottom: 1.35rem;
}
.evt__notes {
  display: flex;
  gap: 0.7rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
  padding: 0.9rem 1.05rem;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.evt__notes .ico {
  color: var(--sage-deep);
  flex: 0 0 auto;
}
.evt__rsvp {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.45rem;
  box-shadow: var(--sh-sm);
}
.evt__rsvp h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.evt__spots {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}
.evt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.acc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.acc__item.is-open {
  border-color: var(--sage);
  box-shadow: var(--sh-sm);
}
.acc__q {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0px;
  padding: 1rem 1.15rem;
}
.acc__q:hover {
  background: var(--cream);
}
.acc__ic {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.acc__label {
  flex: 1 1 0%;
  min-width: 0px;
}
.acc__label b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.acc__label span {
  font-size: 0.8438rem;
  color: var(--ink-soft);
}
.acc__chev {
  flex: 0 0 auto;
  color: var(--ink-soft);
  transition: transform 0.22s;
}
.acc__item.is-open .acc__chev {
  transform: rotate(180deg);
}
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s;
}
.acc__item.is-open .acc__a {
  grid-template-rows: 1fr;
}
.acc__a > div {
  overflow: hidden;
}
.acc__files {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0px 1.15rem 1.15rem;
}
.resorg {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.8rem 0.95rem;
}
.resorg:hover {
  border-color: var(--sage);
}
.resorg__ic {
  flex: 0 0 auto;
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.resorg__ic svg {
  width: 1.25rem;
  height: 1.25rem;
}
.resorg__main {
  flex: 1 1 0%;
  min-width: 0px;
}
.resorg__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.resorg__name:hover {
  color: var(--sage-deep);
  text-decoration: underline;
}
.resorg__who {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.resorg__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.15rem;
}
.resorg__tel {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--terra-deep);
	text-decoration: none;
	white-space: nowrap;
	max-width: 180px!important;
	text-wrap: auto!important;
}
.resorg__tel em {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .resorg {
    flex-wrap: wrap;
  }
  .resorg__tel {
    width: 100%;
    padding-left: 2.1rem;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slow) ease,
    transform var(--t-slow) ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
[data-revealed] {
  opacity: 1;
}
@media (max-width: 1080px) {
  .quick {
    grid-template-columns: repeat(2, 1fr);
  }
  .events {
    grid-template-columns: repeat(2, 1fr);
  }
  .orgs {
    grid-template-columns: repeat(2, 1fr);
  }
  .restiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  #orgFilters {
    justify-content: flex-start;
  }
}
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-btn);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9063rem;
    font-weight: 700;
    box-shadow: var(--sh-sm);
  }
  .nav-toggle__bars {
    display: grid;
    gap: 4px;
  }
  .nav-toggle__bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition:
      transform 0.2s,
      opacity 0.2s;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    padding: 1.25rem var(--gut) 1.75rem;
    max-height: calc(-7rem + 100svh);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
  }
  .nav__menu a {
    padding: 0.85rem 0px;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
  }
  .nav__menu a:hover {
    border-bottom-color: var(--line);
  }
  .nav__tools {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nav__tools .btn {
    width: 100%;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .split__intro {
    position: static;
  }
  .split__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .about,
  .calcta,
  .involve__layout,
  .reasons,
  .news {
    grid-template-columns: 1fr;
  }
  .about {
    margin-bottom: 2.5rem;
  }
  .media-figure {
    aspect-ratio: 16 / 10;
  }
  .about__media {
    order: -1;
  }
  .calcta__preview {
    max-width: 26rem;
  }
  .orgs--modal {
    grid-template-columns: 1fr;
  }
  .submit {
    grid-template-columns: 1fr;
  }
  .topbar__tagline {
    display: none;
  }
  .topbar__inner {
    justify-content: center;
  }
}
@media (max-width: 420px) {
  .nav-toggle {
    padding: 0.5rem 0.65rem;
  }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    white-space: nowrap;
    border: 0px;
  }
}
@media (max-width: 640px) {
  .quick,
  .involve,
  .events,
  .orgs,
  .restiles {
    grid-template-columns: 1fr;
  }
  .restile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.1rem 1rem;
    padding: 1rem 1.15rem;
  }
  .restile__icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
  }
  .restile__icon .ico {
    width: 1.75rem;
    height: 1.75rem;
  }
  .restile__name {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    font-size: 1.0625rem;
  }
  .restile__count {
    grid-area: 2 / 2 / 3 / 3;
    align-self: start;
    font-size: 0.875rem;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer__brand p {
    max-width: none;
  }
  .footer__contact li {
    justify-content: center;
  }
  .footer__col ul {
    align-items: center;
  }
  .footer__col button {
    text-align: center;
  }
  .footer__social {
    justify-content: center;
  }
  .footer__social a {
    width: 2.75rem;
    height: 2.75rem;
  }
  .footer__legal {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  .news__form {
    max-width: none;
  }
  .news__form .btn {
    width: 100%;
  }
  .hero {
    min-height: auto;
    padding-block: 3rem 3.5rem;
  }
  .hero__title {
    max-width: none;
  }
  .media-figure {
    border-radius: 20px 20px 20px 60px;
  }
  .calnav {
    width: 100%;
    justify-content: space-between;
  }
  .calnav__label {
    font-size: 1.125rem;
    min-width: 0px;
  }
  .calbar {
    gap: 0.75rem;
  }
  .cal {
    gap: 0.2rem;
  }
  .calday {
    min-height: 3.5rem;
    padding: 0.25rem;
  }
  .calday__pip {
    display: none;
  }
  .calday.has-events::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terra);
    margin-inline: auto;
  }
  .caldetail__empty {
    align-items: flex-start;
    flex-direction: column;
  }
  .marquee {
    min-height: 5.6rem;
  }
  .marquee__chip {
    width: 10.5rem;
    height: 5rem;
    padding: 0.55rem 0.9rem;
    margin-right: 0.7rem;
  }
  .marquee__chip img {
    max-width: 8.7rem;
    max-height: 3.75rem;
  }
  .marquee__chip--text {
    font-size: 0.9063rem;
  }
  .topbar__links {
    gap: 0.85rem;
    font-size: 0.8125rem;
  }
  .section-head {
    margin-bottom: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  ::before,
  ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero__title em::after {
    transform: scaleX(1);
  }
  .marquee__track {
    animation: auto ease 0s 1 normal none running none;
  }
  .hero__scroll-line {
    animation: auto ease 0s 1 normal none running none;
  }
  .btn:hover,
  .quick__card:hover,
  .eventcard:hover,
  .involve__card:hover,
  .submit__card:hover,
  .restile:hover,
  .orgcard:hover,
  .chip:hover,
  .callist__item:hover {
    transform: none;
  }
  .eventcard:hover .eventcard__media img {
    transform: none;
  }
}
@media print {
  .topbar,
  .site-header,
  .hero__video,
  .hero__scroll,
  .hero__badge,
  .modal,
  .news__form,
  .nav-toggle,
  .marquee,
  .watermark {
    display: none !important;
  }
  body {
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
  }
  .section {
    padding-block: 1.5rem;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split__intro {
    position: static;
  }
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
  }
}

/* From assets/css/styles.css */
/* =============================================================================
   Community Schedule — Clark County, Nevada

   Design language follows the Aspire ABA RevSite (the reference the client
   chose): pill eyebrows with a colour dot, centred section heads, 10px
   buttons with translucent secondaries, 28px cards, organic asymmetric media
   frames with a floating badge, sticky editorial splits, bordered reason
   lists, a script accent, a marquee band, and soft scroll parallax.
   Palette and display face are this brand's own.

   All colour pairs verified against WCAG 2.2 AA — table in PRODUCT.md.
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root {
  --cream: #fdf8f0;
  --cream-2: #f5ede1;
  --white: #ffffff;
  --ink: #1f2933;
  --ink-soft: #52606d;
  --terra: #c05621;
  --terra-deep: #9c4221;
  --terra-100: #fbede3;
  --blush: #e8a87c; /* light accent for dark grounds */
  --sage: #4a7c59;
  --sage-deep: #35603f;
  --sage-100: #eaf0ea;
  --line: #e7dccb;
  --line-strong: #8c7b62;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:
    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --script: 'Caveat', 'Segoe Script', cursive;

  --r-sm: 8px;
  --r-btn: 10px;
  --r: 16px;
  --r-lg: 28px;
  --r-organic: 26px 26px 26px 84px;

  --sh-sm: 0 2px 10px rgba(31, 41, 51, 0.06);
  --sh-md: 0 12px 30px rgba(31, 41, 51, 0.1);
  --sh-lg: 0 30px 60px rgba(31, 41, 51, 0.14);

  /* Aspire's gutter is fluid and generous and its container has no max-width.
     Matching the gutter exactly; the cap keeps ultrawide screens sane. */
  --gut: clamp(1.25rem, 6vw, 70px);
  --sec: clamp(3.5rem, 8vw, 7rem);
  --max: 1560px;
  --nav-h: 7.1rem; /* re-measured in px by main.js */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* house easing */
  --t-ui: 0.2s; /* buttons, links, chips */
  --t-card: 0.25s; /* cards, plates */
  --t-slow: 0.7s; /* reveals, image scale */
}

/* ------------------------------- 2. RESET -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0313rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra-deep);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--terra-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--terra);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ----------------------------- 3. UTILITIES ------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow {
  max-width: 780px;
}

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

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--cream);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--terra-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.9;
}
.ico--flip {
  transform: scaleX(-1);
}

/* In-page labels read as part of the editorial rhythm, not as repeated pills —
   Aspire overrides its own pill for section eyebrows and keeps it only where
   the label sits on imagery or a dark ground. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--terra-deep);
  margin: 0 0 1rem;
}
/* Pill + dot: hero, dark bands, and modal heads. */
.hero .eyebrow,
.section--dark .eyebrow,
.section--terra .eyebrow,
.modal__head .eyebrow {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero .eyebrow::before,
.section--dark .eyebrow::before,
.section--terra .eyebrow::before,
.modal__head .eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blush);
  flex: none;
}
.modal__head .eyebrow {
  background: var(--terra-100);
  border-color: #f0dccb;
  color: var(--terra-deep);
}
.modal__head .eyebrow::before {
  background: var(--terra);
}

.lead {
  font-size: clamp(1.0313rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.script-accent {
  font-family: var(--script);
  color: var(--terra-deep);
  font-size: 1.7em;
  line-height: 1;
  font-weight: 600;
}
.fine-print {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

.section {
  padding-block: 80px;
  position: relative;
}
section[id] {
  scroll-margin-top: calc(var(--nav-h));
}
.section--tight {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.section--cream {
  background: var(--cream-2);
}
.section--band {
  background: var(--sage-100);
  padding-block: 80px;
}
.section--dark {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.section--dark h2,
.section--dark h3 {
  color: var(--cream);
}
.section--dark h2 em {
  color: var(--blush);
}
.section--terra {
  background: var(--terra);
  color: var(--white);
}
.section--terra h2 {
  color: var(--white);
}
.section--terra h2 em {
  color: #ffe6d2;
}

/* Signature: centred section head, CTA on its own line underneath. */
.section-head {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head .lead {
  margin: 0.9rem auto 0;
}
.section-head .section__sub {
  margin: 0.9rem auto 0;
}
.section-cta {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  text-align: center;
}
.section__title {
  margin-bottom: 0;
}
.section__sub {
  color: var(--ink-soft);
  font-size: 1.0313rem;
  max-width: 62ch;
  margin: 0;
}
.section--dark .lead,
.section--terra .lead,
.section--dark .section__sub,
.section--terra .section__sub {
  color: rgba(253, 248, 240, 0.84);
}

/* ------------------------------ 4. BUTTONS ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  min-height: 2.875rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease),
    background var(--t-ui) var(--ease),
    color var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
  min-height: 2.5rem;
}
.btn--lg {
  padding: 1rem 1.6rem;
  font-size: 1.0625rem;
  min-height: 3.25rem;
}

.btn--primary {
  background: var(--terra);
  color: var(--white);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover {
  background: var(--terra-deep);
  color: var(--white);
  box-shadow: var(--sh-md);
}

/* Signature: outlined on a lightly blurred translucent wash. */
.btn--secondary,
.btn--ghost {
  background: rgba(192, 86, 33, 0.07);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--secondary:hover,
.btn--ghost:hover {
  background: rgba(192, 86, 33, 0.14);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
}

.btn--cream {
  background: var(--cream);
  color: var(--ink);
}
.btn--cream:hover {
  background: var(--white);
  color: var(--ink);
}
.btn--outline-cream {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}
.btn--outline-cream:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-color: var(--white);
}

.hero .btn--secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
  color: #fff;
}

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--terra-deep);
}
.link-cta:hover {
  color: var(--terra);
}

/* --------------------------- 5. PILLS / CHIPS ---------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.pill .ico {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke-width: 2.1;
  color: var(--sage-deep);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.9rem;
}
.trust-row .pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
}
.trust-row .pill .ico {
  color: var(--blush);
}

.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.filters--wrap {
  flex-wrap: wrap;
  overflow: visible;
}
.filters__count {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
#orgFilters {
  justify-content: center;
}
#orgCount {
  text-align: center;
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.375rem;
  padding: 0.45rem 1rem;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.chip:hover {
  border-color: var(--terra);
  color: var(--terra-deep);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: var(--sh-md);
}
.chip .ico {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------ 6. CALLOUTS ------------------------------ */
.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-left: 4px solid var(--sage);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
  font-size: 0.9688rem;
  box-shadow: var(--sh-sm);
}
.callout .ico {
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.callout p {
  margin: 0;
}
.callout--alert {
  border-left-color: var(--terra);
  background: var(--terra-100);
  border-color: #f0dccb;
}
.callout--alert .ico {
  color: var(--terra-deep);
}

/* ------------------------------- 7. TOPBAR ------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding-block: 0.35rem;
}
.topbar__tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.topbar__link {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
  font-weight: 500;
  text-decoration: none;
/*   border-bottom: 1px solid transparent; */
}
.topbar__link:hover {
	color: var(--blush);
	border-bottom-color: none;
	border: none;
}

/* ------------------------------- 8. HEADER ------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 240, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;  width: 100vw;
}
.site-header.is-stuck {
  box-shadow: var(--sh-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.brand__mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
  transition: font-size 0.25s ease;
}
.site-header.is-stuck .brand__mark {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
}
.brand:hover .brand__mark {
  color: var(--terra-deep);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.nav__menu a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__menu a:hover {
  color: var(--terra-deep);
}
.nav__menu a:hover::after {
  transform: scaleX(1);
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: none;
}

/* -------------------------------- 9. HERO ------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(80svh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 10vh, 6rem) clamp(5.5rem, 13vh, 8rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(20, 14, 8, 0.8) 0%,
      rgba(20, 14, 8, 0.55) 44%,
      rgba(20, 14, 8, 0.18) 100%
    ),
    /* The last stop is the ground the overlay header's white type sits on,
       so it is set from a measured contrast reading, not by eye. */
      linear-gradient(
        to top,
        rgba(20, 14, 8, 0.72) 0%,
        rgba(20, 14, 8, 0.16) 42%,
        rgba(20, 14, 8, 0.3) 76%,
        rgba(20, 14, 8, 0.62) 100%
      );
}
.hero__inner {
  max-width: 46rem;
  margin-inline: 0;
  color: var(--cream);
}
.hero__title {
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 20ch;
  margin: 0;
}
/* Signature: the italic phrase draws its own underline in on load. */
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--blush);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.075em;
  border-radius: 6px;
  background: var(--blush);
  transform: scaleX(0);
  transform-origin: left;
  animation: heroUnderline 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s forwards;
}
@keyframes heroUnderline {
  to {
    transform: scaleX(1);
  }
}

.hero__sub {
  margin-top: 1.3rem;
  max-width: 52ch;
  color: rgba(253, 248, 240, 0.94);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* Signature: floating translucent card with a handwritten line. */
.hero__badge {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(2.5rem, 7vw, 4.5rem);
  z-index: 2;
  background: rgba(20, 14, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 1.15rem 1.35rem;
  max-width: 17.5rem;
}
.hero__badge .script-accent {
  color: var(--blush);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.35rem;
}
.hero__badge p:last-child {
  color: #f2e7da;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 1100px) {
  .hero__badge {
    display: none;
  }
}

/* Signature: animated scroll rail. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(253, 248, 240, 0.72);
  text-decoration: none;
  font: 700 0.66rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll:hover {
  color: #fff;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    rgba(253, 248, 240, 0.75),
    rgba(253, 248, 240, 0)
  );
  animation: heroScroll 1.9s ease-in-out infinite;
}
@keyframes heroScroll {
  0%,
  100% {
    transform: scaleY(0.55);
    transform-origin: top;
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .hero__scroll {
    display: none;
  }
}

/* ------------------- 9b. OVERLAY HEADER OVER THE HERO -------------------
   The hero is pulled up behind the topbar and header so the footage runs
   edge to edge under them. The header stays a translucent blurred layer with
   white nav type until the reader has scrolled nearly past the hero, then
   flips to the opaque cream bar. --nav-h is measured in px by main.js. */
body.home .hero {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3.5rem));
/*   min-height: min(88svh, 48rem);
 */}
body.home .topbar {
  position: relative;
  z-index: 110;
}

body.home .site-header {
  background: rgba(253, 248, 240, 0.1);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 24px rgba(20, 14, 8, 0.1);
  transition:
    background var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
body.home .site-header.is-stuck {
  background: rgba(253, 248, 240, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

/* One legible layer while transparent: everything goes white with a shadow. */
body.home .site-header:not(.is-stuck) .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(20, 14, 8, 0.45);
}
body.home .site-header:not(.is-stuck) .brand:hover .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a:hover {
  color: var(--blush);
}
body.home .site-header:not(.is-stuck) .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.home .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: #fff;
}
/* The open drawer is a cream panel, so its toggle goes back to ink. */
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle {
  background: var(--white);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: var(--ink);
}

/* Vertical kicker rail on the left margin. */
.hero__rail {
  position: absolute;
  left: clamp(0.7rem, 1.8vw, 1.6rem);
  top: 50%;
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.72);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero__rail::after {
  content: '';
  width: 1px;
  height: 66px;
  background: rgba(253, 248, 240, 0.42);
}
@media (max-width: 900px) {
  .hero__rail {
    display: none;
  }
}

/* --------------------------- 10. MEDIA FIGURES -------------------------- */
/* Signature: organic asymmetric frame + floating circular badge, and a
   slightly oversized image inside so the parallax shift never shows an edge. */
.media-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-organic);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 5;
}
.media-figure picture {
  display: block;
  height: 100%;
}
.media-figure img {
  position: absolute;
  inset: -22px 0;
  width: 100%;
  height: calc(100% + 44px);
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}
.media-figure__mark {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terra);
  color: #fff;
  box-shadow: 0 12px 26px rgba(31, 41, 51, 0.22);
}
.media-figure__mark svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The default 4/5 ratio is a tall portrait crop tuned for sections with a
   full paragraph of copy beside it. Paired with a short callout (a title,
   one paragraph, a button) it towers over the text and align-items: center
   strands the copy in the middle of a mostly-empty column. Both source
   photos this modifies are themselves landscape, so a 4/3 crop needs less
   aggressive cropping AND keeps the two columns close enough in height
   that centering them reads as a deliberate pairing, not a layout bug. */
.media-figure--wide {
  aspect-ratio: 4 / 3;
}

/* Real client photography in About. Only opacity and transform animate, so
   the crossfade stays smooth and never causes layout movement. */
.about-slideshow {
  isolation: isolate;
  background: var(--ink);
}
.about-slideshow__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.about-slideshow::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(transparent, rgba(31, 41, 51, 0.58));
  pointer-events: none;
}
.about-slideshow .about-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 1.1s var(--ease),
    transform 6.8s ease-out;
  will-change: opacity, transform;
}
.about-slideshow .about-slideshow__slide:nth-child(3) {
  object-position: 50% 38%;
}
.about-slideshow .about-slideshow__slide.is-active {
  opacity: 1;
  transform: scale(1.045);
}
.about-slideshow__caption {
  position: absolute;
  z-index: 2;
  left: 3.25rem;
  bottom: 1.15rem;
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(31, 41, 51, 0.5);
}
.about-slideshow .media-figure__mark {
  z-index: 3;
}

/* --------------------------- 11. MARQUEE BAND --------------------------- */
/* Signature: italic display type, masked edges, pause on hover. */
.marquee {
  overflow: hidden;
  min-height: 6.35rem;
  margin: 0 0 0rem;
  padding: 0.3rem 0;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  animation: marquee 55s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.25s ease;
}
.marquee.is-ready .marquee__track {
  opacity: 1;
  animation-play-state: running;
}
.marquee.is-ready:hover .marquee__track {
  animation-play-state: paused;
}
/* Spacing lives on the chip as margin, not as gap on the track: the track
   holds the partner list twice and the -50% keyframe only lands seamlessly
   while both halves measure exactly the same, trailing space included. */
.marquee__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 13rem;
  height: 5.75rem;
  margin-right: 1rem;
  padding: 0.65rem 1.15rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.marquee__chip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 10.75rem;
  max-height: 4.25rem;
  object-fit: contain;
  user-select: none;
}
/* Only for logos supplied as white-on-transparent — they vanish on the light
   band otherwise, and altering a third party's artwork is not an option. */
.marquee__chip--dark {
  background: var(--ink);
  border-color: var(--ink);
}
.marquee__chip--text {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.18;
  color: var(--ink-soft);
  text-align: center;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------ 12. STICKY EDITORIAL SPLIT -------------------- */
/* Signature: a sticky intro column beside the content, carrying the CTA. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split__intro {
  position: sticky;
  top: calc(var(--nav-h) + 1.2rem);
}
.split__intro h2,
.split__intro h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.split__intro .lead {
  margin: 0;
}
.split__main {
  min-width: 0;
}

.split__aside {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.split__aside-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.split__aside-b {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.split__aside .btn {
  width: 100%;
  max-width: 17.5rem;
}
.aside-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
}
.aside-person img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--sh-sm);
}
.aside-person figcaption {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.split__aside-tel {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--terra-deep);
  text-decoration: none;
}
.split__aside-tel:hover {
  color: var(--terra);
}

.reasons__title {
  margin-bottom: 1.75rem;
}

/* Signature: three pillars side by side, not stacked rows. */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.reason__ic {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--terra-deep);
}
.reason__ic .ico {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}
.reason__txt h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}
.reason__txt p {
  margin: 0;
  color: var(--ink-soft);
}

/* ----------------------------- 13. WATERMARK ---------------------------- */
/* Signature: oversized mark bleeding off a dark section at very low opacity. */
.watermark {
  position: absolute;
  right: -30px;
  bottom: -70px;
  z-index: 0;
  color: #fff;
  opacity: 0.06;
  pointer-events: none;
  line-height: 0;
}
.watermark svg {
  width: min(70vw, 40rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
}

/* --------------------------- 14. QUICK ACCESS --------------------------- */
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.quick__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.quick__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.quick__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 0.35rem;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.quick__card:hover .quick__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.quick__icon--terra {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.quick__icon--sage {
  background: var(--sage-100);
  color: var(--sage-deep);
}
.quick__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
}
.quick__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.quick__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  margin-top: 0.35rem;
}
.quick__go .ico {
  transition: transform 0.18s;
}
.quick__card:hover .quick__go .ico {
  transform: translateX(3px);
}

/* ------------------------------ 16. EVENTS ------------------------------ */
.events {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.eventcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.eventcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.eventcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
  overflow: hidden;
}
.eventcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eventcard:hover .eventcard__media img {
  transform: scale(1.04);
}
.eventcard__date {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--cream);
  border-radius: 12px;
  padding: 0.4rem 0.6rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--sh-md);
  min-width: 3.25rem;
}
.eventcard__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.eventcard__date span {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-top: 0.2rem;
}
.eventcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.2rem;
  flex: 1;
}
.eventcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
}
.eventcard__cat .ico {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2;
}
.cat--terra {
  color: var(--terra-deep);
}
.cat--sage {
  color: var(--sage-deep);
}
.cat--ink {
  color: var(--ink-soft);
}
.eventcard__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.eventcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.eventcard__meta span {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.eventcard__meta .ico {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}
.eventcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.eventcard__org {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.tag .ico {
  width: 0.875rem;
  height: 0.875rem;
}
.tag--full {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.tag--ext {
  background: var(--terra-100);
  color: var(--terra-deep);
}

.events__empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.events__empty p {
  color: var(--ink-soft);
}

/* ------------------------------ 17. ABOUT ------------------------------- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.about__body .lead {
  margin-bottom: 1em;
}
.about__body p {
  color: var(--ink-soft);
}
.about__signature {
  display: block;
  margin-top: 1.25rem !important;
  font-size: 2.1rem;
}

/* -------------------------- 18. CALENDAR CTA ---------------------------- */
.calcta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.calcta__body p {
  color: rgba(253, 248, 240, 0.84);
  font-size: 1.0313rem;
  margin-bottom: 1.75rem;
  max-width: 42ch;
}

.minical {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  box-shadow: var(--sh-lg);
  color: var(--ink);
}
.minical__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.minical__month {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.minical__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--terra-deep);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.minical__dow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
}
.minical__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
button.minical__cell {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--t-ui),
    color var(--t-ui),
    transform var(--t-ui);
}
button.minical__cell:hover {
  background: var(--sage-100);
  color: var(--sage-deep);
  transform: translateY(-1px);
}
.minical__cell.is-muted {
  color: #bfb4a2;
}
.minical__cell.is-today {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
}
.minical__cell.has-events {
  background: var(--terra-100);
  color: var(--terra-deep);
  font-weight: 700;
}
.minical__cell.has-events.is-today {
  background: var(--terra);
  color: var(--white);
}
.minical__cell.has-events::after {
  content: '';
  position: absolute;
  bottom: 0.18rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------- 19. RESOURCES ----------------------------- */
/* Five columns match the five verified resource categories in the current
   handoff; responsive rules collapse the row cleanly below desktop. */
.restiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.restile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.05rem;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease);
}
.restile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.restile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.restile:hover::after {
  transform: scaleX(1);
}
.restile__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.restile__name {
  font-weight: 700;
  font-size: 0.9688rem;
  line-height: 1.25;
  color: var(--ink);
}
.restile__count {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.resources-section {
  position: relative;
  isolation: isolate;
}
.resources__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.resources__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.resources__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Only the top section-head text sits directly on the photo with no card
     behind it, so the scrim is strongest there and fades going down — the
     tiles, button and alert box are all opaque and stay legible regardless.
     See PRODUCT.md for the measured worst-case contrast. */
  background: linear-gradient(
    180deg,
    rgba(31, 41, 51, 0.88) 0%,
    rgba(31, 41, 51, 0.8) 32%,
    rgba(31, 41, 51, 0.5) 100%
  );
}

/* ---------------------------- 20. GET INVOLVED -------------------------- */
#involved .section-cta {
	margin-bottom: 0;
}
.involve__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.involve__media {
  aspect-ratio: 3 / 4;
}
.involve__body {
  display: flex;
  flex-direction: column;
}
.involve__intro {
  margin-bottom: 2rem;
}
.involve__intro .section__sub {
  margin: 0.9rem 0 1em;
}
.involve__intro h3 {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
/* Fixed at 2 columns rather than 4: this now sits in the narrower .85fr/1.15fr
   layout column beside the photo, not the full section width. */
.involve {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.involve__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.involve__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.involve__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--terra-100);
  color: var(--terra-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.involve__icon .ico {
  width: 34px;
  height: 34px;
}
.involve__card:hover .involve__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.involve__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.involve__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.involve__time {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-deep);
  background: var(--sage-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ------------------------------- 21. ORGS ------------------------------- */
.orgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.orgs--modal {
  grid-template-columns: repeat(2, 1fr);
}
.orgcard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.45rem 1.45rem 1.25rem;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
/* Static content — no lift. Aspire reserves the float for cards you can act on. */
.orgcard:hover {
  box-shadow: var(--sh-md);
  border-color: var(--line-strong);
}
.orgcard__head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.orgcard__mark {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
.orgcard__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.15rem;
}
.orgcard__type {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.orgcard__blurb {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
  margin: 0;
}
.orgcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.orgcard__tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.orgcard__area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
/* Sara asked for outbound links in the directory, so each card carries its
   own website and phone. */
.orgcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.orgcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  transition: color var(--t-ui) var(--ease);
}
.orgcard__link:hover {
  color: var(--terra);
  text-decoration: underline;
}
.orgcard__link .ico {
  flex: none;
}

/* The external-registration panel leads with the outbound button. */
.evt__rsvp--external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.evt__rsvp--external .btn {
  margin-top: 0.6rem;
}
.orgcard__area .ico {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------ 22. SUBMIT ------------------------------ */
.submit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.submit__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.submit__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.submit__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.submit__card:hover .submit__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(74, 124, 89, 0.18);
}
.submit__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.submit__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}

/* -------------------------------- 23. FAQ ------------------------------- */
/* Signature: each answer is its own card; the toggle is a + that becomes a
   filled −, and the open card takes an accent border. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.faq__item.is-open {
  border-color: var(--terra);
  box-shadow: var(--sh-sm);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 1rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.faq__q:hover {
  color: var(--terra-deep);
}
.faq__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--terra-deep);
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--sans);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.faq__item.is-open .faq__toggle {
  background: var(--terra);
  color: #fff;
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.9688rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------- 24. FINAL / NEWS --------------------------- */
/* Photo + scrim, same construction as the hero: an oversized img absorbs the
   parallax translate without ever showing an edge, and the scrim is a tinted
   version of --terra rather than a flat color so white text keeps the same
   contrast as the old solid background (verified against rendered pixels,
   see PRODUCT.md). */
.finalcta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.finalcta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.finalcta__bg img {
  /* This is a full-bleed banner, not a small framed photo, so the parallax
     needs to move far more than the 22-26px used for the contained photos
     elsewhere (.media-figure) or it reads as static — max shift here is
     data-parallax/2 = 65px, so the oversize buffer must clear that on both
     edges with room to spare. */
  position: absolute;
  inset: -90px 0;
  width: 100%;
  height: calc(100% + 180px);
  object-fit: cover;
  object-position: 50% 38%;
  will-change: transform;
}
.finalcta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Opacities set from a measured worst-case pixel under the paragraph text
     (a bright sky band in the source photo), not chosen by eye — see
     PRODUCT.md. A lighter pass was tried at half these values but measured
     2.17:1/3.08:1 worst-case (fails the 3:1/4.5:1 AA floor for the heading
     and paragraph); these values are about 18% lighter than the original
     tuning and measure 4.22:1/4.73:1 worst-case, the lightest this scrim
     can go with a safe margin over the AA floor. Darker than the hero's
     scrim because this text has no text-shadow to fall back on. */
  background: linear-gradient(
    160deg,
    rgba(140, 58, 28, 0.78) 0%,
    rgba(156, 66, 33, 0.74) 45%,
    rgba(140, 58, 28, 0.79) 100%
  );
}
.finalcta {
  text-align: center;
}
.finalcta p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.finalcta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.news__intro p {
  color: var(--ink-soft);
  margin: 0;
}
.news__aside {
  display: flex;
  flex-direction: column;
}
.news__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 26rem;
  margin: 0 0 0.85rem;
}
.news__form .field {
  width: 100%;
  margin: 0;
}

/* ------------------------------ 25. FOOTER ------------------------------ */
.footer {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.78);
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 0.5rem;
}
.footer__brand .brand__mark {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--cream);
  margin-bottom: 0.85rem;
}
.footer__brand p {
  font-size: 0.9375rem;
  max-width: 32ch;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.35rem;
  font-size: 0.9375rem;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer__contact .ico {
  color: var(--blush);
}
.footer a {
  color: rgba(253, 248, 240, 0.8);
  text-decoration: none;
}
/* .footer a:hover {
  color: var(--white);
  text-decoration: underline;
} */

.footer__col h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.footer__col button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.8);
  font-size: 0.9375rem;
  text-align: left;
}
.footer__col button:hover {
   color: var(--blush);

}
.footer__soon {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(253, 248, 240, 0.5);
}

.footer__social {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.35rem;
}
.footer__social a {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(253, 248, 240, 0.09);
  border: 1px solid rgba(253, 248, 240, 0.18);
  color: rgba(253, 248, 240, 0.85);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
/* .footer a:hover underlines by default, which looks broken on an icon. */
.footer__social a:hover {
 /*  background: rgba(253, 248, 240, 0.2);
  border-color: rgba(253, 248, 240, 0.4);
  color: var(--white); */
  text-decoration: none;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(253, 248, 240, 0.14);
  margin-top: 2.5rem;
  padding-block: 1.4rem;
  font-size: 0.8438rem;
}
.footer__legal p {
  margin: 0;
}

/* ------------------------------ 26. FORMS ------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.15rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label,
.fieldset legend {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.req {
  color: var(--terra-deep);
}
.opt {
  font-weight: 400;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-btn);
  padding: 0.75rem 0.9rem;
  min-height: 2.875rem;
  width: 100%;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.field textarea {
  min-height: auto;
  resize: vertical;
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #8a8578;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-soft);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--terra-deep);
  box-shadow: 0 0 0 3px rgba(156, 66, 33, 0.14);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #a3252a;
  background: #fdf4f4;
}
.field__err {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #a3252a;
  margin: 0;
}

.field--search {
  position: relative;
}
.field--search .field__ico {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.field--search input {
  padding-left: 2.7rem;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.checks p,
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
}
.check:hover {
  border-color: var(--line-strong);
}
.check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.12rem;
  accent-color: var(--terra);
}
.check:has(input:checked) {
  border-color: var(--terra);
  background: var(--terra-100);
}
/* Sits directly on the section background instead of in a bordered field. */
.news__form .check {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.news__form .check:has(input:checked) {
  background: none;
}

.form__foot {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}
.form__fine {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0;
}

.formstatus {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.formstatus.is-ok {
  color: var(--sage-deep);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.9rem 1.05rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
}
.formstatus.is-bad {
  color: #a3252a;
}

/* ------------------------------ 27. MODALS ------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: end center;
}
.modal[hidden] {
  display: none;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(3px);
  animation: fade 0.2s ease;
  border: 0;
}
.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: min(92svh, 60rem);
  background: var(--cream);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-lg);
  animation: rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal__panel--wide {
  width: min(100%, 68rem);
}

@media (min-width: 720px) {
  .modal {
    place-items: center;
    padding: 1.5rem;
  }
  .modal__panel {
    border-radius: var(--r-lg);
    max-height: min(90svh, 60rem);
  }
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal__head h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin: 0;
}
.modal__head .eyebrow {
  margin-bottom: 0.6rem;
}
.modal__x {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
}
.modal__x:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 2rem;
  -webkit-overflow-scrolling: touch;
}
.modal__lede {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.modal__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.modal__foot p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------- 28. TABS ------------------------------ */
.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.tab {
  flex: 1;
  min-height: 2.625rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition:
    background 0.16s,
    color 0.16s,
    box-shadow 0.16s;
}
.tab:hover {
  color: var(--ink);
}
.tab.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}

/* ----------------------------- 29. CALENDAR ----------------------------- */
.calbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.calnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calnav__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.calnav__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}
.calnav__label {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  min-width: 11ch;
  text-align: center;
}
.calviews {
  display: flex;
  gap: 0.4rem;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.cal__dow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
}
.calday {
  position: relative;
  min-height: 5.5rem;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  font: inherit;
  color: inherit;
}
.calday:not(.is-muted) {
  cursor: pointer;
  transition:
    background var(--t-ui),
    border-color var(--t-ui),
    box-shadow var(--t-ui),
    transform var(--t-ui);
}
.calday:not(.is-muted):hover {
  background: var(--terra-100);
  border-color: var(--terra);
  transform: translateY(-1px);
}
.calday.is-muted {
  background: transparent;
  border-color: transparent;
}
.calday.is-muted .calday__n {
  color: #c3b8a6;
}
.calday:not(.has-events):not(.is-muted) {
  background: transparent;
  border-color: var(--line);
}
.calday.has-events {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}
.calday.is-selected {
  background: var(--terra-100);
  border-color: var(--terra);
  box-shadow: 0 0 0 2px rgba(192, 86, 33, 0.25);
}
.calday.is-today .calday__n {
  background: var(--ink);
  color: var(--cream);
}
.calday__n {
  align-self: flex-start;
  min-width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calday__pip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.calday__pip i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.calday__more {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: auto;
}
.cal__hint {
  margin: 1rem 0 0;
  font-size: 0.8438rem;
  color: var(--ink-soft);
  text-align: center;
}

.callist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.callist__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: var(--sh-sm);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.callist__item:hover {
  border-color: var(--terra);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.callist__date {
  flex: none;
  text-align: center;
  min-width: 3.25rem;
  line-height: 1.1;
}
.callist__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.callist__date span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.callist__main {
  flex: 1;
  min-width: 0;
}
.callist__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0.2rem 0 0.2rem;
}
.callist__meta {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  margin: 0;
}
.callist__empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}

.caldetail {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.caldetail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.caldetail__head h3 {
  font-size: 1.25rem;
  margin: 0;
}
.caldetail__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--cream-2);
  border-radius: var(--r-btn);
}
.caldetail__empty p {
  margin: 0;
  color: var(--ink-soft);
}

/* --------------------------- 30. EVENT DETAIL --------------------------- */
.evt__media {
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 1.35rem;
  aspect-ratio: 16 / 9;
  background: var(--cream-2);
}
.evt__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evt__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.evt__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.85rem 0.95rem;
}
.evt__fact .ico {
  color: var(--terra-deep);
  margin-top: 0.1rem;
}
.evt__fact dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.evt__fact dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.evt__desc {
  color: var(--ink-soft);
  margin-bottom: 1.35rem;
}
.evt__notes {
  display: flex;
  gap: 0.7rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
  padding: 0.9rem 1.05rem;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.evt__notes .ico {
  color: var(--sage-deep);
  flex: none;
}
.evt__rsvp {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.45rem;
  box-shadow: var(--sh-sm);
}
.evt__rsvp h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.evt__spots {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}
.evt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------- 31. ACCORDION ----------------------------- */
.acc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.acc__item.is-open {
  border-color: var(--sage);
  box-shadow: var(--sh-sm);
}
.acc__q {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 1rem 1.15rem;
}
.acc__q:hover {
  background: var(--cream);
}
.acc__ic {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.acc__label {
  flex: 1;
  min-width: 0;
}
.acc__label b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.acc__label span {
  font-size: 0.8438rem;
  color: var(--ink-soft);
}
.acc__chev {
  flex: none;
  color: var(--ink-soft);
  transition: transform 0.22s;
}
.acc__item.is-open .acc__chev {
  transform: rotate(180deg);
}
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.acc__item.is-open .acc__a {
  grid-template-rows: 1fr;
}
.acc__a > div {
  overflow: hidden;
}
.acc__files {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.15rem 1.15rem;
}
/* A referral to an outside provider, not one of our own files. The row is a
   div rather than an anchor because it carries two separate destinations —
   the provider's site and a tel: link — and an anchor cannot nest one. */
.resorg {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.8rem 0.95rem;
}
.resorg:hover {
  border-color: var(--sage);
}
.resorg__ic {
  flex: none;
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.resorg__ic svg {
  width: 1.25rem;
  height: 1.25rem;
}
.resorg__main {
  flex: 1;
  min-width: 0;
}
.resorg__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.resorg__name:hover {
  color: var(--sage-deep);
  text-decoration: underline;
}
.resorg__who {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.resorg__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.15rem;
}
.resorg__tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  white-space: nowrap;
}

.resorg__tel em {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .resorg {
    flex-wrap: wrap;
  }
  .resorg__tel {
    width: 100%;
    padding-left: 2.1rem;
  }
}

/* ----------------------------- 32. REVEALS ------------------------------ */
/* main.js strips .reveal once the entrance finishes so a component's own
   hover transitions are not permanently overridden by the reveal timing. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slow) ease,
    transform var(--t-slow) ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Failsafe: anything left marked but never animated must still be visible. */
[data-revealed] {
  opacity: 1;
}

/* ---------------------------- 33. RESPONSIVE ---------------------------- */
@media (max-width: 1080px) {
  .quick {
    grid-template-columns: repeat(2, 1fr);
  }
  .events {
    grid-template-columns: repeat(2, 1fr);
  }
  .orgs {
    grid-template-columns: repeat(2, 1fr);
  }
  .restiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* The 7 chips no longer fit in one row below this width — centering an
     overflowing scroll container hides the "All" chip at the default
     scroll position, so fall back to left-aligned + scroll here. */
  #orgFilters {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-btn);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9063rem;
    font-weight: 700;
    box-shadow: var(--sh-sm);
  }
  .nav-toggle__bars {
    display: grid;
    gap: 4px;
  }
  .nav-toggle__bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition:
      transform 0.2s,
      opacity 0.2s;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    padding: 1.25rem var(--gut) 1.75rem;
    max-height: calc(100svh - 7rem);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__menu a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
  }
  .nav__menu a:hover {
    border-bottom-color: var(--line);
  }
  .nav__tools {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nav__tools .btn {
    width: 100%;
  }

  /* The sticky intro column stops being useful once it is full-width. */
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .split__intro {
    position: static;
  }
  .split__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .about,
  .calcta,
  .involve__layout,
  .reasons,
  .news {
    grid-template-columns: 1fr;
  }
  .about {
    margin-bottom: 2.5rem;
  }
  .media-figure {
    aspect-ratio: 16 / 10;
  }
  .about__media {
    order: -1;
  }
  .calcta__preview {
    max-width: 26rem;
  }
  .orgs--modal {
    grid-template-columns: 1fr;
  }
  .submit {
    grid-template-columns: 1fr;
  }
  .topbar__tagline {
    display: none;
  }
  .topbar__inner {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .nav-toggle {
    padding: 0.5rem 0.65rem;
  }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 640px) {
  .quick,
  .involve,
  .events,
  .orgs,
  .restiles {
    grid-template-columns: 1fr;
  }

  /* Once these tiles go full width, the desktop stack (icon above the label)
     leaves most of the card empty. Re-lay them as icon on the left with the
     label and count beside it, and size the content up to match the new
     width. Grid rather than flex so the icon can span both text rows without
     adding a wrapper element to the markup. */
  .restile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.1rem;
    padding: 1rem 1.15rem;
  }
  .restile__icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
  }
  .restile__icon .ico {
    width: 1.75rem;
    height: 1.75rem;
  }
  .restile__name {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    font-size: 1.0625rem;
  }
  .restile__count {
    grid-area: 2 / 2 / 3 / 3;
    align-self: start;
    font-size: 0.875rem;
  }
  /* Single column on a phone, so centre the whole footer rather than leaving
     four left-aligned stacks against a full-width dark band. */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer__brand p {
    max-width: none;
  }
  .footer__contact li {
    justify-content: center;
  }
  .footer__col ul {
    align-items: center;
  }
  .footer__col button {
    text-align: center;
  }
  /* 44px, not the 36px used on desktop: these are the only icon-only targets
     in the footer and they are thumb-operated here. */
  .footer__social {
    justify-content: center;
  }
  .footer__social a {
    width: 2.75rem;
    height: 2.75rem;
  }
  /* column-reverse, so the policy links sit above the copyright without
     reordering the markup (which keeps the DOM order sensible for readers). */
  .footer__legal {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  .news__form {
    max-width: none;
  }
  .news__form .btn {
    width: 100%;
  }
  .hero {
    min-height: auto;
    padding-block: 3rem 3.5rem;
  }
  .hero__title {
    max-width: none;
  }
  .media-figure {
    border-radius: 20px 20px 20px 60px;
  }
  .calnav {
    width: 100%;
    justify-content: space-between;
  }
  .calnav__label {
    font-size: 1.125rem;
    min-width: 0;
  }
  .calbar {
    gap: 0.75rem;
  }
  .cal {
    gap: 0.2rem;
  }
  .calday {
    min-height: 3.5rem;
    padding: 0.25rem;
  }
  .calday__pip {
    display: none;
  }
  .calday.has-events::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terra);
    margin-inline: auto;
  }
  .caldetail__empty {
    align-items: flex-start;
    flex-direction: column;
  }
  .marquee {
    min-height: 5.6rem;
  }
  .marquee__chip {
    width: 10.5rem;
    height: 5rem;
    padding: 0.55rem 0.9rem;
    margin-right: 0.7rem;
  }
  .marquee__chip img {
    max-width: 8.7rem;
    max-height: 3.75rem;
  }
  .marquee__chip--text {
    font-size: 0.9063rem;
  }
  .topbar__links {
    gap: 0.85rem;
    font-size: 0.8125rem;
  }
  .section-head {
    margin-bottom: 2rem;
  }
}

/* ------------------------- 34. REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero__title em::after {
    transform: scaleX(1);
  }
  .marquee__track {
    animation: none;
  }
  .hero__scroll-line {
    animation: none;
  }
  .btn:hover,
  .quick__card:hover,
  .eventcard:hover,
  .involve__card:hover,
  .submit__card:hover,
  .restile:hover,
  .orgcard:hover,
  .chip:hover,
  .callist__item:hover {
    transform: none;
  }
  .eventcard:hover .eventcard__media img {
    transform: none;
  }
}

/* ------------------------------ 35. PRINT ------------------------------- */
@media print {
  .topbar,
  .site-header,
  .hero__video,
  .hero__scroll,
  .hero__badge,
  .modal,
  .news__form,
  .nav-toggle,
  .marquee,
  .watermark {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .section {
    padding-block: 1.5rem;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split__intro {
    position: static;
  }
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
  }
}

/* Source extracted CSS */

/* From assets/css/styles.css */
/* =============================================================================
   Community Schedule — Clark County, Nevada

   Design language follows the Aspire ABA RevSite (the reference the client
   chose): pill eyebrows with a colour dot, centred section heads, 10px
   buttons with translucent secondaries, 28px cards, organic asymmetric media
   frames with a floating badge, sticky editorial splits, bordered reason
   lists, a script accent, a marquee band, and soft scroll parallax.
   Palette and display face are this brand's own.

   All colour pairs verified against WCAG 2.2 AA — table in PRODUCT.md.
   ========================================================================== */

/* ------------------------------- 1. TOKENS ------------------------------- */
:root {
  --cream: #fdf8f0;
  --cream-2: #f5ede1;
  --white: #ffffff;
  --ink: #1f2933;
  --ink-soft: #52606d;
  --terra: #c05621;
  --terra-deep: #9c4221;
  --terra-100: #fbede3;
  --blush: #e8a87c; /* light accent for dark grounds */
  --sage: #4a7c59;
  --sage-deep: #35603f;
  --sage-100: #eaf0ea;
  --line: #e7dccb;
  --line-strong: #8c7b62;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:
    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --script: 'Caveat', 'Segoe Script', cursive;

  --r-sm: 8px;
  --r-btn: 10px;
  --r: 16px;
  --r-lg: 28px;
  --r-organic: 26px 26px 26px 84px;

  --sh-sm: 0 2px 10px rgba(31, 41, 51, 0.06);
  --sh-md: 0 12px 30px rgba(31, 41, 51, 0.1);
  --sh-lg: 0 30px 60px rgba(31, 41, 51, 0.14);

  /* Aspire's gutter is fluid and generous and its container has no max-width.
     Matching the gutter exactly; the cap keeps ultrawide screens sane. */
  --gut: clamp(1.25rem, 6vw, 70px);
  --sec: clamp(3.5rem, 8vw, 7rem);
  --max: 1560px;
  --nav-h: 7.1rem; /* re-measured in px by main.js */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* house easing */
  --t-ui: 0.2s; /* buttons, links, chips */
  --t-card: 0.25s; /* cards, plates */
  --t-slow: 0.7s; /* reveals, image scale */
}

/* ------------------------------- 2. RESET -------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0313rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.9rem);
}
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra-deep);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--terra-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--terra);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ----------------------------- 3. UTILITIES ------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow {
  max-width: 780px;
}

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

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--cream);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--terra-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.9;
}
.ico--flip {
  transform: scaleX(-1);
}

/* In-page labels read as part of the editorial rhythm, not as repeated pills —
   Aspire overrides its own pill for section eyebrows and keeps it only where
   the label sits on imagery or a dark ground. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--terra-deep);
  margin: 0 0 1rem;
}
/* Pill + dot: hero, dark bands, and modal heads. */
.hero .eyebrow,
.section--dark .eyebrow,
.section--terra .eyebrow,
.modal__head .eyebrow {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero .eyebrow::before,
.section--dark .eyebrow::before,
.section--terra .eyebrow::before,
.modal__head .eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blush);
  flex: none;
}
.modal__head .eyebrow {
  background: var(--terra-100);
  border-color: #f0dccb;
  color: var(--terra-deep);
}
.modal__head .eyebrow::before {
  background: var(--terra);
}

.lead {
  font-size: clamp(1.0313rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 62ch;
}
.script-accent {
  font-family: var(--script);
  color: var(--terra-deep);
  font-size: 1.7em;
  line-height: 1;
  font-weight: 600;
}
.fine-print {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

.section {
  padding-block: 80px;
  position: relative;
}
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.section--tight {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.section--cream {
  background: var(--cream-2);
}
.section--band {
  background: var(--sage-100);
  padding-block:80px;
}
.section--dark {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.section--dark h2,
.section--dark h3 {
  color: var(--cream);
}
.section--dark h2 em {
  color: var(--blush);
}
.section--terra {
  background: var(--terra);
  color: var(--white);
}
.section--terra h2 {
  color: var(--white);
}
.section--terra h2 em {
  color: #ffe6d2;
}

/* Signature: centred section head, CTA on its own line underneath. */
.section-head {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head .lead {
  margin: 0.9rem auto 0;
}
.section-head .section__sub {
  margin: 0.9rem auto 0;
}
.section-cta {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  text-align: center;
}
.section__title {
  margin-bottom: 0;
}
.section__sub {
  color: var(--ink-soft);
  font-size: 1.0313rem;
  max-width: 62ch;
  margin: 0;
}
.section--dark .lead,
.section--terra .lead,
.section--dark .section__sub,
.section--terra .section__sub {
  color: rgba(253, 248, 240, 0.84);
}

/* ------------------------------ 4. BUTTONS ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  min-height: 2.875rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--t-ui) var(--ease),
    box-shadow var(--t-ui) var(--ease),
    background var(--t-ui) var(--ease),
    color var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn--sm {
  padding: 0.6rem 1.05rem;
  font-size: 0.9rem;
  min-height: 2.5rem;
}
.btn--lg {
  padding: 1rem 1.6rem;
  font-size: 1.0625rem;
  min-height: 3.25rem;
}

.btn--primary {
  background: var(--terra);
  color: var(--white);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover {
  background: var(--terra-deep);
  color: var(--white);
  box-shadow: var(--sh-md);
}

/* Signature: outlined on a lightly blurred translucent wash. */
.btn--secondary,
.btn--ghost {
  background: rgba(192, 86, 33, 0.07);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--secondary:hover,
.btn--ghost:hover {
  background: rgba(192, 86, 33, 0.14);
  color: var(--terra-deep);
  border-color: var(--terra-deep);
}

.btn--cream {
  background: var(--cream);
  color: var(--ink);
}
.btn--cream:hover {
  background: var(--white);
  color: var(--ink);
}
.btn--outline-cream {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}
.btn--outline-cream:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-color: var(--white);
}

.hero .btn--secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
  color: #fff;
}

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--terra-deep);
}
.link-cta:hover {
  color: var(--terra);
}

/* --------------------------- 5. PILLS / CHIPS ---------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.pill .ico {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke-width: 2.1;
  color: var(--sage-deep);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.9rem;
}
.trust-row .pill {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
}
.trust-row .pill .ico {
  color: var(--blush);
}

#organizations .section-cta {
	margin-bottom: 0;
}

.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.filters--wrap {
  flex-wrap: wrap;
  overflow: visible;
}
.filters__count {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
#orgFilters {
  justify-content: center;
}
#orgCount {
  text-align: center;
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.375rem;
  padding: 0.45rem 1rem;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.chip:hover {
  border-color: var(--terra);
  color: var(--terra-deep);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: var(--sh-md);
}
.chip .ico {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------ 6. CALLOUTS ------------------------------ */
.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-left: 4px solid var(--sage);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
  font-size: 0.9688rem;
  box-shadow: var(--sh-sm);
}
.callout .ico {
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.callout p {
  margin: 0;
}
.callout--alert {
  border-left-color: var(--terra);
  background: var(--terra-100);
  border-color: #f0dccb;
}
.callout--alert .ico {
  color: var(--terra-deep);
}

/* ------------------------------- 7. TOPBAR ------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding-block: 0.35rem;
}
.topbar__tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.topbar__link {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.9);
  font-size: 0.8438rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topbar__link:hover {
	color: var(--blush);
	border-bottom-color: none;
	border: none;
}

/* ------------------------------- 8. HEADER ------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 248, 240, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.is-stuck {
  box-shadow: var(--sh-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.brand__mark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
  transition: font-size 0.25s ease;
}
.site-header.is-stuck .brand__mark {
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
}
.brand:hover .brand__mark {
  color: var(--terra-deep);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.nav__menu a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color var(--t-ui) var(--ease);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__menu a:hover {
  color: var(--terra-deep);
}
.nav__menu a:hover::after {
  transform: scaleX(1);
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: none;
}

/* -------------------------------- 9. HERO ------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(80svh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 10vh, 6rem) clamp(5.5rem, 13vh, 8rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      105deg,
      rgba(20, 14, 8, 0.8) 0%,
      rgba(20, 14, 8, 0.55) 44%,
      rgba(20, 14, 8, 0.18) 100%
    ),
    /* The last stop is the ground the overlay header's white type sits on,
       so it is set from a measured contrast reading, not by eye. */
      linear-gradient(
        to top,
        rgba(20, 14, 8, 0.72) 0%,
        rgba(20, 14, 8, 0.16) 42%,
        rgba(20, 14, 8, 0.3) 76%,
        rgba(20, 14, 8, 0.62) 100%
      );
}
.hero__inner {
  max-width: 46rem;
  margin-inline: 0;
  color: var(--cream);
}
.hero__title {
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 20ch;
  margin: 0;
}
/* Signature: the italic phrase draws its own underline in on load. */
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--blush);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.075em;
  border-radius: 6px;
  background: var(--blush);
  transform: scaleX(0);
  transform-origin: left;
  animation: heroUnderline 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s forwards;
}
@keyframes heroUnderline {
  to {
    transform: scaleX(1);
  }
}

.hero__sub {
  margin-top: 1.3rem;
  max-width: 52ch;
  color: rgba(253, 248, 240, 0.94);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* Signature: floating translucent card with a handwritten line. */
.hero__badge {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(2.5rem, 7vw, 4.5rem);
  z-index: 2;
  background: rgba(20, 14, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 1.15rem 1.35rem;
  max-width: 17.5rem;
}
.hero__badge .script-accent {
  color: var(--blush);
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.35rem;
}
.hero__badge p:last-child {
  color: #f2e7da;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 1100px) {
  .hero__badge {
    display: none;
  }
}

/* Signature: animated scroll rail. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(253, 248, 240, 0.72);
  text-decoration: none;
  font: 700 0.66rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll:hover {
  color: #fff;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    rgba(253, 248, 240, 0.75),
    rgba(253, 248, 240, 0)
  );
  animation: heroScroll 1.9s ease-in-out infinite;
}
@keyframes heroScroll {
  0%,
  100% {
    transform: scaleY(0.55);
    transform-origin: top;
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .hero__scroll {
    display: none;
  }
}

/* ------------------- 9b. OVERLAY HEADER OVER THE HERO -------------------
   The hero is pulled up behind the topbar and header so the footage runs
   edge to edge under them. The header stays a translucent blurred layer with
   white nav type until the reader has scrolled nearly past the hero, then
   flips to the opaque cream bar. --nav-h is measured in px by main.js. */
body.home .hero {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3.5rem));
/*   min-height: min(88svh, 48rem); */
}
body.home .topbar {
  position: relative;
  z-index: 110;
}

body.home .site-header {
  background: rgba(253, 248, 240, 0.1);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 24px rgba(20, 14, 8, 0.1);
  transition:
    background var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
body.home .site-header.is-stuck {
  background: rgba(253, 248, 240, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

/* One legible layer while transparent: everything goes white with a shadow. */
body.home .site-header:not(.is-stuck) .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(20, 14, 8, 0.45);
}
body.home .site-header:not(.is-stuck) .brand:hover .brand__mark,
body.home .site-header:not(.is-stuck) .nav__menu a:hover {
  color: var(--blush);
}
body.home .site-header:not(.is-stuck) .nav-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.home .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: #fff;
}
/* The open drawer is a cream panel, so its toggle goes back to ink. */
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle {
  background: var(--white);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.home.nav-open .site-header:not(.is-stuck) .nav-toggle__bars span {
  background: var(--ink);
}

/* Vertical kicker rail on the left margin. */
.hero__rail {
  position: absolute;
  left: clamp(0.7rem, 1.8vw, 1.6rem);
  top: 50%;
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.72);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero__rail::after {
  content: '';
  width: 1px;
  height: 66px;
  background: rgba(253, 248, 240, 0.42);
}
@media (max-width: 900px) {
  .hero__rail {
    display: none;
  }
}

/* --------------------------- 10. MEDIA FIGURES -------------------------- */
/* Signature: organic asymmetric frame + floating circular badge, and a
   slightly oversized image inside so the parallax shift never shows an edge. */
.media-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-organic);
  box-shadow: var(--sh-md);
  aspect-ratio: 4 / 5;
}
.media-figure picture {
  display: block;
  height: 100%;
}
.media-figure img {
  position: absolute;
  inset: -22px 0;
  width: 100%;
  height: calc(100% + 44px);
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}
.media-figure__mark {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--terra);
  color: #fff;
  box-shadow: 0 12px 26px rgba(31, 41, 51, 0.22);
}
.media-figure__mark svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The default 4/5 ratio is a tall portrait crop tuned for sections with a
   full paragraph of copy beside it. Paired with a short callout (a title,
   one paragraph, a button) it towers over the text and align-items: center
   strands the copy in the middle of a mostly-empty column. Both source
   photos this modifies are themselves landscape, so a 4/3 crop needs less
   aggressive cropping AND keeps the two columns close enough in height
   that centering them reads as a deliberate pairing, not a layout bug. */
.media-figure--wide {
  aspect-ratio: 4 / 3;
}

/* Real client photography in About. Only opacity and transform animate, so
   the crossfade stays smooth and never causes layout movement. */
.about-slideshow {
  isolation: isolate;
  background: var(--ink);
}
.about-slideshow__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.about-slideshow::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(transparent, rgba(31, 41, 51, 0.58));
  pointer-events: none;
}
.about-slideshow .about-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 1.1s var(--ease),
    transform 6.8s ease-out;
  will-change: opacity, transform;
}
.about-slideshow .about-slideshow__slide:nth-child(3) {
  object-position: 50% 38%;
}
.about-slideshow .about-slideshow__slide.is-active {
  opacity: 1;
  transform: scale(1.045);
}
.about-slideshow__caption {
  position: absolute;
  z-index: 2;
  left: 3.25rem;
  bottom: 1.15rem;
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(31, 41, 51, 0.5);
}
.about-slideshow .media-figure__mark {
  z-index: 3;
}

/* --------------------------- 11. MARQUEE BAND --------------------------- */
/* Signature: italic display type, masked edges, pause on hover. */
.marquee {
  overflow: hidden;
  min-height: 6.35rem;
  margin: 0 0 2rem;
  padding: 0.3rem 0;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
  animation: marquee 55s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.25s ease;
}
.marquee.is-ready .marquee__track {
  opacity: 1;
  animation-play-state: running;
}
.marquee.is-ready:hover .marquee__track {
  animation-play-state: paused;
}
/* Spacing lives on the chip as margin, not as gap on the track: the track
   holds the partner list twice and the -50% keyframe only lands seamlessly
   while both halves measure exactly the same, trailing space included. */
.marquee__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 13rem;
  height: 5.75rem;
  margin-right: 1rem;
  padding: 0.65rem 1.15rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.marquee__chip img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 10.75rem;
  max-height: 4.25rem;
  object-fit: contain;
  user-select: none;
}
/* Only for logos supplied as white-on-transparent — they vanish on the light
   band otherwise, and altering a third party's artwork is not an option. */
.marquee__chip--dark {
  background: var(--ink);
  border-color: var(--ink);
}
.marquee__chip--text {
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.18;
  color: var(--ink-soft);
  text-align: center;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------ 12. STICKY EDITORIAL SPLIT -------------------- */
/* Signature: a sticky intro column beside the content, carrying the CTA. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split__intro {
  position: sticky;
  top: calc(var(--nav-h) + 1.2rem);
}
.split__intro h2,
.split__intro h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.split__intro .lead {
  margin: 0;
}
.split__main {
  min-width: 0;
}

.split__aside {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.split__aside-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.split__aside-b {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.split__aside .btn {
  width: 100%;
  max-width: 17.5rem;
}
.aside-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
}
.aside-person img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--sh-sm);
}
.aside-person figcaption {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.split__aside-tel {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--terra-deep);
  text-decoration: none;
}
.split__aside-tel:hover {
  color: var(--terra);
}

.reasons__title {
  margin-bottom: 1.75rem;
}

/* Signature: three pillars side by side, not stacked rows. */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.reason__ic {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--terra-deep);
}
.reason__ic .ico {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}
.reason__txt h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}
.reason__txt p {
  margin: 0;
  color: var(--ink-soft);
}

/* ----------------------------- 13. WATERMARK ---------------------------- */
/* Signature: oversized mark bleeding off a dark section at very low opacity. */
.watermark {
  position: absolute;
  right: -30px;
  bottom: -70px;
  z-index: 0;
  color: #fff;
  opacity: 0.06;
  pointer-events: none;
  line-height: 0;
}
.watermark svg {
  width: min(70vw, 40rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
}

/* --------------------------- 14. QUICK ACCESS --------------------------- */
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.quick__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.quick__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.quick__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 0.35rem;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.quick__card:hover .quick__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.quick__icon--terra {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.quick__icon--sage {
  background: var(--sage-100);
  color: var(--sage-deep);
}
.quick__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
}
.quick__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.quick__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  margin-top: 0.35rem;
}
.quick__go .ico {
  transition: transform 0.18s;
}
.quick__card:hover .quick__go .ico {
  transform: translateX(3px);
}

/* ------------------------------ 16. EVENTS ------------------------------ */
.events {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.eventcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.eventcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.eventcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--cream-2);
  overflow: hidden;
}
.eventcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eventcard:hover .eventcard__media img {
  transform: scale(1.04);
}
.eventcard__date {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--cream);
  border-radius: 12px;
  padding: 0.4rem 0.6rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--sh-md);
  min-width: 3.25rem;
}
.eventcard__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.eventcard__date span {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-top: 0.2rem;
}
.eventcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.2rem;
  flex: 1;
}
.eventcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
}
.eventcard__cat .ico {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2;
}
.cat--terra {
  color: var(--terra-deep);
}
.cat--sage {
  color: var(--sage-deep);
}
.cat--ink {
  color: var(--ink-soft);
}
.eventcard__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.eventcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.eventcard__meta span {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.eventcard__meta .ico {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}
.eventcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.eventcard__org {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.tag .ico {
  width: 0.875rem;
  height: 0.875rem;
}
.tag--full {
  background: var(--terra-100);
  color: var(--terra-deep);
}
.tag--ext {
  background: var(--terra-100);
  color: var(--terra-deep);
}

.events__empty {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.events__empty p {
  color: var(--ink-soft);
}

/* ------------------------------ 17. ABOUT ------------------------------- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.about__body .lead {
  margin-bottom: 1em;
}
.about__body p {
  color: var(--ink-soft);
}
.about__signature {
  display: block;
  margin-top: 1.25rem !important;
  font-size: 2.1rem;
}

/* -------------------------- 18. CALENDAR CTA ---------------------------- */
.calcta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.calcta__body p {
  color: rgba(253, 248, 240, 0.84);
  font-size: 1.0313rem;
  margin-bottom: 1.75rem;
  max-width: 42ch;
}

.minical {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  box-shadow: var(--sh-lg);
  color: var(--ink);
}
.minical__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.minical__month {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}
.minical__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--terra-deep);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.minical__dow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.3rem;
}
.minical__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
button.minical__cell {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--t-ui),
    color var(--t-ui),
    transform var(--t-ui);
}
button.minical__cell:hover {
  background: var(--sage-100);
  color: var(--sage-deep);
  transform: translateY(-1px);
}
.minical__cell.is-muted {
  color: #bfb4a2;
}
.minical__cell.is-today {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
}
.minical__cell.has-events {
  background: var(--terra-100);
  color: var(--terra-deep);
  font-weight: 700;
}
.minical__cell.has-events.is-today {
  background: var(--terra);
  color: var(--white);
}
.minical__cell.has-events::after {
  content: '';
  position: absolute;
  bottom: 0.18rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------------------- 19. RESOURCES ----------------------------- */
/* Five columns match the five verified resource categories in the current
   handoff; responsive rules collapse the row cleanly below desktop. */
.restiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.restile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.05rem;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease),
    border-color var(--t-card) var(--ease);
}
.restile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.restile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.restile:hover::after {
  transform: scaleX(1);
}
.restile__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.restile__name {
  font-weight: 700;
  font-size: 0.9688rem;
  line-height: 1.25;
  color: var(--ink);
}
.restile__count {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.resources-section {
  position: relative;
  isolation: isolate;
}
.resources__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.resources__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.resources__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Only the top section-head text sits directly on the photo with no card
     behind it, so the scrim is strongest there and fades going down — the
     tiles, button and alert box are all opaque and stay legible regardless.
     See PRODUCT.md for the measured worst-case contrast. */
  background: linear-gradient(
    180deg,
    rgba(31, 41, 51, 0.88) 0%,
    rgba(31, 41, 51, 0.8) 32%,
    rgba(31, 41, 51, 0.5) 100%
  );
}

/* ---------------------------- 20. GET INVOLVED -------------------------- */
.involve__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.involve__media {
  aspect-ratio: 3 / 4;
}
.involve__body {
  display: flex;
  flex-direction: column;
}
.involve__intro {
  margin-bottom: 2rem;
}
.involve__intro .section__sub {
  margin: 0.9rem 0 1em;
}
.involve__intro h3 {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
/* Fixed at 2 columns rather than 4: this now sits in the narrower .85fr/1.15fr
   layout column beside the photo, not the full section width. */
.involve {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.involve__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.involve__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--terra);
}
.involve__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--terra-100);
  color: var(--terra-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.involve__icon .ico {
  width: 34px;
  height: 34px;
}
.involve__card:hover .involve__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(192, 86, 33, 0.18);
}
.involve__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.involve__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}
.involve__time {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sage-deep);
  background: var(--sage-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ------------------------------- 21. ORGS ------------------------------- */
.orgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.orgs--modal {
  grid-template-columns: repeat(2, 1fr);
}
.orgcard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.45rem 1.45rem 1.25rem;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
/* Static content — no lift. Aspire reserves the float for cards you can act on. */
.orgcard:hover {
  box-shadow: var(--sh-md);
  border-color: var(--line-strong);
}
.orgcard__head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.orgcard__mark {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
.orgcard__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.15rem;
}
.orgcard__type {
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.orgcard__blurb {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
  margin: 0;
}
.orgcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.orgcard__tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.orgcard__area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
/* Sara asked for outbound links in the directory, so each card carries its
   own website and phone. */
.directory-container {
	margin-top: 30px;
}
.orgcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}
.orgcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  transition: color var(--t-ui) var(--ease);
}
.orgcard__link:hover {
  color: var(--terra);
  text-decoration: underline;
}
.orgcard__link .ico {
  flex: none;
}

/* The external-registration panel leads with the outbound button. */
.evt__rsvp--external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.evt__rsvp--external .btn {
  margin-top: 0.6rem;
}
.orgcard__area .ico {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------ 22. SUBMIT ------------------------------ */
.submit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.submit__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.75rem);
  box-shadow: var(--sh-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.submit__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--sage);
}
.submit__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-100);
  color: var(--sage-deep);
  transition:
    transform var(--t-card) var(--ease),
    box-shadow var(--t-card) var(--ease);
}
.submit__card:hover .submit__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px var(--white),
    0 10px 20px rgba(74, 124, 89, 0.18);
}
.submit__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.submit__copy {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex: 1;
}

/* -------------------------------- 23. FAQ ------------------------------- */
/* Signature: each answer is its own card; the toggle is a + that becomes a
   filled −, and the open card takes an accent border. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.faq__item.is-open {
  border-color: var(--terra);
  box-shadow: var(--sh-sm);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 1rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.faq__q:hover {
  color: var(--terra-deep);
}
.faq__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--terra-deep);
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--sans);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.faq__item.is-open .faq__toggle {
  background: var(--terra);
  color: #fff;
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.9688rem;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------- 24. FINAL / NEWS --------------------------- */
/* Photo + scrim, same construction as the hero: an oversized img absorbs the
   parallax translate without ever showing an edge, and the scrim is a tinted
   version of --terra rather than a flat color so white text keeps the same
   contrast as the old solid background (verified against rendered pixels,
   see PRODUCT.md). */
.finalcta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.finalcta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.finalcta__bg img {
  /* This is a full-bleed banner, not a small framed photo, so the parallax
     needs to move far more than the 22-26px used for the contained photos
     elsewhere (.media-figure) or it reads as static — max shift here is
     data-parallax/2 = 65px, so the oversize buffer must clear that on both
     edges with room to spare. */
  position: absolute;
  inset: -90px 0;
  width: 100%;
  height: calc(100% + 180px);
  object-fit: cover;
  object-position: 50% 38%;
  will-change: transform;
}
.finalcta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Opacities set from a measured worst-case pixel under the paragraph text
     (a bright sky band in the source photo), not chosen by eye — see
     PRODUCT.md. A lighter pass was tried at half these values but measured
     2.17:1/3.08:1 worst-case (fails the 3:1/4.5:1 AA floor for the heading
     and paragraph); these values are about 18% lighter than the original
     tuning and measure 4.22:1/4.73:1 worst-case, the lightest this scrim
     can go with a safe margin over the AA floor. Darker than the hero's
     scrim because this text has no text-shadow to fall back on. */
  background: linear-gradient(
    160deg,
    rgba(140, 58, 28, 0.78) 0%,
    rgba(156, 66, 33, 0.74) 45%,
    rgba(140, 58, 28, 0.79) 100%
  );
}
.finalcta {
  text-align: center;
}
.finalcta p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.finalcta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.news__intro p {
  color: var(--ink-soft);
  margin: 0;
}
.news__aside {
  display: flex;
  flex-direction: column;
}
.news__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 26rem;
  margin: 0 0 0.85rem;
}
.news__form .field {
  width: 100%;
  margin: 0;
}

/* ------------------------------ 25. FOOTER ------------------------------ */
.footer {
  background: var(--ink);
  color: rgba(253, 248, 240, 0.78);
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 0.5rem;
}
.footer__brand .brand__mark {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--cream);
  margin-bottom: 0.85rem;
}
.footer__brand p {
  font-size: 0.9375rem;
  max-width: 32ch;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.35rem;
  font-size: 0.9375rem;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer__contact .ico {
  color: var(--blush);
}
.footer a {
  color: rgba(253, 248, 240, 0.8);
  text-decoration: none;
}


.footer__col h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 1rem;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.footer__col button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(253, 248, 240, 0.8);
  font-size: 0.9375rem;
  text-align: left;
}
.footer__col button:hover {
   color: var(--blush);

}
.footer__soon {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(253, 248, 240, 0.5);
}

.footer__social {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.35rem;
}
.footer__social a {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(253, 248, 240, 0.09);
  border: 1px solid rgba(253, 248, 240, 0.18);
  color: rgba(253, 248, 240, 0.85);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
/* .footer a:hover underlines by default, which looks broken on an icon. */
.footer__social a:hover {
  background: rgba(253, 248, 240, 0.2);
  border-color: rgba(253, 248, 240, 0.4);
  color: var(--white);
  text-decoration: none;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(253, 248, 240, 0.14);
  margin-top: 2.5rem;
  padding-block: 1.4rem;
  font-size: 0.8438rem;
}
.footer__legal p {
  margin: 0;
}

/* ------------------------------ 26. FORMS ------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.15rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label,
.fieldset legend {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.req {
  color: var(--terra-deep);
}
.opt {
  font-weight: 400;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-btn);
  padding: 0.75rem 0.9rem;
  min-height: 2.875rem;
  width: 100%;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.field textarea {
  min-height: auto;
  resize: vertical;
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #8a8578;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-soft);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--terra-deep);
  box-shadow: 0 0 0 3px rgba(156, 66, 33, 0.14);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #a3252a;
  background: #fdf4f4;
}
.field__err {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #a3252a;
  margin: 0;
}

.field--search {
  position: relative;
}
.field--search .field__ico {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.field--search input {
  padding-left: 2.7rem;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.checks p,
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}
.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  cursor: pointer;
  padding: 0.6rem 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
}
.check:hover {
  border-color: var(--line-strong);
}
.check input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.12rem;
  accent-color: var(--terra);
}
.check:has(input:checked) {
  border-color: var(--terra);
  background: var(--terra-100);
}
/* Sits directly on the section background instead of in a bordered field. */
.news__form .check {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.news__form .check:has(input:checked) {
  background: none;
}

.form__foot {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}
.form__fine {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0;
}

.formstatus {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.formstatus.is-ok {
  color: var(--sage-deep);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.9rem 1.05rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
}
.formstatus.is-bad {
  color: #a3252a;
}

/* ------------------------------ 27. MODALS ------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: end center;
}
.modal[hidden] {
  display: none;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(3px);
  animation: fade 0.2s ease;
  border: 0;
}
.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: min(92svh, 60rem);
  background: var(--cream);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-lg);
  animation: rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal__panel--wide {
  width: min(100%, 68rem);
}

@media (min-width: 720px) {
  .modal {
    place-items: center;
    padding: 1.5rem;
  }
  .modal__panel {
    border-radius: var(--r-lg);
    max-height: min(90svh, 60rem);
  }
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal__head h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin: 0;
}
.modal__head .eyebrow {
  margin-bottom: 0.6rem;
}
.modal__x {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
}
.modal__x:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem clamp(1.25rem, 3vw, 2rem) 2rem;
  -webkit-overflow-scrolling: touch;
}
.modal__lede {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.modal__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.modal__foot p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------- 28. TABS ------------------------------ */
.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.tab {
  flex: 1;
  min-height: 2.625rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition:
    background 0.16s,
    color 0.16s,
    box-shadow 0.16s;
}
.tab:hover {
  color: var(--ink);
}
.tab.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}

/* ----------------------------- 29. CALENDAR ----------------------------- */
.calbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.calnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calnav__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.calnav__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}
.calnav__label {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  min-width: 11ch;
  text-align: center;
}
.calviews {
  display: flex;
  gap: 0.4rem;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}
.cal__dow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
}
.calday {
  position: relative;
  min-height: 5.5rem;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  font: inherit;
  color: inherit;
}
.calday:not(.is-muted) {
  cursor: pointer;
  transition:
    background var(--t-ui),
    border-color var(--t-ui),
    box-shadow var(--t-ui),
    transform var(--t-ui);
}
.calday:not(.is-muted):hover {
  background: var(--terra-100);
  border-color: var(--terra);
  transform: translateY(-1px);
}
.calday.is-muted {
  background: transparent;
  border-color: transparent;
}
.calday.is-muted .calday__n {
  color: #c3b8a6;
}
.calday:not(.has-events):not(.is-muted) {
  background: transparent;
  border-color: var(--line);
}
.calday.has-events {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}
.calday.is-selected {
  background: var(--terra-100);
  border-color: var(--terra);
  box-shadow: 0 0 0 2px rgba(192, 86, 33, 0.25);
}
.calday.is-today .calday__n {
  background: var(--ink);
  color: var(--cream);
}
.calday__n {
  align-self: flex-start;
  min-width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calday__pip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.calday__pip i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.calday__more {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: auto;
}
.cal__hint {
  margin: 1rem 0 0;
  font-size: 0.8438rem;
  color: var(--ink-soft);
  text-align: center;
}

.callist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.callist__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: var(--sh-sm);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.callist__item:hover {
  border-color: var(--terra);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.callist__date {
  flex: none;
  text-align: center;
  min-width: 3.25rem;
  line-height: 1.1;
}
.callist__date b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
}
.callist__date span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-deep);
}
.callist__main {
  flex: 1;
  min-width: 0;
}
.callist__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0.2rem 0 0.2rem;
}
.callist__meta {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  margin: 0;
}
.callist__empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}

.caldetail {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.caldetail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.caldetail__head h3 {
  font-size: 1.25rem;
  margin: 0;
}
.caldetail__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--cream-2);
  border-radius: var(--r-btn);
}
.caldetail__empty p {
  margin: 0;
  color: var(--ink-soft);
}

/* --------------------------- 30. EVENT DETAIL --------------------------- */
.evt__media {
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 1.35rem;
  aspect-ratio: 16 / 9;
  background: var(--cream-2);
}
.evt__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evt__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.evt__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.85rem 0.95rem;
}
.evt__fact .ico {
  color: var(--terra-deep);
  margin-top: 0.1rem;
}
.evt__fact dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.evt__fact dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.evt__desc {
  color: var(--ink-soft);
  margin-bottom: 1.35rem;
}
.evt__notes {
  display: flex;
  gap: 0.7rem;
  background: var(--sage-100);
  border-radius: var(--r-btn);
  padding: 0.9rem 1.05rem;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.evt__notes .ico {
  color: var(--sage-deep);
  flex: none;
}
.evt__rsvp {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.45rem;
  box-shadow: var(--sh-sm);
}
.evt__rsvp h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.evt__spots {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}
.evt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

/* ---------------------------- 31. ACCORDION ----------------------------- */
.acc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.acc__item.is-open {
  border-color: var(--sage);
  box-shadow: var(--sh-sm);
}
.acc__q {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 1rem 1.15rem;
}
.acc__q:hover {
  background: var(--cream);
}
.acc__ic {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--sage-100);
  color: var(--sage-deep);
}
.acc__label {
  flex: 1;
  min-width: 0;
}
.acc__label b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.acc__label span {
  font-size: 0.8438rem;
  color: var(--ink-soft);
}
.acc__chev {
  flex: none;
  color: var(--ink-soft);
  transition: transform 0.22s;
}
.acc__item.is-open .acc__chev {
  transform: rotate(180deg);
}
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}
.acc__item.is-open .acc__a {
  grid-template-rows: 1fr;
}
.acc__a > div {
  overflow: hidden;
}
.acc__files {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.15rem 1.15rem;
}
/* A referral to an outside provider, not one of our own files. The row is a
   div rather than an anchor because it carries two separate destinations —
   the provider's site and a tel: link — and an anchor cannot nest one. */
.resorg {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.8rem 0.95rem;
}
.resorg:hover {
  border-color: var(--sage);
}
.resorg__ic {
  flex: none;
  color: var(--sage-deep);
  margin-top: 0.1rem;
}
.resorg__ic svg {
  width: 1.25rem;
  height: 1.25rem;
}
.resorg__main {
  flex: 1;
  min-width: 0;
}
.resorg__name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.resorg__name:hover {
  color: var(--sage-deep);
  text-decoration: underline;
}
.resorg__who {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.resorg__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.15rem;
}
.resorg__tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--terra-deep);
  text-decoration: none;
  white-space: nowrap;
}
.resorg__tel:hover {
	text-decoration: none!important;
	color: var(--line-strong);
}
.resorg__tel em {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .resorg {
    flex-wrap: wrap;
  }
  .resorg__tel {
    width: 100%;
    padding-left: 2.1rem;
  }
}

/* ----------------------------- 32. REVEALS ------------------------------ */
/* main.js strips .reveal once the entrance finishes so a component's own
   hover transitions are not permanently overridden by the reveal timing. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slow) ease,
    transform var(--t-slow) ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Failsafe: anything left marked but never animated must still be visible. */
[data-revealed] {
  opacity: 1;
}

/* ---------------------------- 33. RESPONSIVE ---------------------------- */
@media (max-width: 1080px) {
  .quick {
    grid-template-columns: repeat(2, 1fr);
  }
  .events {
    grid-template-columns: repeat(2, 1fr);
  }
  .orgs {
    grid-template-columns: repeat(2, 1fr);
  }
  .restiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* The 7 chips no longer fit in one row below this width — centering an
     overflowing scroll container hides the "All" chip at the default
     scroll position, so fall back to left-aligned + scroll here. */
  #orgFilters {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-btn);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.9063rem;
    font-weight: 700;
    box-shadow: var(--sh-sm);
  }
  .nav-toggle__bars {
    display: grid;
    gap: 4px;
  }
  .nav-toggle__bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition:
      transform 0.2s,
      opacity 0.2s;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    padding: 1.25rem var(--gut) 1.75rem;
    max-height: calc(100svh - 7rem);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__menu a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
  }
  .nav__menu a:hover {
    border-bottom-color: var(--line);
  }
  .nav__tools {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .nav__tools .btn {
    width: 100%;
  }

  /* The sticky intro column stops being useful once it is full-width. */
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .split__intro {
    position: static;
  }
  .split__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .about,
  .calcta,
  .involve__layout,
  .reasons,
  .news {
    grid-template-columns: 1fr;
  }
  .about {
    margin-bottom: 2.5rem;
  }
  .media-figure {
    aspect-ratio: 16 / 10;
  }
  .about__media {
    order: -1;
  }
  .calcta__preview {
    max-width: 26rem;
  }
  .orgs--modal {
    grid-template-columns: 1fr;
  }
  .submit {
    grid-template-columns: 1fr;
  }
  .topbar__tagline {
    display: none;
  }
  .topbar__inner {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .nav-toggle {
    padding: 0.5rem 0.65rem;
  }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 640px) {
  .quick,
  .involve,
  .events,
  .orgs,
  .restiles {
    grid-template-columns: 1fr;
  }

  /* Once these tiles go full width, the desktop stack (icon above the label)
     leaves most of the card empty. Re-lay them as icon on the left with the
     label and count beside it, and size the content up to match the new
     width. Grid rather than flex so the icon can span both text rows without
     adding a wrapper element to the markup. */
  .restile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.1rem;
    padding: 1rem 1.15rem;
  }
  .restile__icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
  }
  .restile__icon .ico {
    width: 1.75rem;
    height: 1.75rem;
  }
  .restile__name {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    font-size: 1.0625rem;
  }
  .restile__count {
    grid-area: 2 / 2 / 3 / 3;
    align-self: start;
    font-size: 0.875rem;
  }
  /* Single column on a phone, so centre the whole footer rather than leaving
     four left-aligned stacks against a full-width dark band. */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer__brand p {
    max-width: none;
  }
  .footer__contact li {
    justify-content: center;
  }
  .footer__col ul {
    align-items: center;
  }
  .footer__col button {
    text-align: center;
  }
  /* 44px, not the 36px used on desktop: these are the only icon-only targets
     in the footer and they are thumb-operated here. */
  .footer__social {
    justify-content: center;
  }
  .footer__social a {
    width: 2.75rem;
    height: 2.75rem;
  }
  /* column-reverse, so the policy links sit above the copyright without
     reordering the markup (which keeps the DOM order sensible for readers). */
  .footer__legal {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  .news__form {
    max-width: none;
  }
  .news__form .btn {
    width: 100%;
  }
  .hero {
    min-height: auto;
    padding-block: 3rem 3.5rem;
  }
  .hero__title {
    max-width: none;
  }
  .media-figure {
    border-radius: 20px 20px 20px 60px;
  }
  .calnav {
    width: 100%;
    justify-content: space-between;
  }
  .calnav__label {
    font-size: 1.125rem;
    min-width: 0;
  }
  .calbar {
    gap: 0.75rem;
  }
  .cal {
    gap: 0.2rem;
  }
  .calday {
    min-height: 3.5rem;
    padding: 0.25rem;
  }
  .calday__pip {
    display: none;
  }
  .calday.has-events::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--terra);
    margin-inline: auto;
  }
  .caldetail__empty {
    align-items: flex-start;
    flex-direction: column;
  }
  .marquee {
    min-height: 5.6rem;
  }
  .marquee__chip {
    width: 10.5rem;
    height: 5rem;
    padding: 0.55rem 0.9rem;
    margin-right: 0.7rem;
  }
  .marquee__chip img {
    max-width: 8.7rem;
    max-height: 3.75rem;
  }
  .marquee__chip--text {
    font-size: 0.9063rem;
  }
  .topbar__links {
    gap: 0.85rem;
    font-size: 0.8125rem;
  }
  .section-head {
    margin-bottom: 2rem;
  }
}

/* ------------------------- 34. REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero__title em::after {
    transform: scaleX(1);
  }
  .marquee__track {
    animation: none;
  }
  .hero__scroll-line {
    animation: none;
  }
  .btn:hover,
  .quick__card:hover,
  .eventcard:hover,
  .involve__card:hover,
  .submit__card:hover,
  .restile:hover,
  .orgcard:hover,
  .chip:hover,
  .callist__item:hover {
    transform: none;
  }
  .eventcard:hover .eventcard__media img {
    transform: none;
  }
}

/* ------------------------------ 35. PRINT ------------------------------- */
@media print {
  .topbar,
  .site-header,
  .hero__video,
  .hero__scroll,
  .hero__badge,
  .modal,
  .news__form,
  .nav-toggle,
  .marquee,
  .watermark {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .section {
    padding-block: 1.5rem;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split__intro {
    position: static;
  }
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
  }
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
.container {
  max-width: none !important;
}

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: var(--primary) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
/* EC-NAV-429: the class guards above only see a utility class ON the element.
   A header the source lifts out of flow from an ancestor rule — Scorpion uses
   ".overlap #HeaderZone { position: absolute }" with no class on the header at
   all — passed every guard and was forced back into flow, dropping a
   deliberately transparent header onto the page background where its light link
   text became invisible. Such ids are detected from the source CSS. */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;  width: 100vw;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it.
 *
 * EC-NAV-442: suppressed when the site's own stylesheet holds the bar OUT of
 * flow — the margin is then the author's clearance, not a redundant gap. */

.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer.
 * EC-NAV-323: Also offset header.fixed — React/Vite SPAs (Kai.dev) use <header class="fixed top-0">,
 * not bare nav.fixed, so the round-1 EC-NAV-089 selectors never matched. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav),
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed[class*='top-0'] {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* EC-CSS-009: :where() = 0 specificity, same reasoning as EC-BTN-104 above. A
   bare "h1, h2, h3, h4, h5, h6" list ties a site's own "h1, h2, h3 { font-weight:
   400 }" on specificity (0,0,1) and, being emitted after the merged site CSS,
   wins — so a display face meant to render at 400 shipped bold everywhere. These
   declarations still beat the UA stylesheet, because author origin outranks
   user-agent origin regardless of specificity. */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* EC-NAV-162b: Site CSS sets position:sticky on header — override WPConvert base relative reset.
   Non-Tailwind sites define fixed positioning in their stylesheet, not as a utility class.
   EC-NAV-197: selector includes :not([class*='absolute']) so specificity (0,4,0) ties the
   EC-NAV-190 safety-net; source-order then makes this override win the !important cascade.
   EC-NAV-433: the selector mirrors the source rule's own qualification — <header> is also
   sectioning content, and a bare tag here force-fixes every content header on the page.
   EC-NAV-457: grouped by the position each source rule authored. */
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: sticky !important;
  z-index: 1000 !important;
}

/* EC-NAV-433b: the EC-NAV-190 in-flow repair uses BARE tag selectors, and its
   :not([class*='…']) guards only see a utility class ON the element. A content
   header the SOURCE lifts out of flow from a stylesheet rule — Sabrina's
   ".set-product-head { position: absolute; top: 50% }" caption inside an
   overflow:hidden product frame — slipped past all three guards, was forced
   back into flow and clipped out of its frame. Restore the authored value for
   sectioning headers inside <main>, where the site header never lives. */
main.site-main
  header.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  nav.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='banner'].site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='navigation'].site-header:not([class*='sticky']):not(
    [class*='fixed']
  ):not([class*='absolute']) {
  position: sticky !important;
}



/*Booking Amelia*/
.amelia-v2-booking.am-dialog-el.am-dialog-popup .el-dialog {
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--am-c-main-bgr);
	max-height: min(92svh, 60rem);
	background: var(--cream)!important;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	box-shadow: var(--sh-lg);
	animation: rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
	border-radius: var(--r-lg)!important;
}
.amelia-v2-booking #amelia-container .am-eli .am-eli__main .el-tabs__item.is-active {
	color: var(--terra) !important;
}
.amelia-v2-booking.am-dialog-el.am-dialog-popup .el-dialog * {
	box-shadow: none!important;
}
.am-dialog-popup .am-button span {
	color: var(--terra) !important;
}
.am-dialog-popup .am-button  {
	border: 1px solid var(--terra) !important; 
}

.am-dialog-popup .el-dialog__headerbtn {
	top: 12px;
	right: 16px;
	
	width: 2.5rem!important;
	height: 2.5rem!important;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	box-shadow: var(--sh-sm);
	transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.am-el__header-inner__title {
	font-family: var(--serif) !important;
	font-weight: 500 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.015em !important;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
.am-dialog-popup .am-button.am-button--filled,
.amelia-v2-booking .am-button.am-button--filled.am-button--medium.am-button--primary {
	background: var(--terra)!important;
}
.am-dialog-popup .am-button.am-button--filled span,
.amelia-v2-booking .am-button.am-button--filled.am-button--medium.am-button--primary span {
	color: #fff !important;
}
.am-dialog-popup .el-dialog__footer,
.am-dialog-popup .el-dialog.am-dialog--with-header .el-dialog__header {
	background: #fdf8f0 !important;
}
.amelia-v2-booking #amelia-container .am-eli__description-btn:hover,
.am-dialog-popup .am-button.am-button--filled:hover {
	opacity: 0.7;
}
.amelia-v2-booking #amelia-container .am-eli__description-btn,
.amelia-v2-booking #amelia-container .am-ec__actions-price {
	color: var(--terra)!important;
}
.amelia-v2-booking #amelia-container .am-eli .am-eli__main .el-tabs__active-bar {
	background-color:  var(--terra)!important;
}

/**/
@media (max-width: 768px) {

  /**/
  .hero__inner {
    text-align: center;
  }
  .hero__cta {
    justify-content: center;
  }
  .trust-row {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .trust-row .pill {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  #calendar-cta .wrap button,
  .hero__cta a, .hero__cta button {
    width: 100%!important;
  }


  .section__title {
    text-align: center;
  }


  .filters {
    justify-content: center;
  }

  .section-cta button {
    width: 100%;
    max-width: 460px;
  }
  /*2*/


  #quick li button {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  /*5*/

  .wrap button {
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  /*6*/
  #calendar-cta {
    text-align: center;
  }


  /**/
  .calcta__body {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
    
  /**/
  .restile__name {
    grid-area: 1;
    align-self: center!important;
  }
  .restile__count {
    align-self: center!important;
  }

  .media-figure img {
    position: relative;
    transform: none !important;
  }

  #involved .involve__layout {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
  }

  #involved .section-cta {
    display: flex;
    justify-content: center;
  }


  .orgcard__blurb {
    text-align: center;
  }
  .orgcard__tags {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .orgcard__links,
  .orgcard__area {
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .orgcard__head {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }


  .media-figure {
    position: relative !important;
  }


  .wrap.about {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    justify-content: center;
  }
  .reasons__title {

    text-align: center;
  }

  .about-slideshow .about-slideshow__slide {
    position: relative;
    top: 0;
    bottom: 0;
  }
  .about {

    gap: 0;

  }
  .about.media-figure {
    margin-top: -51px;
    margin-bottom: 100px;
  }

  .split__intro {
    position: static;
    text-align: center;
    justify-content: center;
  }
  .split__aside-t {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .aside-person {
    width: 100%;
    justify-content: center;
  }
  .split__aside {
    align-items: center;
  }
  .faq__item button {
    justify-content: space-between;
    text-align: start;
  }

  .finalcta-section a, .finalcta-section button {
    width: 100%;
  }

  .wrap.news {
    text-align: center;
  }

  .wrap.news  .wpcf7 .wpcf7-submit{
    width: 100%;
  }
  .split__aside {
    align-items: center!important;
  }

  .orgcard__head {
    align-items: center;
  }

  .involve {
    margin-bottom: 0!important;
  }
  .section-cta {
    margin-top: 1.4rem!important;
  }
  .reason {

    justify-content: center;
    text-align: center;
  }

  .wrap.news  .wpcf7-spinner {
    position: absolute;
    left: 43%;
    margin-top: 16px;
  }

  .modal__panel {
    max-height: 100vh!important;
    border-radius: 0!important;

  }
.reason,
  .orgcard__head {
    align-items: center!important;
  }
  .orgcard {
    text-align: center!important;
  }



  .resorg {
    flex-direction: column!important;
    text-align: start!important;
  }
  .resorg__tel {
    padding-left: 0 !important;
  }
  .resorg__ic {
    display: none!important;
  }

 section .btn--primary {
	width: 100% !important;
	max-width: 100% !important;
}

  .evt__actions button, .evt__actions a {
    width: 48%!important;
    max-width: 50%!important;
  }



}