/* =============================================================
 * tc-brand-2026.css — TrueCell "Concept B" rebrand layer
 * Loads LAST so it overrides core.css / luxe.css / tc.css by source order.
 * Applies the final brand: Deep Mineral + Warm Bone + Mango Gold,
 * Poppins type, gold CTAs, mineral scrims. Structure & copy untouched.
 *
 * Brand palette
 *   Deep Mineral  #1E211E   ink / dark surfaces
 *   Warm Bone     #E8E4DA   page background
 *   Mango Gold    #E0A437   CTAs + small accents
 *   Sage Clay     #8A8F83   muted secondary
 *   Stone Taupe   #B8B2A3   muted on dark
 *   (soft brown hint #8A6E55 — used very sparingly per brief)
 * ============================================================= */

/* ---------- 1. TOKEN OVERRIDES ---------- */
:root {
  /* ink ramp — mineral, with a soft warm brown as the mid tone "hint" */
  --ink-900: #1E211E;          /* Deep Mineral — primary text, dark sections */
  --ink-700: #2C302B;          /* lifted mineral */
  --ink-500: #6B6A5F;          /* warm taupe-grey — secondary text */
  --ink-300: #9A968B;
  --ink-200: #BDB8AB;

  /* bone ramp — surfaces sit lighter than the warm-bone page bg */
  --bone-50:  #F4F1E9;         /* lightest surface (cards / sections) */
  --bone-100: #ECE7DC;         /* alt surface */
  --bone-200: #E8E4DA;         /* Warm Bone — page background */
  --bone-300: #B8B2A3;         /* Stone Taupe — muted text on dark */

  /* accents */
  --gold:        #E0A437;      /* Mango Gold */
  --gold-strong: #C68C29;      /* deeper gold for hovers */
  --hint-brown:  #8A6E55;      /* the soft brown, as a hint only */

  --accent:        var(--gold);
  --accent-strong: var(--gold-strong);
  --accent-green:  var(--gold);   /* repurpose legacy green -> gold CTAs */

  --line:         rgba(30, 33, 30, 0.13);
  --line-strong:  rgba(30, 33, 30, 0.24);
  --line-inverse: rgba(232, 228, 218, 0.16);

  /* type */
  --sans:  'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

body { background: var(--bone-200); }

/* ---------- 2. TYPE ---------- */
/* Poppins reads cleanest a touch lighter at display sizes. */
.tc-hero-h1,
.tc-feature-cta-title,
.tc-cta-title,
.tc-section-h2,
.tc-editorial-h2,
.tc-physician-h2,
.tc-spotlight-name,
.tc-location-info h3 {
  font-weight: 400;
  letter-spacing: -0.012em;
}

.tc-product-name,
.tc-step-title,
.tc-stat-num,
.tc-physician-stat-num,
.tc-pricing-value {
  font-weight: 500;
}

/* No italics anywhere (per brief) */
.tc-physician-h2 em,
.tc-feature-cta-title em,
.tc-cta-title em,
.tc-editorial-h2 em,
.tc-stat-cite,
.luxe-display em {
  font-style: normal;
}

/* No eyebrows (per brief) — hide any that remain in markup */
.tc-eyebrow,
.tc-hero-eyebrow,
.tc-physician-eyebrow {
  display: none !important;
}

/* luxe-* display headings — match the site (luxe.css defaults are weight 600
   and oversize, which is what was making about.html "Decades of specialized
   experience" + the doctor headings feel heavier than the rest of the site) */
.luxe-display,
.luxe-display.is-medium,
.luxe-display.is-small {
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.luxe-display em { font-weight: 400; }
.luxe-display          { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.luxe-display.is-medium { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.luxe-display.is-small  { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

/* ---------- 3. NAV ---------- */
.tc-nav {
  background: var(--ink-900);
  border-bottom: 1px solid rgba(237, 225, 210, 0.12);
}

/* Wordmark — wide-tracked light Poppins caps */
.tc-nav-brand { font-weight: 300; color: var(--bone-50); }
.tc-nav-brand span {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 300;
  font-size: 1.28rem;
  color: var(--bone-50);
}
.tc-nav-brand-icon { border-radius: 0 !important; }

/* Menu links — lighter & lightly tracked to match the site's airy Poppins
   (base tc.css sets these to a chunky weight 500 / 0 tracking) */
.tc-nav-menu a {
  font-weight: 300;
  letter-spacing: 0.01em;
  font-size: 0.92rem;
  color: var(--bone-50);
}

/* Two header CTAs: first = quiet outline, last = solid gold (one clear primary) */
.tc-nav-cta {
  color: var(--ink-900);
  background: var(--gold);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.tc-nav-cta:hover { background: var(--gold-strong); color: var(--ink-900); }

.tc-nav-cta:first-of-type {
  background: transparent;
  color: var(--bone-50);
  border: 1px solid rgba(237, 225, 210, 0.35);
}
.tc-nav-cta:first-of-type:hover {
  background: rgba(237, 225, 210, 0.10);
  color: var(--bone-50);
}

/* ---------- 4. BUTTONS — gold everywhere ---------- */
.tc-btn-primary,
.tc-hero-ctas .tc-btn-primary,
.tc-feature-cta-actions .tc-btn-primary,
.tc-physician-actions .tc-btn-primary.is-light,
.tc-cta .tc-btn-primary,
.tc-footer-brand .tc-btn-primary,
.tc-feature-cta.is-split .tc-feature-cta-actions .tc-btn-primary {
  background: var(--gold);
  color: var(--ink-900);
}
.tc-btn-primary:hover,
.tc-hero-ctas .tc-btn-primary:hover,
.tc-feature-cta-actions .tc-btn-primary:hover,
.tc-physician-actions .tc-btn-primary.is-light:hover,
.tc-cta .tc-btn-primary:hover,
.tc-footer-brand .tc-btn-primary:hover,
.tc-feature-cta.is-split .tc-feature-cta-actions .tc-btn-primary:hover {
  background: var(--gold-strong);
  color: var(--ink-900);
}

/* Ghost buttons stay neutral */
.tc-btn-ghost { border-color: var(--ink-900); color: var(--ink-900); }
.tc-btn-ghost:hover { background: var(--ink-900); color: var(--bone-50); }

/* ---------- 5. DARK SCRIMS: brown -> mineral ---------- */
.tc-physician { background: var(--ink-900); }

.tc-hero-media::after {
  background: linear-gradient(180deg,
    rgba(30, 33, 30, 0.16) 0%,
    rgba(30, 33, 30, 0) 30%,
    rgba(30, 33, 30, 0.52) 74%,
    rgba(30, 33, 30, 0.88) 100%);
}
.tc-feature-cta-media::after {
  background: linear-gradient(180deg,
    rgba(30, 33, 30, 0.78) 0%,
    rgba(30, 33, 30, 0.58) 45%,
    rgba(30, 33, 30, 0.86) 100%);
}
.tc-physician-media::after {
  background: linear-gradient(90deg,
    rgba(30, 33, 30, 0.82) 0%,
    rgba(30, 33, 30, 0.56) 35%,
    rgba(30, 33, 30, 0.12) 58%,
    rgba(30, 33, 30, 0) 78%);
}
@media (max-width: 760px) {
  .tc-physician-media::after {
    background: linear-gradient(180deg,
      rgba(30, 33, 30, 0.30) 0%,
      rgba(30, 33, 30, 0.55) 50%,
      rgba(30, 33, 30, 0.88) 100%);
  }
}

/* ---------- 6. MARQUEE -> mineral band ---------- */
.tc-marquee { background: var(--ink-900); }
.tc-marquee::before { background: linear-gradient(90deg,  var(--ink-900) 0%, rgba(30,33,30,0) 100%); }
.tc-marquee::after  { background: linear-gradient(-90deg, var(--ink-900) 0%, rgba(30,33,30,0) 100%); }
.tc-marquee-item.is-label { color: var(--gold); }

/* ---------- 7. CREAM SURFACES ---------- */
.tc-section.is-cream { background: var(--bone-100); }
.tc-location-card { background: var(--bone-50); }

/* ---------- 8. GOLD / BROWN HINTS ---------- */
/* keep gold tasteful: stars, FAQ +, step numbers etc. already pull --accent (gold).
   The soft brown is reserved for the smallest separators. */
.tc-marquee-dot { background: var(--hint-brown); opacity: 0.6; }

/* Dark treatment cards keep their idea, recolored to mineral via tokens.
   (markup-side inline rules already point at --ink-900 / --bone tokens) */
.tc-product:hover {
  box-shadow: 0 18px 40px -24px rgba(30, 33, 30, 0.55);
}

/* Focus ring -> gold */
:focus-visible { outline-color: var(--gold); }


/* =============================================================
 * 9. VARIANTS — toggled via data-* on <html> by the compare panel
 * ============================================================= */

/* --- Gold usage --- */
/* default / "full": accents are gold (handled by --accent above) */

/* "buttons": gold only on buttons; small accents go neutral */
html[data-gold="buttons"] {
  --accent: #6B6A5F;
  --accent-strong: #4D4C44;
}
html[data-gold="buttons"] .tc-marquee-item.is-label { color: var(--bone-50); }

/* "accent-bar": gold accents + a gold rule above key headlines */
html[data-gold="accent-bar"] .tc-hero-h1::before,
html[data-gold="accent-bar"] .tc-feature-cta-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin-bottom: 1.15rem;
}

/* --- Type --- */
/* "serif": Cormorant (non-italic) on big display headings; UI stays Poppins */
html[data-type="serif"] :is(
  .tc-hero-h1,
  .tc-feature-cta-title,
  .tc-cta-title,
  .tc-section-h2,
  .tc-editorial-h2,
  .tc-physician-h2,
  .tc-spotlight-name,
  .tc-location-info h3
) {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
}
html[data-type="serif"] :is(.tc-hero-h1, .tc-feature-cta-title) {
  font-weight: 500;
  letter-spacing: 0.002em;
}

/* --- Photos --- */
/* default keeps the editorial grayscale already in tc.css.
   "warm": full colour with a gentle lift */
html[data-photo="warm"] :is(
  .tc-feature-cta-media img,
  .tc-location-photo img,
  .tc-feature-cta-doctor img,
  .tc-marquee-img
) {
  filter: saturate(1.04) contrast(1.02) !important;
}


/* =============================================================
 * 10. COMPARE PANEL  (design-review tool — safe to delete for prod:
 *     remove this block + the tc-review-panel.js <script> tag)
 * ============================================================= */
#tcv-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 99999;
  font-family: 'Poppins', system-ui, sans-serif;
}
#tcv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #1E211E;
  color: #F4F1E9;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.5);
}
#tcv-toggle::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E0A437;
}
#tcv-card {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  width: 260px;
  background: #1E211E;
  color: #F4F1E9;
  border-radius: 14px;
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: 0 18px 48px -14px rgba(0, 0, 0, 0.6);
}
#tcv-panel.is-open #tcv-card { display: block; }
.tcv-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8B2A3;
  margin: 0 0 0.85rem;
}
.tcv-group { margin-bottom: 0.95rem; }
.tcv-group:last-child { margin-bottom: 0; }
.tcv-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #B8B2A3;
  margin-bottom: 0.4rem;
}
.tcv-seg {
  display: flex;
  gap: 4px;
  background: rgba(244, 241, 233, 0.08);
  border-radius: 9px;
  padding: 3px;
}
.tcv-seg button {
  flex: 1;
  border: none;
  background: transparent;
  color: #ECE7DC;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.42rem 0.2rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.tcv-seg button:hover { background: rgba(244, 241, 233, 0.1); }
.tcv-seg button[aria-pressed="true"] {
  background: #E0A437;
  color: #1E211E;
}
@media print { #tcv-panel { display: none !important; } }


/* =============================================================
 * 11. PROCESS TIMELINE  (.tc-steps.is-timeline on index)
 *     Numbered vertical timeline with a connecting rail.
 * ============================================================= */
.tc-steps.is-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tc-steps.is-timeline .tc-step {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: stretch;
}
.tc-steps.is-timeline .tc-step:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* The rail + connecting line */
.tc-steps.is-timeline .tc-step-rail {
  position: relative;
  width: 58px;
}
.tc-steps.is-timeline .tc-step-rail::before {
  content: "";
  position: absolute;
  left: 24px;            /* centre of the 48px node */
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--line-strong);
}
.tc-steps.is-timeline .tc-step:first-child .tc-step-rail::before { top: 24px; }
.tc-steps.is-timeline .tc-step:last-child  .tc-step-rail::before { bottom: calc(100% - 24px); }

/* The numbered node */
.tc-steps.is-timeline .tc-step-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bone-100);
  border: 1.5px solid var(--line-strong);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  z-index: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tc-steps.is-timeline .tc-step:hover .tc-step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-900);
}

