/* ============================================================
   Center for Integrative Psychiatry — TMS Landing (GREEN / "HydroCare" version)
   Aesthetic: crisp white + vivid emerald green + near-black dark panels.
   Pill nav & buttons w/ circular arrow badges, /slash eyebrows, glass card,
   rounded humanized photos, stat row, dark green-node timeline.
   Font: Plus Jakarta Sans
   ============================================================ */

:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem;
  --text-lg: 1.1875rem; --text-xl: 1.4rem; --text-2xl: 1.8rem;
  --text-3xl: clamp(1.85rem, 3.2vw, 2.6rem);
  --text-4xl: clamp(2.1rem, 4.6vw, 3.5rem);
  --hero: clamp(2.5rem, 5.4vw, 3.4rem);

  --green: #D99C2B; --green-deep: #D99C2B; --green-press: #191743;
  --green-soft: #d99c2b4d; --green-tint: #d8f1de;
  --ink: #2e2e5d;          /* text + dark sections */
  --ink-2: #20242a;        /* dark cards */
  --ink-3: #2a2f36;
  --paper: #ffffff;
  --paper-2: #f6f7f6;      /* light gray band */
  --muted: #6b7280;
  --on-dark: #f2f4f2;
  --on-dark-muted: #a6afa8;

  --line: #e7e8ea;
  --line-strong: #d6d8da;
  --line-on-dark: rgba(255,255,255,0.12);

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px;
  --container: 1300px;
  --reveal-duration: 720ms; --reveal-ease: cubic-bezier(0.16,0.8,0.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); font-size: var(--text-base); line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4 { font-family: var(--font); color: var(--ink); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
::selection { background: var(--green); color: #06230f; }

.container-cip { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 3.5vw, 2.5rem); }
.section { padding-block: clamp(3.8rem, 7.5vw, 5.5rem); }
section[id], header[id] { scroll-margin-top: 92px; }

.h-hero { font-size: var(--hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.h-section { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.025em; }
.h-display { font-size: var(--text-3xl); font-weight: 700; }
.lede { font-size: var(--text-md); color: var(--muted); line-height: 1.6; }
.text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .muted { color: var(--muted); }
.measure { max-width: 44ch; }

/* /slash eyebrow */
.eyebrow { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }
.eyebrow::before { content: "/"; color: var(--green); font-weight: 700; margin-right: 0.3rem; }
.eyebrow--on-dark { color: var(--on-dark-muted); }
.eyebrow--center { justify-content: center; }

/* Buttons w/ circular arrow badge */
.btn { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font); font-weight: 600; font-size: var(--text-sm); padding: 0.5rem 0.6rem 0.5rem 1.3rem; border-radius: var(--radius-full); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.btn .ico { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .25s ease; }
.btn .ico svg { width: 14px; height: 14px; }
.btn:hover .ico { transform: rotate(-45deg); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-dark .ico { background: var(--green); color: #06230f; }
.btn-green { background: var(--green); color: #06230f; }
.btn-green:hover { background: var(--green-deep); color: #fff; }
.btn-green .ico { background: #06230f; color: var(--green); }
.btn-green:hover .ico { background: #fff; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--paper-2); }
.btn-white .ico { background: var(--ink); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); padding: 0.7rem 1.4rem; }
.btn-outline:hover { border-color: var(--ink); }
.btn-outline-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); padding: 0.7rem 1.4rem; }
.btn-outline-light:hover { background: rgba(255,255,255,0.18); }
.btn-block { width: 100%; justify-content: space-between; }
.section-cta { margin-top: 2.2rem; }

.text-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: gap .2s ease, color .2s ease; }
.text-link svg { color: var(--green-deep); }
.text-link:hover { gap: 0.7rem; color: var(--green-deep); }
.phone-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.phone-link svg { color: var(--green-deep); }

/* media placeholder */
.media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, #1d2a20 0%, #2f5138 45%, #1ec04a 150%); isolation: isolate; }
.media::after { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 80% at 25% 12%, rgba(255,255,255,0.16), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.media img { display:block; width:100%; height:100%; object-fit:cover; }
.media__label { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; text-align:center; padding:1.4rem; color:rgba(255,255,255,0.92); }
.media__label svg { width:26px; height:26px; opacity:0.85; }
.media__label span { font-size: var(--text-sm); font-weight:600; max-width:24ch; line-height:1.4; }
.media__label small { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.6); }

/* ===== 1. NAV ===== */
.nav-wrap { position: sticky; top: 0; z-index: 60; padding-top: 0.9rem; transition: padding .25s ease; }
.nav-bar { max-width: var(--container); margin-inline: auto; padding: 0.45rem clamp(1.1rem,3.5vw,2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: var(--radius-full); transition: background-color .25s ease, box-shadow .25s ease; }
.nav-bar.is-scrolled { background: rgba(255,255,255,0.96); box-shadow: 0 12px 30px -20px rgba(0,0,0,0.4); backdrop-filter: blur(12px); }
.nav-logo { position: relative; display: inline-flex; align-items: center; text-decoration: none; flex: none; min-height: 34px; }
.nav-logo__img { display: block; height: 38px; width: auto; transition: opacity .22s ease, filter .22s ease; }
.nav-bar.is-scrolled .nav-logo__img { filter: brightness(0) saturate(100%); }
.nav-pill { display: flex; align-items: center; gap: 0.4rem; background: #fff; border-radius: var(--radius-full); padding: 0.4rem 0.4rem 0.4rem 0.5rem; box-shadow: 0 8px 24px -16px rgba(0,0,0,0.35); }
.nav-bar.is-scrolled .nav-pill { box-shadow: none; background: transparent; }
.nav-links { display: flex; align-items: center; gap: 0.3rem; }
.nav-link { font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none; padding: 0.5rem 0.85rem; border-radius: var(--radius-full); transition: background-color .18s ease, color .18s ease; white-space: nowrap; }
.nav-link:hover { background: var(--green-soft); color: var(--green-deep); }
.nav-pill .btn { padding: 0.4rem 0.45rem 0.4rem 1.1rem; }
.nav-pill .btn .ico { width: 28px; height: 28px; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: #fff; border: none; padding: 0.7rem; border-radius: 12px; cursor: pointer; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
.mobile-menu { display: none; margin: 0.6rem clamp(1.1rem,3.5vw,2.5rem) 0; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); flex-direction: column; gap: 0.9rem; box-shadow: 0 20px 50px -30px rgba(0,0,0,0.4); }
.mobile-menu.open { display: flex; }
@media (max-width: 1023px) {
  .container-cip
  {
    padding-inline: 0;
  }
  .hero-inner
  {
    padding: 8rem 1rem 3rem !important;
  }
  .hero-card
  {
    border-radius: 0px !important;
  }
  .section
  {
    padding: 1.5rem !important;
  }
  .footer
  {
    padding: 2rem  !important
  }
  .nav-wrap
  {
    position: relative !important;
  }
  .hero-inner
  {
        background: #0000006b;
  }
.stats
  {
    margin-top: 2.5rem !important;
    padding-top: 1.6rem !important;
  }

  .nav-pill { display: none; } .hamburger { display: flex; } .nav-logo__img { height: 50px; } .nav-wrap{padding-top: 0rem;} }

/* ===== 2. HERO ===== */
.hero { margin-top: -74px; }
.hero-card { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 620px; display: flex; isolation: isolate; }
.hero-card .media { position: absolute; inset: 0; border-radius: 0; }
.hero-card .media__label { justify-content: flex-start; align-items: flex-end; text-align: right; padding: 1.6rem; }
.hero-card .media__label span { max-width: 16ch; font-size: var(--text-xs); }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,12,9,0.34) 0%, rgba(10,12,9,0.05) 30%, rgba(10,12,9,0.12) 60%, rgba(10,12,9,0.7) 100%), linear-gradient(90deg, rgba(10,12,9,0.5) 0%, transparent 62%); }
.hero-inner { position: relative; z-index: 2; align-self: flex-end; width: 100%; padding: 12rem 7rem 5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.hero-left { max-width: 620px; }
.hero h1 { color: #fff; }
.hero-left .lede { color: rgba(255,255,255,0.9); margin-top: 1.2rem; max-width: 48ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; align-items: center; }
.hero-badge { background: rgba(255, 255, 255, 0.08); font-size: var(--text-xs); font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.34); padding: 0.4rem 0.8rem; border-radius: var(--radius-full); }
/* glass stat card */
.glass-card { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(16px); border-radius: var(--radius-lg); padding: 1.5rem; width: 320px; max-width: 100%; color: #fff; }
.glass-card .big { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.glass-card .cap { font-size: var(--text-sm); color: rgba(255,255,255,0.88); margin-top: 0.4rem; max-width: 26ch; }
.glass-card .row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.22); }
.glass-card .stars { display: inline-flex; gap: 2px; color: var(--green); }
.glass-card .stars svg { width: 15px; height: 15px; }
.glass-card .row small { display: block; font-size: var(--text-xs); color: rgba(255,255,255,0.78); }
.hero-reviewers { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex: none; }
.hero-reviewers__avatars { display: inline-flex; align-items: center; }
.hero-reviewers__avatars img,
.hero-reviewers__more { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9); object-fit: cover; margin-left: -10px; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.5); }
.hero-reviewers__avatars img:first-child,
.hero-reviewers__more:first-child { margin-left: 0; }
.hero-reviewers__more { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; backdrop-filter: blur(8px); }
.hero-reviewers__label { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.8); }
@media (max-width: 760px) { .glass-card { width: 100%; } }

/* ===== 3. INSURER STRIP ===== */
.strip { background: var(--paper); border-block: 1px solid var(--line); }
.strip-inner { padding-block: 2.6rem; text-align: center; }
.logos-marquee { display: flex; gap: 1rem; overflow: hidden; margin-top: 1.5rem; cursor: pointer; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.logos-marquee.is-paused .logos-track,
.logos-marquee:hover .logos-track { animation-play-state: paused; }
.logos-track { display: flex; align-items: center; gap: 1rem; flex: none; min-width: max-content; animation: logoMarquee 32s linear infinite; }
.logo-item { width: clamp(110px, 13vw, 170px); height: clamp(54px, 7vw, 76px); border-radius: 18px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1rem; box-shadow: 0 18px 42px -36px rgba(0,0,0,0.3); }
.logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } }

/* ===== generic split ===== */
.split { display: grid; gap: 2.5rem; align-items: center; }
.split-media { aspect-ratio: 4/4; min-height: 580px; }
#doctor .split-media img { object-position: center top; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } .split.media-right > .order-media { order: 2; } }

/* ===== 4. PROBLEM ===== */
.problem .lede { color: var(--muted); }
.problem-message .container-cip { position: relative; }
.problem-message__grid { display: grid; align-items: center; gap: clamp(0rem, 3.5vw, 0rem); grid-template-columns: 1fr; }
.problem-message__content { text-align: center; max-width: 62ch; margin-inline: auto; }
.problem-message__content .lede { margin-inline: auto; }
.problem-message__title { max-width: 26ch; margin-inline: auto; }
.problem-message__media { display: none; }
.problem-message__media-inner { width: clamp(180px, 22vw, 260px); aspect-ratio: 1 / 1; border-radius: 18px; box-shadow: 0 28px 60px -44px rgba(0,0,0,0.55); }
.problem-message__media-inner::after { opacity: 0.24; }
@media (min-width: 980px) {
  .problem-message__grid { grid-template-columns: 0.9fr minmax(0, 1.2fr) 0.9fr; }
  .problem-message__media { display: block; }
  .problem-message__media--left { justify-self: start; align-self: start; transform: translateY(-8px); }
  .problem-message__media--right { justify-self: end; align-self: end; transform: translateY(34px); }
}
@media (max-width: 979px) {
  .problem-message__media { display: flex; justify-content: center; }
  .problem-message__media--right { margin-top: 1.2rem; }
}

.trust-grid { display: grid; gap: 1.1rem; }
.trust-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; display: flex; gap: 1.05rem; align-items: flex-start; }
.trust-ic { width: 46px; height: 46px; border-radius: 14px; background: #f5f7fb; border: 1px solid #e8edf4; color: #2e4366; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.trust-ic svg { width: 22px; height: 22px; }
.trust-card h4 { font-size: var(--text-xl); margin: 0; }
.trust-card p { margin-top: 0.55rem; color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(3,1fr); } }

