/* Component styles for heroes, section blocks, cards and the contact form. */

/* Page hero */
.page-hero { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 5vw, 72px); }
.page-hero-inner { display: grid; gap: var(--space-7); align-items: end; }
.page-hero .display { max-width: 16ch; margin-bottom: 0; }
.page-hero-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-sand); }
.page-hero-media img, .page-hero-media picture { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .page-hero.has-media .page-hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

/* Home hero */
.hero-home { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 78vh; padding-block: clamp(96px, 16vw, 160px) clamp(56px, 8vw, 96px); }
.hero-home-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-home-media .parallax { position: absolute; inset: -8% 0; }
.hero-home-media picture, .hero-home-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-home-media img { object-position: 60% 40%; }
.hero-home::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 53, 32, 0.92) 0%, rgba(9, 53, 32, 0.78) 40%, rgba(9, 53, 32, 0.2) 70%, transparent 100%);
}
.hero-home::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 53, 32, 0.55), transparent);
}
.hero-home-inner { position: relative; z-index: 3; }
.hero-home .eyebrow { color: var(--color-gold); }
.hero-home .display { color: var(--color-on-dark); max-width: 17ch; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); }
.hero-actions .btn-row { margin-top: var(--space-5); }
.hero-home > .pattern-band { position: absolute; inset: auto 0 0 0; z-index: 3; }
@media (min-width: 900px) {
  .hero-home { min-height: min(92vh, 880px); }
  .hero-home-media img { object-position: 80% 50%; }
  .hero-home::before {
    background: linear-gradient(to right, rgba(9, 53, 32, 0.92) 0%, rgba(9, 53, 32, 0.78) 40%, rgba(9, 53, 32, 0.2) 70%, transparent 100%);
  }
}
/* The overlay header is fixed and out of flow, so give the hero content room to clear it. */
html.nav-overlay .hero-home { padding-top: calc(var(--header-h) + var(--space-6)); }

.section-title { max-width: 22ch; }
.section-lead { margin-bottom: var(--space-6); }

/* Checklist grid */
.section-checklist { background: var(--color-sand); }
.checklist { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.checklist-item { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-md); line-height: 1.45; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.checklist-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.tick { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--color-forest); color: var(--color-gold); }

/* Icon badge, the one circular icon chip. Cards, process nodes and the audience
   callout all use it, sized through --badge-size. */
.icon-badge {
  --badge-size: 48px;
  position: relative; z-index: 1; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--badge-size); height: var(--badge-size);
  border-radius: 50%; background: var(--color-sand-2); color: var(--color-forest);
  margin-bottom: var(--space-4);
}
.icon-badge .icon { width: calc(var(--badge-size) / 2); height: calc(var(--badge-size) / 2); }

/* Photo backdrop, a full-bleed photo behind a section with a scrim over it so
   text stays legible. Used by the CTA band and the coming soon card. */
.photo-backdrop { position: absolute; inset: 0; z-index: 0; }
.photo-backdrop picture, .photo-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.scrim { position: absolute; inset: 0; z-index: 1; background: rgba(17, 17, 17, 0.72); }

/* Icon line (contact email, footer contact list) */
.icon-line { display: flex; align-items: center; gap: var(--space-3); }
.icon-line .icon { color: var(--color-forest); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--color-forest); color: var(--color-on-dark); }
.cta-band > .pattern-band { position: relative; z-index: 2; }
.cta-band-inner { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: clamp(64px, 8vw, 112px); }
.cta-heading { color: var(--color-on-dark); font-size: var(--step-4); max-width: 18ch; margin: 0; }
.btn-lg { font-size: var(--step-0); padding: 1.1em 2em; }

/* Coming soon */
.coming-soon { position: relative; overflow: hidden; }
.coming-soon .container { position: relative; z-index: 2; }
.coming-soon-card { padding: clamp(32px, 5vw, 64px); background: var(--color-sand); border-radius: var(--radius-lg); max-width: 720px; }
.coming-soon-text { font-family: var(--font-heading); font-size: var(--step-2); color: var(--color-forest); }

/* Feature blocks */
.section-features { background: var(--color-sand); }
.features { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: var(--space-6); }
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(var(--feature-cols, auto-fit), minmax(min(100%, 300px), 1fr)); }
}
.feature { padding: clamp(24px, 3vw, 40px); background: var(--color-cream); border-radius: var(--radius-lg); border: 1px solid var(--color-line); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.feature-title { font-size: var(--step-2); }
.feature-body > :last-child { margin-bottom: 0; }

/* Numbered cards */
.section-numbered { background: var(--color-sand); }
.numbered-cards { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.numbered-card { position: relative; padding: clamp(28px, 3vw, 40px); background: var(--color-cream); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.numbered-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card-label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.card-title { font-size: var(--step-2); }
.card-body > :last-child { margin-bottom: 0; }

/* Program cards */
.section-programs { background: var(--color-sand); }
.program-cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.program-card { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); background: var(--color-cream); border-radius: var(--radius-lg); border: 1px solid var(--color-line); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s; }
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--color-gold); }
.program-title { font-size: var(--step-2); }
.program-desc { color: var(--color-muted); flex: 1; }
.program-links { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-line); }
.program-links li { margin: 0; }
.program-link { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; font-weight: 700; text-decoration: none; line-height: 1.35; }
.program-link svg { flex: none; width: 18px; transition: transform 0.35s var(--ease-out); }
.program-link:hover svg { transform: translateX(5px); }
.program-note { padding: 10px 0; color: var(--color-muted); font-size: var(--step--1); }

/* Media split (image on one side, prose content on the other) */
.media-split-inner { display: grid; gap: var(--space-6); }
.media-split-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-sand); }
.media-split-media img, .media-split-media picture { width: 100%; height: 100%; object-fit: cover; }
.media-split-sub + .media-split-sub { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.media-split-sub-title { margin-bottom: 0.5em; }
.media-split-content .icon-list { list-style: none; margin: var(--space-5) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.media-split-content .icon-list li::marker { content: none; }
.icon-list-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.icon-list-item .icon-list-icon { color: var(--color-forest); margin-top: 0.15em; }
@media (min-width: 900px) {
  .media-split-inner { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-8); }
  .media-split-media { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  /* The photo stays at the top and sticks while long copy scrolls, and short copy sits centred beside it. */
  .media-split-content { align-self: center; }
  .media-split-right .media-split-media { order: 2; }
  .media-split-right .media-split-content { order: 1; }
}

/* Statement (closing full-width band) */
.section-statement { background: var(--color-sand); }
.statement-inner { padding-block: var(--section-pad); text-align: center; }
.statement-inner .icon.statement-quote { width: 40px; height: 40px; color: var(--color-gold-deep); margin-inline: auto; }
/* An authored heading, styled as an eyebrow. The heading resets keep the look identical to the paragraph it replaced. */
.statement-eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; line-height: inherit; letter-spacing: 0.14em; text-transform: uppercase; font-variation-settings: normal; color: var(--color-forest); margin: var(--space-4) 0 0; }
.statement-body { max-width: 60ch; margin-inline: auto; text-align: center; font-family: var(--font-heading); font-size: var(--step-2); line-height: 1.35; color: var(--color-forest); }
.statement-body p { margin-bottom: 1em; }
.statement-body > :last-child { margin-bottom: 0; }
.statement-body .btn-row { justify-content: center; }
.statement-forest-deep { background: var(--color-forest-deep); }
.statement-forest-deep .statement-body { color: var(--color-on-dark); }
.statement-forest-deep .statement-eyebrow { color: var(--color-gold); }
.statement-forest-deep .icon.statement-quote { color: var(--color-gold); }

/* Split intro (heading left, body and buttons right) */
.section-split-intro { position: relative; overflow: hidden; background: var(--color-sand); }
.split-intro-accent {
  display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 16px;
  background: url("../img/pattern-band.svg") repeat-y left top / 48px 24px;
  opacity: 0.9; pointer-events: none;
}
.split-intro-inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); }
.split-intro-heading { font-size: var(--step-4); max-width: 14ch; margin: 0; }
.split-intro-body > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .split-intro-inner { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-8); }
  .split-intro-accent { display: block; }
}

/* Values grid (balanced icon-card grid, no lone widow) */
.values-grid-sand { background: var(--color-sand); }
.values-grid-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.value-grid-card { padding: clamp(24px, 3vw, 32px); background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-lg); text-align: center; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.value-grid-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.value-grid-card .icon-badge { margin-inline: auto; }
.value-grid-text { font-family: var(--font-heading); font-size: var(--step-1); color: var(--color-forest); margin: 0; }
@media (min-width: 640px) {
  .values-grid-list { grid-template-columns: repeat(2, 1fr); }
  .value-grid-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 320px; }
}
@media (min-width: 1024px) {
  .values-grid-list { grid-template-columns: repeat(var(--grid-cols), 1fr); }
  .value-grid-card { grid-column: var(--card-start) / span 2; grid-row: var(--card-row); }
  .value-grid-card:last-child:nth-child(odd) { grid-column: var(--card-start) / span 2; justify-self: stretch; width: auto; max-width: none; }
}

/* Process steps (connected sequence, no numbers) */
.process-steps { list-style: none; margin: var(--space-7) 0 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-6); }
.process-steps::before { content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--color-line); }
.process-step { position: relative; display: flex; gap: var(--space-4); align-items: flex-start; }
/* The node sits on the connector line, and the step's own gap spaces the text. */
.process-node { margin-bottom: 0; }
.process-text { margin: 0; padding-top: 10px; }
@media (min-width: 900px) {
  .process-steps { flex-direction: row; gap: var(--space-5); }
  .process-steps::before { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .process-step { flex: 1; flex-direction: column; align-items: center; text-align: center; }
  .process-text { padding-top: 0; margin-top: var(--space-4); }
}

/* Callout (audience, note, status variants) */
.callout-card { padding: clamp(28px, 4vw, 40px); border-radius: var(--radius-lg); }
.callout-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); color: var(--color-forest); }
.callout-title { margin-bottom: 0.5em; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-audience { background: var(--color-sand); }
.callout-audience .callout-icon { --badge-size: 56px; }
.callout-audience .callout-body { font-size: var(--step-1); }
/* Note carries the program and service boundary statements, so it reads at body size
   on its own sand surface rather than as a footnote on the cream section behind it. */
.callout-note { background: var(--color-sand); border: 1px solid var(--color-line); }
.callout-note .callout-icon { width: 28px; height: 28px; }
.callout-note .callout-body { font-size: var(--step-0); color: var(--color-muted); }
.callout-status { background: var(--color-forest); color: var(--color-on-dark); }
.callout-status .callout-title { color: var(--color-on-dark); }
.callout-status .callout-icon { width: 40px; height: 40px; color: var(--color-gold); }

/* Highlight (full-width forest band inside the page flow) */
.section-highlight { background: var(--color-forest); color: var(--color-on-dark); }
.highlight-inner { padding-block: var(--section-pad); text-align: center; }
.highlight-icon { margin-inline: auto; }
.highlight-heading { color: var(--color-on-dark); max-width: 22ch; margin-inline: auto; }
.highlight-body { max-width: 52ch; margin-inline: auto; font-size: var(--step-1); color: var(--color-on-dark-muted); }
.highlight-body > :last-child { margin-bottom: 0; }

/* Table of contents layout for long prose pages, turned on with the toc front matter key */
.toc-mobile { margin-bottom: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.toc-mobile summary { cursor: pointer; font-weight: 700; color: var(--color-forest); }
.toc-mobile nav ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.toc-mobile nav li { margin-bottom: var(--space-2); }
.toc-sidebar { display: none; }
@media (min-width: 1024px) {
  .toc-mobile { display: none; }
  .toc-container { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; }
  .toc-sidebar { display: block; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .toc-sidebar-title { font-weight: 700; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-4); }
  .toc-sidebar ul { list-style: none; margin: 0; padding: 0; }
  .toc-sidebar li { margin-bottom: var(--space-2); }
  .toc-sidebar a { display: block; padding: 8px 0 8px var(--space-4); color: var(--color-ink); text-decoration: none; border-left: 2px solid var(--color-line); }
  .toc-sidebar a:hover { color: var(--color-forest); border-left-color: var(--color-forest); font-weight: 700; }
}

/* Contact form */
.contact-layout { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-form { margin-top: 0; padding: clamp(24px, 4vw, 48px); background: var(--color-sand); border-radius: var(--radius-lg); }
.form-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); border: 0; padding: 0; min-width: 0; }
.field-narrow { max-width: 280px; }
.field label, .field legend { font-weight: 700; font-size: var(--step--1); color: var(--color-ink); }
.req { color: var(--color-ember); }
.field input, .field textarea { font: inherit; padding: 14px 16px; border: 1.5px solid var(--color-muted); border-radius: var(--radius-md); background: var(--color-cream); color: var(--color-ink); transition: border-color 0.2s, box-shadow 0.2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--color-forest); box-shadow: 0 0 0 2px var(--color-forest), 0 0 0 5px var(--color-gold); }
.field [aria-invalid="true"] { border-color: var(--color-ember); }
.checks { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: var(--space-3); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 500 !important; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--color-forest); flex: none; }
.form-privacy { font-size: var(--step--1); color: var(--color-muted); }
.form-status { font-weight: 700; color: var(--color-forest); min-height: 1.5em; }

/* Four-card grids are a single column on mobile and two by two from tablet up */
@media (min-width: 720px) {
  .program-cards, .numbered-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Checklists cap at three columns on desktop */
@media (min-width: 1024px) {
  .checklist { grid-template-columns: repeat(3, 1fr); }
}

.page-hero + .section-form { padding-top: 0; }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 1fr 1fr; }
  .contact-copy { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}