/* ============================================================
   Deidox.org — About (the calling, the model, the history)
   Shared chrome in site.css.
   ============================================================ */
body { background: var(--ink-950); }


/* ---------- 1 · Hero ---------- */
.about-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden;
  background: var(--ink-950) url("/assets/stills/fbr-eubank.jpg") center 28%/cover no-repeat; }
.about-hero__overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,15,20,0.6) 0%, rgba(10,15,20,0.25) 38%, rgba(7,11,15,0.93) 100%),
    radial-gradient(70% 60% at 80% 14%, rgba(12,192,223,0.18), transparent 60%); }
.about-hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--container-wide); margin-inline: auto; padding: 0 var(--gutter) clamp(3.5rem, 8vh, 7rem); }
.about-hero h1 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 1.03; letter-spacing: -0.025em; margin: var(--space-6) 0 0; max-width: 18ch; text-wrap: balance; }
.about-hero p { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; color: rgba(255,255,255,0.84); margin: var(--space-6) 0 0; max-width: 48ch; }

/* ---------- 2 · The couple ---------- */
.couple__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.couple__figure { margin: 0; }
.couple__figure .frame { aspect-ratio: 5/4; }
.couple__cap { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.couple__body .eyebrow { margin-bottom: var(--space-5); }
.couple__body h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h2); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0; text-wrap: balance; }
.couple__body p { color: var(--text-muted); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.couple__body p b { color: var(--text-strong); font-weight: var(--weight-semibold); }
@media (max-width: 880px) { .couple__grid { grid-template-columns: 1fr; } }

/* ---------- 3 · The name (etymology) ---------- */
.name-band { background: var(--ink-950); color: #fff; text-align: center; }
.name-band__in { max-width: var(--container-narrow); margin-inline: auto; }

.name-band__equation {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: start;
  justify-content: center;
  width: fit-content;
  margin: var(--space-10) auto 0;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.name-part { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-3); }
.name-part__letters {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(3.25rem, 8vw, 6rem);
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 0.9;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.name-part__gloss {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.name-part__note {
  font-style: normal;
  color: rgba(255,255,255,0.55);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  max-width: 22ch;
  margin-inline: auto;
}
.name-part__note i { color: rgba(255,255,255,0.8); font-style: italic; }

/* the bridging plus, vertically centred on the big letters */
.name-band__plus {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1;
  color: var(--cyan-400);
  align-self: start;
  /* nudge so the plus sits on the optical centre of the cap-height letters */
  margin-top: clamp(0.9rem, 2.4vw, 1.9rem);
  opacity: 0.9;
}

.name-band__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  color: rgba(255,255,255,0.9);
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  position: relative;
}
.name-band__line::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem; height: 1px;
  background: var(--cyan-400);
}

@media (max-width: 600px) {
  .name-band__equation { grid-template-columns: 1fr; gap: var(--space-4); }
  .name-band__plus { margin-top: 0; }
}

/* ---------- 4 · Lean-but-scales ---------- */
.model__head { max-width: 54ch; margin-bottom: var(--space-12); }
.model__head h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-5) 0 0; text-wrap: balance; }
.model__head p { color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.model__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.model__col { padding-top: var(--space-5); border-top: 2px solid var(--border-strong); }
.model__col h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h4); color: var(--text-strong); margin: 0 0 var(--space-3); }
.model__col p { color: var(--text-muted); line-height: var(--leading-relaxed); margin: 0; }
.model__motto { margin-top: var(--space-12); padding: var(--space-8); background: var(--surface-sunken); border-radius: var(--radius-md); text-align: center; }
.model__motto blockquote { font-family: var(--font-display); font-style: italic; font-size: var(--text-h2); color: var(--text-strong); margin: 0; line-height: var(--leading-snug); }
.model__creed { display: block; max-width: 44ch; margin: var(--space-10) auto 0; padding-top: var(--space-8); text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--text-h4); line-height: var(--leading-snug); color: rgba(255,255,255,0.7); position: relative; }
.model__creed::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 1px; background: var(--cyan-400); opacity: 0.5; }
@media (max-width: 880px) { .model__cols { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- 4b · In service of (partner logos) ---------- */
.serve__head { text-align: center; max-width: 56ch; margin: 0 auto var(--space-12); }
.serve__head h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: #fff; margin: var(--space-5) 0 0; text-wrap: balance; }
.serve__head p { color: rgba(255,255,255,0.6); font-size: var(--text-body); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.serve-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-10) var(--space-6); align-items: center; max-width: 64rem; margin-inline: auto; }
.serve-logo { display: flex; align-items: center; justify-content: center; min-height: 46px; text-align: center; padding: 0 var(--space-2); }
.serve-logo img { max-height: 34px; max-width: 150px; width: auto; object-fit: contain; opacity: 0.62; transition: opacity var(--dur-base, 220ms) var(--ease-out, ease); }
.serve-logo--seal img { max-height: 62px; }
.serve-logo:hover img { opacity: 0.95; }
.serve-logo span { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); color: rgba(255,255,255,0.62); line-height: 1.3; transition: color var(--dur-base, 220ms) var(--ease-out, ease); }
.serve-logo:hover span { color: rgba(255,255,255,0.95); }
.serve__note { text-align: center; margin-top: var(--space-12); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }

/* ---------- 5 · History timeline ---------- */
.timeline { background: var(--ink-950); color: #fff; }
.timeline__head { max-width: 54ch; margin-bottom: var(--space-16); }
.timeline__head .eyebrow { color: var(--cyan-400); }
.timeline__head h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); margin: var(--space-5) 0 0; }
.timeline__head p { color: rgba(255,255,255,0.7); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }

/* ---------- Cyan viewfinder corner-ticks (brand signature) ---------- */
.vf { position: relative; }
.vf > .vf__c { position: absolute; width: 22px; height: 22px; z-index: 4; pointer-events: none; }
.vf__c--tl { top: 12px; left: 12px; border-top: 1.5px solid var(--cyan-400); border-left: 1.5px solid var(--cyan-400); }
.vf__c--tr { top: 12px; right: 12px; border-top: 1.5px solid var(--cyan-400); border-right: 1.5px solid var(--cyan-400); }
.vf__c--bl { bottom: 12px; left: 12px; border-bottom: 1.5px solid var(--cyan-400); border-left: 1.5px solid var(--cyan-400); }
.vf__c--br { bottom: 12px; right: 12px; border-bottom: 1.5px solid var(--cyan-400); border-right: 1.5px solid var(--cyan-400); }

/* ---------- 5 · Seven-beat journey timeline ---------- */
.jt { max-width: 54rem; margin-inline: auto; }

