/* v20260504-180258 */
/* ═══════════════════════════════════════════════════════════════════════════
   LEC-BASE.CSS — The canonical foundation of mylifelonger.com
   ─────────────────────────────────────────────────────────────────────────
   Shared tokens, typography, nav, footer, and globals.
   Every page (except the standalone calculator) imports this first,
   then adds page-specific styles below.

   Change a color here, it updates everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── IMPORTS ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap');


/* ── DESIGN TOKENS ───────────────────────────────────────────────────────── */
:root {
  /* Opt out of browser auto-dark (Chrome Android's auto dark theme inverts
     pages that don't declare a scheme, and mangles form controls first).
     The site's dark sections are hand-authored backgrounds, not a colour
     scheme, so they are unaffected by this. */
  color-scheme: only light;


  /* PALETTE — the Hybrid, locked */
  --black:         #0d0d0b;   /* primary dark — deeper, warmer */
  --dark:          #141410;   /* raised surfaces on dark */
  --cream:         #f0ede8;   /* primary light — brighter lift */
  --cream-2:       #f7f4ef;   /* raised surfaces on light */
  --gold:          #b8975a;   /* primary accent — aged brass */
  --gold-2:        #c9a96e;   /* highlight — italic emphasis */
  --gold-soft:     rgba(184,151,90,0.12);
  --white:         #ffffff;
  --text:          #1c1c18;   /* body text on cream */
  --text-muted:    #6b6860;
  --border:        rgba(184,151,90,0.2);
  --border-strong: rgba(184,151,90,0.35);

  /* TEXT-ON-DARK OPACITIES — tuned for legibility (WCAG AA+) */
  --text-on-dark:        rgba(255,255,255,0.92);
  --text-on-dark-soft:   rgba(255,255,255,0.78);
  --text-on-dark-muted:  rgba(255,255,255,0.60);
  --text-on-dark-faint:  rgba(255,255,255,0.35);

  /* TYPOGRAPHY */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* SPACING & LAYOUT */
  --max-width:     1100px;
  --max-width-wide: 1200px;
  --nav-height:    72px;

  /* MOTION */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --speed-fast:   0.2s;
  --speed:        0.3s;
  --speed-slow:   0.6s;
}


/* ── RESET & GLOBALS ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--cream);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--gold);
  color: var(--black);
}


/* ── UTILITY CLASSES ─────────────────────────────────────────────────────── */
.lec-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.lec-container-wide {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 640px) {
  .lec-container,
  .lec-container-wide {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.lec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.lec-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.lec-eyebrow--centered::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.lec-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   NAV — translucent adaptive across all pages
   ─────────────────────────────────────────────────────────────────────────
   Nav starts transparent. JS (lec-base.js) sets data-state based on whether
   the nav is currently overlapping a dark or light section beneath it.
     [data-state="over-dark"]  → dark translucent, white text
     [data-state="over-light"] → cream translucent, dark text
   Gold CTA button stays gold in both states.
   Graceful fallback for browsers without backdrop-filter.
   ══════════════════════════════════════════════════════════════════════════ */

.lec-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--nav-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--speed-slow) var(--ease),
    backdrop-filter var(--speed-slow) var(--ease),
    -webkit-backdrop-filter var(--speed-slow) var(--ease),
    border-color var(--speed-slow) var(--ease),
    box-shadow var(--speed-slow) var(--ease);
}

