/* ============================================================
   Site polish overlay — loaded last.
   Refines hero, section rhythm, cards, mobile + micro-interactions.
   No DOM changes; no business logic.
   ============================================================ */

:root {
  --shadow-card:        0 1px 0 rgba(15,61,46,.02), 0 8px 24px -16px rgba(15,61,46,.14);
  --shadow-card-hover:  0 1px 0 rgba(15,61,46,.04), 0 28px 60px -28px rgba(15,61,46,.22);
  --shadow-elev:        0 30px 80px -34px rgba(15,61,46,.30), 0 2px 4px rgba(15,61,46,.04);
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --measure: 62ch;
}

/* ---- Typography rhythm ---- */
.hero .lede,
section p {
  max-width: var(--measure);
}
.hero h1, .hero-title {
  letter-spacing: -0.018em;
  line-height: 1.12;
  padding-bottom: 0.12em;
}
.hero h1 .accent, .hero-title .accent,
.hero h1 em, .hero-title em,
.hero h1 i, .hero-title i,
.hero h1 span, .hero-title span {
  line-height: inherit;
  padding-bottom: 0.08em;
  display: inline-block;
}
.hero-rot {
  display: inline-block !important;
  position: relative !important;
  width: var(--hero-rot-width, 5.2ch) !important;
  min-width: 0 !important;
  height: 1.04em !important;
  margin-right: 0.12em;
  vertical-align: baseline;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.hero-rot-word {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  inset: 0 auto auto 0 !important;
  white-space: nowrap;
}

/* ---- Hero card ---- */
.hero-visual {
  border-radius: var(--radius-card-lg) !important;
  box-shadow: var(--shadow-elev) !important;
  position: relative;
  isolation: isolate;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -22% -18% auto auto;
  width: 70%; height: 70%;
  background: radial-gradient(closest-side, rgba(43,181,115,.18), transparent 70%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}
.hv-foot { padding-top: 18px !important; }
.hv-foot .v {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  letter-spacing: -0.01em;
}

/* Calmer hero float (overrides site-smooth) */
@keyframes syc-float-soft {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-visual { animation: syc-float-soft 12s ease-in-out infinite !important; }
}

/* ---- Unified card shadow + radius scale ---- */
.pillar, .tx-card, .case, .proof-card, .step, .ai-feat, .faq-item, .num-grid > div {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card);
  transition:
    transform .5s cubic-bezier(.23,1,.32,1),
    box-shadow .5s cubic-bezier(.23,1,.32,1),
    border-color .35s ease !important;
}
.pillar:hover, .tx-card:hover, .case:hover, .proof-card:hover, .ai-feat:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-3px);
}

/* Treatment photo: stronger gradient + slight zoom */
.tx-photo { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.tx-photo::after {
  background: linear-gradient(180deg,
    rgba(15,61,46,0) 45%,
    rgba(15,61,46,.10) 75%,
    rgba(15,61,46,.28) 100%) !important;
}

/* ---- Section rhythm ---- */
section { padding-top: clamp(3.5rem, 6vw, 6.5rem); padding-bottom: clamp(3.5rem, 6vw, 6.5rem); }
section + section { border-top: 1px solid var(--rule); }
/* But not where the dark CTA meets the dark footer or a hard color change */
.cta-final, .cta-final + * { border-top: 0 !important; }

/* ---- Pager pip refinement ---- */
.case-pip.is-active {
  box-shadow: 0 6px 16px -8px rgba(15,61,46,.45);
}

/* ---- Buttons: focus + smoother arrow ---- */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 999px;
}
.btn .arrow { display: inline-block; will-change: transform; }

/* ---- Nav underline weight ---- */
.nav-links a::after { height: 1.5px !important; bottom: -4px !important; }

/* ---- Sticky CTA: subtler resting state ---- */
.sticky-cta {
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 16px 40px -20px rgba(15,61,46,.35);
}

/* ---- FAQ smoother transitions ---- */
.faq-item { overflow: hidden; }
.faq-item summary,
.faq-item [class*="question"] {
  transition: color .25s ease;
}
.faq-item[open] summary,
.faq-item.is-open summary { color: var(--accent-ink); }

/* ---- Hairlines instead of harsh dividers ---- */
hr, .rule { background: var(--rule-2) !important; height: 1px !important; border: 0 !important; }

/* ---- Mobile pass ---- */
@media (max-width: 640px) {
  section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
  .hero { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .hero-grid { gap: 32px !important; }
  .hero-visual { padding: 18px !important; border-radius: 14px !important; }
  .hero-visual::before { display: none; }
  .pillar, .tx-card, .case, .proof-card, .ai-feat, .num-grid > div, .faq-item {
    border-radius: 14px !important;
  }
  .sticky-cta { font-size: .85rem !important; padding: .55rem .9rem !important; }
  .actions, .hero-actions { gap: 10px !important; }
}

/* ---- Reduced motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none !important; }
  .pillar:hover, .tx-card:hover, .case:hover, .proof-card:hover, .ai-feat:hover {
    transform: none !important;
  }
}

/* Hide ugly case study side-rail arrow buttons */
.case-side-rail { display: none !important; }


/* Gold variant for the dark Programs path-card CTA (#E6CB72) */
.path-cta {
  background: #E6CB72 !important;
  border-color: #E6CB72 !important;
  color: #1a1408 !important;
}
.path-cta:hover {
  background: #d4b85a !important;
  border-color: #d4b85a !important;
  color: #1a1408 !important;
}

/* Keep "Two ways in. One destination." on a single line */
#programs .s-head h2 { white-space: nowrap; }
@media (max-width: 640px) {
  #programs .s-head h2 { white-space: normal; }
}

/* Gold CTA button in final CTA section */
.cta-big-btn {
  background: #E6CB72 !important;
  border-color: #E6CB72 !important;
  color: #1a1408 !important;
}
.cta-big-btn:hover {
  background: #d4b85a !important;
  border-color: #d4b85a !important;
  color: #1a1408 !important;
}

/* Override: first path CTA (Launch card) stays green, not gold */
.path-cta:not(.on-dark) {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.path-cta:not(.on-dark):hover {
  background: var(--accent-ink, var(--accent)) !important;
  border-color: var(--accent-ink, var(--accent)) !important;
  color: #fff !important;
}

/* "Most Popular" badge in #E6CB72 */
.path-badge {
  background: #E6CB72 !important;
  border-color: #E6CB72 !important;
  color: #1a1408 !important;
}

/* Keep floating hero chips inside the card so labels aren't clipped */
.hero-chip--top { left: 2% !important; }
.hero-chip--mid { right: 2% !important; }
.hero-chip--bot { left: 2% !important; }