/* Cinematic bookends (beats 1 & 6 — matched) */
.jt-bookend { position: relative; text-align: center; padding: clamp(2.75rem, 5vw, 4rem) clamp(1.75rem, 5vw, 3.5rem);
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(12,192,223,0.055), rgba(255,255,255,0.015)); }
.jt-bookend__kicker { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan-400); }
.jt-bookend__year { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-body-sm); letter-spacing: 0.16em; color: rgba(255,255,255,0.55); }
.jt-bookend__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: var(--space-5) 0 0; text-wrap: balance; }
.jt-bookend__text { color: rgba(255,255,255,0.74); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-6) auto 0; max-width: 58ch; }
.jt-bookend__quote { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.34; color: #fff; margin: var(--space-6) auto 0; max-width: 42ch; text-wrap: pretty; }
.jt-bookend--quote .jt-bookend__text { margin-top: var(--space-8); }

/* Dashed film-edge rail with simple beats (2,3,4,5,7) */
.jt-rail { position: relative; margin: clamp(2rem, 4vw, 3rem) auto; }
.jt-rail::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 0; border-left: 2px dashed rgba(12,192,223,0.5); }
.jt-beat { position: relative; padding: 0 0 clamp(2rem, 4vw, 2.75rem) 58px; }
.jt-beat:last-child { padding-bottom: 0; }
.jt-beat__node { position: absolute; left: 10px; top: 7px; width: 12px; height: 12px; background: var(--cyan-400); z-index: 2; }
.jt-beat__year { display: block; font-family: var(--font-mono); font-size: var(--text-body-sm); letter-spacing: 0.12em; color: var(--cyan-400); font-weight: var(--weight-medium); }
.jt-beat__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); color: #fff; margin: var(--space-2) 0 0; line-height: var(--leading-snug); text-wrap: balance; }
.jt-beat__text { color: rgba(255,255,255,0.74); line-height: var(--leading-relaxed); margin: var(--space-3) 0 0; max-width: 52ch; }
.jt-beat__text b { color: #fff; font-weight: var(--weight-semibold); }
/* Beat 5 (2020) carries a little more weight */
.jt-beat--major .jt-beat__year { font-size: var(--text-h4); letter-spacing: 0.05em; }
.jt-beat--major .jt-beat__node { width: 16px; height: 16px; left: 8px; top: 6px; box-shadow: var(--shadow-cyan); }

/* Timeline close */
.jt-close { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.jt-close__line { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; color: #fff; margin: 0; text-wrap: balance; }
.jt-close__link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--text-body-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-400); text-decoration: none; border-bottom: 1px solid rgba(12,192,223,0.4); padding-bottom: 4px; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.jt-close__link .material-symbols-sharp { font-size: 18px; text-transform: none; }
.jt-close__link:hover { color: #fff; border-color: #fff; }
@media (max-width: 560px) { .vf > .vf__c { width: 16px; height: 16px; } }

.tl { position: relative; max-width: 56rem; margin-inline: auto; }
.tl::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--cyan-400), rgba(12,192,223,0.15)); }
.tl__item { position: relative; padding: 0 0 var(--space-12) calc(var(--space-12) + var(--space-2)); }
.tl__item:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: var(--radius-pill);
  background: var(--ink-950); border: 2px solid var(--cyan-400); display: flex; align-items: center; justify-content: center; z-index: 2; }
.tl__dot::after { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--cyan-400); }
.tl__item--major .tl__dot { background: var(--cyan-400); box-shadow: var(--shadow-cyan); }
.tl__item--major .tl__dot::after { background: #00343d; }
.tl__year { font-family: var(--font-mono); font-size: var(--text-body-sm); letter-spacing: 0.1em; color: var(--cyan-400); font-weight: var(--weight-medium); }
.tl__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); color: #fff; margin: var(--space-2) 0 0; line-height: var(--leading-snug); text-wrap: balance; }
.tl__text { color: rgba(255,255,255,0.74); line-height: var(--leading-relaxed); margin: var(--space-3) 0 0; max-width: 52ch; }
.tl__text b { color: #fff; font-weight: var(--weight-semibold); }
.tl__aside { font-family: var(--font-mono); font-size: var(--text-caption); color: rgba(255,255,255,0.45); margin-top: var(--space-3); font-style: normal; }
.tl__figure { margin: var(--space-6) 0 0; max-width: 40rem; }
.tl__media { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow-lg); }
.tl__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tl__figure:hover .tl__media img { transform: scale(1.05); }
.tl__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0,0,0,0.45); pointer-events: none; }
.tl__cap { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.tl__badge { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-400); }
.tl__badge .material-symbols-sharp { font-size: 16px; }

