/* ============================================================
   VISUAL POLISH - Softer, airier feel
   Inspired by premium advisory/clinic style
   Reduces AI template tells, adds warmth and breathing room
   ============================================================ */

/* --- Remove AI Template Tells --- */

/* Remove gradient text - use solid colours instead */
.text-gradient {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--blue-primary) !important;
  background-clip: unset !important;
}

/* Remove ambient orbs from hero */
.glass-orb {
  display: none !important;
}

/* --- Softer Backgrounds --- */

/* Lighten dark sections - use deep blue instead of near-black */
.section--dark {
  background-color: #0f1b3d !important;
}

/* Softer off-white */
.section--grey {
  background-color: #f5f7fb !important;
}

/* --- Typography Enhancement --- */

/* Add weight variation to headings */
.section-header h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.section-header p {
  font-weight: 400;
  letter-spacing: 0;
}

/* Eyebrow styling - softer */
.eyebrow {
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* --- Increased Spacing --- */

/* More breathing room between sections */
section {
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}

/* --- Softer Cards --- */

/* Larger border radius, softer shadows */
.card {
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Dark cards - softer */
.card--dark {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* --- Stats Strip - Solid colours instead of gradients --- */

/* Override gradient text in stats strip with solid colours */
.hero__proof .hero__stars {
  color: #fbbc04;
}

/* --- Buttons - Rounder --- */

.btn {
  border-radius: 14px;
}

.btn--lg {
  border-radius: 16px;
}

/* Ghost buttons become pill CTAs */
.btn--ghost {
  background: var(--blue-primary) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 60px !important;
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn--ghost:hover {
  background: var(--blue-deep) !important;
  transform: translateY(-1px);
}

/* Ghost buttons inside dark cards - teal pills */
.card--dark .btn--ghost {
  background: var(--teal) !important;
}

.card--dark .btn--ghost:hover {
  background: var(--green-cta) !important;
}

/* Secondary buttons - pill style */
.btn--secondary {
  border-radius: 60px !important;
  background: transparent;
  border: 2px solid var(--blue-primary) !important;
  color: var(--blue-primary) !important;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
}

.btn--secondary:hover {
  background: var(--blue-primary) !important;
  color: var(--white) !important;
}

/* Footer links stay as text - don't pill-ify */
.footer__links a {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* --- Event Cards: align bottom pills consistently --- */
/* Each upcoming event card becomes a flex column so the pill sits at the bottom */
section:has(h2:is([class], [style])) .grid--3 .card[style*="border-top"] {
  display: flex;
  flex-direction: column;
}

section:has(h2:is([class], [style])) .grid--3 .card[style*="border-top"] span[style*="border-radius: 60px"] {
  margin-top: auto;
}

/* --- Reduce glassmorphism: softer blur values --- */
/* Triangle nodes: remove backdrop-filter entirely, use solid bg */
.triangle-node {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--white) !important;
  border: 1px solid var(--grey-100) !important;
}

.triangle-node:hover {
  background: var(--off-white) !important;
  border-color: rgba(68,115,239,0.2) !important;
}

.triangle-node--systems {
  background: rgba(68,115,239,0.03) !important;
  border-color: rgba(68,115,239,0.12) !important;
}

/* Amplifier label: solid instead of glass */
.amplifier__label {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--white) !important;
}

/* Why-us cards: softer blur */
.why-us__card {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Why-us badge: remove excessive blur */
.why-us__badge-inner {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Float cards: remove blur entirely */
.float-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--white) !important;
}

/* --- What We Do: Glassmorphic Glow Cards --- */
.wwd-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--accent);
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  cursor: default;
}

.wwd-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent),
              0 0 60px color-mix(in srgb, var(--accent) 10%, transparent);
  background: rgba(255, 255, 255, 0.07);
}

.wwd-card__metric {
  display: none;
}

.wwd-card__icon {
  margin-bottom: var(--space-sm);
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wwd-card:hover .wwd-card__icon {
  opacity: 1;
  transform: scale(1.1);
}

/* --- Vary section header treatment --- */
/* Calculator CTA - left aligned */
section:has(.amplifier) .section-header:nth-of-type(2) {
  text-align: left;
  margin-left: 0;
}

/* FAQ already left-aligned via earlier rule */

/* Upcoming sessions - left-aligned eyebrow, centered heading */
section:has(h2:contains("Upcoming")) .section-header .eyebrow {
  display: block;
}

/* --- Vary section spacing --- */
/* Tighter padding for stats strip and logo marquee */
section:has(.marquee) {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}

/* More breathing room before FAQ */
.faq {
  padding-top: var(--space-3xl) !important;
}

.wwd-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.wwd-card__list {
  list-style: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--grey-400);
  line-height: 2.2;
}

.wwd-card__list li::before {
  content: '\2713';
  margin-right: 0.5rem;
  color: var(--accent);
  font-weight: 600;
}

/* --- Fix 1: Case study "Read the full story" pinned to bottom, same height --- */
.case-studies .grid--3 {
  align-items: stretch !important;
}

.case-studies .card--dark {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  height: 100% !important;
}

/* Force headline paragraphs to not use inline-block (breaks flex layout) */
.case-studies .card--dark .case-study__headline {
  display: block !important;
  width: 100% !important;
}

/* Align all card elements at same height across cards */
.case-studies .card--dark img {
  height: 60px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  margin: 0 auto var(--space-sm) !important;
}

.case-studies .card--dark .case-study__tag {
  min-height: 2em;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.case-studies .card--dark .case-study__number {
  min-height: 3rem;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
}

.case-studies .card--dark .case-study__headline {
  min-height: 5rem;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.case-studies .card--dark .btn--ghost {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 0.6rem 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Section headers use default h2 size - no override */

/* --- Fix 4: Event cards - pills pinned to bottom at same height --- */
section:has(h2:is([class],[style])) .grid--3 > .card[style*="border-top"],
section:has(h2:is([class],[style])) .grid--3 > a.card[style*="border-top"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

section:has(h2:is([class],[style])) .grid--3 > .card[style*="border-top"] > span[style*="border-radius: 60px"],
section:has(h2:is([class],[style])) .grid--3 > a.card[style*="border-top"] > span[style*="border-radius: 60px"] {
  margin-top: auto !important;
}

/* --- Navigation - Softer --- */

.nav__cta {
  border-radius: 60px !important;
}

/* --- Section Header Variation --- */

/* Not every section header needs to be centred */
.amplifier .section-header,
.faq .section-header {
  text-align: left;
  max-width: 600px;
  margin-left: 0;
}

.amplifier .section-header h2,
.faq .section-header h2 {
  text-align: left;
}

.amplifier .section-header p,
.faq .section-header p {
  text-align: left;
  margin-left: 0;
}