/* ==========================================================================
   Lifestoria — Premium Cozy Editorial Design System (inlined)
   ========================================================================== */
:root {
  --color-bg: #f4efe7;
  --color-bg-soft: #ede4d8;
  --color-bg-muted: #ded2c3;
  --color-surface: #fbf8f3;
  --color-text: #2d2823;
  --color-text-muted: #6f665d;
  --color-text-soft: #94887c;
  --color-accent: #8a6f56;
  --color-accent-dark: #5f4938;
  --color-accent-light: #c8b8a3;
  --color-border: rgba(45, 40, 35, 0.14);
  --font-display: "Libre Baskerville", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --container: 1180px;
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-med: 450ms;
  --duration-slow: 800ms;
  --shadow-soft: 0 20px 60px rgba(45, 40, 35, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { overscroll-behavior: none; }
body { overscroll-behavior: none; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }


.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.section-sm { padding-block: var(--space-2xl); }
.section-bordered { border-top: 1px solid var(--color-border); }
.section-muted { background: var(--color-bg-soft); }
.section-surface { background: var(--color-surface); }

@media (max-width: 768px) {
  .section { padding-block: 5rem; }
  .section-sm { padding-block: 3.5rem; }
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--color-accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.display-xl { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 9.5rem); font-weight: 400; line-height: 0.88; letter-spacing: -0.06em; margin: 0; }
.display-lg { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6.75rem); font-weight: 400; line-height: 0.92; letter-spacing: -0.05em; margin: 0; }
.heading-xl { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 5.25rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.045em; margin: 0; }
.heading-lg { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.035em; margin: 0; }
.heading-md { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; margin: 0; }

.body-lg { color: var(--color-text-muted); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.65; }
.body-md { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; }
.body-sm { color: var(--color-text-soft); font-size: 0.9rem; line-height: 1.6; }

/* ----- Header ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 239, 231, 0.76);
  border-bottom: 1px solid rgba(45, 40, 35, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1;
}
.brand-mark {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  overflow: hidden;
  background: url('../images/brand/logo.svg') no-repeat left center;
  background-size: calc(1.9rem * 159 / 32) 1.9rem;
}
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  transition: color var(--duration-fast) var(--ease-soft);
  cursor: pointer;
}
.nav-links a:hover { color: var(--color-text); }
.nav-cta {
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 0.875rem;
  transition: background var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft),
              transform var(--duration-fast) var(--ease-soft),
              color var(--duration-fast) var(--ease-soft);
}
.nav-cta:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-1px);
}
@media (max-width: 800px) {
  .nav-links { display: none; }
}

/* ----- Hero ----- */
.hero { padding-block: 7rem var(--space-3xl); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.75fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: end;
}
.hero-copy { max-width: 820px; }
.hero-intro { max-width: 620px; margin-top: 1.75rem; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.25rem; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero { padding-block: 5rem 4rem; }
  .hero-grid { grid-template-columns: 1fr; }
}

/* ----- Buttons & links ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.35rem;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-soft),
              background var(--duration-fast) var(--ease-soft),
              border-color var(--duration-fast) var(--ease-soft),
              color var(--duration-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg-soft); border-color: rgba(45, 40, 35, 0.24); }

.text-link {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  font-size: 0.95rem;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.25rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0.35);
  opacity: 0.55;
  transition: transform var(--duration-med) var(--ease-soft),
              opacity var(--duration-med) var(--ease-soft);
}
.text-link:hover::after { transform-origin: left; transform: scaleX(1); opacity: 1; }

/* ----- Split section ----- */
.split-grid {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.split-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: brightness(0.95);
  transition: transform 1.2s var(--ease-soft);
}
.split-media:hover img { transform: scale(1.045); }
.split-copy { max-width: 620px; }
.split-copy .body-md { margin-top: 1.5rem; }
.quiet-list {
  display: grid;
  gap: 0;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.quiet-list li {
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }

/* ----- Quote band ----- */
.quote-band { padding-block: var(--space-3xl); background: var(--color-bg-soft); }
.quote-inner { max-width: 980px; text-align: center; margin-inline: auto; }
.quote-inner blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* ----- Contact card ----- */
.contact-card {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 6rem);
  border-radius: var(--radius-lg);
  background: var(--color-text);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.contact-card-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.46);
  z-index: 0;
}
.contact-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(18,14,10,0.60) 0%, rgba(18,14,10,0.78) 100%);
  z-index: 1;
}
.contact-card-inner { position: relative; z-index: 2; }
.contact-card .eyebrow  { color: rgba(200,184,163,0.65); }
.contact-card h2        { max-width: 820px; margin-inline: auto; color: #fbf8f3; }
.contact-card .body-lg  { max-width: 620px; margin: 1.5rem auto 0; color: rgba(244,239,231,0.68); }
.contact-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

/* ----- Section header ----- */
.section-header { max-width: 760px; margin-bottom: var(--space-xl); }

/* ----- Reveal on scroll ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ----- Soft pill ----- */
.soft-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  background: rgba(251, 248, 243, 0.42);
  margin-bottom: 1.25rem;
}
.soft-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-accent);
}

/* ----- Avatar group ----- */
.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--color-bg-soft);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--color-bg);
  flex-shrink: 0;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar-group { display: inline-flex; align-items: center; }
.ui-avatar-group .ui-avatar + .ui-avatar { margin-left: -10px; }

/* ── Hero image stack ─────────────────────────────────── */
.hero-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 620px;
}
.hero-stack-top {
  flex: 1.6;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  min-height: 0;
}
.hero-stack-top img {
  width: 100%; height: 100%;
  object-fit: cover;

}
.hero-stack-bottom {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  min-height: 0;
}
.hero-stack-bottom img {
  width: 100%; height: 100%;
  object-fit: cover;

}
@media (max-width: 900px) {
  .hero-stack { min-height: auto; }
  .hero-stack-top { min-height: 380px; }
  .hero-stack-bottom { display: none; }
}

/* ── Social proof bar ─────────────────────────────────── */
.proof-bar {
  padding-block: 1.75rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.proof-inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.proof-sep {
  width: 1px;
  height: 1.4rem;
  background: var(--color-border);
  flex-shrink: 0;
}
.proof-text {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.proof-text strong { color: var(--color-text); font-weight: 600; }
@media (max-width: 600px) { .proof-sep { display: none; } }

/* ── Testimonial cards ────────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

.testi-card {
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(251, 248, 243, 0.6);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform var(--duration-med) var(--ease-soft),
              box-shadow var(--duration-med) var(--ease-soft);
}
.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}
.testi-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.75;
  color: var(--color-accent-light);
  display: block;
}
.testi-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--color-text);
  flex: 1;
}
.testi-author { display: flex; align-items: center; gap: 0.75rem; }
.testi-author img {
  width: 42px; height: 42px;
  border-radius: 999px;
  object-fit: cover;
  filter: brightness(0.95);
  flex-shrink: 0;
}
.testi-name { font-size: 0.88rem; font-weight: 500; color: var(--color-text); line-height: 1.3; }
.testi-role { font-size: 0.78rem; color: var(--color-text-soft); margin-top: 0.1rem; }

/* ── Nav extras ───────────────────────────────────────── */
.nav-login {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  transition: color var(--duration-fast) var(--ease-soft);
}
.nav-login:hover { color: var(--color-text); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 800px) { .nav-login, .nav-cta { display: none; } }

/* ── Fixed header with scroll-aware transparency ──────── */
.site-header {
  position: fixed !important;
  width: 100%;
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background 420ms var(--ease-soft),
    border-color 420ms var(--ease-soft),
    backdrop-filter 420ms var(--ease-soft);
}

.brand-wordmark {
  display: inline-block;
  height: 1.9rem;
  width: calc(1.9rem * 127 / 32);
  background: url('../images/brand/logo.svg') no-repeat calc(-1.9rem) center;
  background-size: calc(1.9rem * 159 / 32) 1.9rem;
  transition: filter 420ms var(--ease-soft);
}
.site-header:not(.hdr-scrolled) .brand-wordmark { filter: brightness(0) invert(1); }
.footer-dark-brand .brand-wordmark { filter: brightness(0) invert(1); }
.site-header:not(.hdr-scrolled) .nav-links a,
.site-header:not(.hdr-scrolled) .nav-login { color: rgba(244, 239, 231, 0.68); }
.site-header:not(.hdr-scrolled) .nav-links a:hover,
.site-header:not(.hdr-scrolled) .nav-login:hover { color: rgba(251, 248, 243, 0.96); }
.site-header:not(.hdr-scrolled) .nav-cta {
  border-color: rgba(244, 239, 231, 0.30);
  color: rgba(251, 248, 243, 0.90);
  background: rgba(244, 239, 231, 0.08);
}
.site-header:not(.hdr-scrolled) .nav-cta:hover {
  background: rgba(251, 248, 243, 0.90);
  border-color: transparent;
  color: var(--color-text);
}
.site-header:not(.hdr-scrolled) .nav-hamburger { color: rgba(251, 248, 243, 0.90); }

.site-header.hdr-scrolled {
  background: rgba(244, 239, 231, 0.82) !important;
  border-bottom-color: rgba(45, 40, 35, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* ── Concept section ────────────────────────────────────── */
.concept-section {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  background: var(--color-bg);
}
.concept-grid {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: start;
}
@media (max-width: 900px) { .concept-grid { grid-template-columns: 1fr; } }

.concept-eyebrow-top {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 1.4rem;
}
.concept-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin: 0 0 2.75rem;
}
.concept-body {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0 0 2.5rem;
}
.concept-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.concept-right-intro {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0 0 1.75rem;
}
.concept-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  height: 400px;
}
@media (max-width: 560px) {
  .concept-cards { grid-template-columns: 1fr; height: auto; }
}
.concept-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  cursor: default;
}
@media (max-width: 560px) { .concept-card { height: 340px; } }
.concept-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.88);
  transition: transform 500ms ease;
  display: block;
}
.concept-card:hover img {
  transform: scale(1.04);
  filter: brightness(0.72);
}
.concept-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18,14,10,0.78) 100%);
}
.concept-card-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}
.concept-card-left { display: flex; flex-direction: column; gap: 0.15rem; }
.concept-card-num {
  font-size: 0.62rem;
  color: rgba(244,239,231,0.48);
  letter-spacing: 0.06em;
}
.concept-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: #fbf8f3;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.concept-card-tag {
  font-size: 0.62rem;
  color: rgba(244,239,231,0.48);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1.5;
  flex-shrink: 0;
}

/* ── Experience cards section ────────────────────────── */
.experience-section { background: var(--color-bg); }
.experience-header {
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.experience-header .eyebrow { color: var(--color-accent-dark); margin-bottom: 1rem; }
.experience-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  max-width: 620px;
  margin: 0 auto 1rem;
}
.experience-header p {
  font-size: 0.97rem;
  color: var(--color-text-muted);
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.7;
}
.experience-cards {
  display: flex;
  height: clamp(480px, 68vh, 680px);
}
@media (max-width: 700px) {
  .experience-cards { flex-direction: column; height: auto; }
}
.exp-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  transition: flex 600ms var(--ease-soft);
}
.exp-card:hover { flex: 1.72; }
.exp-card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(0.6);
  transition: filter 400ms ease, transform 600ms ease;
}
.exp-card:hover .exp-card-img {
  filter: brightness(0.38);
  transform: scale(1.05);
}
.exp-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(18, 14, 10, 0.78) 100%);
  transition: opacity 500ms var(--ease-soft);
}
.exp-card:hover .exp-card-overlay {
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.22) 0%, rgba(18, 14, 10, 0.88) 55%, rgba(18, 14, 10, 0.96) 100%);
}
.exp-card-base {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.75rem 1.5rem;
  z-index: 2;
  transition: opacity 250ms var(--ease-soft);
}
.exp-card:hover .exp-card-base { opacity: 0; pointer-events: none; }
.exp-card-num {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.45);
  margin-bottom: 0.4rem;
}
.exp-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.2vw, 2.25rem);
  font-weight: 400;
  color: #fbf8f3;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.exp-card-reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 350ms var(--ease-soft);
}
.exp-card:hover .exp-card-reveal { opacity: 1; }
.exp-reveal-rule { width: 28px; height: 1px; background: rgba(244, 239, 231, 0.35); margin-bottom: 1.25rem; }
.exp-reveal-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em; color: #fbf8f3; margin: 0 0 1rem; }
.exp-reveal-question { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 239, 231, 0.42); margin-bottom: 0.55rem; }
.exp-reveal-answer { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.6; letter-spacing: -0.01em; color: rgba(244, 239, 231, 0.80); margin: 0; }
@media (max-width: 700px) {
  .exp-card { flex: none; height: 420px; }
  .exp-card:hover { flex: none; }
}

/* ── How-it-works interactive strip ─────────────────── */
.how-strip { display: flex; gap: 0.6rem; height: clamp(480px, 60vh, 600px); margin-top: var(--space-xl); }
.how-card { position: relative; flex: 1; overflow: hidden; cursor: default; border-radius: var(--radius-md); transition: flex 650ms var(--ease-soft); }
.how-strip:not(:hover) .how-card:first-child { flex: 2.75; }
.how-strip:hover .how-card:hover { flex: 2.75; }
.how-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.78); transition: filter 400ms ease, transform 600ms ease; }
.how-strip:not(:hover) .how-card:first-child .how-card-img,
.how-strip:hover .how-card:hover .how-card-img { filter: brightness(0.58); transform: scale(1.04); }
.how-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,14,10,0.04) 0%, rgba(18,14,10,0.58) 100%); transition: background 500ms var(--ease-soft); }
.how-strip:not(:hover) .how-card:first-child .how-card-overlay,
.how-strip:hover .how-card:hover .how-card-overlay { background: linear-gradient(180deg, rgba(18,14,10,0.10) 0%, rgba(18,14,10,0.78) 100%); }
.how-card-collapsed { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 2.25rem; gap: 0.8rem; transition: opacity 280ms var(--ease-soft); }
.how-card-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(244,239,231,0.30); flex-shrink: 0; }
.how-card-vtitle { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-body); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,231,0.50); margin: 0; white-space: nowrap; }
.how-strip:not(:hover) .how-card:first-child .how-card-collapsed { opacity: 0; pointer-events: none; }
.how-strip:not(:hover) .how-card:not(:first-child) .how-card-collapsed { opacity: 1; }
.how-strip:hover .how-card:hover .how-card-collapsed { opacity: 0; pointer-events: none; }
.how-strip:hover .how-card:not(:hover) .how-card-collapsed { opacity: 1; }
.how-card-expanded { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 2rem 2.25rem 2.5rem; transition: opacity 360ms var(--ease-soft), transform 360ms var(--ease-soft); }
.how-card-num-exp { font-size: 0.60rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,231,0.35); margin-bottom: 0.7rem; }
.how-card-title-exp { font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.65rem); font-weight: 400; color: #fbf8f3; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 1rem; }
.how-card-rule { width: 28px; height: 1px; background: rgba(244,239,231,0.25); margin-bottom: 1rem; }
.how-card-body-exp { font-size: 0.875rem; color: rgba(244,239,231,0.58); line-height: 1.70; margin: 0; max-width: 340px; }
.how-strip:not(:hover) .how-card:first-child .how-card-expanded { opacity: 1; transform: translateY(0); }
.how-strip:not(:hover) .how-card:not(:first-child) .how-card-expanded { opacity: 0; transform: translateY(10px); pointer-events: none; }
.how-strip:hover .how-card:hover .how-card-expanded { opacity: 1; transform: translateY(0); }
.how-strip:hover .how-card:not(:hover) .how-card-expanded { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (max-width: 700px) {
  .how-strip { flex-direction: column; height: auto; border-radius: var(--radius-md); }
  .how-card { flex: none !important; height: 260px; }
  .how-card-collapsed { display: none; }
  .how-card-expanded { opacity: 1 !important; transform: none !important; }
}
.section-action { display: flex; justify-content: center; margin-top: var(--space-xl); }

/* ── Stats bar ───────────────────────────────────────── */
.stats-section { background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.stats-grid { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; align-items: center; gap: 0; }
.stat-sep { width: 1px; height: 3rem; background: var(--color-border); justify-self: center; }
.stat-item { text-align: center; padding: 0 clamp(1rem, 3vw, 2.5rem); }
.stat-number { font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.5rem); font-weight: 700; letter-spacing: -0.04em; color: var(--color-text); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.2rem; }
.stat-sub { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); }
.stat-count { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft); }
.stats-section.is-visible .stat-count { opacity: 1; transform: translateY(0); }
.stat-item:nth-child(1) .stat-count { transition-delay: 0ms; }
.stat-item:nth-child(3) .stat-count { transition-delay: 80ms; }
.stat-item:nth-child(5) .stat-count { transition-delay: 160ms; }
.stat-item:nth-child(7) .stat-count { transition-delay: 240ms; }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1px auto; gap: 0; }
  .stat-sep:nth-child(2) { display: none; }
  .stat-sep:nth-child(4) { grid-column: 1 / -1; width: 100%; height: 1px; }
  .stat-sep:nth-child(6) { display: none; }
  .stat-item { padding: 1.5rem 1rem; }
}

/* ── Quote band override — full-bleed image + tabs ──── */
.quote-band {
  position: relative;
  overflow: hidden;
  background: transparent;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vh, 5rem);
}
.qb-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: brightness(0.48) saturate(0.4); transform-origin: center center; }
.qb-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(18, 14, 10, 0.50) 0%, rgba(18, 14, 10, 0.68) 55%, rgba(18, 14, 10, 0.80) 100%); }
.quote-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(85vh - clamp(6rem, 12vh, 10rem)); }
.qb-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid rgba(244, 239, 231, 0.14); }
.qb-tab { background: none; border: none; cursor: pointer; padding: 0.5rem 1.6rem 0.9rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(244, 239, 231, 0.36); position: relative; transition: color 300ms var(--ease-soft); white-space: nowrap; }
.qb-tab::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1.5px; background: rgba(244, 239, 231, 0.78); transform: scaleX(0); transform-origin: left; transition: none; }
.qb-tab.is-active { color: rgba(244, 239, 231, 0.84); }
.qb-tab.is-active::after { transform: scaleX(1); transition: transform 7s linear; }
.qb-tab-short { display: none; }
@media (max-width: 600px) { .qb-tab { font-size: 0.62rem; padding-inline: 0.9rem; } .qb-tab-full { display: none; } .qb-tab-short { display: inline; } }
.qb-panels { display: grid; }
.qb-panel { grid-area: 1 / 1; transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft); }
.qb-panel:not(.is-active) { opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden; }
.qb-panel.is-active { opacity: 1; transform: translateY(0); visibility: visible; }
.quote-band .eyebrow { color: rgba(244, 239, 231, 0.40); }
.quote-band blockquote { color: #fbf8f3; font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.qb-attr { margin-top: 1rem; font-size: 0.85rem; color: rgba(244, 239, 231, 0.40); }
.qb-cta { margin-top: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.qb-cta-note { font-size: 0.8rem; color: rgba(244, 239, 231, 0.32); letter-spacing: 0.04em; }
.btn-qb { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: var(--radius-pill); border: 1px solid rgba(244, 239, 231, 0.22); background: rgba(244, 239, 231, 0.07); color: rgba(251, 248, 243, 0.82); font-size: 0.9rem; font-family: var(--font-body); letter-spacing: 0.01em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--duration-med) var(--ease-soft), border-color var(--duration-med) var(--ease-soft), color var(--duration-med) var(--ease-soft), transform var(--duration-fast) var(--ease-soft); }
.btn-qb:hover { background: rgba(251, 248, 243, 0.14); border-color: rgba(244, 239, 231, 0.40); color: #fbf8f3; transform: translateY(-2px); }

/* ── Story section (Stillpoint split layout) ─────────── */
.story-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }
.story-heading { font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 4.25rem); font-weight: 400; line-height: 1.01; letter-spacing: -0.045em; color: var(--color-text); margin: 0 0 1.75rem; }
.story-body { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.78; margin: 0; }
.story-rule { border: none; border-top: 1px solid var(--color-border); margin: 1.75rem 0; }
.story-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 0.65rem; }
.story-img-wrap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.story-img-badge { position: absolute; bottom: 1.25rem; left: 1.25rem; background: rgba(244, 239, 231, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-pill); padding: 0.38rem 1rem; font-size: 0.63rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-text); }
.story-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 560px) { .story-cards { grid-template-columns: 1fr; } }
.story-card { padding: 1.5rem 1.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.story-card-label { font-size: 0.60rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: 0.7rem; }
.story-card-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--color-text); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 0.65rem; }
.story-card-body { font-size: 0.845rem; color: var(--color-text-muted); line-height: 1.70; margin: 0; }

/* ── Sample audio player ─────────────────────────────── */
.audio-sample { margin-top: var(--space-xl); padding: 2rem 2.5rem; border-radius: var(--radius-lg); background: var(--color-text); display: grid; grid-template-columns: 1fr auto; gap: 1.75rem 3rem; align-items: center; }
@media (max-width: 760px) { .audio-sample { grid-template-columns: 1fr; padding: 1.75rem; } }
.audio-sample-left { min-width: 0; }
.audio-sample-tag { font-size: 0.60rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(200, 184, 163, 0.6); margin-bottom: 0.5rem; }
.audio-sample-desc { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(251, 248, 243, 0.88); line-height: 1.45; letter-spacing: -0.01em; margin: 0; }
.audio-sample-right { min-width: 280px; }
@media (max-width: 760px) { .audio-sample-right { min-width: 0; } }
.audio-player { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.audio-play-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(244, 239, 231, 0.22); background: rgba(244, 239, 231, 0.08); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(251, 248, 243, 0.88); transition: background var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft); }
.audio-play-btn:hover { background: rgba(244, 239, 231, 0.18); border-color: rgba(244, 239, 231, 0.45); transform: scale(1.06); }
.audio-progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; }
.audio-track { width: 100%; height: 56px; cursor: pointer; position: relative; display: flex; align-items: center; }
.audio-wave-canvas { width: 100%; height: 100%; display: block; }
.audio-track:hover { opacity: 0.92; }
.audio-times { display: flex; justify-content: space-between; font-size: 0.66rem; color: rgba(244, 239, 231, 0.35); font-variant-numeric: tabular-nums; }
.audio-trust { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid rgba(244, 239, 231, 0.08); font-size: 0.72rem; color: rgba(244, 239, 231, 0.32); display: flex; align-items: center; gap: 0.5rem; line-height: 1.5; }
.audio-trust-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(200, 184, 163, 0.5); flex-shrink: 0; }

/* ── Language section grid ────────────────────────────── */
.split-grid--lang { grid-template-columns: 1fr 0.9fr; }

/* ── Language pills ───────────────────────────────────── */
.lang-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.75rem; }
.lang-pill { display: inline-flex; padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 0.78rem; color: var(--color-text-muted); background: rgba(251, 248, 243, 0.52); }
.lang-pill-more { position: relative; cursor: pointer; color: var(--color-accent-dark); border-color: var(--color-accent-dark); font-weight: 500; }
.lang-popover { display: block; position: absolute; bottom: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%); width: 520px; background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-md); padding: 1.1rem 1.25rem 1.25rem; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; transform: translateX(-50%) translateY(4px); z-index: 200; text-align: left; box-shadow: 0 8px 32px rgba(18,14,10,0.22); }
.lang-popover::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-text); }
.lang-pill-more:hover .lang-popover, .lang-pill-more:focus-within .lang-popover { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.lang-popover-title { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(251,248,243,0.45); margin-bottom: 0.75rem; }
.lang-popover-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem 0.5rem; }
.lang-popover-grid span { font-size: 0.78rem; color: rgba(251,248,243,0.85); white-space: nowrap; }

/* ── Language section – mobile ───────────────────────── */
@media (max-width: 900px) {
  .split-grid--lang { grid-template-columns: 1fr; }
  .split-grid--lang .split-media { order: -1; }
  .split-grid--lang .split-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .lang-popover {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }
  .lang-popover::after { display: none; }
  .lang-pill-more:hover .lang-popover,
  .lang-pill-more:focus-within .lang-popover {
    transform: translateY(-50%);
  }
  .lang-popover-grid { grid-template-columns: repeat(3, 1fr); gap: 0.35rem 0.4rem; }
  .lang-popover-grid span { font-size: 0.74rem; white-space: normal; }
  .lang-pills { gap: 0.35rem; margin-top: 1.25rem; }
  .lang-pill { padding: 0.25rem 0.55rem; font-size: 0.72rem; }
}

/* ── Life Arc Timeline ─────────────────────────────── */
.timeline-section { background: var(--color-bg); }
.timeline-intro { text-align: center; max-width: 640px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.tl-two-col { display: grid; grid-template-columns: 1fr 1.28fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.tl-left-outer { display: flex; flex-direction: column; gap: 1.25rem; }
.tl-left-wrap { position: relative; padding-left: 48px; height: min(500px, 66vh); }
.tl-spine { position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--color-accent-light) 15%, var(--color-accent-light) 85%, transparent); opacity: 0.4; pointer-events: none; }
.tl-active-dot { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); border: 2.5px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-accent); z-index: 2; pointer-events: none; transition: background 300ms var(--ease-soft), box-shadow 300ms var(--ease-soft); }
.tl-left { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.tl-left::-webkit-scrollbar { display: none; }
.tl-entry { height: 100%; flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0; }
.tl-entry-year { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 1rem; padding-left: 4px; transition: opacity 400ms var(--ease-soft); }
.tl-year-num { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-text); }
.tl-age-lbl { font-size: 0.78rem; color: var(--color-text-muted); font-family: var(--font-body); }
.tl-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: 1.3rem 1.4rem; max-width: 420px; }
.tl-chapter-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); font-family: var(--font-body); font-weight: 600; margin-bottom: 0.42rem; }
.tl-card-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-text); line-height: 1.28; margin-bottom: 0.6rem; }
.tl-card-teaser { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.58; margin-bottom: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-card-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tl-card-pill { font-size: 0.69rem; font-family: var(--font-body); padding: 0.18rem 0.58rem; border-radius: var(--radius-pill); background: rgba(138, 111, 86, 0.09); color: var(--color-accent); font-weight: 500; }
.tl-progress { display: flex; align-items: center; gap: 0.9rem; padding-left: 4px; }
.tl-dots { display: flex; gap: 0.4rem; align-items: center; }
.tl-dot-btn { position: relative; overflow: hidden; width: 6px; height: 6px; border-radius: 50%; border: none; background: rgba(138, 111, 86, 0.28); cursor: pointer; padding: 0; transition: width 320ms var(--ease-soft), background 320ms var(--ease-soft), border-radius 320ms var(--ease-soft); }
.tl-dot-btn::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.48); border-radius: inherit; }
.tl-dot-btn.is-active { width: 20px; border-radius: 3px; background: var(--color-accent); }
.tl-dot-btn.is-active::after { animation: tl-dot-fill 4.5s linear forwards; }
@keyframes tl-dot-fill { from { width: 0%; } to { width: 100%; } }
.tl-counter { font-size: 0.74rem; color: var(--color-text-muted); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.tl-right { position: relative; height: min(580px, 76vh); }
.tl-preview { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 560ms var(--ease-soft); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 16px 56px rgba(45, 40, 35, 0.10); overflow: hidden; display: flex; flex-direction: column; }
.tl-preview.is-active { opacity: 1; pointer-events: all; }
.tl-prev-hero { position: relative; height: 190px; flex-shrink: 0; overflow: hidden; }
.tl-prev-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: brightness(0.82); }
.tl-prev-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,16,12,0.10) 0%, rgba(20,16,12,0.72) 100%); }
.tl-prev-hero-text { position: absolute; bottom: 1.1rem; left: 1.3rem; right: 1.3rem; }
.tl-prev-breadcrumb { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.13em; color: rgba(200, 184, 163, 0.70); font-family: var(--font-body); font-weight: 600; margin-bottom: 0.22rem; }
.tl-prev-title { font-family: var(--font-display); font-size: 1.08rem; color: rgba(244, 239, 231, 0.96); line-height: 1.22; margin-bottom: 0.5rem; }
.tl-prev-byline { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: rgba(244, 239, 231, 0.65); font-family: var(--font-body); }
.tl-prev-audio { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1.2rem; background: var(--color-text); flex-shrink: 0; }
.tl-prev-play { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(244, 239, 231, 0.18); background: rgba(244, 239, 231, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.tl-prev-play:hover { background: rgba(244, 239, 231, 0.18); border-color: rgba(244, 239, 231, 0.35); }
.tl-prev-wave-wrap { flex: 1; height: 32px; cursor: pointer; position: relative; }
.tl-prev-wave-wrap canvas { width: 100%; height: 100%; display: block; }
.tl-prev-time { font-size: 0.66rem; color: rgba(200, 184, 163, 0.48); font-family: var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 5.5em; text-align: right; }
.tl-prev-tabs { display: flex; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.tl-prev-tab { padding: 0.55rem 1rem; font-size: 0.78rem; font-family: var(--font-body); color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: default; }
.tl-prev-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tl-prev-content { flex: 1; position: relative; min-height: 0; overflow: hidden; }
.tl-prev-skeleton { padding: 1rem 1.3rem 0.5rem; display: flex; flex-direction: column; gap: 0.42rem; }
.sk-line { height: 9px; background: var(--color-bg-soft); border-radius: 3px; flex-shrink: 0; }
.sk-line--title { height: 13px; background: rgba(45, 40, 35, 0.13); width: 52%; margin-bottom: 0.35rem; }
.sk-line--full { width: 100%; }
.sk-line--lg { width: 87%; }
.sk-line--md { width: 66%; }
.sk-line--sm { width: 44%; }
.tl-prev-veil { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; background: linear-gradient(to bottom, transparent, var(--color-surface)); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1rem; pointer-events: none; }
.tl-prev-badge { font-size: 0.7rem; font-family: var(--font-body); color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.26rem 0.85rem; pointer-events: all; }
.tl-feature-note { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.6rem; padding: 0.9rem 1.1rem; background: rgba(138, 111, 86, 0.055); border: 1px solid rgba(138, 111, 86, 0.14); border-radius: var(--radius-md); text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
.tl-feature-note-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(138, 111, 86, 0.11); border-radius: 50%; margin-top: 1px; }
.tl-feature-note-icon svg { opacity: 0.75; }
.tl-feature-note-body { flex: 1; }
.tl-feature-note-body p { font-size: 0.815rem; color: var(--color-text-muted); line-height: 1.62; font-family: var(--font-body); margin: 0; }
.tl-feature-note-body p + p { margin-top: 0.38rem; }
.tl-feature-note-body strong { font-weight: 600; color: var(--color-accent); }
.tl-right-col { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--header-h, 76px) + 2rem); }
@media (max-width: 900px) {
  .tl-two-col { grid-template-columns: 1fr; }
  .tl-right-col { display: none; }
  .tl-right { position: relative; top: auto; }
  .tl-left-wrap { height: min(460px, 65vh); }
}
@media (max-width: 600px) {
  .tl-left-wrap { padding-left: 36px; }
  .tl-spine { left: 14px; }
  .tl-active-dot { left: 9px; }
  .tl-card { padding: 1.1rem 1.15rem; }
}

/* ── FAQ ──────────────────────────────────────────────── */
.faq-section { background: var(--color-bg); }
.faq-layout { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.faq-left-body { margin-top: 1.25rem; color: var(--color-text-muted); line-height: 1.7; }
.faq-right { display: flex; flex-direction: column; gap: 0.65rem; }
.faq-item { border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 2px 8px rgba(45,40,35,0.045); overflow: hidden; transition: box-shadow 200ms var(--ease-soft), border-color 200ms; }
.faq-item:hover { box-shadow: 0 4px 16px rgba(45,40,35,0.08); border-color: var(--color-accent-light); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 1.35rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 0.975rem; font-weight: 500; color: var(--color-text); line-height: 1.4; transition: color 200ms; }
.faq-q:hover { color: var(--color-accent); }
.faq-icon { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-accent); transition: transform 300ms var(--ease-soft), background 220ms, border-color 220ms; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.faq-q[aria-expanded="true"] .faq-icon svg path { stroke: var(--color-bg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-soft); }
.faq-a.is-open { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a > .faq-a-inner > p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.72; padding: 0.85rem 1.35rem 1.35rem; border-top: 1px solid var(--color-border); }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── Blog / From the journal ──────────────────────────── */
.blog-section { background: var(--color-text); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.blog-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.blog-eyebrow { font-size: 0.72rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: 0.5rem; }
.blog-heading { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--color-bg); line-height: 1.2; letter-spacing: -0.02em; }
.blog-all-link { flex-shrink: 0; font-size: 0.85rem; font-family: var(--font-body); font-weight: 500; color: var(--color-accent-light); text-decoration: none; border: 1px solid rgba(200, 184, 163, 0.28); padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); transition: background 200ms, border-color 200ms, color 200ms; white-space: nowrap; align-self: center; }
.blog-all-link:hover { background: rgba(200, 184, 163, 0.1); border-color: rgba(200, 184, 163, 0.5); color: var(--color-bg); }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
.blog-feat { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid rgba(200, 184, 163, 0.12); background: rgba(255,255,255,0.04); overflow: hidden; text-decoration: none; transition: border-color 240ms, background 240ms; }
.blog-feat:hover { border-color: rgba(200, 184, 163, 0.28); background: rgba(255,255,255,0.065); }
.blog-feat-top { padding: 1.75rem 1.75rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-tag { display: inline-block; font-size: 0.67rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200, 184, 163, 0.7); background: rgba(200, 184, 163, 0.1); border: 1px solid rgba(200, 184, 163, 0.18); padding: 0.2rem 0.58rem; border-radius: var(--radius-pill); margin-bottom: 0.9rem; align-self: flex-start; }
.blog-feat-cat { font-size: 0.72rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: 0.65rem; }
.blog-feat-title { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; color: var(--color-bg); line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 0.85rem; }
.blog-feat-excerpt { font-size: 0.875rem; font-family: var(--font-body); color: rgba(244, 239, 231, 0.5); line-height: 1.68; flex: 1; margin-bottom: 1.35rem; }
.blog-feat-meta { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.blog-feat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; filter: grayscale(0.3); }
.blog-feat-author { display: block; font-size: 0.8rem; font-family: var(--font-body); font-weight: 500; color: rgba(244, 239, 231, 0.75); line-height: 1.2; }
.blog-feat-read { display: block; font-size: 0.72rem; font-family: var(--font-body); color: rgba(244, 239, 231, 0.38); margin-top: 0.15rem; }
.blog-feat-link { margin-left: auto; font-size: 0.8rem; font-family: var(--font-body); font-weight: 500; color: var(--color-accent-light); text-decoration: none; transition: color 180ms; white-space: nowrap; }
.blog-feat:hover .blog-feat-link { color: var(--color-bg); }
.blog-feat-img { height: 220px; overflow: hidden; flex-shrink: 0; }
.blog-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.85); transition: transform 400ms ease; }
.blog-feat:hover .blog-feat-img img { transform: scale(1.04); }
.blog-list { display: flex; flex-direction: column; gap: 1rem; }
.blog-card { display: flex; align-items: stretch; border-radius: var(--radius-md); border: 1px solid rgba(200, 184, 163, 0.12); background: rgba(255,255,255,0.04); overflow: hidden; text-decoration: none; transition: border-color 240ms, background 240ms; flex: 1; }
.blog-card:hover { border-color: rgba(200, 184, 163, 0.28); background: rgba(255,255,255,0.065); }
.blog-card-body { flex: 1; padding: 1.25rem 1.3rem; display: flex; flex-direction: column; }
.blog-card-cat { font-size: 0.68rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: 0.45rem; }
.blog-card-title { font-family: var(--font-display); font-size: 0.975rem; font-weight: 700; color: var(--color-bg); line-height: 1.35; letter-spacing: -0.01em; flex: 1; margin-bottom: 0.85rem; }
.blog-card-read { font-size: 0.72rem; font-family: var(--font-body); color: rgba(244, 239, 231, 0.38); margin-top: auto; letter-spacing: 0.04em; }
.blog-card-img { width: 130px; flex-shrink: 0; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.82); transition: transform 400ms ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } .blog-feat-img { height: 200px; } }
@media (max-width: 560px) { .blog-header { flex-direction: column; align-items: flex-start; } .blog-card-img { width: 130px; } }