/* ---------- 6 · What we believe ---------- */
.believe-band { background: linear-gradient(180deg, var(--ink-950) 0%, #0E3A52 60%, #0E3A52 100%); }
.believe__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.believe__grid .eyebrow { color: var(--accent-text); }
.believe h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-5) 0 0; text-wrap: balance; }
.believe__body p { color: var(--text); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: 0 0 var(--space-5); }
.believe__body p:last-child { margin-bottom: 0; }
@media (max-width: 880px) { .believe__grid { grid-template-columns: 1fr; } }

/* ---------- 5b · Journey eras ---------- */
.erablock { position: relative; }
.era-hero { position: relative; min-height: 58vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.era-hero__ph { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 18%, #1a2630 0%, #0d141b 48%, #070b10 100%); }
.era-hero__ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,15,0.5) 0%, rgba(7,11,15,0.15) 45%, rgba(7,11,15,0.7) 100%); }
.era-hero--warm .era-hero__ph { background: radial-gradient(120% 90% at 50% 18%, #241c14 0%, #14100b 50%, #0b0805 100%); }
.era-hero--cool .era-hero__ph { background: radial-gradient(120% 90% at 50% 18%, #141f28 0%, #0a1118 50%, #06090d 100%); }
.era-hero__cap { position: absolute; left: var(--gutter); bottom: var(--space-5); z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); max-width: 60%; text-align: left; }
.era-hero__text { position: relative; z-index: 2; max-width: 46rem; padding: var(--space-12) var(--gutter); }
.era-label { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan-400); }
.era-years { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-body-sm); letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }
.era-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.4rem, 5.5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.025em; color: #fff; margin: var(--space-6) 0 0; text-wrap: balance; }
.era-desc { font-family: var(--font-display); font-style: italic; font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.62); margin: var(--space-5) auto 0; max-width: 46ch; }
.era-entries { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* image scale-in on scroll */
.has-js .reveal.era-scale { opacity: 0; transform: scale(0.98); }
.reveal.era-scale.is-in { opacity: 1; transform: none; }
.era-title.reveal { transition-duration: var(--dur-slow, 320ms); }

/* Era three — single cinematic narrative */
.era-three__inner { max-width: 48rem; margin-inline: auto; text-align: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.has-js .era-three__inner.reveal { transition-duration: 500ms; }
.era-three__quote { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.32; color: #fff; margin: 0; text-wrap: pretty; }
.era-three__body { margin-top: var(--space-10); }
.era-three__body p { color: rgba(255,255,255,0.72); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: 0 auto var(--space-5); max-width: 44ch; }
.era-three__body p:last-child { margin-bottom: 0; }
.era-rule { display: block; width: 100%; max-width: 460px; height: 1px; background: var(--cyan-400); opacity: 0.5; margin: clamp(3rem, 6vw, 5rem) auto 0; }

/* Journey closing */
.journey-close { text-align: center; }
.journey-close__in { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }
.journey-close h2 { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.2; color: #fff; margin: 0; text-wrap: balance; }
.journey-close__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-10); }

/* ---------- 7 · Soft CTA ---------- */
.about-cta { position: relative; text-align: center; color: #fff; overflow: hidden;
  background: var(--ink-950) url("/assets/stills/tbw-river.jpg") center/cover no-repeat; }
.about-cta__overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,11,15,0.84), rgba(7,11,15,0.8)), radial-gradient(70% 80% at 50% 0%, rgba(12,192,223,0.16), transparent 60%), radial-gradient(95% 75% at 50% 108%, rgba(235,160,70,0.15), transparent 62%); }
.about-cta__in { position: relative; z-index: 2; max-width: var(--container-narrow); margin-inline: auto; }

/* ============================================================
   Timeline — era spacing + pronounced scroll animations (overrides)
   ============================================================ */
/* FIX 3 · divider height + spacing */
.era-hero { min-height: 44vh; padding: 80px var(--gutter); }
.era-entries { padding-block: 80px; }
.era-entries .tl__item { padding-bottom: 60px; }
.era-entries .tl__item:last-child { padding-bottom: 0; }