/* ===== stats row ===== */
.stats { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 2.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
.stat .n { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.stat .n em { color: var(--green-deep); font-style: normal; }
.stat .l { font-size: var(--text-sm); color: var(--muted); margin-top: 0.5rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4,1fr); } }

.experts { background: var(--paper-2); }
.experts-grid { display: grid; gap: 2rem; align-items: start; }
.experts-visuals { display: grid; gap: 1rem; }
.experts-main { min-height: 320px; border-radius: 28px; }
.experts-bottom { display: grid; gap: 1rem; }
.experts-mini { min-height: 180px; border-radius: 24px; position: relative; }
.experts-mini::before { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,9,0) 20%, rgba(10,12,9,0.82) 100%); z-index: 1; }
.experts-mini__label { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 0.18rem; }
.experts-mini__label strong { font-size: var(--text-base); }
.experts-mini__label span { color: rgba(255,255,255,0.78); font-size: var(--text-xs); }
.experts-cta { background: #274b7a; color: #fff; border-radius: 24px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; }
.experts-cta h3 { color: #fff; font-size: clamp(1.5rem, 2.5vw, 2rem); max-width: 12ch; }
.experts-cta p { margin-top: 0.8rem; color: rgba(255,255,255,0.82); font-size: var(--text-sm); max-width: 32ch; }
.experts-cta__meta { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.3rem; color: rgba(255,255,255,0.9); font-size: var(--text-sm); font-weight: 600; }
.experts-avatars { display: inline-flex; align-items: center; }
.experts-avatars img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #274b7a; object-fit: cover; margin-left: -8px; }
.experts-avatars img:first-child { margin-left: 0; }
.experts-content { min-width: 0; }
.experts-cards { display: grid; gap: 1rem; margin-top: 1.8rem; }
.expert-card { background: rgba(255,255,255,0.96); border: 1px solid #edf0f3; border-radius: 22px; padding: 1.35rem 1.45rem; box-shadow: 0 16px 34px -30px rgba(15,17,20,0.18); }
.expert-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.expert-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 8px 20px -16px rgba(0,0,0,0.25); }
.expert-card__body { margin-top: 2rem; }
.expert-card h4 { font-size: clamp(1.25rem, 2vw, 1.45rem); line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
.expert-card p { margin-top: 0.45rem; color: #7b818c; font-size: clamp(1rem, 1.4vw, 1.08rem); }
.expert-card__links { display: inline-flex; gap: 0.7rem; flex: none; }
.expert-card__links span { width: 48px; height: 48px; border-radius: 14px; border: 1px solid #eef1f4; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #30415d; font-size: 1.2rem; font-weight: 700; box-shadow: 0 12px 26px -24px rgba(0,0,0,0.28); }
.expert-card--compact { padding: 1.15rem 1.25rem; }
.expert-card--compact .expert-card__body { margin-top: 1.2rem; }
@media (min-width: 760px) {
  .experts-bottom { grid-template-columns: 1fr 1fr; }
  .experts-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .experts-grid { grid-template-columns: 1.05fr 1fr; gap: 2.4rem; }
  .experts-main { min-height: 430px; }
}

.hiw { background: var(--paper-2); }
.hiw-head { max-width: 720px; margin-inline: auto; text-align: center; }
.hiw-grid { display: grid; gap: 1.4rem; margin-top: 2.6rem; align-items: stretch; }
.hiw-steps { display: grid; gap: 0.9rem; }
.hiw-step { position: relative; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 1.25rem 1.25rem 1.35rem; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hiw-step:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -34px rgba(0,0,0,0.32); }
.hiw-step.is-active { border-color: var(--green-tint); box-shadow: 0 26px 52px -38px rgba(30,192,74,0.24); }
.hiw-n { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); }
.hiw-t { display: block; margin-top: 0.55rem; font-size: var(--text-xl); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.hiw-d { display: block; margin-top: 0.55rem; font-size: var(--text-sm); color: var(--muted); line-height: 1.6; max-width: 52ch; }
.hiw-progress { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.95rem; height: 3px; border-radius: var(--radius-full); background: rgba(32,36,42,0.08); overflow: hidden; margin-top: 15px !important; }
.hiw-progress::after { content:""; position: absolute; inset: 0; background: var(--green); transform: translateX(-100%); }
.hiw-step.is-active .hiw-progress::after { animation: hiwFill 6s linear forwards; }
@keyframes hiwFill { from { transform: translateX(-100%); } to { transform: translateX(0%); } }
.hiw-media { display: flex; }
.hiw-media-inner { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 4 / 3; min-height: 360px; max-height: 640px; }
.hiw-media-inner::after { opacity: 0.14; }
@media (min-width: 960px) { .hiw-grid { grid-template-columns: 1fr 1.05fr; gap: 2rem; } .hiw-media { order: -1; } .hiw-media-inner { height: 100%; min-height: 0; max-height: var(--hiw-steps-height, 640px); aspect-ratio: auto; } }

/* ===== 5. WHY CHOOSE / feature cards ===== */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 3rem; }
.feat-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; }
.feat-card .ic { width: 50px; height: 50px; border-radius: 14px; background: #f5f7fb; border: 1px solid #e8edf4; color: #2e4366; display: inline-flex; align-items: center; justify-content: center; }
.feat-card .ic svg { width: 24px; height: 24px; }
.feat-card h4 { font-size: var(--text-xl); margin: 1.1rem 0 0.5rem; }
.feat-card p { color: var(--muted); font-size: var(--text-sm); }
.feat-card--dark { background: var(--ink); border-color: var(--ink); }
.feat-card--dark h4 { color: #fff; }
.feat-card--dark p { color: var(--on-dark-muted); }
.feat-card--dark .ic { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #fff; }
@media (min-width: 640px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feat-grid { grid-template-columns: repeat(4,1fr); } }

/* ===== 6. TMS dark timeline ===== */
.dark-sec { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-xl); overflow: hidden; }
.dark-sec h2, .dark-sec h3 { color: #fff; }
.tms-grid { display: grid; gap: 2.5rem; align-items: flex-start; padding: clamp(2rem,4vw,3.5rem); }
.timeline { position: relative; }
.tl-item { position: relative; padding-left: 2.5rem; padding-bottom: 1.1rem; opacity: 0.7; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content:""; position: absolute; left: 9px; top: 26px; bottom: -6px; width: 2px; background: var(--green-soft); transition: background-color .35s ease, box-shadow .35s ease; }
.tl-item:last-child::before { display: none; }
.tl-node { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; transition: transform .38s ease, box-shadow .38s ease, background-color .38s ease; }
.tl-node::after { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); transition: transform .38s ease, background-color .38s ease; }
.tl-card { background: var(--ink); border: 1px solid var(--line-on-dark); border-radius: var(--radius-md); padding: 1.3rem 1.4rem; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.tl-item.is-active { opacity: 1; transform: translateY(0); }
.tl-item.is-active::before { background: rgba(217,156,43,0.55); box-shadow: 0 0 0 1px rgba(217,156,43,0.08); }
.tl-item.is-active .tl-node { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(217,156,43,0.12); background: #352c56; }
.tl-item.is-active .tl-node::after { transform: scale(1.12); }
.tl-item.is-active .tl-card { border-color: rgba(217,156,43,0.35); box-shadow: 0 18px 40px -30px rgba(0,0,0,0.48); transform: translateY(-2px); }
.tl-card .hd { display: flex; align-items: center; gap: 0.7rem; }
.tl-card .hd .bi { color: var(--green); }
.tl-card .hd .bi svg { width: 20px; height: 20px; }
.tl-card h4 { font-size: var(--text-lg); color: #fff; }
.tl-card p { color: var(--on-dark-muted); font-size: var(--text-sm); margin-top: 0.5rem; }
.tms-media { aspect-ratio: 4/5; min-height: 440px; position: relative; }
.tms-chip { position: absolute; left: 16px; bottom: 16px; background: rgba(22,24,28,0.9); border: 1px solid var(--line-on-dark); border-radius: var(--radius-md); padding: 0.7rem 1rem; }
.tms-chip b { color: #fff; } .tms-chip span { display:block; font-size: var(--text-xs); color: var(--on-dark-muted); }
@media (min-width: 960px) { .tms-grid { grid-template-columns: 0.9fr 1.1fr; } }

/* ===== 7. BENEFITS / services cards ===== */
.benefits { background: var(--paper-2); }
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 3rem; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; transition: transform .2s ease, box-shadow .2s ease; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px rgba(0,0,0,0.32); }
.svc-card .ic { width: 50px; height: 50px; border-radius: 14px; background: #f5f7fb; border: 1px solid #e8edf4; color: #2e4366; display: inline-flex; align-items: center; justify-content: center; }
.svc-card .ic svg { width: 24px; height: 24px; }
.svc-card h4 { font-size: var(--text-xl); margin: 1.1rem 0 0.4rem; }
.svc-card p { color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3,1fr); } }

/* ===== 8. STORIES ===== */
.story-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem; display: flex; flex-direction: column; gap: 1.1rem; }
.story-stars { display: inline-flex; gap: 2px; color: var(--green); }
.story-stars svg { width: 17px; height: 17px; }
.story-quote { font-size: 1.12rem; line-height: 1.5; color: var(--ink); font-weight: 500; }
.story-meta { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.story-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--green-soft); color: var(--green-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.story-avatar--photo { display: block; object-fit: cover; overflow: hidden; background: #e8edf3; }
.story-name { font-weight: 700; color: var(--ink); display: block; font-size: var(--text-sm); }
.story-verify { font-size: var(--text-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.story-verify svg { width: 13px; height: 13px; color: var(--green-deep); }

.stories-head { display: grid; gap: 1.2rem; align-items: center; }
.google-bar { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 0.55rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-full); padding: 0.55rem 0.9rem; box-shadow: 0 18px 44px -36px rgba(0,0,0,0.35); }
.google-badge { font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.google-label { font-weight: 700; color: var(--muted); font-size: var(--text-sm); }
.google-stars { display: inline-flex; gap: 2px; color: #f4b400; }
.google-stars svg { width: 14px; height: 14px; }
@media (min-width: 960px) { .stories-head { grid-template-columns: 1fr auto; align-items: start; } .google-bar { justify-self: end; align-self: start; } }

.stories-carousel { position: relative; margin-top: 3rem; }
.stories-carousel { overflow: hidden; }
.stories-track { display: flex; gap: 1.2rem; transition: transform .5s ease-in-out; will-change: transform; padding: 0.15rem 0 0.9rem; }
.stories-track:focus { outline: none; }
.stories-track .story-card { flex: 0 0 100%; min-width: 100%; }
.stories-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; box-shadow: 0 22px 56px -40px rgba(0,0,0,0.45); z-index: 2; transition: opacity .18s ease; }
.stories-nav svg { width: 18px; height: 18px; }
.stories-prev { left: -12px; }
.stories-next { right: -12px; }
@media (min-width: 760px) { .stories-track .story-card { flex-basis: calc((100% - 1.2rem) / 2); min-width: calc((100% - 1.2rem) / 2); } }
@media (min-width: 1120px) { .stories-track .story-card { flex-basis: calc((100% - 2.4rem) / 3); min-width: calc((100% - 2.4rem) / 3); } }

/* ===== 9. INSURANCE ===== */
.insure-grid { display: grid; gap: 2.6rem; align-items: center; }
.insurer-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.8rem; }
.insurer { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.95rem 1rem; min-height: 82px; }
.insurer--logo img { width: 100%; max-width: 108px; max-height: 40px; object-fit: contain; display: block; }
@media (min-width: 960px) { .insure-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ===== 10. FAQ ===== */
.faq { background: var(--paper-2); }
.faq-layout { display: grid; gap: 2rem; align-items: start; }
.faq-side__sticky { position: static; }
.faq-list { max-width: 860px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 0.8rem; overflow: hidden; }
.faq-item.open { border-color: var(--green-tint); }
.faq-trigger { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.35rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.faq-q { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--ink); line-height: 1.25; }
.faq-summary { display: block; font-size: var(--text-sm); color: var(--muted); margin-top: 0.45rem; max-width: 60ch; }
.faq-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #f5f7fb; border: 1px solid #e8edf4; color: #2e4366; display: flex; align-items: center; justify-content: center; transition: transform .28s ease, background-color .22s ease, color .22s ease, border-color .22s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: #eef3fb; border-color: #d8e3f2; color: #2e4366; }
.faq-item.open .faq-summary { display: none; }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height .36s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer p { padding: 0 1.5rem 1.5rem; color: var(--muted); max-width: 66ch; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr); gap: 3rem; } .faq-side__sticky { position: sticky; top: 110px; } .faq-list { max-width: none; } }

/* ===== 11. FINAL + FORM ===== */
.final { background: var(--ink); color: var(--on-dark); }
.final-grid { display: grid; gap: 2.8rem; align-items: center; }
.final h2 { color: #fff; }
.final .lede { color: var(--on-dark-muted); }
.final-phone { font-weight: 800; font-size: clamp(2rem, 5.5vw, 3rem); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; line-height: 1; letter-spacing: -0.02em; }
.final-phone svg { color: var(--green); width: 0.7em; height: 0.7em; }
.final-trust { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.final-trust span { font-size: var(--text-xs); font-weight: 600; color: #fff; border: 1px solid var(--line-on-dark); border-radius: var(--radius-full); padding: 0.42rem 0.82rem; }
.form-card { background: #fff; border-radius: var(--radius-lg); padding: 2rem; color: var(--ink); }
.form-card h3 { font-size: var(--text-2xl); }
.field-label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.field { width: 100%; margin-top: 0.4rem; padding: 0.85rem 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font); font-size: var(--text-base); background: #fff; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease; }
.field:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,192,74,0.18); }
.field::placeholder { color: #aab0a8; }
.form-reassure { font-size: var(--text-xs); color: var(--muted); text-align: center; }
.form-success { display: none; text-align: center; padding: 1.5rem; color: var(--ink); font-weight: 600; }
.form-card.sent .form-body { display: none; }
.form-card.sent .form-success { display: block; }
@media (min-width: 960px) { .final-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ===== 12. FOOTER ===== */
.footer { background: #0f1114; color: var(--on-dark); }
.footer-grid { display: grid; gap: 2.5rem; }
.footer a { color: rgba(255,255,255,0.72); text-decoration: none; transition: color .18s ease; }
.footer a:hover { color: var(--green); }
.footer-disclaimer { color: var(--on-dark-muted); font-size: var(--text-xs); line-height: 1.6; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-logo { display: inline-flex; align-items: center; max-width: 100%; }
.footer-logo img { display: block; height: 46px; width: auto; max-width: 100%; }
.footer-logo--secondary img { height: 40px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }

/* sticky mobile cta */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.8rem 0.95rem calc(0.8rem + env(safe-area-inset-bottom)); background: rgba(246,244,235,0.96); backdrop-filter: blur(12px); border-top: 1px solid rgba(20,20,28,0.08); box-shadow: 0 -10px 35px -28px rgba(0,0,0,0.35); }
.mobile-cta__call { min-height: 64px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: rgba(255,255,255,0.78); border: 1px solid rgba(20,20,28,0.08); color: var(--ink); text-decoration: none; font-size: 0.82rem; font-weight: 700; }
.mobile-cta__call svg { width: 20px; height: 20px; }
.mobile-cta__primary { min-height: 54px; border-radius: 999px; background: #131417; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.8rem 0.8rem; font-weight: 700; font-size: 0.78rem; text-align: center; letter-spacing: -0.01em; box-shadow: 0 16px 36px -28px rgba(0,0,0,0.6); }
.mobile-cta__primary .ico { width: 34px; height: 34px; border-radius: 50%; background: #f2d089; color: #1a1b1e; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mobile-cta__primary .ico svg { width: 15px; height: 15px; }
@media (min-width: 1024px) { .mobile-cta { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 76px; } }

/* reveal */
.reveal { opacity: 0; transition: opacity var(--reveal-duration) var(--reveal-ease); }
.reveal.is-visible { opacity: 1; }
.reveal[data-delay="1"] { transition-delay: 110ms; }
.reveal[data-delay="2"] { transition-delay: 220ms; }
.reveal[data-delay="3"] { transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transition: none; } html { scroll-behavior: auto; } }

@media (max-width: 820px) {
  .hero-card { min-height: 0; }
  .hero-card .media__label { display: none; }
  .hero-inner { align-items: stretch; padding-top: 7rem; padding-bottom: 2rem; }
  .hero h1 { font-size: clamp(2rem, 8.2vw, 2.9rem); }
  .glass-card { width: 100%; }
}
@media (max-width: 939px) {
  .split { gap: 1.6rem; }
  #doctor .split.media-right > .order-media { order: 2; }
  #doctor .split.media-right > :not(.order-media) { order: 1; }
  .split-media { min-height: 0; aspect-ratio: 4 / 3.5; max-height: 460px; }
}
@media (max-width: 640px) {
  .split-media { aspect-ratio: 4 / 3.8; max-height: 380px; border-radius: 24px; }
  .hiw-grid { gap: 1rem; margin-top: 1.9rem; }
  .hiw-steps { gap: 0.75rem; }
  .hiw-step { padding: 1rem 1rem 1.2rem; border-radius: 20px; }
  .hiw-t { font-size: clamp(1.2rem, 6vw, 1.55rem); }
  .hiw-d { font-size: 0.94rem; max-width: none; }
  .hiw-progress { left: 1rem; right: 1rem; bottom: 0.8rem; }
  .hiw-media-inner { min-height: 240px; max-height: 320px; border-radius: 24px; }
}