/* Over dark hero / dark sections — subtle dark frosted glass */
.lec-nav[data-state="over-dark"] {
  background: rgba(13, 13, 11, 0.35);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Over cream / light sections — cream frosted glass, inverted text */
.lec-nav[data-state="over-light"] {
  background: rgba(240, 237, 232, 0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Text color inversions for light state */
.lec-nav[data-state="over-light"] .lec-nav__link {
  color: var(--text);
}
.lec-nav[data-state="over-light"] .lec-nav__link:hover,
.lec-nav[data-state="over-light"] .lec-nav__link.is-active {
  color: var(--gold);
}
.lec-nav[data-state="over-light"] .lec-nav__text-top {
  color: var(--text);
}
.lec-nav[data-state="over-light"] .lec-nav__text-bottom {
  color: var(--gold);
}
.lec-nav[data-state="over-light"] .lec-nav__burger span {
  background: var(--text);
}

/* Graceful degradation — no backdrop-filter support */
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .lec-nav[data-state="over-dark"] {
    background: rgba(13, 13, 11, 0.88);
  }
  .lec-nav[data-state="over-light"] {
    background: rgba(240, 237, 232, 0.96);
  }
}

.lec-nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.lec-nav__dots {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 4px;
}
.lec-nav__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.9;
}

.lec-nav__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.lec-nav__text-top {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1;
}
.lec-nav__text-bottom {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gold-2);
  text-transform: uppercase;
  margin-top: 3px;
}

.lec-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.lec-nav__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease);
}
.lec-nav__link:hover,
.lec-nav__link.is-active {
  color: var(--gold);
}
.lec-nav__link--cta {
  background: var(--gold);
  color: var(--black);
  padding: 10px 18px;
  border-radius: 2px;
  transition: background var(--speed-fast) var(--ease);
}
.lec-nav__link--cta:hover {
  background: var(--gold-2);
  color: var(--black);
}
/* CTA stays gold in both nav states — override the light-state text color rule */
.lec-nav[data-state="over-light"] .lec-nav__link--cta,
.lec-nav[data-state="over-dark"] .lec-nav__link--cta {
  color: var(--black);
}

.lec-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px 8px;
  cursor: pointer;
  background: none;
  border: none;
}
.lec-nav__burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-on-dark);
  transition: transform var(--speed) var(--ease),
              opacity var(--speed) var(--ease);
}

/* Burger open state */
.lec-nav.is-open .lec-nav__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.lec-nav.is-open .lec-nav__burger span:nth-child(2) {
  opacity: 0;
}
.lec-nav.is-open .lec-nav__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  .lec-nav__links {
    display: none;
  }
  .lec-nav__burger {
    display: flex;
  }
}

/* Nav offset — any first section after nav needs margin */
.lec-nav-offset {
  margin-top: var(--nav-height);
}


/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS — shared primary actions
   ══════════════════════════════════════════════════════════════════════════ */

.lec-btn {
  display: inline-block;
  padding: 16px 34px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  transition: background var(--speed-fast) var(--ease),
              color var(--speed-fast) var(--ease);
}
.lec-btn:hover {
  background: var(--gold);
  color: var(--black);
}

.lec-btn--on-light {
  border-color: var(--gold);
  color: var(--gold);
}
.lec-btn--on-light:hover {
  background: var(--gold);
  color: var(--white);
}


/* ══════════════════════════════════════════════════════════════════════════
   NEWSLETTER BAND — shared module
   ══════════════════════════════════════════════════════════════════════════ */

.lec-newsletter {
  background: var(--cream-2);
  padding: 72px 32px;
  text-align: center;
}
.lec-newsletter__eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.lec-newsletter__eyebrow::before,
.lec-newsletter__eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.lec-newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 14px;
}
.lec-newsletter__title em {
  font-style: italic;
  color: var(--gold);
}
.lec-newsletter__desc {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.lec-newsletter__form {
  max-width: 440px;
  margin: 0 auto;
}
.lec-newsletter__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
  outline: none;
  transition: border-color var(--speed-fast) var(--ease);
}
.lec-newsletter__input:focus {
  border-color: var(--gold);
}
.lec-newsletter__btn {
  width: 100%;
  padding: 14px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background var(--speed-fast) var(--ease);
}
.lec-newsletter__btn:hover {
  background: var(--gold);
}
.lec-newsletter__fine {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   FOOTER — shared across all pages
   ══════════════════════════════════════════════════════════════════════════ */

.lec-footer {
  background: var(--black);
  color: var(--text-on-dark);
  padding: 56px 32px 36px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.lec-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 820px) {
  .lec-footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.lec-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lec-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lec-footer__logo .lec-nav__dots span { /* reuse nav dot treatment */
  opacity: 0.95;
}
.lec-footer__addr {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-on-dark-soft);
  line-height: 1.8;
}
.lec-footer__addr a {
  color: var(--text-on-dark-soft);
  transition: color var(--speed-fast) var(--ease);
}
.lec-footer__addr a:hover { color: var(--gold); }

.lec-footer__tagline {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-on-dark-soft);
  line-height: 1.7;
}