/* ── Dark footer ──────────────────────────────────────── */
.footer-dark { background: var(--color-text); color: rgba(244, 239, 231, 0.65); padding-block: var(--space-xl); }
.footer-dark-inner { display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: start; }
@media (max-width: 820px) { .footer-dark-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
.footer-dark-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-bg); line-height: 1; }
.footer-dark-tagline { margin-top: 0.65rem; font-size: 0.85rem; color: rgba(244, 239, 231, 0.4); }
.footer-dark-social { display: flex; gap: 0.65rem; margin-top: 1.5rem; }
.footer-dark-social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(244, 239, 231, 0.14); color: rgba(244, 239, 231, 0.5); transition: color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft); }
.footer-dark-social a:hover { color: var(--color-bg); border-color: rgba(244, 239, 231, 0.35); }
.footer-dark-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.5rem; }
@media (max-width: 700px) { .footer-dark-nav { grid-template-columns: repeat(2, 1fr); gap: 2rem 2rem; } }
.footer-dark-col h4 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 239, 231, 0.38); margin: 0 0 0.9rem; }
.footer-dark-col a { display: block; color: rgba(244, 239, 231, 0.65); font-size: 0.88rem; margin-bottom: 0.6rem; transition: color var(--duration-fast) var(--ease-soft); }
.footer-dark-col a:hover { color: var(--color-bg); }
.footer-dark-bottom { margin-top: var(--space-lg); padding-top: 1.5rem; border-top: 1px solid rgba(244, 239, 231, 0.09); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: rgba(244, 239, 231, 0.32); }
.footer-dark-bottom a { color: rgba(244, 239, 231, 0.38); transition: color var(--duration-fast) var(--ease-soft); }
.footer-dark-bottom a:hover { color: rgba(244, 239, 231, 0.7); }
.footer-dark-legal { display: flex; gap: 1.5rem; }

/* ── Full-bleed hero ──────────────────────────────────── */
main { margin-top: -76px; }
.hero-fullbleed { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; overflow: hidden; padding: 0; }
.hero-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: brightness(0.75); transform-origin: center center; }
@keyframes kb-1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -0.5%); } }
@keyframes kb-2 { from { transform: scale(1.04) translate(0.8%, 0.4%); } to { transform: scale(1.08) translate(-0.6%, -0.8%); } }
@keyframes kb-3 { from { transform: scale(1) translate(-0.6%, 0.4%); } to { transform: scale(1.06) translate(0.8%, -0.4%); } }
.hero-slide:nth-child(1).is-active img { animation: kb-1 7s ease-in-out forwards; }
.hero-slide:nth-child(2).is-active img { animation: kb-2 7s ease-in-out forwards; }
.hero-slide:nth-child(3).is-active img { animation: kb-3 7s ease-in-out forwards; }
.hero-indicators { position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 3; }
.hero-ind { width: 2.5rem; height: 1.5px; background: rgba(255, 255, 255, 0.20); border-radius: 1px; position: relative; overflow: hidden; cursor: pointer; }
.hero-ind::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.82); transform: scaleX(0); transform-origin: left; }
.hero-ind.is-active::after { transform: scaleX(1); transition: transform 6s linear; }
.hero-fullbleed-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18, 14, 10, 0.30) 0%, rgba(18, 14, 10, 0.52) 40%, rgba(18, 14, 10, 0.76) 100%); }
.hero-fullbleed-content { position: relative; z-index: 2; width: min(100% - 2rem, var(--container)); margin-inline: auto; padding: clamp(5rem, 10vh, 8rem) 0 clamp(4rem, 8vh, 6rem); }
.hero-fullbleed .soft-pill { background: rgba(244, 239, 231, 0.10); border-color: rgba(244, 239, 231, 0.22); color: rgba(244, 239, 231, 0.80); margin-bottom: 1.5rem; }
.hero-fullbleed .soft-pill::before { background: var(--color-accent-light); }
.hero-fullbleed .eyebrow { color: rgba(244, 239, 231, 0.50); margin-bottom: 1.25rem; }
.hero-fullbleed h1 { font-size: clamp(1.65rem, 2.8vw, 2.6rem); line-height: 1.12; letter-spacing: -0.03em; color: #fbf8f3; margin: 0 0 1.5rem; text-shadow: 0 4px 48px rgba(18, 14, 10, 0.45); }
.hero-fullbleed .body-lg { font-size: 1.125rem; color: rgba(244, 239, 231, 0.68); max-width: 560px; }
.hero-fullbleed .hero-actions { justify-content: flex-start; margin-top: 2.25rem; }
.hero-fullbleed .btn-primary { background: rgba(251, 248, 243, 0.94); color: var(--color-text); border-color: transparent; }
.hero-fullbleed .btn-primary:hover { background: #fff; color: var(--color-accent-dark); border-color: transparent; }
.hero-fullbleed .text-link { color: rgba(244, 239, 231, 0.62); }
.hero-fullbleed .text-link::after { background: rgba(244, 239, 231, 0.62); }
.hero-fullbleed .text-link:hover { color: rgba(244, 239, 231, 0.92); }

/* ── Mobile hamburger & drawer ────────────────────────── */
.nav-hamburger {
  display: none;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-soft);
}
@media (max-width: 800px) {
  .nav-hamburger { display: inline-flex; }
}
/* backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 100;
  display: none;
  transition: background 300ms ease;
}
.mobile-backdrop.is-open { display: block; background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* drawer — compact card from the right */
.mobile-drawer {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width: min(300px, calc(100vw - 1.5rem));
  background: var(--color-text);
  border-radius: 1rem;
  z-index: 101;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  transform: translateX(calc(100% + 1rem));
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.mobile-drawer.is-open { transform: translateX(0); }

/* header */
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  flex-shrink: 0;
}
.mobile-drawer-header .brand-mark { filter: none; }
.mobile-drawer-header .brand-wordmark { filter: brightness(0) invert(1); }
.mobile-drawer-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 248, 243, 0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(251, 248, 243, 0.5);
  transition: background 180ms, color 180ms;
}
.mobile-drawer-close:hover { color: rgba(251, 248, 243, 0.9); background: rgba(251, 248, 243, 0.12); }

/* nav links */
.mobile-drawer-nav {
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-drawer-nav::-webkit-scrollbar { display: none; }
.mobile-drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-drawer-nav li a {
  display: block;
  padding: 0.7rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(251, 248, 243, 0.6);
  text-decoration: none;
  border-radius: 0.5rem;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms, background 160ms;
}
.mobile-drawer-nav li a:hover,
.mobile-drawer-nav li a:active {
  color: rgba(251, 248, 243, 0.95);
  background: rgba(251, 248, 243, 0.07);
}

/* CTA buttons */
.mobile-drawer-cta {
  padding: 0.75rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
  border-top: 1px solid rgba(251, 248, 243, 0.06);
}
.mobile-drawer-cta .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.35rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.mobile-drawer-cta .btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.mobile-drawer-cta .btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.mobile-drawer-cta .btn-login {
  background: transparent;
  color: rgba(251, 248, 243, 0.6);
  border: 1px solid rgba(251, 248, 243, 0.12);
}
.mobile-drawer-cta .btn-login:hover { color: rgba(251, 248, 243, 0.9); background: rgba(251, 248, 243, 0.06); border-color: rgba(251, 248, 243, 0.2); }

/* ── Founding modal ────────────────────────────────────── */
@keyframes popupFadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.founding-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
.founding-modal.is-open { display: flex; }
.founding-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.founding-modal-card { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: 2rem; max-width: 28rem; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,0.2); animation: popupFadeIn 0.3s ease; }
.founding-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--color-text-soft); padding: 0.25rem; }
.founding-modal-close:hover { color: var(--color-text); }