/* ============================================================
   Brigade Innovation Gardens - Site styling
   Modern Minimal: white bg, charcoal text, Brigade blue accent
   Mobile-first responsive layout
   ============================================================ */

/* --- Custom Properties --- */
:root {
  /* Colors — Brigade Group brand (primary #0067AD, secondary #F8C318) */
  --color-primary: #0067AD;
  --color-primary-hover: #004E84;
  --color-primary-light: #EAF4FB;
  --color-accent: #F8C318;
  --color-accent-accessible: #8A6A00;
  --color-text: #1F2937;
  --color-text-light: #6B7280;
  --color-text-muted: #6B7280;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F9FAFB;
  --color-border: #E5E7EB;
  --color-footer-bg: #1F2937;
  --color-footer-text: #F3F4F6;
  --color-footer-muted: #9CA3AF;
  --color-success: #059669;
  --color-success-bg: #ECFDF5;
  --color-error: #DC2626;
  --color-error-bg: #FEF2F2;
  --color-staging: #D97706;
  --color-staging-bg: #FFFBEB;

  /* Typography */
  --font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --max-width: 1400px;
  --nav-height: 64px;
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}


/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background-color: var(--color-bg-alt);
  border-radius: var(--border-radius);
}

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

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

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

ul, ol {
  list-style: none;
}

fieldset {
  border: none;
}


/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

p:last-child {
  margin-bottom: 0;
}

.text-muted {
  color: var(--color-text-light);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  margin-top: var(--space-2);
  font-weight: var(--font-weight-normal);
}

/* Section headings are left-aligned like everything under them. The donor
   centred them, which put a centred h2 over a 720px .prose column that starts
   at the container's left edge — the heading and its own body text did not
   share an axis on any section of any page. Prose cannot be centred, so left
   is the only alignment both halves can hold. */
.section-header {
  text-align: left;
  margin-bottom: var(--space-8);
}

/* Hold the heading to roughly the prose measure so a long title breaks near
   the text it introduces rather than running the full 1,232px container. */
.section-header > h2,
.section-header > .section-subtitle {
  max-width: 46rem;
}


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

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

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

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
}


/* --- Navigation --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo:hover {
  color: var(--color-primary);
}

.nav-logo img {
  display: block;
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  flex: 0 0 42px;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  padding: 0;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base);
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-menu {
  display: none;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.nav-menu.is-open {
  display: block;
}

.nav-menu li {
  margin-bottom: var(--space-1);
}

.nav-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a.is-active {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

.nav-cta {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-bg) !important;
  text-align: center;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: var(--border-radius) !important;
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-2);
}

/* Higher specificity to beat .nav-menu a:hover (0-2-1 vs 0-2-0) */
.nav-menu a.nav-cta:hover {
  background-color: var(--color-primary-hover) !important;
  color: var(--color-bg) !important;
}

.nav-menu a.nav-cta.is-active,
.nav-menu a.nav-cta:focus-visible {
  background-color: var(--color-primary) !important;
  color: var(--color-bg) !important;
}


/* --- Hero / Page Header --- */
.page-hero {
  position: relative;
  background-color: var(--color-bg-alt);
  padding: var(--space-12) 0;
  overflow: hidden;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  margin-bottom: var(--space-4);
}

.page-hero .hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 640px;
  margin-bottom: var(--space-6);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-home {
  padding: var(--space-16) 0 var(--space-12);
  background-color: var(--color-text);
  color: var(--color-bg);
  min-height: 420px;
  display: flex;
  align-items: center;
}

.hero-home h1 {
  color: var(--color-bg);
  font-size: var(--font-size-3xl);
}

.hero-home .hero-subtitle {
  color: var(--color-footer-muted);
}

.hero-home .hero-image {
  margin-top: var(--space-8);
  width: 100%;
  height: clamp(240px, 46vw, 520px);
  display: block;
  border-radius: var(--border-radius-lg);
  object-fit: cover;
  background-color: transparent;
}

.hero-home .published-date {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* The inline <style id="site-seo-utilities"> block paints .page-updated in
   rgba(15,23,42,.72) — dark navy, which composites to 1.16:1 against this
   hero's --color-text background, i.e. invisible. --color-footer-muted is
   5.78:1 on the same ground. Do not drop this rule when re-theming. */
.hero-home .page-updated,
.hero-home .page-updated time {
  color: var(--color-footer-muted);
}

.hero-image {
  width: min(100%, 920px);
  max-height: 520px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--border-radius-lg);
  object-fit: contain;
  background-color: var(--color-bg-alt);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb-sep::after {
  content: '›';
  margin-left: var(--space-1);
}


/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  text-align: center;
  line-height: 1.4;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-bg);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: center;
  line-height: 1.4;
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-white {
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border: 2px solid var(--color-bg);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
  text-align: center;
  line-height: 1.4;
}

.btn-white:hover {
  opacity: 0.9;
  color: var(--color-text);
}

.btn-primary,
.btn-secondary,
.btn-white {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  vertical-align: middle;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.section-actions.center {
  justify-content: center;
}


/* --- Cards --- */
.card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--border-radius);
  margin-bottom: var(--space-4);
}


/* --- Stats Bar --- */
.stats-bar {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.stat-item {
  padding: var(--space-4);
}

.stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  display: block;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--space-1);
  display: block;
}


/* --- Tables --- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table th {
  background-color: var(--color-bg-alt);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Pricing-specific: center-align numeric cells */
.data-table.table-center th,
.data-table.table-center td {
  text-align: center;
}

.data-table.table-center th:first-child,
.data-table.table-center td:first-child {
  text-align: left;
}

/* Side-by-side tables on desktop */
.tables-side-by-side {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background-color: var(--color-bg-alt);
}


/* --- Key Details Table (overview) --- */
.details-table {
  width: 100%;
  border-collapse: collapse;
}

.details-table tr {
  border-bottom: 1px solid var(--color-border);
}

.details-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  width: 40%;
  font-size: var(--font-size-sm);
  vertical-align: top;
}

.details-table td {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* --- Forms --- */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 103, 173, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

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

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkbox-label:hover {
  border-color: var(--color-primary);
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.checkbox-label input[type="checkbox"]:checked + span {
  color: var(--color-primary);
}

/* --- Skip to Content --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: var(--space-4);
}

#form-message {
  padding: var(--space-4);
  border-radius: var(--border-radius);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

#form-message[hidden] {
  display: none;
}

#form-message.success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

#form-message.error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.field-error {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.contact-grid {
  display: grid;
  gap: var(--space-8);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.contact-info-item .info-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.contact-info-item h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.contact-info-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* --- FAQ Accordion --- */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.faq-question {
  display: block;
  position: relative;
  width: 100%;
  padding: var(--space-2) var(--space-5);
  padding-right: calc(var(--space-5) + 1.5rem);
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.faq-question:hover {
  background-color: var(--color-bg-alt);
}

.faq-question::after {
  content: '+';
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
  transition: transform var(--transition-base);
}

.faq-item.is-active .faq-question::after {
  content: '−';
}

.faq-item.is-active .faq-question {
  background-color: var(--color-bg-alt);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-answer-inner {
  padding: 0 var(--space-5) var(--space-3);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* This button-style FAQ shares the .faq-item class with the inner-page
   <details> accordion, whose card rule (further down) also sets padding —
   so the row was getting padded twice. Keep that card's look but let the
   button own the padding. Scoped via :has(> .faq-question) so it only hits
   these items, not the <details>-based ones (which have > summary). */
.faq-item:has(> .faq-question) {
  padding: 0;
}


/* --- Gallery --- */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  justify-content: center;
}

.gallery-tab {
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gallery-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.gallery-tab.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

.gallery-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.gallery-item {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.gallery-item.is-hidden {
  display: none;
}

.gallery-item figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  background-color: var(--color-bg-alt);
}


/* --- Gallery Preview (homepage) --- */
.gallery-preview-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.gallery-preview-item {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  margin: 0;
}

.gallery-preview-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-preview-item:hover img {
  transform: scale(1.03);
}

.gallery-preview-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff;
  font-size: var(--font-size-sm);
}

/* Amenity list inside cards */
.amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.amenity-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  padding-left: var(--space-4);
  position: relative;
}

.amenity-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* --- CTA Banner --- */
.cta-banner {
  background-color: var(--color-primary-light);
  text-align: left;
  padding: var(--space-12) 0;
}

.cta-banner h2 {
  margin-bottom: var(--space-3);
}

/* Was centred with auto side margins. Left, with only the measure kept, so the
   closing band shares the page's single alignment axis. */
.cta-banner p {
  color: var(--color-text);
  margin-bottom: var(--space-6);
  max-width: 560px;
}


/* --- Reviews --- */
.review-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-6);
}

.review-card .review-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

.review-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* --- Amenities Grid --- */
.amenity-category {
  margin-bottom: var(--space-10);
}

.amenity-category h3 {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: border-color var(--transition-fast);
}

.amenity-item:hover {
  border-color: var(--color-primary);
}

.amenity-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}


/* --- Connectivity / Location --- */
.map-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.map-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  padding: var(--space-2);
  background-color: var(--color-bg);
  border-radius: inherit;
}


/* --- Floor Plan Cards --- */
.floor-plan-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.floor-plan-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 300px;
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  padding: var(--space-3);
  background-color: var(--color-bg-alt);
  border-radius: 0;
}

.gallery-grid-floorplans .gallery-item img {
  max-height: 320px;
  object-fit: contain;
  box-sizing: border-box;
  padding: var(--space-2);
  background-color: var(--color-bg);
}

.gallery-grid-floorplans .gallery-item figcaption {
  text-align: center;
}

.floor-plan-info {
  padding: var(--space-5);
}

.floor-plan-info h3 {
  margin-bottom: var(--space-2);
}

.floor-plan-info .area {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.floor-plan-highlights {
  list-style: none;
}

.floor-plan-highlights li {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  padding: var(--space-1) 0;
  padding-left: var(--space-5);
  position: relative;
}

.floor-plan-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}


/* --- Master Plan Zone Cards --- */
.zone-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.zone-card .zone-icon {
  font-size: var(--font-size-2xl);
}

.zone-card h4 {
  margin-bottom: var(--space-1);
}

.zone-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* --- Footer --- */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-12) 0 var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.footer-logo {
  color: var(--color-bg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.footer-logo:hover {
  color: var(--color-primary-light);
}

.footer-logo img {
  display: block;
  width: 52px;
  height: 52px;
  aspect-ratio: 1 / 1;
  flex: 0 0 52px;
}

.site-footer p {
  color: var(--color-footer-muted);
  font-size: var(--font-size-sm);
}

.site-footer h3 {
  color: var(--color-footer-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-links a {
  color: var(--color-footer-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-bg);
}

/* Prose links in the footer (e.g. the developer's own site in the Address
   column) would otherwise inherit the global --color-primary, which is only
   2.48:1 against --color-footer-bg. Use the footer's own text token (13.34:1)
   and underline it so it still reads as a link among non-link paragraphs. */
.site-footer p a {
  color: var(--color-footer-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.site-footer p a:hover {
  color: var(--color-bg);
}

/* Classes the markup uses that the family stylesheet never defined. All four
   are used on the donor too (footer-heading 33x, cta-row 10x) and render
   unstyled there — column headings at body weight, button rows with no
   spacing, and an invisible form status message. */
.footer-heading {
  color: var(--color-footer-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cta-row[style*="center"] { justify-content: center; }

.contact-form-wrapper {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
}

.form-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
}

/* The form JS sets className = "form-status " + type, with type
   "success" | "error". Without these the confirmation is invisible. */
.form-status.success {
  color: var(--color-success);
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
}

.form-status.error {
  color: var(--color-error);
  background-color: var(--color-error-bg);
  border-color: var(--color-error);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
}

.footer-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-footer-muted);
  line-height: var(--line-height-base);
  max-width: 960px;
}

.footer-disclaimer p {
  font-size: var(--font-size-xs);
  color: var(--color-footer-muted);
  margin-bottom: var(--space-4);
}

.footer-rera {
  font-size: var(--font-size-xs);
  color: var(--color-footer-muted);
  margin-top: var(--space-4);
}


/* --- Staging Banner --- */
.staging-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: var(--color-staging-bg);
  color: #92400E;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-staging);
}

body.has-staging-banner {
  padding-top: 40px;
}

body.has-staging-banner .site-nav {
  top: 40px;
}


/* --- Page Content Prose --- */
.prose {
  max-width: 720px;
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* --- Misc --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.published-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}


/* --- Utility Classes --- */
.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.w-full {
  width: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.gap-lg {
  gap: var(--space-12);
}

.items-center {
  align-items: center;
}

.img-landscape {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--border-radius-lg);
}

.img-portrait {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 560px;
  height: clamp(240px, 34vw, 420px);
  display: block;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
}

.narrow-form {
  max-width: 640px;
  margin: 0 auto;
}

.figcaption-center {
  text-align: center;
  margin-top: var(--space-3);
}

.figure-reset {
  margin: 0;
}

.btn-full {
  width: 100%;
}


/* ============================================================
   RESPONSIVE - Tablet (≥768px)
   ============================================================ */
@media (min-width: 1025px) {
  :root {
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 3rem;
  }

  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Image column in a two-column section sticks while the text column scrolls (desktop only).
     Scoped away from card grids: a .floor-plan-card is also a direct div child holding an img,
     and making it sticky overlaps the following row once the grid wraps past two cards. */
  /* `> img` alone missed the location map, whose image is wrapped in the
     Google Maps <a>: it fell back to the grid's .items-center and floated in
     the middle of a 1,550px row. Match a linked image too. */
  .grid-2 > div:has(> img, > a > img, > picture > img):not(.floor-plan-card) {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    align-self: start;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-preview-featured {
    grid-row: span 2;
  }

  .gallery-preview-featured img {
    aspect-ratio: unset;
    height: 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-home {
    min-height: 500px;
    padding: var(--space-20) 0 var(--space-16);
  }

  .hero-home h1 {
    font-size: var(--font-size-4xl);
  }
}


/* ============================================================
   RESPONSIVE - Desktop (≥1024px)
   ============================================================ */
@media (min-width: 1025px) {
  /* Nav: horizontal layout */
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex !important;
    position: static;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    align-items: center;
    gap: var(--space-1);
  }

  .nav-menu li {
    margin-bottom: 0;
  }

  .nav-menu a {
    padding: var(--space-2) var(--space-3);
  }

  .nav-cta {
    margin-top: 0;
    padding: var(--space-2) var(--space-5) !important;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tables-side-by-side {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
  }
}

/* .table-wrapper carries no margin of its own, and .prose p sets only
   margin-bottom, so every paragraph or subheading that FOLLOWED a table sat
   flush against its border — 42 of them across ten pages. The wrapper is
   overflow-x:auto, so it opens a BFC and these margins collapse with the
   neighbouring paragraph's rather than stacking on top of it. */
.table-wrapper {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* .amenity-list is the donor's in-card checklist and declares display:flex.
   The homepage combines it with .grid .grid-3, and being declared ~880 lines
   later at equal specificity it beat .grid's display:grid: grid-template-columns
   resolved to repeat(3, 1fr) and was inert, so 30 items stacked as one
   1,232px-wide column 2,064px tall, separated by .gap-lg's 48px. Let the layout
   classes win where both are present, at a row gap suited to a checklist. */
.amenity-list.grid {
  display: grid;
  gap: var(--space-3) var(--space-8);
}

/* Narrow desktop: ten nav items plus a wide two-line lockup overrun the row at
   the 1025px collapse point, and "Master Plan" / "Floor Plans" wrap to two
   lines inside their cells. The donor solved this by cramming Reviews and
   About into one <li>, which stacks them and doubles the nav's height; trimming
   4px off each side of nine links buys back the 64px instead. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .nav-menu {
    gap: 0;
  }

  .nav-menu a {
    padding: var(--space-2);
  }

  .nav-cta {
    padding: var(--space-2) var(--space-4) !important;
    margin-left: var(--space-2);
  }
}

/* ── FAQ page: plain heading layout (no accordion) ──────────────────────── */
.faq-static { max-width: 800px; margin: 0 auto; }
.faq-entry { border-bottom: 1px solid rgba(0,0,0,.08); padding: 0 0 1.75rem; margin-top: 2rem; }
.faq-entry:first-child { margin-top: 0; }
.faq-entry:last-child { border-bottom: none; padding-bottom: 0; }
.faq-entry h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; margin: 0 0 0.75rem; }
.faq-entry p { margin: 0 0 0.75rem; color: var(--color-text-light); }
.faq-entry p:last-child { margin-bottom: 0; }

/* Subpage inline FAQ (added by tooling/migration/inline-faqs.mjs) */
#faq > .container,
#faq > .container.prose {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 4vw, 2rem);
  padding-right: clamp(1.25rem, 4vw, 2rem);
}

.faq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 0.5rem 1.25rem;
  transition: border-color 0.2s ease;
}

/* Subpage FAQs were converted from <details>/<summary> to the button-style
   accordion above, so the old summary / details-marker / [open] / chevron
   rules are gone — the shared .faq-question / .faq-answer rules now drive
   every FAQ on the site. */
#faq > .container.prose > h2 {
  color: #0f172a;
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-question::after {
    transition: none;
  }
}


/* phase-b brand-text */
.brand-logo-img { display: block; width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; filter: none !important; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; gap: 0; margin-left: 0; color: inherit; text-decoration: none; }
.brand-developer { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.brand-project { font-size: 1rem; font-weight: 700; }
a:has(> .brand-text), a.nav-logo, a.footer-logo, a.footer-brand, a.navbar_logo-link, a.footer_logo-link, a.navbar__brand, a.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }

/* fleet: nav links title-case + 12px (2026-06-05) */
.nav-menu a:not([class*="cta"]):not([class*="btn"]):not([class*="button"]){font-size:12px !important;text-transform:none !important}

/* fleet: nav collapses at tablet 1024 (2026-06-05) */
@media(min-width:1025px){.nav-menu{display:flex !important}.nav-toggle{display:none !important}}
@media(max-width:1024px){.nav-menu{display:none !important}.nav-toggle{display:flex !important}.nav-menu.is-open,.is-open .nav-menu,.nav-menu.open,.open .nav-menu,.nav-menu.active,.active .nav-menu,.nav-menu.w--open,.w--open .nav-menu,.nav-menu.on,.on .nav-menu,.nav-menu.visible,.visible .nav-menu,.nav-menu.is-visible,.is-visible .nav-menu,.nav-menu.expanded,.expanded .nav-menu,.nav-menu.show,.show .nav-menu,.nav-menu.shown,.shown .nav-menu,.nav-menu.opened,.opened .nav-menu,.nav-menu.menu-open,.menu-open .nav-menu,.nav-menu.nav-open,.nav-open .nav-menu,.nav-menu[data-nav-menu-open]{display:flex !important;flex-direction:column !important}}

/* fleet: nav brand text size cap — brand NAME <=15px so no logo text exceeds 16px (2026-06-06) */
[class*="brand-project"],[class*="brand-name"],[class*="brand-title"],[class*="brand-lockup__name"]{font-size:15px !important}
[class*="brand-developer"]{font-size:11px !important}
/* Brand lockup split-line convention */
.brand-text,
.footer-brand-text,
.sow-nav__brand-text,
.sow-footer__brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.08;
  min-width: 0;
}
/* Brand lockup hierarchy convention */
[class*="brand-developer"],
[class*="brand-title"],
[class*="brand-lockup__eyebrow"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

[class*="brand-project"],
[class*="brand-subtitle"],
[class*="brand-name"],
[class*="brand-lockup__name"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}


/* ==== contact-modal (fleet rollout — see tooling/add-contact-modal.mjs) ==== */
.cm-modal {
    /* Re-assert the UA's dialog centering: universal `* { margin: 0 }` resets
       (sattva/purva families and others) strip it, pinning the dialog top-left. */
    margin: auto;
    width: min(100%, 28rem);
    padding: 1rem;
    border: 0;
    background: transparent;
    overscroll-behavior: contain;
    --cm-accent: var(--color-accent-accessible, #8A6A00);
    --cm-ink: #ffffff;
}

/* Browsers without <dialog> ignore [open] and would render the form inline. */
.cm-modal:not([open]) {
    display: none;
}

/* Literal scrim: ::backdrop cannot reliably see page custom properties. */
.cm-modal::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.cm-modal__panel {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #1f2937;
    font-family: inherit;
    box-shadow: 0 20px 25px rgba(15, 23, 42, 0.15);
}

.cm-modal__title {
    margin: 0 0 1.25rem;
    padding-right: 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
}

.cm-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.cm-modal__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cm-modal__close:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
}

.cm-form {
    display: grid;
    gap: 1rem;
}

.cm-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.cm-form__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

/* Form controls don't inherit fonts — font: inherit closes the gap. */
.cm-form input,
.cm-form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}

.cm-form input:focus-visible,
.cm-form textarea:focus-visible {
    outline: 2px solid var(--cm-accent);
    outline-offset: 1px;
}

.cm-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.cm-form__submit {
    border: 0;
    border-radius: 6px;
    background: var(--cm-accent);
    color: var(--cm-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.cm-form__submit:hover {
    opacity: 0.92;
}

.cm-form__submit:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

.cm-form__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
}

.cm-form__hint a {
    color: inherit;
    text-decoration: underline;
}

/* Class-based, so it cannot fight any inline body.style.overflow use. */
body.has-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-modal[open] {
        animation: cm-modal-in 160ms ease-out;
    }

    .cm-modal[open]::backdrop {
        animation: cm-modal-backdrop-in 160ms ease-out;
    }
}

@keyframes cm-modal-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes cm-modal-backdrop-in {
    from {
        opacity: 0;
    }
}