/* FIX 2 · entries — parent stays put; children stagger in (year → heading → body) */
.has-js .timeline .tl__item.reveal { opacity: 1; transform: none; }
.timeline .tl__item .tl__year,
.timeline .tl__item .tl__title,
.timeline .tl__item .tl__text {
  opacity: 0; transform: translateY(30px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.timeline .tl__item.is-in .tl__year { opacity: 1; transform: none; transition-delay: 0ms; }
.timeline .tl__item.is-in .tl__title { opacity: 1; transform: none; transition-delay: 150ms; }
.timeline .tl__item.is-in .tl__text { opacity: 1; transform: none; transition-delay: 300ms; }
/* dot pulse on appear */
.timeline .tl__item.is-in .tl__dot { animation: tl-dot-pulse 0.7s var(--ease-out); }
@keyframes tl-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(12,192,223,0.6); }
  100% { box-shadow: 0 0 0 16px rgba(12,192,223,0); }
}

/* FIX 2 · era divider title block — weighty, slower */
.has-js .era-hero__text .reveal { opacity: 0; transform: translateY(40px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.era-hero__text .reveal.is-in { opacity: 1; transform: none; }

/* FIX 2 · era background image — Ken Burns pull-back */
.has-js .reveal.era-scale { opacity: 0; transform: scale(1.04);
  transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); }
.reveal.era-scale.is-in { opacity: 1; transform: scale(1); }

/* FIX 2 · Era Three narrative — one slow breath */
.has-js .era-three__inner.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.era-three__inner.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .timeline .tl__item .tl__year,
  .timeline .tl__item .tl__title,
  .timeline .tl__item .tl__text,
  .has-js .era-hero__text .reveal,
  .has-js .reveal.era-scale,
  .has-js .era-three__inner.reveal { opacity: 1; transform: none; }
  .timeline .tl__item.is-in .tl__dot { animation: none; }
}
.about-cta h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; margin: var(--space-5) 0 0; text-wrap: balance; }
.about-cta p { color: rgba(255,255,255,0.76); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) auto 0; max-width: 42ch; }
.about-cta__cta { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); flex-wrap: wrap; }

