/* ==========================================================================
   The Financial Talk — base styles
   Color values below are defaults; js/theme.js overrides them at runtime
   via CSS custom properties so the palette can be swapped live.
   ========================================================================== */

:root {
  --color-primary: #c6146c;
  --color-primary-dark: #8e0f52;
  --color-primary-light: #f7d6e6;
  --color-secondary: #f2a73b;
  --color-secondary-dark: #c87f1c;
  --color-accent: #6c2a83;
  --color-bg: #fff8f1;
  --color-bg-alt: #ffefdf;
  --color-surface: #ffffff;
  --color-text: #2b1330;
  --color-text-muted: #6b5468;
  --gradient-hero: linear-gradient(135deg, #c6146c 0%, #8e1e7a 45%, #6c2a83 100%);

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 30px -12px rgba(43, 19, 48, 0.25);
  --shadow-lift: 0 20px 45px -15px rgba(43, 19, 48, 0.35);

  --container-width: 1680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}
p { margin: 0 0 1em; color: var(--color-text-muted); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 96px 0; }
@media (max-width: 640px) {
  section { padding: 64px 0; }
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head.align-left { margin-left: 0; text-align: left; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 10px 26px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section-subtitle { font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); background: var(--color-primary-dark); }

.btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-3px); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 248, 241, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 24px -16px rgba(43, 19, 48, 0.3);
  border-bottom-color: rgba(43, 19, 48, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 40px;
  max-width: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.logo-mark {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  position: relative;
  padding: 4px 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* "Get in touch" CTA now lives beside the language switcher in the header
   actions rather than inside the collapsible nav, so it's always reachable. */
.header-cta {
  padding: 10px 22px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lang-switcher {
  display: inline-flex;
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}
.lang-switcher button {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-switcher button.is-active { background: var(--color-primary); color: #fff; }

.theme-switcher { display: inline-flex; gap: 8px; }
.theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px rgba(43, 19, 48, 0.15);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-swatch__half { flex: 1; }
.theme-swatch__half:first-child { background: var(--swatch-a); }
.theme-swatch__half:last-child { background: var(--swatch-b); }
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.is-active { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; }

/* "Get in touch" lives in the header on desktop; the copy inside the nav
   dropdown is only shown once the menu collapses on mobile. */
.main-nav .nav-cta { display: none; }

.nav-theme-row { display: none; }

@media (max-width: 860px) {
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-surface);
    padding: 20px 24px;
    gap: 18px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

  /* Hamburger moves to the far left and is pinned to the sticky header so it
     stays on-screen no matter how wide the rest of the row gets. */
  .header-inner { padding: 14px 16px 14px 56px; }
  .nav-toggle {
    display: flex;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  .logo { flex-shrink: 1; min-width: 0; }

  /* Move the CTA off the header row and into the dropdown so the full
     wordmark fits across the header. */
  .header-cta { display: none; }
  .main-nav .nav-cta { display: block; }

  .header-actions .lang-switcher { display: inline-flex; }

  /* Theme swatches move into the nav dropdown at this width so the
     header row (logo + lang pills + hamburger) doesn't overflow. */
  .header-actions > .theme-switcher { display: none; }
  .nav-theme-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--color-bg-alt);
    width: 100%;
  }
  .nav-theme-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }
}

@media (max-width: 560px) {
  .header-cta { padding: 8px 14px; font-size: 0.82rem; }
}

@media (max-width: 400px) {
  .header-inner { gap: 10px; padding: 14px 14px 14px 52px; }
  .logo { font-size: 1rem; gap: 8px; }
  .logo-mark { height: 34px; }
  .header-cta { padding: 7px 11px; font-size: 0.78rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  color: #fff;
  padding: 120px 0 140px;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
.hero-blob-a { width: 420px; height: 420px; background: var(--color-secondary); opacity: 0.35; top: -140px; right: -100px; }
.hero-blob-b { width: 320px; height: 320px; background: #ffffff; opacity: 0.12; bottom: -160px; left: -80px; }
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hero-title { color: #fff; font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin-bottom: 16px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.hero p.hero-subtitle { color: rgba(255, 255, 255, 0.88); font-size: 1.15rem; max-width: 560px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.page-hero {
  background: var(--gradient-hero);
  color: #fff;
  padding: 96px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow { background: rgba(255, 255, 255, 0.18); color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.page-hero p { color: rgba(255, 255, 255, 0.88); max-width: 560px; margin: 0 auto; }
.page-hero > .container { position: relative; z-index: 1; }

/* ---------- Depth: parallax background layers ----------
   Decorative, non-interactive shapes that drift at a different
   speed than the content as the page scrolls (js/main.js writes
   the --parallax-y custom property on scroll). */
.decor-section { position: relative; overflow: hidden; }
.decor-section > .container { position: relative; z-index: 1; }

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.bg-blob--primary { background: var(--color-primary); }
.bg-blob--secondary { background: var(--color-secondary); }
.bg-blob--accent { background: var(--color-accent); }

[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* ---------- Stats ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: -72px;
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.stat-card h3 { font-size: 1.15rem; color: var(--color-primary); margin-bottom: 8px; }
.stat-card p { margin: 0; font-size: 0.95rem; }

/* ---------- Split (about preview) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.story-copy p { text-align: justify; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* "Room" treatment for real photos: the section behind sits at the same
   neutral tone as the photo's own studio backdrop (sampled directly
   from the photos), so the white behind her reads as continuous page
   space rather than a mismatched box — she looks like she's standing in
   a large room. The oval frame itself also gets that same background,
   so even the clipped edge has no seam. */
.room-section { background: #F7F7F6; }

.room-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 48% 52% 58% 42% / 44% 48% 52% 56%;
  overflow: hidden;
  background: #F7F7F6;
}
.room-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Card grids ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid, .card-grid.cols-4 { grid-template-columns: 1fr; } }

/* TikTok embeds render as fixed-width players; center them in a flexible row
   that wraps to fewer columns on narrow screens. */
.tiktok-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.tiktok-grid .tiktok-embed { flex: 0 1 325px; }
.tiktok-follow { margin-top: 8px; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.card-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}

.card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  background: rgba(242, 167, 59, 0.18);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 20px;
}
.testimonial-author { font-weight: 600; font-size: 0.9rem; color: var(--color-primary); }
.testimonial-role { font-size: 0.82rem; color: var(--color-text-muted); }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  z-index: 1;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  margin: 0 24px;
}
.cta-banner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Steps (services process) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: step;
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-hero);
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}
.form-field { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.contact-card .btn { margin-top: 4px; }

.social-list { display: flex; gap: 14px; margin-top: 16px; }
.social-list a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-list a:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); }

.notice {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  border-left: 4px solid var(--color-secondary);
}

/* ---------- Values (about) ---------- */
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-secondary);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-accent);
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0 28px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-brand .logo { color: #fff; }
.footer-brand p { color: rgba(255, 255, 255, 0.7); max-width: 280px; margin-top: 12px; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col h4 { color: #fff; font-size: 0.9rem; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Scroll reveal ----------
   Only hidden pre-reveal when JS has run (see the early
   `js-enabled` class in <head>) so content stays visible by
   default if JS fails or is disabled. Siblings revealed together
   (e.g. cards in a grid) stagger via --reveal-i, set in main.js. */
.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.js-enabled [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* "scale" variant: elements emerge from slightly behind/below the
   page, for sections that want a stronger sense of depth than a
   plain fade (cards, testimonials, steps). */
.js-enabled [data-reveal="scale"] {
  transform: translateY(36px) scale(0.92);
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-enabled [data-reveal="scale"].is-visible { transform: translateY(0) scale(1); }

/* Scroll-linked section fade (opacity set per-frame in main.js). The hint
   keeps the browser compositing on its own layer so the fade stays smooth;
   no CSS transition here on purpose — the opacity tracks scroll position
   directly for a 1:1 feel. */
.section-fade { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .js-enabled [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-parallax] { transform: none !important; }
  /* Section fade is JS-gated off under reduced motion, but hard-guarantee
     full opacity in case any inline opacity was already applied. */
  .section-fade { opacity: 1 !important; transform: none !important; }
}

/* ---------- Misc utilities ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 48px; }

/* ==========================================================================
   Modern refresh — layered on top of the base styles above. Elevates depth,
   motion and rhythm. All brand colors still come from the themed custom
   properties (js/theme.js), so every palette keeps working.
   ========================================================================== */
:root {
  --radius-md: 22px;
  --radius-lg: 34px;
  --shadow-soft: 0 18px 44px -24px rgba(28, 16, 53, 0.30);
  --shadow-lift: 0 34px 70px -28px rgba(28, 16, 53, 0.45);
  --hairline: rgba(28, 16, 53, 0.07);
}

h1, h2, h3, h4 { letter-spacing: -0.015em; }
.section-title { font-size: clamp(2rem, 3.4vw, 2.9rem); }

/* ---- Hero: bigger type, animated gradient, gold accent, soft glow ---- */
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4rem); font-weight: 700; }
.hero-inner { max-width: 1100px; }
.hero p.hero-subtitle { font-size: 1.18rem; }
.hero .accent { color: var(--color-secondary); }

.hero, .page-hero {
  background-size: 180% 180%;
  animation: ftHeroShift 22s ease-in-out infinite;
}
@keyframes ftHeroShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero::after, .page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero-blob-a { animation: ftFloat 13s ease-in-out infinite; }
.hero-blob-b { animation: ftFloat 17s ease-in-out infinite reverse; }
@keyframes ftFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -26px, 0); }
}

/* ---- Hero trust row ---- */
.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 12px; margin-top: 30px;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.85rem; font-weight: 500; color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 8px 16px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero-trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-secondary);
}

/* ---- Cards: hairline border + smoother, deeper lift ---- */
.card, .stat-card, .testimonial-card, .step { border: 1px solid var(--hairline); }
.card { transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease; }
.card:hover { transform: translateY(-8px); border-color: transparent; }

/* ---- Primary button: gradient + sweep of light on hover ---- */
.btn { position: relative; overflow: hidden; }
.btn-primary { background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s ease;
}
.btn-primary:hover::after { left: 130%; }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.faq-item[open] { border-color: var(--color-primary-light); box-shadow: var(--shadow-lift); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  color: var(--color-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex-shrink: 0; width: 26px; height: 26px; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2.5px; border-radius: 2px;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-answer { padding: 0 26px 24px; }
.faq-answer p { margin: 0; }
.faq-item[open] .faq-answer { animation: ftFadeIn 0.35s ease; }
@keyframes ftFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero, .page-hero, .hero-blob-a, .hero-blob-b { animation: none; }
  .btn-primary::after { display: none; }
  .faq-item[open] .faq-answer { animation: none; }
}

/* ==========================================================================
   Visual flourishes (js/effects.js): intro preloader, custom cursor,
   interactive hero glow. Hidden/disabled by default so no-JS and
   touch/reduced-motion users are unaffected.
   ========================================================================== */

/* ---- Intro preloader ---- */
.preloader { display: none; }
/* When the loader was shown recently, keep it hidden this visit. */
.preloader-skip .preloader { display: none !important; }
.js-enabled .preloader {
  display: flex;
  position: fixed; inset: 0; z-index: 10000;
  flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  background: var(--gradient-hero);
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease;
}
.preloader.is-done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.preloader-logo {
  width: 66px; height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  animation: ftPrePulse 1.6s ease-in-out infinite;
}
@keyframes ftPrePulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}
.preloader-tag { text-align: center; max-width: 90%; margin-top: -4px; }
.preloader-tagline {
  color: var(--color-secondary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.25;
  margin: 0;
}
.preloader-tagline-en {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  margin: 6px 0 0;
}
.preloader-bar {
  width: 180px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.22); overflow: hidden;
}
.preloader-bar span { display: block; height: 100%; width: 0; background: var(--color-secondary); transition: width 0.2s ease; }
.preloader-pct { color: rgba(255, 255, 255, 0.85); font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.14em; }
body.preloading { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .preloader-logo { animation: none; }
  .js-enabled .preloader { transition: opacity 0.3s ease; }
  .preloader.is-done { transform: none; }
}

/* ---- Partner / brand-logo wheel (js/partners.js) ---- */
.partner-wheel {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  /* Fade the logos in and out at the edges instead of a hard cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: partner-scroll 42s linear infinite;
}
/* Let visitors pause the wheel to read a logo. */
.partner-wheel:hover .partner-track,
.partner-wheel:focus-within .partner-track { animation-play-state: paused; }
.partner-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-right: 68px; /* uniform spacing keeps the loop seamless */
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
a.partner-item:hover,
a.partner-item:focus-visible { opacity: 1; }
.partner-logo {
  max-height: 52px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
.partner-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-text);
  white-space: nowrap;
}
@keyframes partner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--partner-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  /* No motion: lay the logos out as a centered, wrapping row instead. */
  .partner-wheel { -webkit-mask-image: none; mask-image: none; }
  .partner-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 40px;
  }
  .partner-item { margin-right: 0; }
  .partner-item[aria-hidden="true"] { display: none; } /* drop the loop duplicate */
}

/* ---- Space starfield canvas (js/effects.js) ---- */
.hero-space {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

/* Center the "Latest updates" announcements so a single card isn't
   stranded in the left column of the 3-up grid. Cards wrap and stay
   centered for any count. */
.card-grid[data-announcements-list] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.card-grid[data-announcements-list] .card {
  flex: 0 1 360px;
  max-width: 440px;
}

/* ---- Distinct per-page hero ("header") backgrounds ----
   Each inner page gets its own on-brand gradient so the pages feel varied.
   Built from the palette vars, so they still adapt to the theme switcher.
   The floating blobs keep the motion, so the gradient itself stays put. */
.page-hero--about,
.page-hero--services,
.page-hero--resources,
.page-hero--contact,
.page-hero--getinvolved { animation: none; }

/* Center a card grid when it holds fewer cards than its column count. */
.card-grid.is-centered { display: flex; flex-wrap: wrap; justify-content: center; }
.card-grid.is-centered > .card { flex: 1 1 300px; max-width: 460px; }

.page-hero--about {
  background:
    radial-gradient(85% 120% at 88% -10%, rgba(232, 201, 122, 0.22), transparent 55%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-accent) 100%);
}
.page-hero--services {
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(120deg, var(--color-accent) 0%, var(--color-primary-dark) 65%, var(--color-primary) 120%);
}
.page-hero--resources {
  background:
    radial-gradient(75% 110% at 92% 15%, rgba(232, 201, 122, 0.28), transparent 58%),
    linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-accent) 78%);
}
.page-hero--contact {
  background:
    radial-gradient(95% 130% at 22% -10%, var(--color-primary) 0%, transparent 52%),
    linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-dark) 50%, var(--color-primary) 115%);
}
.page-hero--getinvolved {
  background:
    radial-gradient(80% 120% at 12% -10%, rgba(232, 201, 122, 0.20), transparent 55%),
    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-accent) 115%);
}

/* ---- About: extended story (welcome + detail sections) ---- */
.room-section > .container { max-width: 1500px; }
.story-intro { grid-template-columns: 1.5fr 0.8fr; gap: 48px; }
.story-detail {
  max-width: 1360px;
  margin: 60px auto 0;
}
.story-detail h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  margin-top: 44px;
  margin-bottom: 14px;
}
.story-detail > h3:first-child { margin-top: 0; }
.story-detail p { color: var(--color-text-muted); }
.story-list {
  margin: 4px 0 22px;
  display: grid;
  gap: 14px;
}
.story-list li {
  position: relative;
  padding-left: 30px;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.story-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
}
.story-list li strong { color: var(--color-text); font-weight: 600; }

/* ---------- Calculators (services) ---------- */
.calc {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.calc-tabs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--color-bg-alt);
}
.calc-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.calc-tab:hover { color: var(--color-primary); }
.calc-tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}
.calc-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.calc-panel { padding: 28px 30px 32px; }
.calc-intro {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 0 22px;
}
.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
.calc-fields .form-field { margin-bottom: 0; }
.calc-input { position: relative; display: flex; align-items: center; }
.calc-input .form-input { width: 100%; }
.calc-input--prefix .form-input { padding-left: 30px; }
.calc-input--suffix .form-input { padding-right: 34px; }
.calc-affix {
  position: absolute;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  pointer-events: none;
}
.calc-input--prefix .calc-affix { left: 14px; }
.calc-input--suffix .calc-affix { right: 14px; }

.calc-results:empty { display: none; }
.calc-results { margin-top: 26px; }
.calc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.calc-stat {
  background: var(--color-bg);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.calc-stat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.calc-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.15;
}
.calc-stat--primary {
  grid-column: 1 / -1;
  background: var(--gradient-hero);
  border-color: transparent;
}
.calc-stat--primary .calc-stat-label { color: rgba(255, 255, 255, 0.75); }
.calc-stat--primary .calc-stat-value { color: var(--color-secondary); font-size: 1.9rem; }

.calc-warning {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-secondary-dark);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--color-text);
  font-size: 0.92rem;
  margin: 0;
}

.calc-bar {
  display: flex;
  height: 14px;
  margin-top: 20px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.calc-bar-seg { display: block; height: 100%; transition: width 0.4s ease; }
.calc-bar-seg--contrib { background: var(--color-primary); }
.calc-bar-seg--growth { background: var(--color-secondary); }
.calc-legend {
  display: flex;
  gap: 22px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.calc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.calc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.calc-swatch--contrib { background: var(--color-primary); }
.calc-swatch--growth { background: var(--color-secondary); }

.calc-disclaimer {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .calc-fields { grid-template-columns: 1fr; }
  .calc-stats { grid-template-columns: 1fr; }
  .calc-panel { padding: 24px 20px 28px; }
}

/* ---------- Calculator email gate ---------- */
.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;
}
.calc-lock { position: relative; max-width: 820px; margin: 0 auto; }
.calc-lock .calc { max-width: none; margin: 0; }
.calc-lock.is-locked .calc {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
.calc-gate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
}
.calc-lock:not(.is-locked) .calc-gate { display: none; }
.calc-gate-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 34px 30px;
  max-width: 440px;
  text-align: center;
}
.calc-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light);
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.calc-gate-inner h3 { font-size: 1.35rem; margin-bottom: 8px; }
.calc-gate-inner > p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0 0 18px; }
.calc-gate-form { display: flex; flex-direction: column; gap: 10px; }
.calc-gate-form .form-input { width: 100%; }
.calc-gate-form .btn { width: 100%; }
.calc-gate-note { font-size: 0.78rem; color: var(--color-text-muted); margin: 12px 0 0; }
.calc-gate-error { color: #b3261e; font-size: 0.85rem; margin: 10px 0 0; }