/* Content: title left, body right on desktop */
.tc-steps.is-timeline .tc-step-content {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.9fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding-top: 0.55rem;   /* nudge title to optical centre of node */
}
.tc-steps.is-timeline .tc-step-title {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -0.01em;
  margin: 0;
}
.tc-steps.is-timeline .tc-step-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .tc-steps.is-timeline .tc-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem 0;
  }
  .tc-steps.is-timeline .tc-step-rail { width: 38px; }
  .tc-steps.is-timeline .tc-step-rail::before { left: 16px; }
  .tc-steps.is-timeline .tc-step:first-child .tc-step-rail::before { top: 16px; }
  .tc-steps.is-timeline .tc-step:last-child  .tc-step-rail::before { bottom: calc(100% - 16px); }
  .tc-steps.is-timeline .tc-step-num {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
    border-width: 1.25px;
  }
  .tc-steps.is-timeline .tc-step-content {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding-top: 0.2rem;
  }
}


/* =============================================================
 * 12. EDITORIAL FORMULARY ACCORDION  (.tc-editorial-formulary)
 *     Higher-quality dropdowns: eased reveal, gold toggle, refined
 *     hover + open states. Same markup.
 * ============================================================= */
.tc-editorial-formulary > .luxe-formulary-group {
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

/* Row header — a touch more room, smooth transitions */
.tc-editorial-formulary .luxe-formulary-group-head {
  padding: 1.3rem 3.25rem 1.3rem 0.25rem;
  transition: padding var(--dur) var(--ease);
}
.tc-editorial-formulary details.luxe-formulary-group > summary.luxe-formulary-group-head:hover {
  background: transparent;
}

/* Number */
.tc-editorial-formulary .luxe-formulary-group-num {
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.tc-editorial-formulary .luxe-formulary-group-head:hover .luxe-formulary-group-num,
.tc-editorial-formulary details[open] .luxe-formulary-group-num {
  color: var(--gold);
}

/* Title — gold underline grows in on hover/open */
.tc-editorial-formulary .luxe-formulary-group-title {
  position: relative;
  transition: color var(--dur) var(--ease);
}
.tc-editorial-formulary .luxe-formulary-group-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1.5px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.tc-editorial-formulary .luxe-formulary-group-head:hover .luxe-formulary-group-title::after,
.tc-editorial-formulary details[open] .luxe-formulary-group-title::after {
  transform: scaleX(1);
}

/* Toggle — refined ring; fills gold when open (selectors mirror base specificity) */
.tc-editorial-formulary details.luxe-formulary-group > summary.luxe-formulary-group-head::after {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tc-editorial-formulary details.luxe-formulary-group > summary.luxe-formulary-group-head::before {
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
  color: var(--gold);
  transform: translateY(-50%);
  transition: color var(--dur) var(--ease), transform 0.45s var(--ease);
}
.tc-editorial-formulary details.luxe-formulary-group > summary.luxe-formulary-group-head:hover::after {
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.06);
}
.tc-editorial-formulary details.luxe-formulary-group[open] > summary.luxe-formulary-group-head::after {
  background: var(--gold);
  border-color: var(--gold);
}
.tc-editorial-formulary details.luxe-formulary-group[open] > summary.luxe-formulary-group-head::before {
  color: var(--ink-900);
  transform: translateY(-50%) rotate(180deg);
}

/* Smooth, symmetric open + close via grid-template-rows
   (works in both directions because we transition the row track,
    not a keyframe that only runs on [open]) */
.tc-editorial-formulary details.luxe-formulary-group {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tc-editorial-formulary details.luxe-formulary-group[open] {
  grid-template-rows: auto 1fr;
}
.tc-editorial-formulary .tc-editorial-formulary-body {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease) 0.05s,
              transform 0.35s var(--ease) 0.05s;
}
.tc-editorial-formulary details[open] > .tc-editorial-formulary-body {
  opacity: 1;
  transform: none;
}

/* Body link — gold, arrow drifts on hover */
.tc-editorial-formulary-body a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.tc-editorial-formulary-body a:hover {
  border-bottom-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .tc-editorial-formulary details.luxe-formulary-group,
  .tc-editorial-formulary .tc-editorial-formulary-body { transition: none; }
  .tc-editorial-formulary .luxe-formulary-group-title::after { transition: none; }
}


/* =============================================================
 * 13. TC SITE CUSTOMIZATIONS (kept across handoffs)
 *     Map in colour, footer logo + wordmark, gold review stars.
 * ============================================================= */
/* Bring the Google Maps embed back into full colour */
.tc-location-map iframe { filter: none; }

/* Hospital photo back to full colour (companion to the colour map) */
.tc-location-photo img { filter: none; }

/* ----- Smoother enter animations -----
   Base tc-reveal/tc-stagger/tcv2-fade use a too-short duration with a
   fallback easing (var(--ease-out) is undefined) which makes the reveal
   feel snappy. These overrides give a longer, softer deceleration curve
   and a smaller, more luxe lift. */
.tc-reveal {
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tc-stagger > * {
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Wider stagger between siblings so the cadence feels orchestrated */
.tc-stagger.is-in > *:nth-child(1) { transition-delay:   0ms; }
.tc-stagger.is-in > *:nth-child(2) { transition-delay: 120ms; }
.tc-stagger.is-in > *:nth-child(3) { transition-delay: 240ms; }
.tc-stagger.is-in > *:nth-child(4) { transition-delay: 360ms; }
.tc-stagger.is-in > *:nth-child(5) { transition-delay: 480ms; }
.tc-stagger.is-in > *:nth-child(6) { transition-delay: 600ms; }
.tc-stagger.is-in > *:nth-child(7) { transition-delay: 720ms; }
.tc-stagger.is-in > *:nth-child(n+8) { transition-delay: 840ms; }
.tc-reveal.is-delay-1 { transition-delay: 140ms; }
.tc-reveal.is-delay-2 { transition-delay: 280ms; }
.tc-reveal.is-delay-3 { transition-delay: 420ms; }
.tc-reveal.is-delay-4 { transition-delay: 560ms; }

/* Word-by-word hero reveal — slightly longer + more space between words */
.tcv2-words .tcv2-word > span {
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity   1s   cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tcv2-words.is-in .tcv2-word:nth-child(2)  > span { transition-delay:  90ms; }
.tcv2-words.is-in .tcv2-word:nth-child(3)  > span { transition-delay: 180ms; }
.tcv2-words.is-in .tcv2-word:nth-child(4)  > span { transition-delay: 270ms; }
.tcv2-words.is-in .tcv2-word:nth-child(5)  > span { transition-delay: 360ms; }
.tcv2-words.is-in .tcv2-word:nth-child(6)  > span { transition-delay: 450ms; }
.tcv2-words.is-in .tcv2-word:nth-child(7)  > span { transition-delay: 540ms; }
.tcv2-words.is-in .tcv2-word:nth-child(8)  > span { transition-delay: 630ms; }
.tcv2-words.is-in .tcv2-word:nth-child(9)  > span { transition-delay: 720ms; }
.tcv2-words.is-in .tcv2-word:nth-child(n+10) > span { transition-delay: 810ms; }

/* Generic fade-up paragraphs / CTAs — slower + softer */
.tcv2-fade {
  transform: translateY(10px);
  transition: opacity   1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 200ms,
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}
.tcv2-fade.is-d0 { transition-delay:   0ms; }
.tcv2-fade.is-d1 { transition-delay: 180ms; }
.tcv2-fade.is-d2 { transition-delay: 340ms; }
.tcv2-fade.is-d3 { transition-delay: 500ms; }
.tcv2-fade.is-d4 { transition-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .tc-reveal, .tc-stagger > *, .tcv2-fade,
  .tcv2-words .tcv2-word > span {
    transition: none !important;
  }
}

/* ----- FAQ — masonry-style two column (no "ghost row" gap when one opens) -----
   Uses CSS multi-column so the two columns rebalance independently. When one
   <details> expands, the column reflows underneath instead of leaving a gap
   beside it like a grid row would. */
.tc-faq {
  max-width: 1180px;
  margin-inline: auto;
  column-count: 2;
  column-gap: 1.1rem;
  display: block !important; /* override the legacy stacking */
}
.tc-faq details {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 0.7rem;
}
/* Smooth, symmetric open + close via grid-template-rows (animates both ways) */
.tc-faq details {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.tc-faq details[open] { grid-template-rows: auto 1fr; }
.tc-faq details .tc-faq-body {
  overflow: hidden;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease) 0.05s,
              margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tc-faq details[open] .tc-faq-body {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  opacity: 1;
}
@media (max-width: 760px) {
  .tc-faq { column-count: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-faq details,
  .tc-faq details .tc-faq-body { transition: none; }
}

/* Footer brand — logo + wide-tracked Poppins wordmark, matching the nav */
.tc-footer-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.tc-footer-brand-icon {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 0 !important;
  filter: none;
}
.tc-footer-brand-name {
  font-family: var(--sans) !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 300 !important;
  font-size: 1.35rem !important;
  color: var(--bone-50);
  line-height: 1;
}

/* Process timeline — single continuous rail line
   The handoff drew the line per-step on .tc-step-rail::before, but the rail
   has no intrinsic height (its only child is absolute-positioned), so adjacent
   rails don't always meet — producing visible gaps between segments.
   Replace with ONE line on the container that runs from the first circle's
   center to the last circle's center. */
.tc-steps.is-timeline {
  position: relative;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.tc-steps.is-timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: calc(clamp(1.5rem, 2.6vw, 2.25rem) + 24px);
  bottom: calc(clamp(1.5rem, 2.6vw, 2.25rem) + 24px);
  width: 1.5px;
  background: var(--line-strong);
  z-index: 0;
}
.tc-steps.is-timeline .tc-step-rail::before { display: none; }
.tc-steps.is-timeline .tc-step-num { z-index: 1; }
@media (max-width: 760px) {
  .tc-steps.is-timeline::before {
    left: 16px;
    top: calc(1.15rem + 16px);
    bottom: calc(1.15rem + 16px);
  }
}

/* Force testimonial stars to render in Mango Gold */
.tc-testimonial-stars { color: var(--gold); }
.tc-testimonial-stars svg { fill: var(--gold); }
.tc-section.is-dark .tc-testimonial-stars,
.tc-section.is-dark .tc-testimonial-stars svg { color: var(--gold); fill: var(--gold); }


/* =============================================================
 * 14. BLOG  (blog.html — tc-blog-* in tc-article.css)
 *     Token-driven already; this handles brand specifics:
 *     no italics, lighter hero headline, gold active filter chip.
 * ============================================================= */

/* No italics (per brief) — hero accent word + Q&A emphasis */
.tc-blog-hero h1 em,
.tc-blog-card.is-qa summary h3 em,
.tc-blog-card.is-qa summary em {
  font-style: normal;
}

/* Hero — bring down to index scale: flush section (no inset card), bone-100
   background (matches .tc-section.is-cream), headline + sub sized to match
   .tc-section-h2 / .tc-section-sub */
.tc-blog-hero {
  margin: 0;
  border-radius: 0;
  background: var(--bone-100);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.tc-blog-hero h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.tc-blog-hero p {
  font-size: 1rem;
  line-height: 1.55;
}
.tc-blog-hero-inner { max-width: 64ch; gap: 1rem; }

/* Active filter chip — gold fill, mineral text (mirrors the open-accordion toggle) */
.tc-blog-chip.is-active {
  background: var(--gold);
  color: var(--ink-900);
  border-color: var(--gold);
}
.tc-blog-chip.is-active .tc-blog-chip-count { color: rgba(30, 33, 30, 0.62); }

/* Subtle gold hover lift on chips before they're active */
.tc-blog-chip:hover { border-color: var(--gold); }

/* =============================================================
 * 11. LEGACY LUXE -> 2026 BRAND
 * Re-skin about.html + the luxe sections of treatments.html (and any
 * remaining luxe components) to the gold/mineral brand. Token remap
 * only, no markup changes. Loads after luxe.css so :root wins.
 * The chatbot scopes its own --luxe-* on .chat-fab/.chat-window, so
 * it is unaffected.
 * ============================================================= */
:root {
  --luxe-ink:         #1E211E;
  --luxe-ink-soft:    rgba(30, 33, 30, 0.82);
  --luxe-ink-muted:   rgba(30, 33, 30, 0.55);
  --luxe-bone:        #F4F1E9;
  --luxe-bone-deep:   #ECE7DC;
  --luxe-bone-warmer: #E8E4DA;
  /* burgundy was used as both dark text (46x) and dark backgrounds, so map it
     to mineral for readability; the gold pop comes from tc-btn-primary CTAs. */
  --luxe-burgundy:      #1E211E;
  --luxe-burgundy-soft: #2C302B;
  --luxe-line:        rgba(30, 33, 30, 0.13);
  --luxe-line-soft:   rgba(30, 33, 30, 0.08);
  --luxe-serif: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --luxe-sans:  'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}