@import url("/assets/fonts/fonts.css");

/* ==========================================================================
   Design tokens
   House palette uses evergreen, ivory, charcoal, and a restrained clay accent.
   ========================================================================== */
:root {
  /* Ink and surfaces */
  --ink: #272B28;
  --ink-soft: #5E655F;
  --ink-faint: #8b968f;
  --paper: #F7F3EB;
  --surface: #EFEAE0;
  --surface-2: #E5E8DF;
  --white: #ffffff;
  --line: #DCD3C6;
  --line-strong: #bcc4b9;

  /* Accents */
  --accent: #25483F;
  --accent-dark: #1C3932;
  --accent-soft: #E2E9E2;
  --warm: #C56848;

  /* Status */
  --error: #a2302a;
  --success: #1e6848;

  /* Type scale — fluid, mobile-first */
  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-base: 1rem;
  --text-lg: clamp(1.06rem, 0.98rem + 0.4vw, 1.22rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-4xl: clamp(2.35rem, 1.75rem + 2.9vw, 3.75rem);

  /* Spacing scale */
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.25rem;
  --space-7: clamp(3.5rem, 8vw, 6rem);
  --space-8: clamp(4.5rem, 10vw, 8rem);

  /* Shape and depth */
  --radius-sm: 0.4rem;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 2px 10px rgb(23 33 29 / 6%);
  --shadow: 0 18px 50px rgb(23 33 29 / 10%);

  --container: 72rem;
  --header-height: 4.25rem;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-dark);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

button,
input,
select {
  font: inherit;
}

button,
summary {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
}

h1 {
  max-width: 16ch;
  margin-bottom: var(--space-4);
  font-size: var(--text-4xl);
}

h2 {
  max-width: 22ch;
  margin-bottom: var(--space-3);
  font-size: var(--text-3xl);
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

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

:focus-visible {
  outline: 3px solid var(--warm);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.narrow {
  max-width: 46rem;
}

.section {
  padding-block: var(--space-7);
}

.section-muted {
  background: var(--surface);
}

.section-heading {
  max-width: 46rem;
  margin-bottom: var(--space-5);
}

.section-heading h2 {
  max-width: 24ch;
}

.section-closer {
  max-width: 46rem;
  margin-top: var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-lg);
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lede {
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: var(--text-lg);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */
.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid rgb(23 33 29 / 10%);
  background: rgb(255 253 248 / 94%);
  backdrop-filter: blur(12px);
}

.header-inner {
  position: relative;
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.wordmark {
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-toggle {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  place-items: center;
  background: var(--white);
}

.nav-toggle-bars {
  display: grid;
  width: 1.1rem;
  gap: 0.3rem;
}

.nav-toggle-bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 160ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child {
  transform: translateY(0.16rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child {
  transform: translateY(-0.16rem) rotate(-45deg);
}

.site-nav {
  display: none;
}

.site-nav[data-open="true"] {
  position: absolute;
  z-index: 41;
  top: 100%;
  right: 0;
  left: 0;
  display: block;
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.nav-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
  list-style: none;
}

.nav-list a:not(.button) {
  display: block;
  padding: 0.7rem 0;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 650;
  text-decoration: none;
}

.nav-list .button {
  margin-top: var(--space-2);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
  display: inline-flex;
  min-height: 3.25rem;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}

.button:hover {
  background: var(--accent-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.button:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.button-small {
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  font-size: var(--text-sm);
}

.button-full {
  width: 100%;
}

.text-link {
  padding-block: 0.7rem;
  font-weight: 700;
}

.button-row {
  display: flex;
  margin-top: var(--space-4);
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-2);
}

/* ==========================================================================
   Media placeholders
   Each frame carries a caption describing the photograph to be sourced,
   so the placeholder doubles as a shot list.
   ========================================================================== */
.media {
  min-width: 0;
  margin: 0;
}

.media-frame {
  display: grid;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  place-items: center;
  background: var(--surface-2);
}

.media-frame::after {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--ink-faint);
  content: "";
  -webkit-mask: center / contain no-repeat var(--icon, none);
  mask: center / contain no-repeat var(--icon, none);
}

.media figcaption {
  margin-top: var(--space-2);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: 1.5;
}

.media-hero .media-frame {
  aspect-ratio: 5 / 4;
}

[data-media-icon="children"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.4 2.7-6 6-6s6 2.6 6 6'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 010 5.6'/%3E%3Cpath d='M17.5 14.4c2.1.7 3.5 2.6 3.5 5.6'/%3E%3C/svg%3E");
}

[data-media-icon="museum"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5H3z'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M6 10v8M10 10v8M14 10v8M18 10v8'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

[data-media-icon="park"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l6 9h-4l3 5H7l3-5H6z'/%3E%3Cpath d='M12 16v6'/%3E%3Cpath d='M4 22h16'/%3E%3C/svg%3E");
}

[data-media-icon="studio"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 000 18c1.7 0 2-1.3 1.2-2.2-.8-.9-.4-2.3 1-2.3H17a4 4 0 004-4c0-5.2-4-9.5-9-9.5z'/%3E%3Ccircle cx='7.6' cy='11.4' r='1.1'/%3E%3Ccircle cx='11.4' cy='7.6' r='1.1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.hero-layout {
  display: grid;
  align-items: center;
  gap: var(--space-5);
}

.hero-copy {
  min-width: 0;
}

.hero-note {
  margin-top: var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Facts strip
   ========================================================================== */
.facts {
  padding-block: var(--space-3);
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.facts-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts-list li {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.facts-list li:last-child {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-dark);
  font-weight: 750;
}

/* ==========================================================================
   Persona positioning
   ========================================================================== */
.tension {
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 3px solid var(--warm);
  color: var(--ink-soft);
  font-size: var(--text-lg);
}

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

/* ==========================================================================
   Card grids
   ========================================================================== */
.value-container {
  margin-top: var(--space-5);
}

.value-grid,
.place-grid,
.feature-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

.value-card {
  position: relative;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 4px 16px rgb(23 33 29 / 4%);
}

.value-num {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-2);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.value-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.value-card p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: 0;
}

.feature-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.section-muted .feature-card {
  background: var(--paper);
}

.feature-card p,
.place-card p {
  color: var(--ink-soft);
  margin-bottom: 0;
}

.feature-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-2);
  background-color: var(--accent);
  -webkit-mask: center / contain no-repeat var(--icon, none);
  mask: center / contain no-repeat var(--icon, none);
}

.feature-card h3 {
  font-size: var(--text-lg);
}

[data-icon="compass"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.6 8.4l-2.1 5.1-5.1 2.1 2.1-5.1z'/%3E%3C/svg%3E");
}

[data-icon="group"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='9' r='3'/%3E%3Ccircle cx='16.5' cy='7.5' r='2.3'/%3E%3Cpath d='M2 20c0-3 2.2-5.2 5-5.2s5 2.2 5 5.2'/%3E%3Cpath d='M13.5 20c0-2.6 1.7-4.6 4-4.6s4.5 2 4.5 4.6'/%3E%3C/svg%3E");
}

[data-icon="eye"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}

[data-icon="city"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l6-4v16'/%3E%3Cpath d='M9 21V11l6-3v13'/%3E%3Cpath d='M15 21V13l6-2v10'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E");
}

[data-icon="home"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v11h14V10'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}

[data-icon="people"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.4 2.7-6 6-6s6 2.6 6 6'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 010 5.6'/%3E%3Cpath d='M17.5 14.4c2.1.7 3.5 2.6 3.5 5.6'/%3E%3C/svg%3E");
}

[data-icon="book"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 016.5 2H20v20H6.5a2.5 2.5 0 01-2.5-2.5z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3C/svg%3E");
}

[data-icon="path"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M8 6h10v10'/%3E%3C/svg%3E");
}

[data-icon="document"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

.place-card {
  min-width: 0;
}

.place-card h3 {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

/* ==========================================================================
   Evidence engine
   ========================================================================== */
.evidence-layout {
  display: grid;
  align-items: start;
  gap: var(--space-3);
}

.evidence-panel {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.panel-title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-item {
  padding-block: var(--space-2);
}

.panel-item h4 {
  margin-bottom: 0.15rem;
  font-size: var(--text-base);
  font-weight: 720;
}

.panel-item p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.panel-note {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ==========================================================================
   Interest form
   ========================================================================== */
.form-layout {
  display: grid;
  align-items: start;
  gap: var(--space-5);
}

.form-intro {
  max-width: 34rem;
}

.form-intro > p:not(.eyebrow),
.form-intro li {
  color: var(--ink-soft);
}

.plain-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.plain-list li {
  position: relative;
  margin-bottom: var(--space-1);
  padding-left: 1.4rem;
}

.plain-list li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "•";
  font-weight: 900;
}

.form-card {
  min-width: 0;
  padding: clamp(1.25rem, 5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

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

.field {
  margin-bottom: var(--space-3);
}

.field label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 720;
}

.optional {
  margin-left: 0.25rem;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
}

.field input,
.field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid #aeb7b0;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
}

.field input:hover,
.field select:hover {
  border-color: var(--ink-soft);
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  outline: 3px solid rgb(36 92 70 / 18%);
}

.field-help {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.turnstile-widget {
  min-height: 4.1rem;
  margin-block: var(--space-2) var(--space-3);
}

.privacy-note {
  margin-bottom: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.form-message {
  min-height: 1.6rem;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 650;
}

.form-message[data-type="error"],
.form-message[data-type="verification"] {
  color: var(--error);
}

.confirmation {
  padding-block: var(--space-3);
}

.confirmation h3:focus {
  outline: none;
}

.confirmation-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  place-items: center;
  background: var(--accent-soft);
  color: var(--success);
  font-size: 1.4rem;
  font-weight: 900;
}

#schedule-action {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout {
  display: grid;
  align-items: start;
  gap: var(--space-4);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: var(--space-3) 2rem var(--space-3) 0;
  color: var(--ink);
  font-weight: 720;
  list-style: none;
}

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

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

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  max-width: 44rem;
  padding: 0 1rem var(--space-3) 0;
  color: var(--ink-soft);
}

/* ==========================================================================
   Footer and sticky mobile CTA
   ========================================================================== */
.site-footer {
  padding-block: var(--space-5) 7rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer-inner {
  display: grid;
  gap: var(--space-4);
}

.wordmark-footer {
  display: block;
  margin-bottom: var(--space-1);
}

.footer-inner p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  gap: var(--space-4);
}

.footer-links a {
  font-weight: 650;
}

.copyright {
  margin: 0;
}

.sticky-cta {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(255 253 248 / 96%);
  backdrop-filter: blur(12px);
  box-shadow: 0 -6px 24px rgb(23 33 29 / 8%);
}

/* ==========================================================================
   Privacy page
   ========================================================================== */
.privacy-page main {
  min-height: 70vh;
}

.prose {
  max-width: 46rem;
}

.prose h1 {
  max-width: none;
  font-size: var(--text-3xl);
}

.prose h2 {
  max-width: none;
  margin-top: var(--space-5);
  font-size: var(--text-xl);
}

.prose li,
.prose p {
  color: var(--ink-soft);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 40rem) {
  .container {
    width: min(100% - 3rem, var(--container));
  }

  .button-row {
    align-items: center;
    flex-direction: row;
    gap: var(--space-4);
  }

  .facts-list {
    gap: 0.6rem 0.85rem;
  }

  .facts-list li {
    font-size: var(--text-sm);
    padding: 0.4rem 1rem;
  }

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

  .value-grid,
  .place-grid,
  .feature-grid,
  .evidence-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    align-items: start;
    grid-template-columns: 1fr auto;
  }

  .copyright {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56rem) {
  :root {
    --header-height: 4.75rem;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
  }

  .site-nav[data-open="true"] {
    position: static;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .nav-list {
    align-items: center;
    gap: var(--space-4);
    grid-auto-flow: column;
  }

  .nav-list a:not(.button) {
    padding: 0;
    font-size: var(--text-sm);
  }

  .nav-list .button {
    margin-top: 0;
  }

  .hero-layout {
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .value-grid,
  .place-grid,
  .feature-grid {
    gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .evidence-layout {
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-layout {
    gap: clamp(3rem, 7vw, 5.5rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  .form-intro {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }

  .faq-layout {
    gap: var(--space-6);
    grid-template-columns: minmax(14rem, 0.6fr) minmax(0, 1fr);
  }

  .faq-intro {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }

  .site-footer {
    padding-block: var(--space-5);
  }

  .footer-inner {
    align-items: center;
    grid-template-columns: 1fr auto auto;
  }

  .copyright {
    grid-column: auto;
  }

  .sticky-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   House
   Two typefaces, evergreen ownership, clay used sparingly, brass for fine
   rules. Institution-style arches and seals carry the reassurance; ivory,
   real kids, and real work carry the warmth.
   ========================================================================== */
:root {
  --brass: #A8874E;
  --brass-soft: #D9C9A6;
  --stone: #DCD3C6;
}

h1, h2, h3 { font-weight: 400; }
h2 { letter-spacing: -.03em; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; text-transform: none; letter-spacing: .02em; font-weight: 600; color: var(--accent); }
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--brass); }
.house-statement .eyebrow::before, .program-full .eyebrow::before { background: var(--brass-soft); }

/* Header */
.site-header { background: rgb(247 243 235 / 92%); border-bottom-color: var(--stone); }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand-mark { width: 2.1rem; height: 2.1rem; flex: none; }
.wordmark { color: var(--accent); font-weight: 500; letter-spacing: -.035em; font-size: 1.28rem; }
.nav-list a:not(.button) { font-weight: 500; }
.nav-list a:not(.button):hover { color: var(--accent); }
.button { gap: .45rem; font-weight: 600; letter-spacing: .005em; border-radius: 999px; padding-inline: 1.6rem; }
.button-small { padding-inline: 1.15rem; }

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.hero h1 { font-size: clamp(3rem, 5.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.05em; max-width: 14ch; }
.hero .lede { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height: 1.4; color: var(--ink); max-width: 30ch; }
.hero-note { display: inline-flex; flex-wrap: wrap; gap: .35rem .9rem; }
.hero-media { position: relative; width: 100%; max-width: 30rem; justify-self: center; padding: 0 0 1.5rem 1.5rem; }
.hero-media::before { content: ""; position: absolute; inset: 1.5rem 1.5rem 0 0; border: 1px solid var(--brass); border-radius: 999px 999px 0 0; }
.hero-seal { position: absolute; left: 0; bottom: 0; display: grid; place-items: center; align-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--accent); color: var(--paper); text-align: center; line-height: 1.1; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--brass); }
.hero-seal span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hero-seal strong { font: 400 1.9rem/1.05 "Fraunces", Georgia, serif; letter-spacing: -.03em; margin-block: .15rem; }

/* Facts strip */
.facts { background: var(--paper); border-block-color: var(--stone); padding-block: 1.1rem; }
.facts-list { gap: .4rem 0; }
.facts-list li, .facts-list li:last-child { padding: 0 1.1rem; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.facts-list li + li { position: relative; }
.facts-list li + li::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--brass); }
.facts-list li:last-child { color: var(--accent); font-weight: 600; }

/* Beliefs */
.belief-intro { max-width: 48rem; margin-bottom: 3rem; }
.value-card { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
.value-card .img-slot { margin-bottom: 1.25rem; }
.value-num { padding: 0; background: none; color: var(--warm); font-weight: 600; letter-spacing: .12em; }
.value-card h3 { font-size: var(--text-xl); }
.value-card p { font-size: var(--text-base); }

/* Programs */
.program-grid { display: grid; gap: 1.5rem; }
.program-card { overflow: hidden; padding: clamp(1.5rem, 3vw, 2.8rem); background: var(--paper); border: 1px solid var(--stone); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.program-card > .img-slot { margin: calc(-1 * clamp(1.5rem, 3vw, 2.8rem)) calc(-1 * clamp(1.5rem, 3vw, 2.8rem)) clamp(1.5rem, 3vw, 2.4rem); }
.program-card > .img-slot .img-slot-frame { border-radius: 0; }
.program-card h3 { font-size: clamp(3.2rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.05em; margin-bottom: .8rem; color: var(--accent); }
.program-dot { color: var(--warm); }
.program-lede { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; line-height: 1.3; }
.program-paths { margin: .5rem 0 1.5rem; }
.program-paths div { padding-block: 1rem; border-bottom: 1px solid var(--stone); }
.program-paths dt { font-weight: 600; margin-bottom: .35rem; }
.program-paths dd { margin: 0; color: var(--ink-soft); }
.program-note, .program-footnote { font-size: var(--text-sm); color: var(--ink-soft); }
.program-card > .text-link { margin-top: auto; align-self: start; }
.program-footnote { margin: 1.5rem 0 0; max-width: 65ch; }
.program-full { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.program-full h3, .program-full .eyebrow, .program-full .text-link, .program-full .program-note, .program-full .program-paths dd { color: var(--paper); }
.program-full .program-paths dd, .program-full .program-note { opacity: .82; }
.program-full .program-paths div { border-color: #4a6a61; }

/* Experience */
.gallery { display: grid; gap: 1rem; margin-bottom: var(--space-6); }
.feature-card { background: transparent; border: 0; border-top: 1px solid var(--stone); border-radius: 0; padding: 1.5rem 0 0; box-shadow: none; }
.feature-icon { width: 1.5rem; height: 1.5rem; margin-bottom: .9rem; background-color: var(--warm); }

/* Learning made visible */

/* Statement */
.house-statement { padding-block: var(--space-7); background: var(--accent); color: var(--paper); }
.house-statement .eyebrow { color: var(--paper); }
.statement-layout { display: grid; gap: var(--space-5); align-items: center; }
.house-statement .statement { font: 400 clamp(2.4rem, 4.6vw, 4.25rem)/1.12 "Fraunces", Georgia, serif; letter-spacing: -.035em; margin-bottom: 2rem; }
.statement-copy > p:last-child { max-width: 52ch; opacity: .85; }
.house-statement .img-slot { max-width: 26rem; width: 100%; justify-self: center; }

/* Form intro */
.form-intro .img-slot { margin-top: var(--space-4); }
.form-card { border-color: var(--stone); border-radius: var(--radius-lg); }
.faq-list summary { font-weight: 600; }
.faq-list summary::after { color: var(--warm); }

/* ==========================================================================
   Image slots
   Placeholders for photography still to be produced. Each carries its
   filename and the full generation prompt. site.js swaps in the photo once
   the file exists at data-image, so dropping the file in is enough.
   ========================================================================== */
.img-slot { min-width: 0; margin: 0; }
.img-slot-frame { position: relative; display: flex; flex-direction: column; gap: .6rem; aspect-ratio: 4 / 3; overflow: auto; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: repeating-linear-gradient(135deg, rgb(37 72 63 / 5%) 0 1px, transparent 1px 11px), #E7E4D9; color: var(--ink-soft); outline: 1px dashed rgb(168 135 78 / 65%); outline-offset: -8px; scrollbar-width: thin; }
.img-slot[data-ratio="4x5"] .img-slot-frame { aspect-ratio: 4 / 5; }
.img-slot[data-ratio="3x2"] .img-slot-frame { aspect-ratio: 3 / 2; }
.img-slot[data-ratio="16x9"] .img-slot-frame { aspect-ratio: 16 / 9; }
.img-slot-arch .img-slot-frame { border-radius: 999px 999px var(--radius-sm) var(--radius-sm); padding-top: 32%; outline-offset: -10px; }
.img-slot-tag { align-self: flex-start; padding: .2rem .55rem; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.img-slot .img-slot-prompt { margin: 0; color: inherit; font-size: .74rem; line-height: 1.5; }
.img-slot-dark .img-slot-frame { background: repeating-linear-gradient(135deg, rgb(247 243 235 / 6%) 0 1px, transparent 1px 11px), #1E3D35; color: rgb(247 243 235 / 78%); outline-color: rgb(217 201 166 / 55%); }
.img-slot-dark .img-slot-tag { background: var(--paper); color: var(--accent); }
.img-slot.is-loaded .img-slot-frame { padding: 0; overflow: hidden; outline: 0; background: var(--surface); }
.img-slot.is-loaded img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 40rem) {
  .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gallery .img-slot-wide { grid-column: 1 / -1; }
}

@media (min-width: 48rem) {
  .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 6vw, 5rem); }
}

@media (min-width: 56rem) {
  .gallery { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .gallery .img-slot-wide { grid-column: 1; grid-row: 1 / span 2; }
  .gallery .img-slot-wide .img-slot-frame { height: 100%; aspect-ratio: auto; }
  .hero-media { justify-self: end; }
}

/* The Everfield: an open arch, a quiet wordmark, a clear family of offerings. */
.brand { color: var(--accent); gap: .5rem; }
.brand-mark { width: 2.3rem; height: 2.3rem; }
.brand .wordmark { font-size: clamp(1.4rem, 2vw, 1.65rem); letter-spacing: -.045em; }
.brand-promise { margin-bottom: var(--space-4); font: 400 clamp(1.2rem, 1rem + .8vw, 1.5rem)/1.4 "Fraunces", Georgia, serif; color: var(--accent); }
.program-family { margin-bottom: .3rem; font-size: var(--text-sm); font-weight: 500; letter-spacing: .01em; color: var(--accent); }
.program-full .program-family { color: var(--paper); }
@media (max-width: 24rem) { .brand .wordmark { font-size: 1.35rem; } }

/* ==========================================================================
   Portfolio demo
   A notebook page draws itself, a scan line passes over it, and the
   portfolio entry builds alongside. Without JavaScript, or with reduced
   motion, the finished state shows; site.js adds .is-anim and .is-playing.
   ========================================================================== */
.pf { position: relative; display: grid; gap: 1.25rem; align-items: center; }
.pf-paper { position: relative; margin: 0; padding: 1.25rem 1.25rem 2.5rem; overflow: hidden; border-radius: 4px; background: repeating-linear-gradient(transparent 0 23px, #E6DFD2 23px 24px) 0 12px / 100% 100% #FFFDF6; box-shadow: 0 1px 2px rgb(23 33 29 / 8%), 0 14px 34px rgb(23 33 29 / 10%); transform: rotate(-1.5deg); }
.pf-paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.1rem; width: 1px; background: rgb(197 104 72 / 35%); }
.pf-sketch { position: relative; width: 100%; height: auto; }
.pf-cap { position: absolute; right: 1rem; bottom: .7rem; color: var(--ink-soft); font-size: var(--text-xs); letter-spacing: .04em; }
.pf-scan { position: absolute; left: 0; right: 0; top: 0; height: 2.5rem; opacity: 0; background: linear-gradient(transparent, rgb(168 135 78 / 14%) 70%, var(--brass) 70%, var(--brass) calc(70% + 2px), transparent calc(70% + 2px)); pointer-events: none; }
.pf-arrow { display: grid; place-items: center; justify-self: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--brass); border-radius: 50%; background: var(--paper); color: var(--accent); transform: rotate(90deg); }
.pf-arrow svg { width: 1.2rem; height: 1.2rem; }
.pf-card { padding: 1.4rem 1.5rem; border: 1px solid var(--stone); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.pf-head { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.pf-flag { color: var(--warm); }
.pf-title { margin: .5rem 0 .2rem; font: 400 clamp(1.45rem, 1.2rem + 1vw, 1.85rem)/1.15 "Fraunces", Georgia, serif; letter-spacing: -.025em; }
.pf-sub { margin-bottom: 1rem; color: var(--ink-soft); font-size: var(--text-sm); }
.pf-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .5rem; }
.pf-thumbs figure { margin: 0; padding: .6rem .6rem .45rem; border-radius: var(--radius); background: var(--paper); }
.pf-thumbs svg { width: 100%; height: auto; }
.pf-thumbs figcaption { margin-top: .25rem; color: var(--ink-soft); font-size: var(--text-xs); }
.pf-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding-block: .7rem; border-top: 1px solid #EEE6DA; font-size: var(--text-sm); }
.pf-label { color: var(--accent); font-weight: 600; }
.pf-skills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pf-chip { padding: .15rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: var(--text-xs); font-weight: 600; }
.pf-foot { margin: 0; padding-top: .7rem; border-top: 1px solid #EEE6DA; color: var(--ink-soft); font-size: var(--text-xs); }
.pf-replay { justify-self: end; grid-column: 1 / -1; padding: .4rem .9rem; border: 1px solid var(--stone); border-radius: 999px; background: transparent; color: var(--accent); font-size: var(--text-xs); font-weight: 600; }
.pf-replay:hover { border-color: var(--accent); }

.pf.is-anim .pf-draw { opacity: 0; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.pf.is-anim .pf-honey rect { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.pf.is-anim .pf-step, .pf.is-anim .pf-chip { opacity: 0; transform: translateY(8px); }
.pf.is-anim .pf-arrow, .pf.is-anim .pf-card { opacity: 0; }
.pf.is-playing .pf-draw { animation: pf-draw .55s ease-out forwards; }
.pf.is-playing .pf-honey rect { animation: pf-fill .7s cubic-bezier(.3, .7, .4, 1) forwards; }
.pf.is-playing .pf-honey rect:nth-child(2) { animation-delay: 3.15s; }
.pf.is-playing .pf-honey rect:nth-child(3) { animation-delay: 3.3s; }
.pf.is-playing .pf-honey rect:first-child { animation-delay: 3s; }
.pf.is-playing .pf-scan { animation: pf-scan 1s ease-in-out 3.6s forwards; }
.pf.is-playing .pf-step, .pf.is-playing .pf-chip { animation: pf-in .5s ease-out forwards; }
.pf.is-playing .pf-arrow, .pf.is-playing .pf-card { animation: pf-fade .5s ease-out forwards; }
.pf.is-playing .pf-card { animation-delay: 4.5s; }
.pf.is-playing .pf-step .pf-chip { animation-duration: .35s; }
.pf.is-playing .t1 { animation-delay: 0.2s; }
.pf.is-playing .t2 { animation-delay: 0.6s; }
.pf.is-playing .t3 { animation-delay: 0.8s; }
.pf.is-playing .t4 { animation-delay: 1.15s; }
.pf.is-playing .t5 { animation-delay: 1.5s; }
.pf.is-playing .t6 { animation-delay: 1.8s; }
.pf.is-playing .t7 { animation-delay: 2.1s; }
.pf.is-playing .t8 { animation-delay: 2.35s; }
.pf.is-playing .t9 { animation-delay: 2.6s; }
.pf.is-playing .t10 { animation-delay: 3.0s; }
.pf.is-playing .t11 { animation-delay: 3.0s; }
.pf.is-playing .t12 { animation-delay: 3.25s; }
.pf.is-playing .t13 { animation-delay: 3.5s; }
.pf.is-playing .t15 { animation-delay: 4.4s; }
.pf.is-playing .t16 { animation-delay: 4.7s; }
.pf.is-playing .t17 { animation-delay: 4.95s; }
.pf.is-playing .t18 { animation-delay: 5.2s; }
.pf.is-playing .t19 { animation-delay: 5.6s; }
.pf.is-playing .t20 { animation-delay: 5.75s; }
.pf.is-playing .t21 { animation-delay: 5.9s; }
.pf.is-playing .t22 { animation-delay: 6.05s; }
.pf.is-playing .t23 { animation-delay: 6.35s; }
.pf.is-playing .t24 { animation-delay: 6.6s; }
@keyframes pf-draw { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes pf-fill { to { transform: scaleY(1); } }
@keyframes pf-scan { 0% { top: -2.5rem; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes pf-in { to { opacity: 1; transform: none; } }
@keyframes pf-fade { to { opacity: 1; } }

@media (min-width: 56rem) {
  .pf { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
  .pf-arrow { transform: none; }
}

/* One visible launch note keeps operating status clear without repeating it in the FAQ. */
.launch-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--stone); max-width: 72ch; }
.launch-note h3 { font-size: var(--text-lg); color: var(--accent); margin-bottom: .65rem; }
.launch-note p { font-size: var(--text-sm); color: var(--ink-soft); }
.launch-note strong { color: var(--ink); font-weight: 600; }

/* Static hero retains the signature arch. */
.hero-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--radius-sm) var(--radius-sm); background: var(--surface); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }