@media all, bookshop {

@charset "UTF-8";
/* ============================================================
   SHARED COMPONENT STYLES (compiled by bookshop-sass into
   /css/components.css, ahead of every component's own .scss).
   Brand primitives live in src/css/base.css + tokens.css.
   Intentionally empty — the starter's stray --font token was
   removed so it can't shadow the brand type tokens.
   ============================================================ */
/* COMPONENT STYLES · badge-pillars — masked-badge "why us" points. */
.badge-pillars {
  padding: clamp(48px, 7vw, 88px) 0;
}

.badge-pillars .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.bp-head {
  max-width: 56ch;
  margin-bottom: 34px;
}

.bp-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 14px 0 12px;
}

.bp-intro {
  opacity: 0.85;
  line-height: 1.55;
}

.bp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 44px);
}

@media (max-width: 760px) {
  .bp-grid {
    grid-template-columns: 1fr;
  }
}
.bp-pillar {
  color: var(--color-ink);
} /* badge tint on light bg */
.bp-badge {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  background: currentColor;
  -webkit-mask: var(--badge) center/contain no-repeat;
  mask: var(--badge) center/contain no-repeat;
}

.bp-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.bp-body {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* On a dark host section, add class "badge-pillars--dark" for light badges/text. */
.badge-pillars--dark {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.badge-pillars--dark .bp-pillar {
  color: var(--color-on-dark);
}

.badge-pillars--dark .bp-body {
  color: var(--color-on-dark);
  opacity: 0.75;
}

/* ============================================================
   COMPONENT STYLES · bienvenidos
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.bienvenidos {
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.bienvenidos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 40%, rgba(233, 255, 79, 0.1) 0%, transparent 45%);
}

.bv-marginalia {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
  position: relative;
}

@media (max-width: 800px) {
  .bv-marginalia {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.bv-figure {
  position: sticky;
  top: 120px;
}

@media (max-width: 800px) {
  .bv-figure {
    position: static;
    max-width: 320px;
    margin: 0 auto;
  }
}
.bv-photo-v2 {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

.bv-photo-v2 svg {
  width: 100%;
  height: auto;
  display: block;
}

.bv-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 2;
}

.bv-figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.4;
}

.bv-figcaption em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}

.bv-figcaption span {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 600;
  opacity: 0.7;
}

.bv-prose .eyebrow {
  margin-bottom: 14px;
}

.bv-prose h2 {
  margin: 4px 0 24px;
  font-style: italic;
  max-width: 16ch;
}

.bv-prose h2 .accent {
  color: var(--color-accent);
  font-style: italic;
}

.bv-prose p {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.92;
  margin-bottom: 18px;
  max-width: 50ch;
}

.bv-callout {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem !important;
  color: var(--color-accent);
  padding: 20px 0 20px 24px;
  border-left: 2px solid var(--color-accent);
  margin: 24px 0 !important;
  opacity: 1 !important;
  max-width: 40ch !important;
}

.bv-small {
  font-size: 0.85rem !important;
  opacity: 0.7 !important;
  margin-top: 28px !important;
}

/* ============================================================
   COMPONENT STYLES · dual-cta
   Two co-equal cards. Identical treatment on both sides — neither CTA is
   visually demoted. Stacks on phones; no fixed widths.
   ============================================================ */
.dual-cta {
  background: var(--color-bg);
  color: var(--color-ink);
  padding: var(--section-pad) 0;
  position: relative;
}

.dual-cta .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.dual-cta .dc-head {
  max-width: 680px;
  margin: 0 auto 34px;
  text-align: center;
}

.dual-cta .dc-head .eyebrow {
  margin-bottom: 12px;
}

.dual-cta .dc-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.07;
  margin-bottom: 12px;
}

.dual-cta .dc-intro {
  opacity: 0.82;
  line-height: 1.6;
}

.dual-cta .dc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 760px) {
  .dual-cta .dc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dual-cta .dc-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  border: 1px solid rgba(237, 236, 237, 0.14);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.dual-cta .dc-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.dual-cta .dc-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  line-height: 1.15;
  margin-bottom: 10px;
}

.dual-cta .dc-card p {
  opacity: 0.88;
  line-height: 1.55;
  font-size: 0.95rem;
}

.dual-cta .dc-btn {
  margin-top: auto;
  align-self: flex-start;
}

.dual-cta .dc-watch .dc-btn {
  margin-top: 20px;
}

.dual-cta .dc-form {
  margin-top: 18px;
}

.dual-cta .dc-form :where(input, button) {
  max-width: 100%;
  box-sizing: border-box;
}

.dual-cta .dc-note {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 12px;
}

@media (max-width: 480px) {
  .dual-cta .dc-card {
    padding: 22px 18px;
  }
  .dual-cta .dc-btn {
    align-self: stretch;
    text-align: center;
  }
}
/* ============================================================
   COMPONENT STYLES · event-hero. Tokenized.
   ============================================================ */
.event-hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-on-dark);
  overflow: hidden;
}

.eh-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.eh-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eh-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 18, 14, 0.52), rgba(0, 18, 14, 0.74));
}

.eh-inner {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 12vh, 130px) var(--gutter);
  max-width: 44rem;
}

.eh-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 6px 13px;
  margin: 2px 0 16px;
}

.eh-title {
  font-family: var(--font-serif);
  font-weight: 400;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: balance;
}

.eh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 18px;
}

.eh-meta-item {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.eh-meta-item::before {
  content: "•";
  color: var(--color-accent);
  margin-right: 9px;
}

.eh-lede {
  font-size: 1.06rem;
  line-height: 1.6;
  opacity: 0.92;
  max-width: 48ch;
  margin: 0 0 26px;
}

.eh-buttons {
  flex-wrap: wrap;
}

/* content_side: left — copy sits at the page gutter in a narrower column so a
   photo's subjects (center/right) stay clear of the headline. A left-weighted
   scrim keeps it legible over whatever is behind it. On phones the copy would
   span the photo edge to edge, so the photo stacks above it instead. */
@media (max-width: 720px) {
  .event-hero.eh-left {
    padding-top: 0;
  }
  .event-hero.eh-left .eh-media {
    position: relative;
    inset: auto;
    aspect-ratio: 4/3;
  }
  .event-hero.eh-left .eh-scrim {
    background: linear-gradient(rgba(0, 18, 14, 0) 55%, var(--color-ink));
  }
  .event-hero.eh-left .eh-inner {
    padding-top: 12px;
  }
}
@media (min-width: 721px) {
  .event-hero.eh-left .eh-inner {
    max-width: var(--container);
  }
  .event-hero.eh-left .eh-inner > * {
    max-width: 30rem;
  }
  .event-hero.eh-left .eh-title {
    max-width: 9ch;
    text-wrap: wrap;
  }
  .event-hero.eh-left .eh-scrim {
    background: linear-gradient(90deg, rgba(0, 18, 14, 0.72) 0%, rgba(0, 18, 14, 0.45) 38%, rgba(0, 18, 14, 0) 62%), linear-gradient(rgba(0, 18, 14, 0.34), rgba(0, 18, 14, 0.66));
  }
}
/* Ultra-wide: stop the photo scaling with the viewport (which would drift its
   subjects under the copy); cap it, anchor right, and fade its left edge into
   the band so framing matches a 1920px screen. */
@media (min-width: 1921px) {
  .event-hero.eh-left {
    background: var(--color-ink-darker);
  }
  .event-hero.eh-left .eh-media {
    left: auto;
    width: 1920px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 320px);
    mask-image: linear-gradient(90deg, transparent 0, #000 320px);
  }
}
/* ============================================================
   COMPONENT STYLES · faq (accordion). Tokenized to match resources.
   ============================================================ */
.faq {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.faq .container {
  max-width: 1040px;
}

.faq-header {
  text-align: center;
  margin-bottom: 44px;
}

.faq-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto;
  max-width: 20ch;
}

.faq-lede {
  opacity: 0.85;
  max-width: 52ch;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid rgba(0, 59, 49, 0.14);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 96px;
}

.faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-ink);
}

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

.faq-q:hover {
  background: rgba(0, 59, 49, 0.03);
}

.faq-q-text {
  text-wrap: balance;
}

.faq-chev {
  flex: none;
  font-size: 1.4rem;
  color: var(--color-surface-1);
  transition: transform var(--dur) var(--ease);
  transform: rotate(90deg);
}

.faq-item[open] .faq-chev {
  transform: rotate(-90deg);
}

.faq-a {
  padding: 2px 24px 22px;
}

.faq-a p {
  font-size: 0.98rem;
  line-height: 1.65;
  opacity: 0.85;
  max-width: 64ch;
  margin: 0;
}

/* ============================================================
   COMPONENT STYLES · healthcare-hero (YMYL)
   Ported from index.html, tokenized. Design LOCKED. The film slot
   is a REAL <video> (native controls); mock play/progress styles
   from the source are intentionally dropped as unused here.
   ============================================================ */
.hc-hero {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

/* Shared masked topo texture (replaces the old inline wave SVG). */
.hc-topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
  background: var(--color-accent);
  -webkit-mask: url("/assets/topo/topo-contours.svg") center/cover no-repeat;
  mask: url("/assets/topo/topo-contours.svg") center/cover no-repeat;
}

.hc-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 900px) {
  .hc-inner {
    grid-template-columns: 1fr;
  }
}
.hc-text h2 {
  margin: 16px 0 22px;
  max-width: 16ch;
}

.hc-lede {
  font-size: 1.08rem;
  line-height: 1.6;
  opacity: 0.92;
  margin-bottom: 36px;
  max-width: 52ch;
}

/* Credentials */
.hc-credentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid rgba(237, 236, 237, 0.18);
  border-bottom: 1px solid rgba(237, 236, 237, 0.18);
}

@media (max-width: 600px) {
  .hc-credentials {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 0;
  }
}
.hc-cred-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.hc-cred-num .pct {
  font-size: 0.55em;
  margin-left: 2px;
  opacity: 0.85;
}

.hc-cred-lbl {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.78;
  line-height: 1.4;
}

/* Visual column */
.hc-visual-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 460px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .hc-visual-v2 {
    max-width: 100%;
    margin: 0;
  }
}
.film-strip {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 560px) {
  .film-strip {
    grid-template-columns: 1fr;
  }
}
.film-strip-video {
  aspect-ratio: 9/16;
  background: linear-gradient(180deg, var(--color-ink-darker) 0%, var(--color-surface-1) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5);
}

@media (max-width: 560px) {
  .film-strip-video {
    aspect-ratio: 16/9;
    max-height: 320px;
  }
}
.fs-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  background: #001f1a;
  display: block;
}

.fs-caption {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  background: rgba(0, 40, 34, 0.85);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-left: 1.5px solid var(--color-accent);
  font-weight: 600;
}

.fs-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 0;
}

.fs-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.fs-byline {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 600;
}

/* Testimonial */
.hc-testimonial {
  background: rgba(237, 236, 237, 0.05);
  border: 1px solid rgba(237, 236, 237, 0.15);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 32px 30px 26px;
  position: relative;
}

.hc-test-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3rem;
  line-height: 0.5;
  color: var(--color-accent);
  opacity: 0.5;
  margin-bottom: 14px;
}

.hc-test-quote {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.4;
  margin-bottom: 24px;
}

.hc-test-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(237, 236, 237, 0.15);
}

.hc-test-logo-img {
  height: 36px;
  width: auto;
  background: #fff;
  padding: 5px 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.hc-test-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 2px;
}

.hc-test-role {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 500;
}

/* Benefits grid */
/* Full-width bands. These are direct children of the two-column .hc-inner
   grid, so without an explicit span they drop into row 2 as two side-by-side
   cells — which squeezed the benefits into 1.1fr and the three delivery cards
   into 1fr (one word per line). Spanning every column stacks them instead. */
.hc-benefits {
  grid-column: 1/-1;
  position: relative;
  z-index: 2;
  margin-top: 56px;
}

.hc-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 30px;
}

@media (max-width: 1040px) {
  .hc-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .hc-benefit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hc-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Icon badge: white SVG centered on a sage chip so it reads on the dark section. */
.hc-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.hc-ico img {
  width: 26px;
  height: 26px;
  opacity: 0.95;
}

.hc-benefit b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.25;
  margin-bottom: 5px;
}

.hc-benefit span {
  font-size: 0.82rem;
  opacity: 0.78;
  line-height: 1.45;
}

/* Formats strip */
.hc-formats-strip {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
  background: rgba(237, 236, 237, 0.04);
  border: 1px solid rgba(237, 236, 237, 0.15);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .hc-formats-strip {
    grid-template-columns: 1fr;
  }
}
.hc-format-v2 {
  padding: 32px 28px;
  border-right: 1px solid rgba(237, 236, 237, 0.15);
}

.hc-format-v2:last-child {
  border-right: none;
}

@media (max-width: 700px) {
  .hc-format-v2 {
    border-right: none;
    border-bottom: 1px solid rgba(237, 236, 237, 0.15);
  }
  .hc-format-v2:last-child {
    border-bottom: none;
  }
}
.hc-format-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.hc-format-name-v2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--color-on-dark);
}

.hc-format-desc-v2 {
  font-size: 0.84rem;
  opacity: 0.78;
  line-height: 1.5;
}

/* --- Band 2 header ("Ways we deliver") --- */
.hc-formats-head {
  grid-column: 1/-1;
  position: relative;
  z-index: 2;
  margin-top: 56px;
}

.hc-formats-head .eyebrow {
  margin-bottom: 14px;
}

.hc-formats-intro {
  opacity: 0.85;
  line-height: 1.6;
  max-width: 68ch;
  font-size: 1rem;
}

/* --- De-weighted source citations ---
   Credibility kept, visual weight removed: the claim reads at full strength,
   the citation sits under it smaller and quieter. */
.hc-benefit .hc-src {
  display: block;
  margin-top: 8px;
  font-size: 0.68rem;
  line-height: 1.4;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.hc-benefit .hc-src a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.hc-benefit .hc-src a:hover {
  opacity: 0.85;
}

/* Cards must be able to shrink inside the grid, or long words force
   horizontal overflow at phone widths. */
.hc-benefit {
  min-width: 0;
}

.hc-benefit > div {
  min-width: 0;
}

.hc-benefit b, .hc-benefit span {
  overflow-wrap: anywhere;
}

.hc-format-v2 {
  min-width: 0;
}

.hc-format-name-v2, .hc-format-desc-v2 {
  overflow-wrap: anywhere;
}

/* ============================================================
   COMPONENT STYLES · hero-slider
   Ported from index.html, tokenized: solid brand colors → tokens;
   semi-transparent overlays kept as rgba() literals (same pattern
   as on-the-road.scss). Design LOCKED.
   ============================================================ */
.hero-slider {
  position: relative;
  min-height: 92vh;
  background: var(--color-ink);
  color: var(--color-on-dark);
  overflow: hidden;
}

.hs-slides {
  position: absolute;
  inset: 0;
}

.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
}

.hs-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hs-slide {
    transition: none;
  }
}
.hs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
}

.hs-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 40, 34, 0.55) 0%, transparent 26%, rgba(0, 40, 34, 0.35) 55%, rgba(0, 40, 34, 0.92) 100%), linear-gradient(110deg, rgba(0, 40, 34, 0.7) 0%, transparent 55%);
}

.hs-content {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 124px;
}

.hs-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
}

.hs-h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  line-height: 1.05;
  margin: 18px 0 22px;
  max-width: 20ch;
}

.hs-h1 .accent {
  color: var(--color-accent);
  font-style: italic;
}

.hs-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  max-width: 46ch;
  opacity: 0.92;
  margin-bottom: 32px;
}

.hero-slider .btn-group {
  gap: 14px;
}

.hs-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding-top: 26px;
  pointer-events: none;
}

.hs-brandline {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(237, 236, 237, 0.75);
}

.hs-brandline em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent);
  font-size: 1.1rem;
}

@media (max-width: 700px) {
  .hs-brandline em {
    display: none;
  }
}
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(237, 236, 237, 0.35);
  background: rgba(0, 40, 34, 0.4);
  color: var(--color-on-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
}

.hs-arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.hs-prev {
  left: 20px;
}

.hs-next {
  right: 20px;
}

@media (max-width: 700px) {
  .hs-arrow {
    display: none;
  }
}
.hs-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 18px 0;
  border-top: 1px solid rgba(237, 236, 237, 0.18);
  background: rgba(0, 40, 34, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hs-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.hs-dots {
  display: flex;
  gap: 10px;
}

.hs-dot {
  width: 34px;
  height: 4px;
  border: none;
  border-radius: 2px;
  background: rgba(237, 236, 237, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s;
}

.hs-dot.is-active {
  background: var(--color-accent);
}

@media (max-width: 600px) {
  .hs-content {
    padding-bottom: 104px;
  }
}
/* Video slide (Trauma Talk): inline youtube-nocookie facade */
.hs-play-glyph {
  font-size: 0.8em;
}

.hs-player {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #000;
}

.hs-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hs-slide.is-playing .hs-content {
  opacity: 0;
  pointer-events: none;
}

.hs-slide.is-playing .hs-grad {
  opacity: 0;
}

.hs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 9;
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.hs-close:hover {
  background: rgba(0, 0, 0, 0.85);
}

.hs-slide.is-playing .hs-close {
  display: flex;
}

/* Hide arrows + bottom bar while a video is playing for a clean view */
.hero-slider.is-playing .hs-arrow, .hero-slider.is-playing .hs-bottom {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   COMPONENT STYLES · impact-glance
   Design locked, tokens only — no hardcoded brand values, so this
   file ports to CiV / Greeter Falls untouched.
   ============================================================ */
.impact-glance {
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.impact-glance::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 30%, rgba(233, 255, 79, 0.06) 0%, transparent 42%);
}

.impact-glance .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.impact-glance .ig-head {
  max-width: 760px;
  margin-bottom: 40px;
}

.impact-glance .ig-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--type-eyebrow);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.impact-glance .ig-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.05;
  margin-bottom: 16px;
}

.impact-glance .ig-intro {
  opacity: 0.9;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
}

.impact-glance .ig-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(237, 236, 237, 0.2);
  border-bottom: 1px solid rgba(237, 236, 237, 0.2);
}

@media (max-width: 1000px) {
  .impact-glance .ig-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .impact-glance .ig-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.impact-glance .ig-stat {
  padding: 30px 18px;
  border-right: 1px solid rgba(237, 236, 237, 0.16);
}

.impact-glance .ig-stat:last-child {
  border-right: none;
}

.impact-glance .ig-stat .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 10px;
}

.impact-glance .ig-stat .lbl {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
  line-height: 1.45;
}

.impact-glance .ig-stat .note {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-top: 8px;
  line-height: 1.4;
}

.impact-glance .ig-foot {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-top: 22px;
  max-width: 70ch;
}

/* Outcome-only row (2–3 stats) — wider cells, same band. */
.impact-glance .ig-stats-narrow {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .impact-glance .ig-stats-narrow {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   COMPONENT STYLES · jt-med
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.jtmed {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.jtmed-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}

@media (max-width: 900px) {
  .jtmed-header {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
}
.jtmed-header h2 {
  margin: 16px 0 18px;
  max-width: 16ch;
}

.jtmed-header .sub {
  font-size: 1.05rem;
  opacity: 0.85;
}

.jtmed-ways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .jtmed-ways {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .jtmed-ways {
    grid-template-columns: 1fr;
  }
}
.jtmed-way {
  background: white;
  border: 1px solid rgba(0, 59, 49, 0.12);
  border-top: 3px solid var(--color-surface-1);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.jw-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-surface-1);
  font-size: 1rem;
  margin-bottom: 10px;
}

.jtmed-way h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 10px;
}

.jtmed-way p {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.8;
}

/* Circle of 100 promo */
.c100-promo {
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: var(--radius);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 800px) {
  .c100-promo {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 24px;
  }
}
.c100-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(233, 255, 79, 0.08) 0%, transparent 50%);
}

.c100-promo-text {
  position: relative;
}

.c100-tag {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
  font-weight: 600;
}

.c100-promo h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.15;
  margin-bottom: 12px;
  max-width: 26ch;
}

.c100-promo p {
  opacity: 0.85;
  max-width: 50ch;
  font-size: 0.95rem;
}

.c100-promo-cta {
  position: relative;
}

/* ============================================================
   COMPONENT STYLES · lead-magnet
   One primary opt-in card on sage, accent top rule (same card language
   as dual-cta). Offer panel sits beside the form on desktop, stacks
   above the fold-friendly form on phones.
   ============================================================ */
.lead-magnet {
  background: var(--color-bg);
  color: var(--color-ink);
  padding: clamp(48px, 7vw, 88px) 0;
  scroll-margin-top: 96px;
}

.lead-magnet .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lead-magnet .lm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  border: 1px solid rgba(237, 236, 237, 0.14);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 24px 20px;
}

.lead-magnet .lm-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.lead-magnet h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.08;
  margin-bottom: 10px;
  max-width: 22ch;
}

.lead-magnet .lm-body {
  opacity: 0.88;
  line-height: 1.55;
  max-width: 52ch;
}

.lead-magnet .lm-form {
  margin-top: 18px;
}

.lead-magnet .lm-form :where(input, button) {
  max-width: 100%;
  box-sizing: border-box;
}

.lead-magnet .lm-form noscript a {
  color: var(--color-accent);
  text-decoration: underline;
}

.lead-magnet .lm-note {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 12px;
}

.lead-magnet .lm-secondary {
  display: inline-flex;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.9rem;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-magnet .lm-secondary:hover {
  opacity: 1;
  color: var(--color-accent);
}

.lead-magnet .lm-offer {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(0, 40, 34, 0.35);
  border-radius: var(--radius);
  padding: 16px;
  order: -1;
}

.lead-magnet .lm-cover {
  width: 96px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  flex: 0 0 auto;
}

.lead-magnet .lm-offer-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.lead-magnet .lm-offer p {
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .lead-magnet .lm-card {
    padding: 40px 44px;
  }
  .lead-magnet .lm-card.has-offer {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }
  .lead-magnet .lm-offer {
    order: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .lead-magnet .lm-cover {
    width: 100%;
    max-width: 240px;
  }
}
/* COMPONENT STYLES · letter-cta — design locked, tokenized. */
.final-letter {
  background: var(--color-bg);
  color: var(--color-ink);
  padding: clamp(100px, 12vw, 160px) 0;
  position: relative;
  /* Light band: sage-tinted topo at low opacity (accent would clash on light). */
  --topo-tint: var(--color-surface-1);
  --topo-op: 0.07;
}

.final-letter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 59, 49, 0.1);
}

.final-letter .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.letter-inner {
  max-width: 680px;
}

.letter-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-1);
  margin-bottom: 32px;
}

.letter-body {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  margin-bottom: 40px;
}

.letter-body p {
  font-size: inherit;
  margin-bottom: 0.85em;
}

.letter-body em {
  color: var(--color-surface-1);
}

.letter-body .letter-line {
  font-style: italic;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 59, 49, 0.15);
  font-size: 0.9em;
}

.letter-signature {
  margin: 40px 0 32px;
}

.sig-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.sig-role {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.letter-buttons {
  justify-content: flex-start;
}

/* ============================================================
   COMPONENT STYLES · media-embed (YouTube / Vimeo / Spotify grid). Tokenized.
   ============================================================ */
.media-embed {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.me-header {
  text-align: center;
  margin-bottom: 40px;
}

.me-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto;
  max-width: 24ch;
}

.me-lede {
  opacity: 0.85;
  max-width: 54ch;
  margin: 0 auto;
}

.me-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

.me-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  font-weight: 600;
  margin-bottom: 8px;
}

.me-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.me-frame--video {
  aspect-ratio: 16/9;
}

.me-frame--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.me-frame--audio {
  background: transparent;
}

.me-frame--audio iframe {
  width: 100%;
  height: 152px;
  border: 0;
  display: block;
}

/* COMPONENT STYLES · methodology-strip — design locked, tokenized. */
.methodology-strip {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 88px; /* clear the sticky nav for the About ▾ #methodology deep-link */
}

.methodology-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 30%, rgba(233, 255, 79, 0.06) 0%, transparent 40%);
}

.methodology-strip .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.meth-strip-inner {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 900px) {
  .meth-strip-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.meth-strip-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.05;
  margin-bottom: 18px;
}

.meth-strip-head .eyebrow {
  margin-bottom: 14px;
}

.meth-strip-head p {
  opacity: 0.85;
  max-width: 36ch;
}

.meth-stages-h {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 700px) {
  .meth-stages-h {
    grid-template-columns: 1fr;
  }
  .meth-stages-h .meth-arrow-h {
    display: none;
  }
}
.meth-card-h {
  background: rgba(237, 236, 237, 0.04);
  border: 1px solid rgba(237, 236, 237, 0.15);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.meth-card-h .num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.meth-card-h .name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  margin-bottom: 8px;
}

.meth-card-h .desc {
  font-size: 0.82rem;
  opacity: 0.78;
  line-height: 1.45;
}

.meth-arrow-h {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  opacity: 0.55;
  font-size: 1.6rem;
  align-self: center;
}

/* COMPONENT STYLES · offering-tiers. Tokenized. */
.offering-tiers {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
  scroll-margin-top: 96px;
}

.ot-header {
  text-align: center;
  margin-bottom: 48px;
}

.ot-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto;
  max-width: 22ch;
}

.ot-lede {
  opacity: 0.85;
  max-width: 58ch;
  margin: 0 auto;
}

.ot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.ot-card {
  background: #fff;
  border: 1px solid rgba(0, 59, 49, 0.14);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ot-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.07);
}

.ot-length {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  background: rgba(81, 96, 77, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: flex-start;
}

.ot-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 6px 0 2px;
  color: var(--color-ink);
}

.ot-aud {
  font-size: 0.82rem;
  opacity: 0.75;
  margin: 0;
}

.ot-aud span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.ot-outcome {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 6px 0 0;
}

.ot-cta {
  text-align: center;
  margin-top: 40px;
}

.ot-foot {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 14px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   COMPONENT STYLES · on-the-road
   Everything visual lives here and is LOCKED from the CMS.
   References tokens only — no hardcoded brand values — so this
   file ports to CiV / Greeter Falls untouched.
   ============================================================ */
.on-road {
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.on-road .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.on-road .road-head {
  max-width: 760px;
  margin-bottom: 48px;
}

.on-road .road-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--type-eyebrow);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.on-road .road-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.05;
  margin-bottom: 16px;
}

.on-road .road-head p {
  opacity: 0.9;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
}

.on-road .road-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(237, 236, 237, 0.2);
  border-bottom: 1px solid rgba(237, 236, 237, 0.2);
  margin-bottom: 44px;
}

@media (max-width: 700px) {
  .on-road .road-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.on-road .road-stat {
  padding: 30px 18px;
  border-right: 1px solid rgba(237, 236, 237, 0.16);
}

.on-road .road-stat:last-child {
  border-right: none;
}

.on-road .road-stat .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 8px;
}

.on-road .road-stat .lbl {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
  line-height: 1.4;
}

.on-road .road-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 34px;
}

@media (max-width: 700px) {
  .on-road .road-photos {
    grid-template-columns: 1fr;
  }
}
.on-road .road-photo {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
  position: relative;
}

.on-road .road-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.on-road .road-photo .cap {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 40, 34, 0.82);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-left: 2px solid var(--color-accent);
}

.on-road .road-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
}

.on-road .rc-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}

.on-road .road-countries b {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  font-weight: 400;
  font-size: 1.05rem;
}

.on-road .btn-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* COMPONENT STYLES · page-hero — tokenized, design locked. */
.page-hero {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: clamp(90px, 11vw, 150px) 0;
  overflow: hidden;
  --topo-op: 0.12;
}

.page-hero .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 720px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
  }
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h1);
  line-height: 1.05;
  margin: 18px 0 24px;
  max-width: 18ch;
}

.page-hero-lede {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  opacity: 0.92;
  max-width: 40ch;
  margin-bottom: 32px;
}

/* Framed lockup: photo scaled up, rounded + shadowed, seated in front of an
   offset accent block for depth. Contained within the dark band (overflow:hidden). */
.page-hero-figure {
  position: relative;
  align-self: stretch;
  min-height: min(56vh, 420px);
}

.page-hero-figure .ph-block {
  position: absolute;
  inset: 26px 34px -26px -14px; /* offset behind, peeks bottom-left */
  border-radius: 14px;
  z-index: 0;
  background: var(--color-ink-darker); /* DEFAULT tonal slab just off the bg */
}

.page-hero-figure[data-accent=sage] .ph-block {
  background: var(--color-surface-1);
}

.page-hero-figure[data-accent=chart] .ph-block {
  background: var(--color-accent);
}

.page-hero-figure.no-block .ph-block {
  display: none;
}

.page-hero-figure .page-hero-media {
  position: absolute;
  inset: 0 -2px 12px 24px;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

.page-hero-figure .page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: drop the absolute framing to normal flow so it can't collapse. */
@media (max-width: 720px) {
  .page-hero-figure {
    min-height: 0;
    margin-top: 10px;
  }
  .page-hero-figure .ph-block {
    inset: 16px 18px -16px -8px;
  }
  .page-hero-figure .page-hero-media {
    position: relative;
    inset: auto;
    aspect-ratio: 4/3;
    margin-left: 8px;
  }
}
/* Video variant (youtube_id set): the shared .tt-player facade fills the framed
   media box. Dark-green scrim = the homepage hero-slider's .hs-grad colour
   (ink-darker as rgba), weighted to the bottom edge and clear over the face, so
   the bright still seats into the band. The play disc moves off-centre to the
   bottom-left, onto the darkest part of the scrim, so it never covers the face. */
.page-hero-figure--video .tt-player {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.page-hero-figure--video .tt-play img {
  object-position: center 30%;
}

.tt-player--scrim .tt-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 40, 34, 0.18) 0%, transparent 22%, transparent 48%, rgba(0, 40, 34, 0.45) 72%, rgba(0, 40, 34, 0.9) 100%), linear-gradient(90deg, rgba(0, 40, 34, 0.35) 0%, transparent 38%);
}

.tt-player--scrim .tt-play-glyph {
  inset: auto auto clamp(16px, 3vw, 26px) clamp(16px, 3vw, 26px);
  margin: 0;
  width: 64px;
  height: 64px;
}

.tt-player--scrim .tt-play-glyph svg {
  width: 28px;
  height: 28px;
}

.tt-player--scrim .tt-play-label {
  position: absolute;
  left: calc(clamp(16px, 3vw, 26px) + 78px);
  bottom: calc(clamp(16px, 3vw, 26px) + 20px);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.tt-player--scrim .tt-noscript {
  position: absolute;
  right: 16px;
  bottom: 16px;
  margin: 0;
  color: var(--color-on-dark);
}

@media (max-width: 720px) {
  .page-hero-figure--video .page-hero-media {
    aspect-ratio: 16/10;
  }
}
/* Full-bleed video variant (full_bleed + youtube_id). The facade is the band's
   background; the copy sits over it in the normal gutter. Scrim is the brand
   ink (same colour as the band, so the image melts into it), heaviest on the
   left behind the text and along the bottom, light over Meredith's face.
   Wide screens: the still starts ~28% in and fades in from the left, so the
   centred face clears the text column while the band stays edge to edge.
   Phones: the still sits at the top and fades to solid ink under the copy. */
.page-hero--bleed {
  position: relative;
  padding: 0;
  min-height: clamp(560px, 82vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.page-hero.page-hero--bleed > .ph-bleed-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero--bleed .tt-player {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--color-ink);
}

.page-hero--bleed .tt-play img, .page-hero--bleed .ph-bleed-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.page-hero--bleed .tt-scrim, .page-hero--bleed .ph-bleed-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-ink) 0%, color-mix(in srgb, var(--color-ink) 88%, transparent) 34%, color-mix(in srgb, var(--color-ink) 34%, transparent) 54%, color-mix(in srgb, var(--color-ink) 8%, transparent) 70%, transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 35%, transparent) 0%, transparent 24%, transparent 55%, color-mix(in srgb, var(--color-ink) 92%, transparent) 100%);
}

/* Copy layer lets clicks through to the poster except on the text itself. */
.page-hero.page-hero--bleed > .ph-bleed-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(150px, 16vw, 190px);
  pointer-events: none;
}

.page-hero--bleed .page-hero-text {
  max-width: 600px;
  pointer-events: auto;
}

/* Play disc: bottom-left on the darkest part, on the same gutter as the copy. */
.page-hero--bleed .tt-play-glyph {
  inset: auto auto clamp(36px, 5vw, 56px) calc(max(0px, (100% - var(--container)) / 2) + var(--gutter));
  margin: 0;
  width: 64px;
  height: 64px;
}

.page-hero--bleed .tt-play-glyph svg {
  width: 28px;
  height: 28px;
}

.page-hero--bleed .tt-play-label {
  position: absolute;
  left: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + 78px);
  bottom: calc(clamp(36px, 5vw, 56px) + 22px);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.page-hero--bleed .tt-noscript {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(36px, 5vw, 56px);
  margin: 0;
  color: var(--color-on-dark);
  z-index: 3;
}

@media (max-width: 720px) {
  .page-hero--bleed {
    display: block;
    min-height: 0;
  }
  .page-hero--bleed .tt-play img, .page-hero--bleed .ph-bleed-img {
    width: 100%;
    height: calc(62vw + 40px);
    object-position: center 22%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-hero--bleed .tt-scrim, .page-hero--bleed .ph-bleed-scrim {
    height: calc(62vw + 40px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 30%, transparent) 0%, transparent 22%, transparent 45%, color-mix(in srgb, var(--color-ink) 85%, transparent) 82%, var(--color-ink) 100%);
  }
  .page-hero.page-hero--bleed > .ph-bleed-content {
    padding-top: calc(62vw - 4px);
    padding-bottom: 56px;
  }
  .page-hero--bleed .tt-play-glyph {
    left: var(--gutter);
    top: calc(62vw - 76px);
    bottom: auto;
    width: 56px;
    height: 56px;
  }
  .page-hero--bleed .tt-play-glyph svg {
    width: 24px;
    height: 24px;
  }
  .page-hero--bleed .tt-play-label {
    left: calc(var(--gutter) + 68px);
    top: calc(62vw - 56px);
    bottom: auto;
  }
  .page-hero--bleed .tt-noscript {
    top: calc(62vw - 56px);
    bottom: auto;
  }
}
/* Static variant (static on, or no video): the same band and scrim with a
   plain poster, no player. Without the play disc to clear, the copy needs
   less room underneath. */
.page-hero.page-hero--static > .ph-bleed-content {
  padding-bottom: clamp(96px, 11vw, 140px);
}

@media (max-width: 720px) {
  .page-hero.page-hero--static > .ph-bleed-content {
    padding-bottom: 72px;
  }
}
/* Scroll cue (scroll_cue on): a quiet chevron, bottom-centre, that jumps to the
   episode grid. Bounces gently unless reduced motion is set. */
.ph-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vw, 32px);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-on-dark);
  opacity: 0.75;
  transition: opacity var(--dur-fast, 150ms) var(--ease-std, ease);
}

.ph-scroll-cue:hover, .ph-scroll-cue:focus-visible {
  opacity: 1;
}

.ph-scroll-cue:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ph-scroll-cue svg {
  animation: ph-cue 2.4s var(--ease-std, ease) infinite;
}

@keyframes ph-cue {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-scroll-cue svg {
    animation: none;
  }
}
@media (max-width: 720px) {
  .ph-scroll-cue {
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 720px) and (max-height: 600px) {
  .ph-scroll-cue {
    display: none;
  }
}
/* Playing: the copy steps aside and the band becomes a 16:9 player. */
.page-hero--bleed.is-playing {
  display: block;
  min-height: 0;
}

.page-hero--bleed.is-playing > .ph-bleed-content {
  display: none;
}

.page-hero.page-hero--bleed.is-playing > .ph-bleed-media {
  position: relative;
  aspect-ratio: 16/9;
  max-height: 86vh;
  width: 100%;
}

/* ============================================================
   COMPONENT STYLES · photo-divider
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.photo-divider {
  position: relative;
  padding: 0;
  background: var(--color-ink);
}

.pd-image {
  position: relative;
  height: clamp(280px, 38vw, 460px);
  width: 100%;
  overflow: hidden;
}

.pd-image svg {
  width: 100%;
  height: 100%;
}

.pd-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
}

.pd-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 40, 34, 0.9) 100%);
  color: var(--color-on-dark);
}

.pd-caption-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pd-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}

.pd-photo-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(0, 40, 34, 0.8);
  padding: 6px 10px;
  border-left: 2px solid var(--color-accent);
}

/* ============================================================
   COMPONENT STYLES · photo-gallery (rotating carousel). Tokenized.
   One photo per view in a fixed 3:2 frame (object-fit: cover), so mixed
   portrait/landscape photos never shift the layout between slides.
   ============================================================ */
.photo-gallery {
  background: var(--color-bg-warm, #E3E2E1);
  padding: var(--section-pad) 0;
}

.photo-gallery .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pg-header {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.pg-header h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 16px auto 14px;
  max-width: 24ch;
}

.pg-header p {
  opacity: 0.85;
  max-width: 54ch;
  margin: 0 auto;
}

.pg-stage {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

/* Scroll-snap track: works as a swipeable strip even with JS off. */
.pg-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: calc(var(--radius) * 3);
}

.pg-track:focus-visible {
  outline: 2px solid var(--color-surface-1);
  outline-offset: 4px;
}

:root.pg-js .pg-track {
  scrollbar-width: none;
}

:root.pg-js .pg-track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pg-track {
    scroll-behavior: auto;
  }
}
.pg-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  margin: 0;
}

.pg-frame {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: calc(var(--radius) * 3);
  background: var(--color-ink);
  box-shadow: 0 20px 50px -24px rgba(0, 40, 34, 0.45);
}

.pg-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.pg-caption {
  padding: 14px 4px 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-ink);
}

/* Overlay matching the photo frame (3:2), so arrows center on the photo no
   matter how many lines the caption wraps to. */
.pg-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3/2;
  pointer-events: none;
}

.pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(0, 40, 34, 0.62);
  color: var(--color-on-dark);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
}

.pg-arrow:hover, .pg-arrow:focus-visible {
  background: var(--color-ink);
}

.pg-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pg-prev {
  left: 12px;
}

.pg-next {
  right: 12px;
}

.pg-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.pg-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid var(--color-surface-1);
  background: transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pg-dot.is-active {
  background: var(--color-surface-1);
  transform: scale(1.2);
}

.pg-dot:focus-visible {
  outline: 2px solid var(--color-surface-1);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .pg-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.35rem;
  }
  .pg-prev {
    left: 6px;
  }
  .pg-next {
    right: 6px;
  }
  .pg-caption {
    font-size: 0.98rem;
  }
}
/* COMPONENT STYLES · process-steps. Tokenized. */
.process-steps {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.ps-header {
  text-align: center;
  margin-bottom: 48px;
}

.ps-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto;
  max-width: 22ch;
}

.ps-lede {
  opacity: 0.85;
  max-width: 56ch;
  margin: 0 auto;
}

.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.ps-step {
  position: relative;
  padding-top: 16px;
  border-top: 2px solid rgba(0, 59, 49, 0.12);
}

.ps-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--color-surface-1);
  font-weight: 600;
}

.ps-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 10px 0 8px;
}

.ps-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.82;
}

.ps-cta {
  text-align: center;
  margin-top: 44px;
}

/* ============================================================
   COMPONENT STYLES · proof-bar
   Slim brand band, compact on phones. Tokens only.
   ============================================================ */
.proof-bar {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: 38px 0;
  position: relative;
  overflow: hidden;
}

.proof-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 88% 30%, rgba(233, 255, 79, 0.07) 0%, transparent 46%);
}

.proof-bar .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.proof-bar .pb-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  border-left: 3px solid var(--color-accent);
  padding-left: 22px;
}

.proof-bar .pb-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3.2rem;
  line-height: 0.8;
  color: var(--color-accent);
  opacity: 0.55;
}

.proof-bar .pb-body .eyebrow {
  margin-bottom: 10px;
}

.proof-bar .pb-pull {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  margin-bottom: 10px;
}

.proof-bar .pb-quote {
  margin: 0 0 12px;
  border: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.9;
  max-width: 76ch;
}

.proof-bar .pb-attr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}

.proof-bar .pb-name {
  font-weight: 600;
}

.proof-bar .pb-role {
  opacity: 0.72;
}

@media (max-width: 640px) {
  .proof-bar {
    padding: 28px 0;
  }
  .proof-bar .pb-inner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 16px;
  }
  .proof-bar .pb-mark {
    font-size: 2.2rem;
  }
  .proof-bar .pb-quote {
    font-size: 0.94rem;
  }
}
/* ============================================================
   COMPONENT STYLES · qualify-to-book
   Tokens only. Single column under 640px; no fixed widths, so there is
   no horizontal overflow at 320–430px.
   ============================================================ */
.q2b {
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.q2b::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 25%, rgba(233, 255, 79, 0.06) 0%, transparent 45%);
}

.q2b .container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.q2b .q2b-head {
  margin-bottom: 30px;
}

.q2b .q2b-head .eyebrow {
  margin-bottom: 12px;
}

.q2b .q2b-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.07;
  margin-bottom: 14px;
}

.q2b .q2b-intro {
  opacity: 0.9;
  line-height: 1.6;
  max-width: 60ch;
}

.q2b .q2b-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

@media (max-width: 640px) {
  .q2b .q2b-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The JS toggles `hidden` on the form, the booking button, and the result
   panels — but .nf-form (flex) and .btn (inline-flex) set display, which beats
   the UA [hidden] rule, so hidden elements stayed visible (the form never went
   away after submit and a dead "#" booking button showed). Make hidden win. */
.q2b [hidden] {
  display: none !important;
}

.q2b .nf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.q2b .nf-field label {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}

.q2b .nf-field label span {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
  font-weight: 400;
}

.q2b .nf-field input,
.q2b .nf-field select,
.q2b .nf-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(237, 236, 237, 0.06);
  border: 1px solid rgba(237, 236, 237, 0.22);
  border-radius: var(--radius);
  color: var(--color-on-dark);
  padding: 11px 13px;
  font: inherit;
  font-size: 0.95rem;
}

.q2b .nf-field select {
  appearance: none;
  padding-right: 34px;
}

.q2b .nf-field input:focus-visible,
.q2b .nf-field select:focus-visible,
.q2b .nf-field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.q2b .q2b-wide {
  margin-top: 16px;
}

.q2b .q2b-submit {
  margin-top: 22px;
}

.q2b .q2b-note {
  font-size: 0.74rem;
  opacity: 0.62;
  margin-top: 12px;
}

/* --- the two outcomes --- */
.q2b .q2b-result {
  margin-top: 8px;
  border-left: 3px solid var(--color-accent);
  padding: 26px 24px;
  background: rgba(237, 236, 237, 0.05);
  border-radius: var(--radius);
}

.q2b .q2b-result h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 12px;
}

.q2b .q2b-result h3:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.q2b .q2b-result p {
  opacity: 0.9;
  line-height: 1.6;
  max-width: 62ch;
}

.q2b .q2b-book {
  margin-top: 18px;
}

.q2b .q2b-expect {
  font-size: 0.82rem;
  opacity: 0.72;
  margin-top: 14px;
}

.q2b .q2b-fallback {
  font-size: 0.9rem;
  margin-top: 10px;
}

.q2b .q2b-routed .btn-group {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .q2b .q2b-result {
    padding: 20px 18px;
  }
  .q2b .q2b-routed .btn-group .btn {
    width: 100%;
    text-align: center;
  }
}
/* Optional, buyer-initiated "I'd rather talk" opt-in — deliberately quiet
   (small type, not a button) so a live call stays rare and chosen. */
.q2b-optin {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 18px;
  max-width: 60ch;
}

/* Reset the text-field styling .nf-form input applies to every input. */
.q2b .q2b-optin input[type=checkbox] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  accent-color: var(--color-surface-1);
  cursor: pointer;
}

.q2b .q2b-optin label {
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0.82;
  cursor: pointer;
  min-width: 0;
}

.q2b .q2b-optin input[type=checkbox]:focus-visible {
  outline: 2px solid var(--color-surface-1);
  outline-offset: 2px;
}

/* ============================================================
   COMPONENT STYLES · resources (accordion hub). Tokenized.
   ============================================================ */
.resources {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.resources .container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rc-header {
  text-align: center;
  margin-bottom: 48px;
}

.rc-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto 12px;
  max-width: 22ch;
}

.rc-lede {
  opacity: 0.85;
  max-width: 52ch;
  margin: 0 auto;
}

.rc-cats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-cat {
  border: 1px solid rgba(0, 59, 49, 0.14);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 88px;
}

.rc-cat-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.rc-cat-head::-webkit-details-marker {
  display: none;
}

.rc-cat-label {
  color: var(--color-ink);
}

.rc-chev {
  font-size: 1.4rem;
  color: var(--color-surface-1);
  transition: transform var(--dur) var(--ease);
  transform: rotate(90deg);
}

.rc-cat[open] .rc-chev {
  transform: rotate(-90deg);
}

.rc-cat-head:hover {
  background: rgba(0, 59, 49, 0.03);
}

.rc-cat-body {
  padding: 4px 24px 22px;
}

.rc-cat-intro {
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0.82;
  margin-bottom: 16px;
  max-width: 62ch;
}

.rc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rc-subhead {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  font-weight: 600;
  margin: 18px 0 8px;
}

.rc-subhead:first-child {
  margin-top: 4px;
}

.rc-item {
  border-top: 1px solid rgba(0, 59, 49, 0.08);
}

.rc-item:first-of-type {
  border-top: 0;
}

.rc-link, .rc-item-plain {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 2px;
}

.rc-link {
  color: var(--color-ink);
}

.rc-link:hover {
  color: var(--color-surface-1);
}

.rc-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-1);
  background: rgba(81, 96, 77, 0.1);
  border-radius: 3px;
  padding: 3px 6px;
  margin-top: 2px;
}

.rc-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc-item-title {
  font-size: 0.96rem;
  line-height: 1.4;
}

.rc-item-meta {
  font-size: 0.8rem;
  opacity: 0.65;
}

.rc-arrow {
  flex: none;
  opacity: 0.5;
  transition: transform var(--dur) var(--ease);
}

.rc-link:hover .rc-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.rc-disclaimer {
  margin-top: 32px;
  font-size: 0.8rem;
  opacity: 0.6;
  text-align: center;
  font-style: italic;
}

/* COMPONENT STYLES · service-cards — tokenized, design locked. */
.service-cards {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.service-cards .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sc-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.sc-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.05;
  margin: 14px 0 16px;
}

.sc-head p {
  opacity: 0.85;
  font-size: 1.05rem;
  line-height: 1.6;
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.sc-card {
  background: #fff;
  border: 1px solid rgba(0, 59, 49, 0.1);
  border-top: 3px solid var(--color-surface-1);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.sc-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.15;
  margin-bottom: 12px;
}

.sc-card p {
  font-size: 0.94rem;
  line-height: 1.55;
  opacity: 0.82;
  margin-bottom: 16px;
  flex: 1;
}

.sc-meta {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
  margin-bottom: 16px;
}

.sc-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  align-self: flex-start;
}

