/* ============================================================
   Conditions page — Vivacity LEAP
   ============================================================ */

/* HERO */
.hero-conditions { min-height: 70vh; display: flex; align-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--glass-border); }
.hero-conditions .grid-peek {
  width: 1100px; height: 800px; top: -30px; right: -80px;
  mask-image: radial-gradient(ellipse 65% 60% at 60% 45%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 45%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 60% 45%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 45%, transparent 70%);
}
.hero-body-graphic { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 380px; height: 520px; z-index: 0; opacity: 0.06; }
.hero-body-graphic svg { width: 100%; height: 100%; }

.hero-conditions-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 160px 40px 80px; }
.hero-conditions-tag { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--teal); font-weight: 400; margin-bottom: 32px; display: flex; align-items: center; gap: 16px; }
.hero-conditions-tag::before { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, var(--teal), var(--lime)); }
.hero-conditions h1 { font-family: 'Outfit', sans-serif; font-weight: 200; font-size: 56px; line-height: 1.12; letter-spacing: -1px; margin-bottom: 28px; max-width: 650px; }
.hero-conditions h1 strong { font-weight: 600; background: linear-gradient(135deg, var(--teal), var(--lime)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-conditions-sub { font-size: 17px; color: var(--gray-mid); line-height: 1.7; margin-bottom: 48px; max-width: 500px; }

/* STICKY CONDITION FILTER BAR */
.filter-bar { position: sticky; top: 85px; z-index: 90; padding: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); transition: box-shadow 0.3s; }
.filter-bar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.filter-inner { max-width: 1200px; margin: 0 auto; padding: 14px 40px; display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-inner::-webkit-scrollbar { display: none; }
.filter-pill { padding: 8px 20px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-mid); border: 1px solid var(--glass-border); background: transparent; cursor: pointer; transition: all 0.3s; white-space: nowrap; font-family: 'Gabarito', sans-serif; font-weight: 400; }
.filter-pill:hover { border-color: rgba(2,203,209,0.3); color: var(--gray-light); background: rgba(2,203,209,0.03); }
.filter-pill.active { border-color: var(--teal); color: var(--teal); background: rgba(2,203,209,0.06); box-shadow: 0 0 12px rgba(2,203,209,0.1); }

/* ROOT-CAUSE OVERVIEW */
.overview-section { padding: 80px 0; border-bottom: 1px solid var(--glass-border); background: var(--dark-subtle); text-align: center; }
.overview-section p { color: var(--gray-mid); font-size: 16px; line-height: 1.8; max-width: 640px; margin: 0 auto; }
.overview-section .ov-lead { color: var(--white); font-family: 'Outfit', sans-serif; font-weight: 200; font-size: 20px; line-height: 1.6; margin-bottom: 16px; display: block; }

/* CONDITION SECTIONS */
.condition-section { padding: 100px 0; border-bottom: 1px solid var(--glass-border); position: relative; scroll-margin-top: 140px; }
.condition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.condition-grid.flipped { direction: rtl; }
.condition-grid.flipped > * { direction: ltr; }

.cond-icon-wrap { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(2,203,209,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: all 0.4s; }
.cond-icon-wrap svg { width: 28px; height: 28px; }
.condition-section:hover .cond-icon-wrap { border-color: rgba(2,203,209,0.3); box-shadow: 0 0 20px rgba(2,203,209,0.08); }

.cond-content h2 { font-family: 'Outfit', sans-serif; font-weight: 200; font-size: 36px; line-height: 1.3; margin-bottom: 16px; }
.cond-content h2 strong { font-weight: 600; }
.cond-conditions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cond-tag { padding: 4px 12px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid rgba(2,203,209,0.15); color: var(--gray-mid); background: rgba(2,203,209,0.02); }
.cond-tag-lime { border-color: rgba(121,211,18,0.15); background: rgba(121,211,18,0.02); }
.cond-content p { color: var(--gray-mid); font-size: 15px; line-height: 1.8; margin-bottom: 24px; }
.cond-links { display: flex; gap: 24px; flex-wrap: wrap; }
.cond-link { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; }
.cond-link:hover { gap: 12px; }
.cond-link-lime { color: var(--lime); }

.cond-visual { display: flex; align-items: center; justify-content: center; min-height: 300px; position: relative; }
.cond-visual-graphic { width: 280px; height: 280px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; position: relative; background: rgba(2,203,209,0.01); }
.cond-visual-graphic::before { content: ''; position: absolute; inset: 20px; border-radius: 50%; border: 1px solid rgba(2,203,209,0.06); }
.cond-visual-graphic::after { content: ''; position: absolute; inset: 50px; border-radius: 50%; border: 1px solid rgba(2,203,209,0.08); }
.cond-visual-graphic svg { width: 80px; height: 80px; opacity: 0.15; }
.cond-visual-lime .cond-visual-graphic { background: rgba(121,211,18,0.01); border-color: rgba(121,211,18,0.06); }
.cond-visual-lime .cond-visual-graphic::before { border-color: rgba(121,211,18,0.05); }
.cond-visual-lime .cond-visual-graphic::after { border-color: rgba(121,211,18,0.07); }

.condition-section:nth-child(odd)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 500px 300px at 75% 50%, rgba(2,203,209,0.025) 0%, transparent 70%); }
.condition-section:nth-child(even)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 500px 300px at 25% 50%, rgba(121,211,18,0.02) 0%, transparent 70%); }

.cond-visual-img { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; }
.cond-visual-img img { display: block; max-width: 340px; width: 100%; height: auto; position: relative;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0,0,0,1) 20%, rgba(0,0,0,0.5) 50%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0,0,0,1) 20%, rgba(0,0,0,0.5) 50%, transparent 72%);
  filter: drop-shadow(0 0 40px rgba(2,203,209,0.06)); }

/* Body scan variant used on conditions page */
.cond-visual-scan { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; }
.cond-visual-scan .bridge-scan { width: 280px; height: 460px; position: relative; border: 1px solid rgba(2,203,209,0.15); border-radius: 100px 100px 60px 60px; background: rgba(2,203,209,0.02); display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: 0 0 40px rgba(2,203,209,0.05), 0 0 80px rgba(2,203,209,0.02); }
.bridge-scan-body { position: absolute; inset: 20px 10px; z-index: 2; }
.bridge-scan-body img { width: 100%; height: 100%; object-fit: contain; opacity: 0.6; }

/* CTA (page-specific override) */
.cta-section .grid-peek {
  width: 1200px; height: 900px; bottom: 10px; left: -40px;
  mask-image: radial-gradient(ellipse 75% 60% at 35% 55%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 35% 55%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-conditions h1 { font-size: 36px; }
  .hero-body-graphic { display: none; }
  .condition-grid, .condition-grid.flipped { grid-template-columns: 1fr; gap: 40px; direction: ltr; }
  .cond-visual { min-height: 200px; }
  .cond-visual-graphic { width: 200px; height: 200px; }
  .cond-visual-img img { max-width: 280px; }
  .cond-visual-scan .bridge-scan { width: 200px; height: 340px; }
  .filter-inner { padding: 12px 20px; gap: 8px; }
  .filter-pill { padding: 6px 14px; font-size: 10px; }
}