.lec-footer__social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lec-footer__social-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text-on-dark);
  transition: border-color var(--speed-fast) var(--ease),
              color var(--speed-fast) var(--ease),
              background var(--speed-fast) var(--ease);
}
.lec-footer__social-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184,151,90,0.1);
}
.lec-footer__social-btn svg {
  width: 16px;
  height: 16px;
}

.lec-footer__col-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.lec-footer__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lec-footer__nav a {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-on-dark);
  transition: color var(--speed-fast) var(--ease);
}
.lec-footer__nav a:hover { color: var(--gold); }

.lec-footer__bottom {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.lec-footer__disclaimer {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  margin-bottom: 16px;
  max-width: 840px;
}
.lec-footer__copy {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-on-dark-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — shared keyframes available to all pages
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes lec-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lec-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   FOLDING ARCHITECTURE — cinematic page transitions
   ─────────────────────────────────────────────────────────────────────────
   The folding pattern applies to pages with a hero and at least one "fold"
   section beneath it. The hero pins while the first fold section slides up
   over it, then that section pins while the next slides over, creating a
   double-fold effect. After the folding sequence, the rest of the page
   scrolls normally.

   USAGE:
     <header class="lec-hero" data-theme="dark">...</header>
     <section class="lec-fold" data-theme="dark">...</section>
     <section class="lec-fold-release">[content well]</section>
     ...rest scrolls normally...

   Rules:
   - `.lec-hero` is the first pinned viewport-height section.
   - `.lec-fold` pins as it scrolls up over the hero.
   - `.lec-fold-release` is the first section AFTER the folding sequence —
     this is where we release pinning and return to normal scroll. It gets
     the big dramatic fold shadow (typically the dark-to-light transition).
   - Mark any dark-background section with `data-theme="dark"` so the nav
     detector knows to use its dark-state styling.
   ══════════════════════════════════════════════════════════════════════════ */

/* HERO — pinned bottom layer */
.lec-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  z-index: 1;
}

/* FOLD — section that pins over the hero (or over a prior fold section) */
.lec-fold {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  z-index: 2;
  /* Visible top edge and upward shadow to suggest layering */
  border-top: 1px solid rgba(184, 151, 90, 0.4);
  box-shadow:
    0 -30px 60px -20px rgba(0, 0, 0, 0.9),
    0 -2px 0 0 rgba(184, 151, 90, 0.15);
}

/* Each subsequent fold sits above the previous one */
.lec-fold:nth-of-type(2) { z-index: 3; }
.lec-fold:nth-of-type(3) { z-index: 4; }
.lec-fold:nth-of-type(4) { z-index: 5; }

/* FOLD-RELEASE — the first section that stops pinning and scrolls normally.
   This is typically the dark-to-light transition, so it gets extra drama. */
.lec-fold-release {
  position: relative;
  z-index: 10;
  background: var(--cream);
  border-top: 1px solid rgba(184, 151, 90, 0.4);
  box-shadow:
    0 -50px 100px -30px rgba(0, 0, 0, 0.5),
    0 -2px 0 0 rgba(184, 151, 90, 0.2);
  padding-top: 120px;
}

/* Any section after the fold-release scrolls normally with high z-index */
.lec-fold-release ~ section,
.lec-fold-release ~ article,
.lec-fold-release ~ footer {
  position: relative;
  z-index: 11;
}

/* Safety — prevent blur/transparency leaks on folding sections */
.lec-hero,
.lec-fold,
.lec-fold-release {
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile — pinning two full-height panels is claustrophobic on small screens.
   Release stickiness and let everything scroll naturally. */
@media (max-width: 768px) {
  .lec-hero,
  .lec-fold {
    position: relative;
    height: auto;
    min-height: auto;
    top: auto;
  }
  .lec-hero {
    min-height: 680px;
  }
  .lec-fold {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .lec-fold-release {
    padding-top: 64px;
  }
}

/* Very short viewports — release stickiness so users can still reach content */
@media (max-height: 600px) {
  .lec-hero,
  .lec-fold {
    position: relative;
    height: auto;
    min-height: auto;
  }
  .lec-hero {
    min-height: 680px;
  }
}

/* Reduced-motion users — skip the pinning effect entirely */
@media (prefers-reduced-motion: reduce) {
  .lec-hero,
  .lec-fold {
    position: relative;
    height: auto;
    min-height: 680px;
  }
}



/* CONTACT TAB — frosted acrylic file tab, bottom-quarter right edge */
.lec-contact-tab {
  position: fixed;
  right: 40px;
  /* NOTE: final position is set by the injected disc stylesheet in
     lec-base.js, which uses !important and wins over anything here.
     Change it there, not here. */
  bottom: 40px;
  z-index: 800;
}

/* ── Discs dissolve while scrolling ───────────────────────────────────────
   Present and available at rest; they dissolve the moment the page moves so
   they never sit over content being read past, then fade back once scrolling
   settles. Fixed elements can only relocate an overlap, never remove one —
   so the answer is to be absent at exactly the moment they'd be in the way.

   Out fast (180ms) so they're gone before the eye tracks them; back slow
   (420ms) so the return is a fade-up rather than a pop. */
.lec-contact-tab {
  transition: opacity 420ms ease, transform 420ms ease;
}
.lec-sound-disc.is-visible {
  transition: opacity 420ms ease, transform 420ms ease;
}

body.lec-discs-clear .lec-contact-tab,
body.lec-discs-clear .lec-sound-disc,
body.lec-discs-clear .lec-sound-disc.is-visible {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .lec-contact-tab,
  .lec-sound-disc.is-visible { transition: opacity 140ms linear; }
  body.lec-discs-clear .lec-contact-tab,
  body.lec-discs-clear .lec-sound-disc,
  body.lec-discs-clear .lec-sound-disc.is-visible {
    transform: none;
    transition: opacity 140ms linear;
  }
}
.lec-contact-tab button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  transform: none;
  padding: 12px 22px;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  cursor: pointer;
  box-shadow: 0 -4px 28px rgba(184,151,90,0.22),
              0 -8px 48px rgba(184,151,90,0.1),
              inset 0 1px 0 rgba(255,255,255,0.22),
              inset 1px 0 0 rgba(255,255,255,0.12),
              inset -1px 0 0 rgba(255,255,255,0.12);
  transition: background var(--speed-fast) var(--ease),
              box-shadow var(--speed-fast) var(--ease);
}
.lec-contact-tab button:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--gold-2);
  box-shadow: 0 -6px 40px rgba(184,151,90,0.38),
              0 -12px 64px rgba(184,151,90,0.18),
              inset 0 1px 0 rgba(255,255,255,0.28),
              inset 1px 0 0 rgba(255,255,255,0.16),
              inset -1px 0 0 rgba(255,255,255,0.16);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PANEL — slides in from right over frosted overlay
   Triggered by any element with data-contact-trigger or .lec-contact-trigger
   Works on every page. Included in lec-base.css / lec-base.js globally.
   ══════════════════════════════════════════════════════════════════════════ */

/* OVERLAY — frosted glass behind the panel */
.lec-contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lec-contact-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* PANEL — slides in from right */
.lec-contact-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 901;
  width: 100%;
  max-width: 560px;
  background: rgba(13, 13, 11, 0.55);
  -webkit-
  border-left: 1px solid rgba(184, 151, 90, 0.22);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,0.92);
  visibility: hidden;
}

/* DARK PANEL — text and form colors flip to white-on-dark */
.lec-contact-panel .lec-cp__title { color: #f0ede8; }
.lec-contact-panel .lec-cp__title em { color: #c9a96e; }
.lec-contact-panel .lec-cp__dek { color: rgba(255,255,255,0.78); }
.lec-contact-panel .lec-cp__eyebrow { color: #b8975a; }
.lec-contact-panel .lec-cp__label { color: rgba(255,255,255,0.70); }
.lec-contact-panel .lec-cp__input,
.lec-contact-panel .lec-cp__select,
.lec-contact-panel .lec-cp__textarea {
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(184,151,90,0.28);
  color: #f0ede8;
}
.lec-contact-panel .lec-cp__input::placeholder,
.lec-contact-panel .lec-cp__textarea::placeholder {
  color: rgba(255,255,255,0.35);
}
.lec-contact-panel .lec-cp__input:focus,
.lec-contact-panel .lec-cp__select:focus,
.lec-contact-panel .lec-cp__textarea:focus {
  background-color: rgba(255,255,255,0.10);
  border-color: rgba(184,151,90,0.55);
}
.lec-contact-panel .lec-cp__btn {
  background: transparent;
  border: 1px solid rgba(184,151,90,0.55);
  color: #c9a96e;
}
.lec-contact-panel .lec-cp__btn:hover {
  background: rgba(184,151,90,0.12);
  border-color: rgba(184,151,90,0.85);
  color: #f0ede8;
}
.lec-contact-panel .lec-cp__direct-label { color: rgba(255,255,255,0.50); }
.lec-contact-panel .lec-cp__direct-link { color: #c9a96e; }
.lec-contact-panel .lec-cp__direct-link span { color: rgba(255,255,255,0.50); }
.lec-contact-panel .lec-cp__close { color: rgba(255,255,255,0.78); }
.lec-contact-panel .lec-cp__close:hover { color: #c9a96e; }
.lec-contact-panel .lec-cp__header { border-bottom: 1px solid rgba(184,151,90,0.18); }
.lec-contact-panel .lec-cp__logo span[style*="color:#1c1c18"] { color: #f0ede8 !important; }
.lec-contact-panel.is-open {
  box-shadow: -40px 0 80px rgba(0,0,0,0.45);
  transform: translateX(0);
  visibility: visible;
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
}

/* PANEL HEADER */
.lec-cp__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 36px;
  background: rgba(240, 237, 232, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184, 151, 90, 0.2);
}
.lec-cp__header-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.lec-cp__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(184, 151, 90, 0.3);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color var(--speed-fast) var(--ease),
              color var(--speed-fast) var(--ease),
              background var(--speed-fast) var(--ease);
  flex-shrink: 0;
}
.lec-cp__close:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 151, 90, 0.06);
}
.lec-cp__close svg { width: 16px; height: 16px; }

/* PANEL BODY */
.lec-cp__body {
  padding: 44px 36px 60px;
  flex: 1;
}
.lec-cp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.lec-cp__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.lec-cp__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.lec-cp__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 300;
}
.lec-cp__dek {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 38ch;
}

/* FORM FIELDS */
.lec-cp__group { margin-bottom: 20px; }
.lec-cp__label {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.lec-cp__input,
.lec-cp__select,
.lec-cp__textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 151, 90, 0.22);
  border-bottom: 2px solid rgba(184, 151, 90, 0.25);
  outline: none;
  transition: border-color var(--speed-fast) var(--ease),
              background-color var(--speed-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.lec-cp__input::placeholder,
.lec-cp__textarea::placeholder {
  color: rgba(28,28,24,0.32);
}
.lec-cp__input:focus,
.lec-cp__select:focus,
.lec-cp__textarea:focus {
  border-color: var(--gold);
  border-bottom-color: var(--gold);
  background-color: rgba(255, 255, 255, 0.95);
}
.lec-cp__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23c9a96e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  padding-right: 40px;
}
.lec-cp__select option {
  background: var(--cream-2);
  color: var(--text);
}
.lec-cp__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.65;
}
.lec-cp__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lec-cp__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border: none;
  cursor: pointer;
  margin-top: 8px;
  transition: background var(--speed-fast) var(--ease);
}
.lec-cp__btn:hover { background: var(--gold); }
.lec-cp__btn-arrow { transition: transform var(--speed-fast) var(--ease); }
.lec-cp__btn:hover .lec-cp__btn-arrow { transform: translateX(4px); }

/* ERROR STATE */
.lec-cp__input.has-error,
.lec-cp__select.has-error,
.lec-cp__textarea.has-error {
  border-color: #8b3a3a;
  border-bottom-color: #8b3a3a;
}

/* SUCCESS STATE */
.lec-cp__success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}
.lec-cp__success.is-visible { display: block; }
.lec-cp__success-icon {
  width: 56px; height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  color: var(--gold);
}
.lec-cp__success-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 300; font-style: italic;
  color: var(--text); margin-bottom: 14px;
}
.lec-cp__success-body {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 300; font-style: italic;
  color: var(--text-muted); line-height: 1.65;
}
.lec-cp__success-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Direct contact strip at bottom of panel */
.lec-cp__direct {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(184, 151, 90, 0.18);
}
.lec-cp__direct-label {
  font-family: var(--font-body);
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 14px;
}
.lec-cp__direct-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lec-cp__direct-link {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 300;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease);
}
.lec-cp__direct-link:hover { color: var(--gold); }
.lec-cp__direct-link span {
  font-family: var(--font-body);
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold); margin-right: 10px;
}

@media (max-width: 600px) {
  .lec-contact-panel { max-width: 100%; border-left: none; }
  .lec-cp__body { padding: 32px 24px 48px; }
  .lec-cp__header { padding: 20px 24px; }
  .lec-cp__row { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO REVEAL — anti-flicker crossfade pattern
   ─────────────────────────────────────────────────────────────────────────
   Problem this solves:
   When a <video> with autoplay loads, the browser paints the first frame,
   then autoplay seeks back to frame 0 to begin playback — visible as a
   one-second "flicker" or jump-restart.

   Solution:
   The video starts invisible (opacity 0). A poster <img> sits behind it
   showing frame 0 of the video. lec-base.js listens for the 'playing'
   event (the moment the autoplay-reset is complete and real playback has
   started) and adds .lec-video-playing to the parent container — at which
   point the video crossfades in and the poster crossfades out in lock-step.
   The handoff is invisible.

   Markup contract:
     <div class="hero__media">
       <img data-lec-poster src="hero-poster.jpg" alt="" role="presentation">
       <video data-lec-video autoplay muted loop playsinline preload="auto">
         <source src="hero.mp4" type="video/mp4">
       </video>
     </div>

   The data attributes are what the JS hooks. Class names (.hero__video,
   .article-hero__video, etc.) remain free for layout/sizing rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default state: the hero starts BLACK — video AND poster both hidden.
   Fading up from black (rather than crossfading poster-to-video) is what
   hides the autoplay pause and the first-frame glitch. */
[data-lec-video] {
  opacity: 0;
  transition: opacity 3000ms ease-in-out;
}
[data-lec-poster] {
  opacity: 0;
  transition: opacity 3000ms ease-in-out;
}

/* Playing state: parent gets .lec-video-playing once the video's 'playing'
   event fires — the video then fades up from black on a 3-second count.
   The poster deliberately stays hidden so this is a true fade from black,
   not a poster-to-video crossfade. */
.lec-video-playing [data-lec-video] { opacity: 1; }

/* Fallback: the video could not play at all — fade the still poster up
   instead, so a hero is never left as a permanent black box. */
.lec-poster-fallback [data-lec-poster] { opacity: 1; }

/* Reduced motion: skip the fade, just snap the video on. */
@media (prefers-reduced-motion: reduce) {
  [data-lec-video],
  [data-lec-poster] {
    transition: none;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   LONGEVITY REVIEWED BY (Wm. Scott Page) — hybrid review card
   ══════════════════════════════════════════════════════════════════════════
   Sized between a footnote and a full bio panel: photo bubble + label +
   name + one-line credentials. No tag pills, no bio paragraph. Reads as a
   credential strip, not a feature box. Stephen remains the article author;
   this is a quiet authority signal.

   The visible card is paired with reviewedBy schema in each article <head>
   (separate from this CSS) — the schema does the SEO/E-E-A-T lifting,
   the card is the human-readable surface.

   One placement per article: end of the article body, after the tags.
   Photo: /scott-page.jpg — swapping it is a one-file change.
   ══════════════════════════════════════════════════════════════════════ */
.lec-review-hybrid {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream, #f0ede8);
  border: 1px solid rgba(28, 28, 24, 0.12);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 40px 0 8px;
  font-family: 'Jost', system-ui, sans-serif;
}
.lec-review-hybrid__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(111, 142, 110, 0.22);
}
.lec-review-hybrid__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Crop A (no zoom), Position 2 — centered on his face so his head
     sits where a face should, not sunk at the bottom of the bubble. */
  object-position: center 22%;
}
.lec-review-hybrid__text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.lec-review-hybrid__label {
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #6f8e6e;
  font-weight: 600;
  margin-bottom: 3px;
}
.lec-review-hybrid__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1c1c18);
}
.lec-review-hybrid__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 28, 24, 0.18);
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
.lec-review-hybrid__name a:hover {
  border-bottom-color: #6f8e6e;
}
.lec-review-hybrid__creds {
  font-size: 11px;
  color: rgba(28, 28, 24, 0.55);
  margin-top: 1px;
}
@media (max-width: 480px) {
  .lec-review-hybrid { padding: 14px 16px; gap: 13px; }
  .lec-review-hybrid__photo { width: 42px; height: 42px; }
  .lec-review-hybrid__name { font-size: 14px; }
}