.sc-link::after {
  content: " →";
}

/* COMPONENT STYLES · split-feature — tokenized, design locked. */
.split-feature {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-surface-1);
}

.split-feature .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
  color: var(--color-ink);
}

.sf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.split-feature[data-side=right] .sf-media {
  order: 2;
}

@media (max-width: 800px) {
  .sf-grid {
    grid-template-columns: 1fr;
  }
  .split-feature[data-side=right] .sf-media {
    order: 0;
  }
}
.sf-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-2);
}

.sf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-text h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.05;
  margin: 14px 0 18px;
}

.sf-text p {
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 18px;
  max-width: 48ch;
}

.sf-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.sf-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
}

.sf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

.sf-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-link::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}

.sf-link:hover::after {
  transform: translateX(4px);
}

/* ============================================================
   COMPONENT STYLES · support-tiers. Tokenized.
   ============================================================ */
.support-tiers {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.st-header {
  text-align: center;
  margin-bottom: 44px;
}

.st-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto;
  max-width: 22ch;
}

.st-lede {
  opacity: 0.85;
  max-width: 54ch;
  margin: 0 auto;
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.st-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 59, 49, 0.14);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.st-flag {
  position: absolute;
  top: -11px;
  left: 26px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 4px 10px;
}

.st-amount {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-ink);
  line-height: 1;
}

.st-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  font-weight: 600;
  margin-bottom: 8px;
}

.st-reward {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0;
}

.st-note {
  font-size: 0.82rem;
  opacity: 0.65;
  margin: 4px 0 0;
}

.st-cta {
  text-align: center;
  margin-top: 36px;
}

.st-foot {
  font-size: 0.82rem;
  opacity: 0.65;
  margin-top: 14px;
}

/* ============================================================
   COMPONENT STYLES · team-grid (roster card grid)
   Tokenized. Companion to the marginalia `team` component.
   ============================================================ */
.team-grid {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.team-grid .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.tg-header {
  text-align: center;
  margin-bottom: 56px;
}

.tg-header h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 16px auto 14px;
  max-width: 24ch;
}

.tg-header p {
  opacity: 0.85;
  max-width: 54ch;
  margin: 0 auto;
}

.tg-group {
  margin-bottom: clamp(48px, 6vw, 76px);
}

.tg-group:last-of-type {
  margin-bottom: 0;
}

.tg-group-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}

.tg-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 59, 49, 0.16);
}

.tg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

@media (max-width: 860px) {
  .tg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tg-card {
  display: flex;
  flex-direction: column;
}

.tg-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-ink);
  aspect-ratio: 4/5;
}

.tg-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3rem;
  color: var(--color-accent);
  background: linear-gradient(160deg, var(--color-surface-1), var(--color-ink-darker));
}

.tg-card-body {
  padding: 16px 2px 0;
}

.tg-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  margin-bottom: 6px;
}

.tg-role {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  font-weight: 600;
  margin-bottom: 10px;
}

.tg-bio {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.82;
}

.tg-foot {
  text-align: center;
  margin-top: 56px;
}

@media (max-width: 520px) {
  .tg-grid {
    gap: 18px;
  }
  .tg-name {
    font-size: 1.1rem;
  }
  .tg-bio {
    font-size: 0.82rem;
  }
}
@media (max-width: 360px) {
  .tg-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   COMPONENT STYLES · team (marginalia layout)
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.team {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.team-header {
  text-align: center;
  margin-bottom: 60px;
}

.team-header h2 {
  margin: 16px auto 14px;
  max-width: 22ch;
}

.team-header p {
  opacity: 0.85;
  max-width: 50ch;
  margin: 0 auto;
}

.team-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 90px);
  max-width: 1080px;
  margin: 0 auto;
}

.team-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.team-row[data-photo=right] {
  grid-template-columns: 1fr 280px;
}

@media (max-width: 700px) {
  .team-row, .team-row[data-photo=right] {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .team-row[data-photo=right] .team-row-text {
    order: 2;
  }
  .team-row[data-photo=right] .team-photo-block {
    order: 1;
  }
}
.team-photo-block {
  width: 100%;
}

.team-photo-v2 {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-ink);
}

.team-photo-v2.portrait {
  aspect-ratio: 4/5;
}

.team-photo-v2 svg {
  width: 100%;
  height: 100%;
}

.team-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.team-photo-caption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 40, 34, 0.82);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-left: 1.5px solid var(--color-accent);
  font-weight: 600;
}

.team-row-text {
  padding: 8px 0;
}

.team-role-v2 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  margin-bottom: 14px;
  font-weight: 600;
}

.team-name-v2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-style: italic;
  margin-bottom: 18px;
}

.team-row-text p {
  font-size: 1rem;
  line-height: 1.65;
  opacity: 0.88;
  max-width: 56ch;
}

.team-foot {
  text-align: center;
  margin-top: 56px;
}

/* ============================================================
   COMPONENT STYLES · testimonials
   Ported from index.html (incl. the inline voices-band styles),
   tokenized. Design LOCKED.
   ============================================================ */
.testimonials {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(81, 96, 77, 0.2) 0%, transparent 50%);
}

.deco-icon {
  position: absolute;
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
}

.deco-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 760px) {
  .deco-icon {
    display: none;
  }
}
.test-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}

.test-header h2 {
  margin: 16px auto 14px;
  max-width: 22ch;
}

.test-header p {
  opacity: 0.82;
  max-width: 50ch;
  margin: 0 auto;
}

/* Editorial pull-quote */
.big-quote {
  position: relative;
  margin: 0 calc(var(--gutter) * -1);
  background: var(--color-ink);
  overflow: hidden;
}

.big-quote-photo {
  position: relative;
  height: clamp(420px, 50vw, 620px);
  width: 100%;
}

.big-quote-photo svg {
  width: 100%;
  height: 100%;
}

.bq-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.bq-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 40, 34, 0.85) 0%, rgba(0, 40, 34, 0.5) 50%, transparent 100%), linear-gradient(180deg, transparent 60%, rgba(0, 40, 34, 0.7) 100%);
}

.big-quote-content {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
  max-width: 700px;
  z-index: 2;
  color: var(--color-on-dark);
  padding-right: var(--gutter);
}

.bq-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 5rem;
  line-height: 0.4;
  color: var(--color-accent);
  opacity: 0.6;
  margin-bottom: 20px;
}

.bq-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 32px;
}

.bq-quote .accent {
  color: var(--color-accent);
}

.bq-attr {
  padding-top: 18px;
  border-top: 1px solid rgba(233, 255, 79, 0.4);
  display: inline-block;
}

.bq-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.bq-role {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  opacity: 0.8;
  color: var(--color-accent);
}

/* Companion quotes */
.companion-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

@media (max-width: 800px) {
  .companion-quotes {
    grid-template-columns: 1fr;
  }
}
.cq {
  padding: 26px 24px;
  background: rgba(237, 236, 237, 0.04);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 4px 4px 0;
}

.cq-mark {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  font-size: 2rem;
  line-height: 0.5;
  opacity: 0.5;
  margin-bottom: 10px;
}

.cq p {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.4;
  margin-bottom: 18px;
}

.cq-attr {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 14px;
  border-top: 1px dashed rgba(237, 236, 237, 0.18);
}

.cq-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
}

.cq-role {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.6;
}

/* "From the Workshops" voices band (was inline in index.html) */
.voices-band {
  margin-top: 72px;
  position: relative;
}

.voices-head {
  text-align: center;
  margin-bottom: 36px;
}

.voices-head .eyebrow {
  color: var(--color-accent);
  opacity: 1;
}

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 800px) {
  .voices-grid {
    grid-template-columns: 1fr;
  }
}
.voice {
  background: rgba(237, 236, 237, 0.04);
  border: 1px solid rgba(237, 236, 237, 0.12);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
}

.voice p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 16px;
  flex: 1;
}

.voice .v-attr {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  opacity: 0.8;
}

/* COMPONENT STYLES · trail-map — hiking-map divider (topo's quiet cousin). */
.trail-map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-warm, #E3E2E1);
  padding: clamp(48px, 7vw, 92px) 0;
  color: var(--color-surface-1); /* tints the inlined map (currentColor) */
}

.trail-map .tm-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.trail-map .tm-art svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trail-map .tm-art text {
  font-family: var(--font-mono);
} /* map the mono labels to the site token */
.trail-map .tm-inner {
  position: relative;
  z-index: 1;
  max-width: 40ch;
}

.trail-map .tm-inner[data-side=left] {
  margin-right: auto;
}

.trail-map .tm-inner[data-side=right] {
  margin-left: auto;
  text-align: right;
}

.trail-map .tm-inner h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px 0 12px;
  color: var(--color-ink);
}

.trail-map .tm-inner p {
  color: var(--color-ink);
  opacity: 0.82;
  line-height: 1.55;
}

/* Keep the map off the words: a soft scrim behind the copy. */
.trail-map .tm-inner::before {
  content: "";
  position: absolute;
  inset: -24px -32px;
  z-index: -1;
  background: radial-gradient(120% 120% at 30% 50%, var(--color-bg-warm, #E3E2E1) 55%, transparent);
  opacity: 0.92;
}

.trail-map .tm-inner[data-side=right]::before {
  background: radial-gradient(120% 120% at 70% 50%, var(--color-bg-warm, #E3E2E1) 55%, transparent);
}

/* ============================================================
   COMPONENT STYLES · trail-marker  (Trail Marker Assessment)
   Ported from trailhead.netlify.app. Every hardcoded hex in the
   original maps onto a JT token — nothing brand-specific is baked
   in here, so this ports to CiV / Greeter Falls untouched.
   Everything is scoped under `.trail-marker` so the original's
   global `* { margin:0 }` reset can't leak into the rest of the site.
   ============================================================ */
.trail-marker {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
  color: var(--color-ink-darker);
}

.trail-marker .tm-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Escape hatch (email us) — deliberately low-emphasis ---- */
.trail-marker .tm-hatch {
  text-align: right;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 28px;
}

.trail-marker .tm-hatch a {
  color: var(--color-surface-1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.trail-marker .tm-hatch a:hover {
  border-bottom-color: currentColor;
}

/* ---- Intro ---- */
.trail-marker .tm-intro {
  text-align: center;
  margin-bottom: 44px;
}

.trail-marker .eyebrow-chart {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--type-eyebrow);
  font-weight: 600;
  color: var(--color-surface-1);
  margin-bottom: 14px;
}

.trail-marker .tm-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  line-height: 1.05;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.trail-marker .tm-lede {
  font-size: 1.1rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto;
}

/* ---- Stage card ---- */
.trail-marker .tm-stage {
  background: #fff;
  border: 1px solid rgba(81, 96, 77, 0.12);
  border-radius: calc(var(--radius) * 3);
  padding: 30px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(81, 96, 77, 0.06);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.trail-marker .tm-stage:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(81, 96, 77, 0.12);
}

.trail-marker .tm-stage-head {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-surface-1);
}

.trail-marker .tm-stage-num {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-right: 16px;
}

.trail-marker .tm-stage-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h3);
  color: var(--color-ink);
}

/* ---- Question + slider ---- */
.trail-marker .tm-q {
  margin-bottom: 34px;
}

.trail-marker .tm-q:last-child {
  margin-bottom: 0;
}

.trail-marker .tm-q-text {
  font-size: 1.02rem;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--color-ink-darker);
  line-height: 1.6;
}

.trail-marker .tm-slider-wrap {
  padding: 0 4px;
}

.trail-marker .tm-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--color-ink) 0%, var(--color-muted) 50%, var(--color-accent) 100%);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.trail-marker .tm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-1);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(81, 96, 77, 0.3);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.trail-marker .tm-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: var(--color-ink);
}

.trail-marker .tm-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-1);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(81, 96, 77, 0.3);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.trail-marker .tm-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: var(--color-ink);
}

.trail-marker .tm-slider:focus-visible {
  outline: 2px solid var(--color-surface-1);
  outline-offset: 4px;
}

.trail-marker .tm-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.trail-marker .tm-slider-labels span:last-child {
  text-align: right;
}

/* ---- See-results button ---- */
.trail-marker .tm-see-wrap {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid var(--color-bg-warm);
}

/* ============ RESULTS ============ */
.trail-marker .tm-results-head {
  text-align: center;
  margin-bottom: 40px;
}

.trail-marker .tm-results-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h2);
  color: var(--color-ink);
  margin-bottom: 12px;
}

.trail-marker .tm-results-head p {
  font-size: 1.1rem;
  color: var(--color-muted);
}

.trail-marker .tm-map {
  background: var(--color-bg-warm);
  border-radius: calc(var(--radius) * 3);
  padding: 26px;
  margin-bottom: 34px;
}

.trail-marker .tm-stage-result {
  background: #fff;
  border-left: 4px solid var(--color-surface-1);
  border-radius: calc(var(--radius) * 2);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.trail-marker .tm-stage-result:last-child {
  margin-bottom: 0;
}

.trail-marker .tm-sr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.trail-marker .tm-sr-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-ink);
}

.trail-marker .tm-sr-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-surface-1);
}

.trail-marker .tm-bar {
  width: 100%;
  height: 12px;
  background: var(--color-bg);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.trail-marker .tm-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--color-surface-1), var(--color-muted));
  border-radius: 6px;
  transition: width 0.7s var(--ease);
}

.trail-marker .tm-sr-text {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.trail-marker .tm-overall {
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  padding: 30px;
  border-radius: calc(var(--radius) * 3);
  margin-bottom: 30px;
}

.trail-marker .tm-overall h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h3);
  margin-bottom: 14px;
}

.trail-marker .tm-overall p,
.trail-marker .tm-overall .tm-overall-text {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 1;
  color: var(--color-on-dark);
}

.trail-marker .tm-next {
  background: #fff;
  border: 1px solid rgba(81, 96, 77, 0.12);
  padding: 30px;
  border-radius: calc(var(--radius) * 3);
  margin-bottom: 30px;
}

.trail-marker .tm-next > h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h3);
  color: var(--color-ink);
  margin-bottom: 20px;
}

.trail-marker .tm-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.trail-marker .tm-step:last-child {
  margin-bottom: 0;
}

.trail-marker .tm-step-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 12px;
  margin-top: 2px;
}

.trail-marker .tm-step-text {
  flex: 1;
  font-size: 1rem;
  color: var(--color-ink-darker);
  line-height: 1.6;
}

.trail-marker .tm-step-text strong {
  color: var(--color-ink);
}

.trail-marker .tm-cta {
  background: #fff;
  border: 2px solid var(--color-surface-1);
  border-radius: calc(var(--radius) * 3);
  padding: 30px;
  text-align: center;
}

.trail-marker .tm-cta h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h3);
  color: var(--color-ink);
  margin-bottom: 12px;
}

.trail-marker .tm-cta p {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin-bottom: 24px;
  line-height: 1.6;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* The contact form lives inside the centered CTA card: constrain width, center
   the block, keep fields/labels left-aligned, center the submit button. */
.trail-marker .tm-cta .tm-cta-form {
  text-align: left;
  max-width: 520px;
  margin: 4px auto 0;
}

.trail-marker .tm-cta .tm-cta-form .btn {
  align-self: center;
}

.trail-marker .tm-foot {
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-bg-warm);
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .trail-marker .tm-stage {
    padding: 22px;
  }
  .trail-marker .tm-hatch {
    text-align: center;
  }
}
/* ============================================================
   COMPONENT STYLES · trail-router
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.router {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.router-header {
  text-align: center;
  margin-bottom: 70px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.router-header h2 {
  margin: 16px auto 18px;
}

.router-header p {
  font-size: 1.05rem;
  opacity: 0.85;
}

.router-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1024px) {
  .router-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .router-grid {
    grid-template-columns: 1fr;
  }
}
.route-card {
  background: white;
  border: 1px solid rgba(0, 59, 49, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.route-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(0, 59, 49, 0.22);
  border-color: rgba(81, 96, 77, 0.3);
}

.route-photo {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}

.route-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.route-photo .ph-caption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 40, 34, 0.82);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-left: 2px solid var(--color-accent);
}

.route-body {
  padding: 28px 26px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.route-body .tag {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-1);
  margin-bottom: 12px;
}

.route-body h3 {
  margin-bottom: 12px;
  line-height: 1.2;
}

.route-body p {
  font-size: 0.92rem;
  line-height: 1.55;
  opacity: 0.82;
  margin-bottom: 20px;
  flex: 1;
}

.route-body .route-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-surface-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.route-body .route-link::after {
  content: "→";
  transition: transform 0.25s ease;
}

.route-card:hover .route-link::after {
  transform: translateX(4px);
}

/* COMPONENT STYLES · trauma-talk-promo — dark footer promo band. */
.trauma-talk-promo {
  background: var(--color-ink-darker);
  color: var(--color-on-dark);
  padding: clamp(48px, 7vw, 84px) 0;
  --topo-op: 0.16; /* accent topo behind (via .has-topo mechanism) */
}

.trauma-talk-promo .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.ttp-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

@media (max-width: 860px) {
  .ttp-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
}
/* Cover — rounded card, soft shadow, thin accent keyline */
.ttp-cover img {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(233, 255, 79, 0.35);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
  display: block;
}

@media (max-width: 860px) {
  .ttp-cover img {
    max-width: 360px;
  }
}
/* Body */
.ttp-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  margin: 12px 0 14px;
}

.ttp-text {
  opacity: 0.88;
  line-height: 1.55;
  max-width: 46ch;
}

.ttp-proof {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-accent);
  font-size: 1.05rem;
}

/* CTA + capture */
.ttp-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.ttp-capture {
  width: 100%;
}

.ttp-capture-label {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-bottom: 8px;
}

/* Flodesk form sits on the dark band — nudge its inputs to read light. */
.ttp-capture input {
  color: var(--color-ink);
}

/* variant "soft" — lighter framing, secondary weight */
.ttp--soft {
  background: var(--color-ink);
  --topo-op: 0.10;
  padding: clamp(40px, 5vw, 64px) 0;
}

.ttp--soft .ttp-cover img {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.ttp--soft .ttp-heading {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

/* ============================================================
   COMPONENT STYLES · trauma-talk
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.trauma-talk {
  background: var(--color-surface-1);
  color: var(--color-on-dark);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

/* Jump target (#trauma-talk, e.g. the hub hero's scroll cue): land with the series row clear of the sticky nav. */
.trauma-talk {
  scroll-margin-top: 48px;
}

.trauma-talk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 30%, rgba(233, 255, 79, 0.07) 0%, transparent 40%), radial-gradient(circle at 85% 70%, rgba(0, 59, 49, 0.25) 0%, transparent 45%);
}

.trauma-talk-inner {
  position: relative;
}

.deco-icon {
  position: absolute;
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
}

.deco-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 760px) {
  .deco-icon {
    display: none;
  }
}
/* Compact header (no heading): below 900px the header stacks and the search
   spans the row, so there is no open spot that clears it. */
@media (max-width: 900px) {
  .tt-deco--compact {
    display: none;
  }
}
.tt-header {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}

@media (max-width: 900px) {
  .tt-header {
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }
}
.tt-header h2 {
  margin: 16px 0 18px;
  max-width: 18ch;
}

.tt-header .sub {
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.9;
  max-width: 50ch;
}

.tt-brand {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}

.tt-brand-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.tt-brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tt-brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.tt-brand-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(237, 236, 237, 0.65);
  margin-bottom: 9px;
}

.tt-brand-name {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.015em;
  color: var(--color-on-dark);
  line-height: 0.95;
}

.tt-brand-name .tt-accent {
  color: var(--color-accent);
}

.tt-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(237, 236, 237, 0.07);
  border: 1px solid rgba(237, 236, 237, 0.18);
  border-radius: 6px;
  padding: 14px 18px;
  transition: border-color 0.2s ease;
}

.tt-search:focus-within {
  border-color: var(--color-accent);
}

.tt-search-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: rgba(237, 236, 237, 0.55);
}

.tt-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.tt-search-input::placeholder {
  color: rgba(237, 236, 237, 0.5);
}

.tt-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.tt-search-count {
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-weight: 600;
  white-space: nowrap;
}

.tt-empty {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(237, 236, 237, 0.75);
}

.tt-empty a {
  color: var(--color-accent);
  text-decoration: underline;
}

.tt-card.is-hidden {
  display: none;
}

.tt-card.is-collapsed {
  display: none;
}

.tt-more-wrap {
  text-align: center;
  margin-top: 32px;
}

/* .btn sets display:inline-flex, which would beat the UA [hidden] rule. */
.tt-more[hidden], .tt-more-wrap[hidden] {
  display: none;
}

.tt-more {
  background: transparent;
  color: var(--color-on-dark);
  border: 1px solid rgba(237, 236, 237, 0.35);
  max-width: 100%;
}

.tt-more:hover, .tt-more:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .tt-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .tt-grid {
    grid-template-columns: 1fr;
  }
}
.tt-card {
  background: rgba(0, 40, 34, 0.4);
  border: 1px solid rgba(237, 236, 237, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  color: inherit;
}

.tt-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.tt-card:hover {
  background: rgba(0, 40, 34, 0.6);
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.tt-thumb {
  aspect-ratio: 16/9;
  position: relative;
  background: linear-gradient(135deg, var(--color-ink-darker) 0%, var(--color-ink) 100%);
  overflow: hidden;
}

.tt-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at center, rgba(233, 255, 79, 0.08) 0%, transparent 60%);
}

.tt-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  background: rgba(233, 255, 79, 0.95);
  color: var(--color-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-thumb-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.tt-thumb-duration {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 40, 34, 0.9);
  color: var(--color-on-dark);
  padding: 3px 7px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.tt-thumb-lang {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-accent);
  color: var(--color-ink);
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tt-body {
  padding: 18px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tt-meta {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--color-accent);
}

.tt-q {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.tt-snippet {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.78;
  margin-bottom: 14px;
  flex: 1;
}

.tt-stats {
  display: flex;
  gap: 14px;
  font-size: 0.7rem;
  opacity: 0.6;
  padding-top: 12px;
  border-top: 1px dashed rgba(237, 236, 237, 0.2);
}

.tt-foot {
  text-align: center;
  margin-top: 56px;
}

.tt-foot .btn {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* ---- Hub mode: featured hero card + cluster sections (both opt-in). ---- */
.tt-featured {
  margin-bottom: 36px;
}

.tt-featured[hidden], .tt-cluster[hidden], .tt-cluster-nav a[hidden] {
  display: none;
}

.tt-card--featured .tt-body {
  padding: 20px 20px 24px;
  justify-content: center;
}

.tt-card--featured .tt-q {
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.15;
}

.tt-card--featured .tt-snippet {
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.tt-featured-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  opacity: 0.7;
  margin-bottom: 8px;
}

.tt-card--featured .tt-thumb-play {
  width: 72px;
  height: 72px;
}

@media (min-width: 900px) {
  .tt-card--featured {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
  }
  .tt-card--featured .tt-thumb {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .tt-card--featured .tt-body {
    padding: 32px 34px;
  }
}
.tt-cluster-nav {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.tt-cluster-nav::-webkit-scrollbar {
  display: none;
}

.tt-cluster-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(237, 236, 237, 0.3);
  font-size: 0.86rem;
  color: var(--color-on-dark);
}

.tt-cluster-nav a:hover, .tt-cluster-nav a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tt-cluster-n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.65;
}

/* a <section>, so reset the global section padding — rhythm comes from margin-top. */
.tt-cluster {
  margin-top: 36px;
  padding: 0;
  scroll-margin-top: 110px;
}

.tt-cluster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(237, 236, 237, 0.18);
}

.tt-cluster-head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0;
}

.tt-cluster-head p {
  font-size: 0.92rem;
  opacity: 0.78;
  margin: 0;
  max-width: 56ch;
}

/* ============================================================
   COMPONENT STYLES · video-hero (cinematic lockup hero)
   ============================================================ */
.video-hero {
  position: relative;
  min-height: clamp(460px, 72vh, 720px);
  display: flex;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.vh-poster, .vh-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vh-poster {
  z-index: 0;
}

.vh-video {
  z-index: 1;
}

/* stronger scrim so the white lockup holds over any frame of the loop */
.vh-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(rgba(0, 18, 14, 0.42), rgba(0, 18, 14, 0.62));
}

.vh-inner {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(48px, 7vh, 72px) var(--gutter);
}

/* The title-image lockup is the page's <h1> (accessible name = its alt). The
   wrapper spans the column so the image's % width resolves exactly as before. */
.vh-title-h1 {
  align-self: stretch;
  display: flex;
  justify-content: center;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.vh-title-img {
  width: min(740px, 82%);
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.vh-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-h1);
  line-height: 1.02;
}

.vh-sub {
  margin-top: clamp(32px, 5vh, 52px);
  max-width: 50ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.vh-btns {
  margin-top: 28px;
  justify-content: center;
}

.vh-spacer {
  flex: 1;
  min-height: 40px;
}

.vh-logos {
  width: min(520px, 82%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(24px, 4vw, 38px);
}

.vh-logos img {
  height: clamp(38px, 4.4vw, 46px);
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.vh-logos img:nth-child(1) {
  justify-self: end;
}

.vh-logos img:nth-child(3) {
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .vh-video {
    display: none;
  }
}
/* COMPONENT STYLES · workshop-explorer. Tokenized. */
.workshop-explorer {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
  scroll-margin-top: 96px;
}

.we-header {
  text-align: center;
  margin-bottom: 40px;
}

.we-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 12px auto;
  max-width: 22ch;
}

.we-lede {
  opacity: 0.85;
  max-width: 56ch;
  margin: 0 auto;
}

.we-slider {
  max-width: 720px;
  margin: 0 auto 34px;
}

.we-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 59, 49, 0.18), var(--color-ink));
  margin: 40px 10px 12px;
}

.we-stops {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.we-stop {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-ink);
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.we-stop:hover {
  transform: scale(1.15);
}

.we-stop.is-active {
  background: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(233, 255, 79, 0.25);
}

.we-labels {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.we-label {
  flex: 1;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-1);
  opacity: 0.55;
  padding: 0 2px;
  transition: opacity var(--dur) var(--ease);
}

.we-label.is-active {
  opacity: 1;
  color: var(--color-ink);
}

.we-panels {
  display: grid;
  max-width: 720px;
  margin: 0 auto;
}

.we-panel {
  grid-area: 1/1;
  background: #fff;
  border: 1px solid rgba(0, 59, 49, 0.14);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 18px 44px rgba(0, 40, 34, 0.07);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease);
}

.we-panel.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .we-panel {
    transition: none;
  }
}
.we-len {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

.we-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: 6px;
}

.we-aud {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-1);
  margin-bottom: 16px;
}

.we-aud span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  opacity: 0.7;
  margin-right: 4px;
}

.we-out {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 24px;
}

.we-foot {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.65;
  margin-top: 26px;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}

/* Editor: show the first panel statically (no JS interaction there) */
html.cc-live .we-panel:not(.is-active) {
  position: static;
}

/* ============================================================
   COMPONENT STYLES · workshops
   Ported from index.html, tokenized. Design LOCKED.
   ============================================================ */
.workshops {
  background: var(--color-bg);
  padding: var(--section-pad) 0;
}

.workshops-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 900px) {
  .workshops-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.workshops-text h2 {
  margin: 16px 0 24px;
}

.workshops-text .lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  opacity: 0.9;
  margin-bottom: 24px;
}

.workshops-text p {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 18px;
}

.workshops-stats {
  margin: 32px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 59, 49, 0.15);
  border-bottom: 1px solid rgba(0, 59, 49, 0.15);
}

.stat .v {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  color: var(--color-surface-1);
  line-height: 1;
}

.stat .l {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 6px;
  font-weight: 600;
}

/* Static captioned photo (class names kept from the old video mock) */
.video-mock {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--color-ink-darker) 0%, var(--color-ink) 50%, var(--color-surface-1) 100%);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0, 59, 49, 0.35);
}

.video-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 35% 45%, rgba(233, 255, 79, 0.12) 0%, transparent 45%), radial-gradient(circle at 70% 70%, rgba(237, 236, 237, 0.08) 0%, transparent 50%);
}

.video-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 40, 34, 0.8) 100%);
}

.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

.video-photo-caption {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  background: rgba(0, 40, 34, 0.82);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-left: 2px solid var(--color-accent);
  font-weight: 600;
}

}