/* ============ production pass: compact partner band + chapter timeline ============ */
.serve-band{padding-block:clamp(3rem,6vh,4.5rem)}
.serve-band__head{display:flex;align-items:baseline;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}
.serve-band__line{color:rgba(255,255,255,.65);font-size:var(--text-body-sm);margin:0}
.serve-logos--band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-8)}
.serve-logos--band .serve-logo img{max-height:30px;width:auto;opacity:.65;transition:opacity var(--dur-base) var(--ease-out)}
.serve-logos--band .serve-logo--seal img{max-height:40px}
.serve-logos--band .serve-logo:hover img{opacity:1}
.serve-band__note{margin-top:var(--space-6);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.4)}
/* chapters: one calm format, photo + narrative */
.chapters{display:flex;flex-direction:column;gap:clamp(3rem,6vh,4.5rem);margin-top:var(--space-10)}
.chap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(1.8rem,3.5vw,3.5rem);align-items:center}
.chap--flip .chap__media{order:2}
.chap--flip .chap__body{order:1}
.chap__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1)}
.chap__media::before,.chap__media::after{content:"";position:absolute;width:18px;height:18px;border:0 solid var(--cyan-400);z-index:2}
.chap__media::before{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.chap__media::after{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
.chap__media img{width:100%;height:100%;object-fit:cover}
.chap__kicker{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-400);margin-bottom:var(--space-4)}
.chap__body h3{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.15;letter-spacing:-.015em;margin:0 0 var(--space-4)}
.chap__body p{color:rgba(255,255,255,.78);line-height:1.6;margin:0}
.chap__quote{font-family:var(--font-display);font-style:italic;font-size:1.1rem;line-height:1.5;color:rgba(255,255,255,.92);border-left:2px solid var(--amber,#EBA046);padding-left:var(--space-5);margin:0 0 var(--space-4)}
@media (max-width:860px){.chap{grid-template-columns:1fr}.chap--flip .chap__media{order:0}.chap--flip .chap__body{order:1}}

/* ============ brand film + narrative story ============ */
.about-film{padding-block:clamp(2rem,4vh,3rem) clamp(3rem,6vh,4.5rem)}
.about-film__frame{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);overflow:hidden;background:#000;padding:10px}
.about-film__ratio{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden}
.about-film__ratio iframe{position:absolute;inset:0;width:100%;height:100%}
.story{max-width:66ch;margin-top:var(--space-8)}
.story p{color:rgba(255,255,255,.82);font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.75;margin:0 0 var(--space-6)}
.story b{color:#fff;font-weight:600}
.story__quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.5;color:rgba(255,255,255,.94);border-left:2px solid var(--amber,#EBA046);padding-left:var(--space-6);margin:var(--space-8) 0}
.story__aside{float:right;width:min(46%,340px);margin:0 0 var(--space-5) var(--space-8);border-radius:var(--radius-sm);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.story__aside img{display:block;width:100%}
@media (max-width:700px){.story__aside{float:none;width:100%;margin:0 0 var(--space-6)}}

/* clean video mount (no ticks/padding — player supplies its own chrome) */
.about-film__frame{padding:0;border:0;background:transparent;border-radius:var(--radius-md)}
.about-film__frame .vf__c{display:none}
.about-film__ratio{border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1)}

/* ============ ABOUT v3 — poster hero + photo essay ============ */
.ph{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.ph__media{position:absolute;inset:0}
.ph__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.ph__grade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,14,.94) 0%,rgba(6,10,14,.45) 40%,rgba(10,18,26,.35) 100%),linear-gradient(120deg,rgba(14,58,82,.35),rgba(12,192,223,.08))}
.ph.is-playing .ph__grade{display:none}
.ph.is-playing .ph__copy,.ph.is-playing .ph__play{opacity:0;pointer-events:none}
.ph__in{position:relative;z-index:2;width:100%;max-width:var(--container-wide);margin-inline:auto;padding:clamp(7rem,14vh,10rem) var(--gutter) clamp(3.5rem,8vh,6rem);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);transition:opacity .4s ease}
.ph h1{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.025em;margin:var(--space-5) 0 0}
.ph__sub{margin-top:var(--space-5);font-size:clamp(1.05rem,1.5vw,1.3rem);color:rgba(255,255,255,.85);max-width:36ch}
.ph__play{background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);color:#fff;transition:opacity .4s ease}
.ph__disc{width:clamp(76px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--cyan-400);color:#06232B;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(12,192,223,.4);animation:phPulse 2.4s ease-out infinite;transition:transform .2s ease}
.ph__play:hover .ph__disc{transform:scale(1.06)}
.ph__disc .material-symbols-sharp{font-size:clamp(38px,4vw,52px)}
@keyframes phPulse{0%{box-shadow:0 0 0 0 rgba(12,192,223,.45)}70%{box-shadow:0 0 0 26px rgba(12,192,223,0)}100%{box-shadow:0 0 0 0 rgba(12,192,223,0)}}
@media (prefers-reduced-motion: reduce){.ph__disc{animation:none}}
.ph__dur{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ph.is-playing{min-height:0;aspect-ratio:16/9;align-items:stretch}
@media (max-width:820px){.ph__in{flex-direction:column;align-items:flex-start}.ph{min-height:74vh}}
/* beats — photo essay */
.beats{display:flex;flex-direction:column;gap:clamp(3.5rem,7vh,5.5rem);margin-top:var(--space-10)}
.beat{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.beat--flip .beat__media{order:2}.beat--flip .beat__body{order:1}
.beat__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1)}
.beat__media img{width:100%;height:100%;object-fit:cover}
.beat__kicker{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-400);margin-bottom:var(--space-4)}
.beat__body h3{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--space-4)}
.beat__body p{color:rgba(255,255,255,.8);line-height:1.65;margin:0;font-size:1.02rem}
.beat-quote{max-width:52rem;margin-inline:auto;text-align:left;padding-left:var(--space-8);border-left:2px solid var(--amber,#EBA046)}
.beat-quote blockquote{font-family:var(--font-sans);font-style:normal;font-weight:var(--weight-medium,600);font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.7;color:#fff;margin:0}
.beat-quote__after{margin:var(--space-5) 0 0;color:rgba(255,255,255,.72);line-height:1.6}
@media (max-width:860px){.beat{grid-template-columns:1fr}.beat--flip .beat__media{order:0}.beat--flip .beat__body{order:1}}
/* stats band */
.ab-stats{padding-block:clamp(2.5rem,5vh,4rem);border-block:1px solid rgba(255,255,255,.08)}
/* now cards */
.now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-8)}
.now-card{display:flex;flex-direction:column;gap:var(--space-2);color:#fff;text-decoration:none}
.now-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);margin-bottom:var(--space-2)}
.now-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.now-card:hover .now-card__media img{transform:scale(1.05)}
.now-card__media .flag-badge{position:absolute;top:10px;left:10px;margin:0}
.now-card b{font-family:var(--font-display);font-size:1.08rem;line-height:1.3}
.now-card span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
@media (max-width:900px){.now-grid{grid-template-columns:1fr}}
/* families strip */
.fam-strip{padding-block:clamp(3rem,6vh,4.5rem)}
.fam-strip__in{max-width:46rem;margin-inline:auto;text-align:center}
.fam-strip__in p{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 var(--space-6)}
.fam-strip__bar{height:6px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;margin-bottom:var(--space-6)}
.fam-strip__bar span{display:block;height:100%;background:var(--cyan-400);box-shadow:0 0 12px rgba(12,192,223,.5);border-radius:3px}

/* ============ ABOUT v4 (approved) ============ */
.who2{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.who2__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1)}
.who2__media img{width:100%;height:100%;object-fit:cover}
.who2__body h2{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.02em;margin:var(--space-5) 0 var(--space-5)}
.who2__body p{color:rgba(255,255,255,.82);line-height:1.7;font-size:1.05rem;margin:0}
.who2__name{margin-top:var(--space-6) !important;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.who2__name span{color:var(--cyan-400)}
@media (max-width:860px){.who2{grid-template-columns:1fr}}
.brief{max-width:62ch;margin-inline:auto}
.brief p{color:rgba(255,255,255,.82);font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.75;margin:var(--space-6) 0 0}
.brief .beat-quote{margin:var(--space-8) 0}
.come-see{padding-bottom:clamp(4rem,8vh,6rem)}
.come-see__in{text-align:center}
.come-see__in h2{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;margin:0 0 var(--space-8)}
.come-see__links{display:flex;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap}
.come-see__links a{display:inline-flex;align-items:center;gap:6px;color:var(--cyan-400);font-weight:600;font-size:1.05rem}
.come-see__links a:hover{color:#fff}
.come-see__links .material-symbols-sharp{font-size:20px}

/* ============ about v4.1: compact hero + contained embed ============ */
.ah{position:relative;min-height:46vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.ah__bg{position:absolute;inset:0}
.ah__bg img{width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:saturate(.75) contrast(1.05)}
@media (min-width:1100px){.ah__bg img{object-position:center 48%}}
.ah__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,14,.95),rgba(6,10,14,.55) 55%,rgba(10,18,26,.45)),linear-gradient(120deg,rgba(14,58,82,.35),rgba(12,192,223,.06)),linear-gradient(90deg,rgba(6,10,14,.82) 0%,rgba(6,10,14,.5) 42%,transparent 68%)}
.ah__in{position:relative;z-index:2;width:100%;max-width:var(--container-wide);margin-inline:auto;padding:clamp(7rem,13vh,9.5rem) var(--gutter) clamp(2.5rem,6vh,4rem)}
.ah h1{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(2.4rem,5.2vw,4.2rem);line-height:1.03;letter-spacing:-.025em;margin:var(--space-5) 0 0}
.ah__sub{margin-top:var(--space-5);font-size:clamp(1.05rem,1.4vw,1.25rem);color:rgba(255,255,255,.82);max-width:44ch}
.about-film{padding-block:clamp(2.5rem,5vh,4rem)}
.about-film__wrap{max-width:56rem;margin-inline:auto}
.about-film__cap{margin-top:var(--space-4);text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* use-your-gifts section */
.join-us__in{max-width:52rem;margin-inline:auto;text-align:center}
.join-us__in h2{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;margin:var(--space-5) 0 var(--space-6)}
.join-us__in p{color:rgba(255,255,255,.78);line-height:1.65;font-size:1.02rem;margin:0 0 var(--space-8)}

/* ============ full history section: lede, sub-heading, close ============ */
.brief__lede{font-size:clamp(1.15rem,1.6vw,1.4rem) !important;color:rgba(255,255,255,.92) !important;line-height:1.65 !important;margin-top:0 !important}
.brief__kicker{margin:var(--space-12) 0 var(--space-2);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-400,#0CC0DF)}
.brief__close{font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,1.8vw,1.5rem) !important;color:#fff !important;text-align:center;margin-top:var(--space-12) !important;padding-top:var(--space-10);border-top:1px solid rgba(255,255,255,.1)}

/* film section: intro heading right above the video */
.about-film__head{text-align:center;max-width:44rem;margin:0 auto var(--space-8)}
.about-film__head h2{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;color:#fff;margin:var(--space-4) 0 0}

/* ============ merged who2 + thesis, logo, and OUR HISTORY textured section ============ */
.who2--tall .who2__media{aspect-ratio:3/4}
.who2__logo{display:block;height:clamp(38px,6vw,54px);width:auto;margin:var(--space-8) 0 var(--space-5);opacity:.96}
.brief--thesis{margin-top:var(--space-12);padding-top:var(--space-12);border-top:1px solid rgba(255,255,255,.08)}

.our-history{position:relative;overflow:hidden;padding-block:clamp(4rem,8vh,6.5rem)}
.our-history__tex{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 110% at 50% 0%, #0e1a30 0%, #0a1220 45%, #05080f 100%);}
.our-history__tex::after{content:"";position:absolute;inset:0;
  background:url("/assets/miraculous/tex-riso.jpg") center/cover;opacity:.10;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 20%,transparent 25%,#000 100%);
  mask-image:radial-gradient(130% 100% at 50% 20%,transparent 25%,#000 100%);}
.our-history > .container{position:relative;z-index:1}
.our-history__head{text-align:center;margin-bottom:var(--space-12)}
.our-history__head .eyebrow{justify-content:center;color:var(--cyan-400,#0CC0DF)}
.our-history__head h2{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.02em;color:#fff;margin:var(--space-4) 0 0}
.our-history__card{background:rgba(10,15,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg,16px);padding:clamp(2rem,5vw,4rem);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.our-history__card .brief{max-width:62ch}
.our-history__card .brief p:first-child{margin-top:0}

/* fam-strip: real title + subtle amber-toned distinction (giving moment color, not a texture clone) */
.fam-strip__h{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.02em;color:#fff;text-align:center;margin:var(--space-4) 0 var(--space-6)}
.fam-strip--titled{border-top:1px solid rgba(235,160,70,.16);border-bottom:1px solid rgba(235,160,70,.16);background:linear-gradient(180deg,rgba(235,160,70,.04),transparent 40%,transparent 60%,rgba(235,160,70,.04))}