/* ── My Life Longer logo — sequential dot button-press, loops (all pages) ── */
.lec-nav__logo .lec-nav__dots span {
  transform-origin: center;
  animation: lecDotPress 3.6s ease-in-out infinite;
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
@keyframes lecDotPress {
  0%, 14%, 100% { transform: scale(1);   filter: brightness(1);   box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
  6%            { transform: scale(0.82); filter: brightness(0.6); box-shadow: 0 0 0 rgba(0,0,0,0.35); }
}
.lec-nav__logo .lec-nav__dots span:nth-child(1){animation-delay:0.00s}
.lec-nav__logo .lec-nav__dots span:nth-child(2){animation-delay:0.12s}
.lec-nav__logo .lec-nav__dots span:nth-child(3){animation-delay:0.24s}
.lec-nav__logo .lec-nav__dots span:nth-child(4){animation-delay:0.36s}
.lec-nav__logo .lec-nav__dots span:nth-child(5){animation-delay:0.48s}
.lec-nav__logo .lec-nav__dots span:nth-child(6){animation-delay:0.60s}
.lec-nav__logo .lec-nav__dots span:nth-child(7){animation-delay:0.72s}
.lec-nav__logo .lec-nav__dots span:nth-child(8){animation-delay:0.84s}
.lec-nav__logo .lec-nav__dots span:nth-child(9){animation-delay:0.96s}
@media (prefers-reduced-motion: reduce) {
  .lec-nav__logo .lec-nav__dots span { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS-DOCUMENT VIEW TRANSITIONS
   One rule opts the whole multi-page site into native page transitions.
   Zero JavaScript — the browser snapshots the outgoing page, applies the
   incoming one, and crossfades on the compositor. Browsers without support
   (Firefox, as of mid-2026) ignore all of this and navigate as before.
   Durations follow the house motion scale; the hero's own 3s fade is
   unaffected because it starts after navigation completes.
   ═══════════════════════════════════════════════════════════════════════════ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: lecVTOut 220ms cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: lecVTIn 320ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes lecVTOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes lecVTIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The nav and the floating discs persist across pages — naming them keeps
   them anchored instead of crossfading with the rest of the document. */
.lec-nav         { view-transition-name: lec-nav; }
.lec-sound-disc  { view-transition-name: lec-sound-disc; }
.lec-contact-tab { view-transition-name: lec-contact-tab; }

/* Respect the same motion preference the rest of the engine honours. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}