/* =========================================================
   LIENEX • Global Theme & Layout
   ---------------------------------------------------------
   TABLE OF CONTENTS
   01) Theme Variables / Resets / Globals
   02) NAV (top bar, logo, links, CTA)
   03) HERO (full-screen header)
   04) MAIN / SECTION BASE
   05) HOW (3 steps)
   06) WHY — “Why the Best Firms Ditch Their Lists for LIENEX”
   07) SPECIALISTS (grid of specialties)
   08) DIRECTORY (intro + button)
   09) “MORE THAN JUST CONNECTIONS” cards
   10) CTA BANNER (animated gradient)
   11) HEALTHCARE PROVIDERS (“Connect with the Best”)
   12) CONTACT (grid, form)
   13) FOOTER
   14) TESTIMONIALS (carousel)
   15) MEDIA QUERIES & PREFERS REDUCED MOTION
   ========================================================= */


/* ========== 01) THEME VARIABLES / RESETS / GLOBALS ========== */
:root{
  --deep-blue:#15344f; --soft-blue:#86cfe6; --teal:#519a9e;
  --gray-light:#f4f6f8; --gray-dark:#222; --white:#fff; --accent:#1e4566;
  --brand-1:#265b81; --brand-2:#86cfe6; --brand-3:#66b5bd;
  --shadow-light:0 4px 15px rgba(0,0,0,.08); --shadow-dark:0 8px 25px rgba(0,0,0,.15);
  --nav-height:78px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,sans-serif;color:var(--gray-dark);background:var(--white);overflow-x:hidden;line-height:1.6}

/* Fallback for native hash jumps when JS disabled */
[id]{scroll-margin-top: calc(var(--nav-height) + 12px);}


/* ========== 02) NAV (TOP BAR / LINKS / CTA) ========== */
nav{
  position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.95);
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 40px;z-index:999;box-shadow:0 2px 12px rgba(0,0,0,.1)
}
.logo img{display:block;height:48px;width:auto}
.nav-links a{position:relative;text-decoration:none;margin:0 14px;font-weight:600;color:var(--accent)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--brand-2),var(--brand-3));
  transition:width .28s ease
}
.nav-links a:hover{color:var(--deep-blue)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(38,91,129,.25);
  margin-left:8px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));
  box-shadow:0 3px 10px rgba(0,0,0,.08);transition:transform .2s ease, box-shadow .2s ease
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(38,91,129,.2)}

/* NEW: nav-links container (desktop layout) */
.nav-links{
  display:flex;
  align-items:center;
}

/* NEW: mobile hamburger button (hidden on desktop) */
.nav-toggle{
  display:none;
  margin-left:auto;
  background:none;
  border:0;
  padding:4px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  margin:3px 0;
}



/* ========== 03) HERO (FULL-SCREEN HEADER) ========== */
header{
  height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;background-color:var(--deep-blue);color:#fff;padding:0 40px;overflow:hidden
}
header::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(70deg,#15344f,#1b62a0,#4fbdc3);background-size:300% 300%;
  animation:gradientMove 15s ease infinite
}
@keyframes gradientMove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero{position:relative;z-index:2;max-width:850px}
.hero h1,.hero p{opacity:0;transform:translateY(30px);animation:slideFadeIn 1s forwards}
.hero h1{animation-delay:.3s;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.1}
.hero p{animation-delay:.6s;font-size:clamp(1.1rem,2vw,1.4rem)}
@keyframes slideFadeIn{to{opacity:1;transform:translateY(0)}}
.btn{
  background:#fff;color:var(--deep-blue);padding:1rem 2.2rem;border-radius:60px;text-decoration:none;font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.2);transition:all .3s;display:inline-block;animation:pulseBtn 2.5s infinite
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3);background:var(--accent);color:#fff}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}


/* ========== 04) MAIN / SECTION BASE ========== */
main{max-width:1100px;padding:0 20px;margin:80px auto}
section{margin-bottom:90px}
h2{font-size:2.3rem;color:var(--deep-blue);margin-bottom:1rem}
p{margin-bottom:1rem;font-size:1.1rem}

/* Section reveal ONLY when target arrives via JS */
@keyframes sectionReveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.section-hit { animation: sectionReveal .42s ease-out; }
@media (prefers-reduced-motion: reduce){ .section-hit { animation:none!important; } }


/* ========== 05) HOW (3 STEPS) ========== */
.how-section{
  width:100vw;margin-left:calc(-50vw + 50%);padding:6rem 2rem;color:#fff;border-radius:0;
  background:linear-gradient(70deg,#15344f,#1b62a0,#4fbdc3);background-size:300% 300%;animation:gradientMove 15s ease infinite
}
.how-section h2{text-align:center;margin-bottom:50px;color:#fff}
.steps{display:flex;flex-wrap:wrap;justify-content:space-between;gap:25px;margin:0 auto;padding:0 20px}
.step{position:relative;background:rgba(255,255,255,.05);border-radius:16px;padding:30px 25px;flex:1 1 calc(33.333% - 20px);min-width:250px;cursor:pointer;transition:transform .4s, box-shadow .4s;overflow:hidden}
.step-number{font-size:2rem;font-weight:700;margin-bottom:15px;color:#fff}
.step p{font-size:1.1rem;font-weight:500;color:#fff}
.step:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.35)}
.hover-fill{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.15)50%,transparent 100%);z-index:1;transform:skewX(-20deg)}
.step:hover .hover-fill{animation:thunderFill .6s forwards}
@keyframes thunderFill{0%{left:-100%}50%{left:100%}100%{left:100%}}


/* ========== 06) WHY — “Why the Best Firms Ditch Their Lists for LIENEX” ========== */
#why{
  width:100vw;margin-left:calc(-50vw + 50%);padding:8rem clamp(1rem,5vw,8rem);color:#fff;overflow:hidden;
  background:linear-gradient(70deg,var(--deep-blue),var(--accent));background-size:300% 300%;animation:gradient 10s ease infinite;
  display:grid;grid-template-columns:1fr;align-items:center;gap:4rem
}
@keyframes gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.why-text h2{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;line-height:1.15;margin-bottom:1.5rem;color:#fff;position:relative}
.why-text h2::after{
  content:"";display:block;width:80px;height:5px;background:linear-gradient(90deg,var(--soft-blue),#ffffff66,var(--soft-blue));
  margin-top:1rem;border-radius:3px;background-size:200% 100%;transition:width .25s ease, transform .25s ease, background-position .35s linear
}
.why-text:hover h2::after{width:160px;transform:translateX(10px);background-position:200% 0}
.why-card{border-radius:16px;padding:2rem;text-align:left;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);transition:transform .3s,border-color .3s,box-shadow .3s}
.why-card:hover{transform:translateY(-8px);border-color:var(--soft-blue);box-shadow:0 15px 30px rgba(0,0,0,.25)}
.why-card-icon{width:52px;height:52px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,var(--deep-blue),var(--accent));color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.why-card-icon svg{stroke:var(--soft-blue)}
.btn-modern{padding:1rem 2.5rem;font-weight:700;border-radius:50px;text-decoration:none;background:#fff;color:var(--deep-blue);box-shadow:0 5px 15px rgba(0,0,0,.25);transition:all .3s;border:none;display:inline-block}
.btn-modern:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 25px rgba(0,0,0,.4);background:var(--soft-blue);color:var(--deep-blue)}
.why-card-text p{margin:0;font-size:.95rem;line-height:1.6;color:#e2e8f0}
@media(min-width:992px){#why{grid-template-columns:1fr 1.2fr}}


/* ========== 07) SPECIALISTS GRID ========== */
.specialists{display:flex;flex-wrap:wrap;justify-content:center;gap:25px}
.specialist-card{
  position:relative;background:#fff;border-radius:16px;padding:22px;text-align:center;width:200px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);transition:.35s;overflow:hidden
}
.specialist-card:hover{transform:translateY(-5px) scale(1.03)}
.specialist-card::after{
  content:"";position:absolute;top:0;left:-160%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease
}
.specialist-card:hover::after{left:160%}
.specialist-icon{font-size:3rem;margin-bottom:15px;color:var(--accent);display:flex;align-items:center;justify-content:center}


/* ========== 08) FAQ TOGGLES (used later) ========== */
.faq-question{cursor:pointer;font-weight:600;margin-bottom:10px}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s,padding .4s;background:#fff;border-left:4px solid var(--accent);padding:0 20px;margin-bottom:10px}
.faq-answer.show{max-height:260px;padding:15px 20px}


/* ========== 09) ABOUT (MISSION) ========== */
.about-section{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--gray-light) 0%,#fff 100%);border-radius:24px;padding:80px 28px}
.about-inner{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:48px;max-width:1100px;margin:0 auto}
.about-copy h2{font-size:2.6rem;color:var(--deep-blue);line-height:1.15;margin-bottom:16px}
.about-copy p{font-size:1.15rem;color:var(--gray-dark)}
.tick-list{list-style:none;margin:20px 0 28px;display:grid;gap:10px}
.tick-list li{position:relative;padding-left:34px;font-weight:500}
.tick-list li::before{content:"✓";position:absolute;left:0;top:0;line-height:1.2;font-weight:700;color:var(--accent)}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:16px}
.stat-card{background:#fff;border-radius:16px;padding:18px 16px;box-shadow:0 8px 20px rgba(0,0,0,.08);text-align:center;border:1px solid rgba(38,91,129,.06);transform:translateY(8px);opacity:0}
.stat-card .stat{display:block;font-size:1.6rem;font-weight:800;color:var(--deep-blue)}
.stat-card small{color:#6b7a88;font-weight:600}

.about-media{width:100%}
.img-stack{position:relative;width:100%;max-width:560px;min-height:380px;margin:0 auto;perspective:1000px}
.img-stack img{width:100%;display:block;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.18);will-change:transform}
.img-stack .img-1{transform:rotate(-4deg) translate(28px,-6px);opacity:0;z-index:2}
.img-stack .img-2{position:absolute;top:56px;left:-28px;transform:rotate(6deg) translate(-18px,24px);opacity:0;z-index:1}
.img-stack:hover .img-1{transform:rotate(-3deg) translate(34px,-8px) scale(1.02)}
.img-stack:hover .img-2{transform:rotate(7deg) translate(-24px,28px) scale(1.02)}

.about-shape-bg{position:absolute;inset:-80px;pointer-events:none;z-index:0}
.blob{position:absolute;opacity:.15;filter:blur(.3px);width:680px;height:680px}
.blob-1{top:-140px;left:-100px;fill:var(--soft-blue)}
.blob-2{bottom:-180px;right:-120px;fill:var(--teal)}
.dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(60,179,113,.12);animation:floatY 5s ease-in-out infinite}
.dot.d1{top:12%;left:8%}.dot.d2{top:24%;right:10%;animation-delay:.6s}.dot.d3{bottom:12%;left:18%;animation-delay:1.1s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.about-section .about-inner{position:relative;z-index:1}
@media(max-width:980px){.about-inner{grid-template-columns:1fr}.img-stack{min-height:320px}}
@media(max-width:640px){.about-stats{grid-template-columns:1fr 1fr}}


/* ========== 10) “MORE THAN JUST CONNECTIONS” CARDS ========== */
.section-more-connections{
  width:100vw;margin-left:calc(-50vw + 50%);padding:8rem 2rem;position:relative;overflow:hidden;color:var(--gray-dark);
  background:linear-gradient(160deg,#d7ecf7,#ffffff)
}
.section-more-connections::before{
  content:"";position:absolute;inset:-120px;
  background:radial-gradient(circle at 15% 25%,var(--soft-blue) 0%,transparent 60%),
             radial-gradient(circle at 80% 75%,var(--teal) 0%,transparent 60%);
  opacity:.18;z-index:0
}
.section-more-connections h2,.section-more-connections .subtitle{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto 3rem}
.connections-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;position:relative;z-index:1}
.connections-cards .card{
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-radius:18px;padding:2.5rem 2rem;text-align:left;border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-light);transition:all .4s ease;opacity:0;transform:translateY(40px)
}
.connections-cards .card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,.2);border-color:var(--soft-blue)}
.connections-cards .card h3{color:var(--accent);margin-bottom:.8rem;font-size:1.3rem;font-weight:600}


/* ========== 11) CTA BANNER (Animated Gradient) ========== */
.section-banner-cta{
  width:100vw;margin-left:calc(-50vw + 50%);padding:3rem 1.5rem;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(270deg,var(--deep-blue),var(--accent),var(--teal));background-size:400% 400%;animation:gradientMove 10s ease infinite
}
.section-banner-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:22px 22px;mix-blend-mode:soft-light
}
.container{max-width:1200px;margin:0 auto}
.cta-content{max-width:600px;text-align:left}
.section-banner-cta-title{font-size:2rem;font-weight:700;margin-bottom:.75rem}
.section-banner-cta-subtitle{font-size:1.1rem;margin-bottom:2rem;line-height:1.5}
.btn-banner-cta{position:relative;display:inline-block;padding:1rem 2.2rem;font-weight:700;font-size:1.05rem;color:#fff;text-decoration:none;border-radius:10px;cursor:pointer;overflow:hidden;background:var(--deep-blue);transition:all .4s}
.btn-lines span{position:absolute;display:block;background:#fff;opacity:.6;transition:all .4s}
.btn-lines span:nth-child(1){top:0;left:0;width:0;height:2px}.btn-lines span:nth-child(2){bottom:0;right:0;width:0;height:2px}
.btn-lines span:nth-child(3){bottom:0;left:0;width:2px;height:0}.btn-lines span:nth-child(4){top:0;right:0;width:2px;height:0}
.btn-banner-cta:hover .btn-lines span:nth-child(1),.btn-banner-cta:hover .btn-lines span:nth-child(2){width:100%}
.btn-banner-cta:hover .btn-lines span:nth-child(3),.btn-banner-cta:hover .btn-lines span:nth-child(4){height:100%}
.btn-banner-cta:hover{background:var(--accent);box-shadow:0 8px 18px rgba(0,0,0,.25);transform:translateY(-2px)}
.btn-text span{display:inline-block}
.btn-banner-cta:hover .btn-text span{animation:wave .6s ease forwards}
.btn-text span:nth-child(1){animation-delay:0s}.btn-text span:nth-child(2){animation-delay:.05s}.btn-text span:nth-child(3){animation-delay:.1s}.btn-text span:nth-child(4){animation-delay:.15s}.btn-text span:nth-child(5){animation-delay:.2s}.btn-text span:nth-child(6){animation-delay:.25s}.btn-text span:nth-child(7){animation-delay:.3s}.btn-text span:nth-child(8){animation-delay:.35s}.btn-text span:nth-child(9){animation-delay:.4s}
@keyframes wave{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
{.section-banner-cta-title{font-size:1.6rem}.section-banner-cta-subtitle{font-size:1rem}}


/* ========== 12) HEALTHCARE PROVIDERS (“Connect with the Best”) ========== */
.section-healthcare-providers {
  position: relative; width: 100vw; margin-left: calc(-50vw + 50%);
  padding: 9rem 2rem 8rem; overflow: hidden; color: #eaf7ff; background: #154e80;
}
.providers-stage { position: absolute; inset: 0; }

/* wave-layer */
.wave-layer {
  position: absolute; left: -15%; width: 130%; height: 100%;
  filter: blur(34px); opacity: .45; will-change: transform; transform: translateZ(0);
}
.wave1 { top:-12%; background: radial-gradient(60% 140% at 20% 40%, rgba(34, 79, 112, 0.9), transparent 60%); }
.wave2 { top: 10%; background: radial-gradient(60% 140% at 80% 30%, rgba(102,181,189,.8), transparent 65%); }
.wave3 { bottom:-12%; background: radial-gradient(80% 140% at 50% 80%, rgba(134,207,230,.7), transparent 60%); }

.goo-wrap { position:absolute; inset:0; filter:url(#goo); pointer-events:none; }
.goo-filter { position:absolute; width:0; height:0; }
.blob {
  position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand-1));
  mix-blend-mode: screen; opacity:.22; will-change: transform; transform: translateZ(0);
  box-shadow: 0 0 36px 10px rgba(134,207,230,.16);
}
.b1 { top:15%; left:10%; }
.b2 { top:25%; right:12%; background: radial-gradient(circle at 30% 30%, var(--brand-3), var(--brand-2)); }
.b3 { bottom:18%; left:18%; }
.b4 { bottom:10%; right:20%; }

.providers-head { position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto 2.5rem; }
.section-healthcare-providers h2 { color:#eaf7ff; font-size: clamp(2.2rem, 4.2vw, 3rem); }
.section-healthcare-providers .subtitle { color:#bfe9ff; }

/* Clean, jank-free ticker */
.providers-ticker {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  margin: 16px 0 36px; contain: layout paint;
}
.providers-ticker::before,
.providers-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; z-index: 2;
}
.providers-ticker::before { left: 0;  background: linear-gradient(90deg, #0b1b28, rgba(82, 164, 232, 0)); }
.providers-ticker::after  { right: 0; background: linear-gradient(270deg, #0b1b28, rgba(11,27,40,0)); }
.providers-ticker .ticker-track {
  display: inline-flex; gap: 28px; white-space: nowrap; min-width: max-content;
  color:#9bd9ff; opacity:.9; font-weight:700; letter-spacing:.35px;
  will-change: transform; backface-visibility: hidden; transform: translateZ(0);
  animation: none !important; contain: paint;
  
}
@keyframes marqueeX {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); }
}

.providers-deck { position:relative; z-index:1; display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.provider-card {
  position:relative; background: rgba(255,255,255,0.04); border-radius: 18px; overflow:hidden;
  padding: 24px 22px 26px; min-height: 170px; backdrop-filter: blur(8px);
  border: 1px solid rgba(134,207,230,0.18); transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.provider-card:hover { transform: translateY(-6px) rotateX(1deg) rotateY(-1deg); box-shadow: 0 18px 44px rgba(0,0,0,0.35); border-color: rgba(134,207,230,0.35); }
.card-edge { position:absolute; inset: -1px; pointer-events:none; background: conic-gradient(from 90deg, rgba(134,207,230,0.0), rgba(102,181,189,0.6), rgba(38,91,129,0.0)); filter: blur(12px); opacity: 0; transition: opacity .35s ease; }
.provider-card:hover .card-edge { opacity: .8; }
.card-body { position:relative; z-index:1; }
.card-num { position:absolute; top:-6px; right:6px; font-size: 3.4rem; font-weight: 800; line-height:1; color: transparent; -webkit-text-stroke: 1.4px rgba(134,207,230,0.5); text-stroke: 1.4px rgba(134,207,230,0.5); opacity:.7; }
.provider-card h4 { color:#eaf7ff; font-size:1.2rem; margin-bottom: .35rem; }
.provider-card p { color:#cbeeff; font-size:.98rem; }
.card-arrow { position:absolute; right:14px; bottom:12px; color:#bfe9ff; font-weight:800; font-size:1.4rem; opacity:.8; transition: transform .25s ease; }
.provider-card:hover .card-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .wave-layer, .blob { animation: none !important; }
}


/* ========== 13) DIRECTORY (BROWSE) ========== */
.directory-section{
  background:#fff;border:1px solid rgba(38,91,129,.08);border-radius:18px;padding:48px 24px;box-shadow:0 8px 24px rgba(0,0,0,.06)
}
.directory-section .subtitle{color:#3a5467}
.dir-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px}
.chip{
  display:inline-block;padding:.45rem .75rem;border-radius:999px;border:1px solid rgba(38,91,129,.2);color:#12344c;background:#f7fbff;font-weight:600;font-size:.9rem
}
.dir-btn{margin-top:6px}


/* ========== 14) CONTACT (GRID + FORM) ========== */
.contact-section{background:var(--gray-light);padding:60px 20px;border-radius:16px;text-align:center}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;align-items:start}
.contact-info{text-align:left}
.contact-info p{margin:8px 0}
.social-links a{margin-right:14px;display:inline-flex;color:var(--accent)}
.social-links a:hover{color:var(--deep-blue)}
.contact-form{display:flex;flex-direction:column;gap:15px}
.contact-form input,.contact-form textarea{padding:12px;border:1px solid #ddd;border-radius:8px;font-size:1rem}
.contact-form button{align-self:flex-start}
.form-success,.form-error{display:none;margin-top:10px;font-weight:600;text-align:left}
.form-success{color:#0a7f2e}.form-error{color:#b00020}
.hidden{display:none}


/* ========== 15) FOOTER ========== */
.site-footer{width:100vw;margin-left:calc(-50vw + 50%);background:var(--deep-blue);color:#fff;padding:90px 0 40px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(134,207,230,.15) 0%,transparent 70%),radial-gradient(circle at 80% 80%,rgba(81,154,158,.15) 0%,transparent 70%);z-index:0}
.footer-shape-bg{position:absolute;inset:-80px;pointer-events:none;z-index:0}
.footer-blob{position:absolute;opacity:.12;width:600px;height:600px;filter:blur(.4px);transform-box: fill-box;transform-origin: center;}
.footer-blob.blob-1{top:-120px;left:-160px;fill:var(--soft-blue)}
.footer-blob.blob-2{bottom:-140px;right:-160px;fill:var(--teal)}
.dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--soft-blue);box-shadow:0 0 0 6px rgba(134,207,230,.1);animation:floatY 6s ease-in-out infinite}
.dot.d1{top:18%;left:12%}.dot.d2{bottom:22%;right:14%;animation-delay:1s}.dot.d3{top:36%;right:25%;animation-delay:2s}
.footer-grid,.footer-bottom{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-bottom:60px}
.footer-logo{font-size:1.9rem;font-weight:700;margin-bottom:12px;color:#fff}
.footer-grid h4{margin-bottom:18px;font-size:1.2rem;font-weight:600;color:var(--soft-blue)}
.footer-grid ul{list-style:none;padding:0}
.footer-grid li{margin-bottom:10px}
.footer-grid a{color:#e0f4ff;text-decoration:none;transition:color .3s,transform .3s}
.footer-grid a:hover{color:#fff;transform:translateX(4px);text-decoration:underline}
.footer-grid p{color:#cbd5e1;font-size:.95rem;line-height:1.6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2);padding-top:20px;text-align:center;font-size:.9rem;color:#cbd5e1}


/* NEW: mobile nav layout */
@media(max-width:900px){
  nav{
    padding:10px 18px;
  }

  .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .nav-links{
    position:fixed;
    top:var(--nav-height);
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:12px 20px 16px;
    gap:8px;
    box-shadow:0 10px 25px rgba(0,0,0,.16);
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }

  nav.nav-open .nav-links{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-links a{
    margin:4px 0;
  }
}



/* ========== 16) MEDIA QUERIES & TESTIMONIALS (RESPONSIVE) ========== */
@media(max-width:768px){
  h1{font-size:2.3rem}
  .image-row,.specialists,.steps{flex-direction:column;align-items:center}
  .contact-grid{grid-template-columns:1fr}
}

/* ==================== Testimonials (Fixed Responsive) ==================== */
.section-testimonials {
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
  padding: 70px 20px;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.section-testimonials .t-head { max-width: 720px; margin: 0 auto 30px; }
.section-testimonials .t-head h2 { font-size: clamp(1.8rem, 2.5vw, 2.2rem); color: #15344f; margin-bottom: 10px; }
.section-testimonials .subtitle { color: #265b81; }
.t-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; max-width: 100%; margin: 0 auto; }
.t-viewport { overflow: hidden; border-radius: 16px; background: #fff; outline: 1px solid rgba(38, 91, 129, .14); max-width: 100%; margin: 0 auto; }
.t-track { display: flex; gap: 16px; transition: transform 0.4s ease; will-change: transform; }
.t-card { flex: 0 0 100%; max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid rgba(38, 91, 129, .14); border-radius: 16px; padding: 24px 20px; box-shadow: 0 8px 20px rgba(38, 91, 129, .12); text-align: left; }
.t-card blockquote { font-size: 1rem; line-height: 1.55; margin: 0 0 10px; }
.t-card cite { font-size: .95rem; font-weight: 600; color: #265b81; }
.t-stars { color: #f5b301; font-size: 18px; margin-bottom: 10px; }
.t-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(38, 91, 129, .14); background: #fff; display: grid; place-items: center; cursor: pointer; transition: all 0.2s ease; }
.t-nav:hover { background: #f0f7ff; border-color: rgba(38, 91, 129, .26); }
.t-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.t-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(38, 91, 129, .28); border: 1px solid rgba(38, 91, 129, .14); cursor: pointer; transition: all 0.2s ease; }
.t-dot[aria-selected="true"] { width: 28px; border-radius: 12px; background: linear-gradient(90deg, #86cfe6, #52cfdc); border-color: transparent; }

/* 12.3 Providers Ticker — edge fades (match section bg) */
.providers-ticker::before{background:linear-gradient(90deg, rgba(21,78,128,.85), rgba(21,78,128,0))}
.providers-ticker::after {background:linear-gradient(270deg, rgba(21,78,128,.85), rgba(21,78,128,0))}
/* ========== APPOINTMENT PAGE (REQUEST APPOINTMENT) ========== */

.appointment-page {
  max-width: 1120px;
  margin: calc(var(--nav-height) + 40px) auto 80px;
  padding: 0 20px 40px;
}

/* Hero banner at the top of the page */
.appointment-hero {
  background: linear-gradient(120deg, var(--deep-blue), var(--accent));
  color: #fff;
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.appointment-hero h1 {
  font-size: 2.1rem;
  margin-bottom: 10px;
}

.appointment-hero p {
  font-size: 1.02rem;
  max-width: 720px;
  margin-bottom: 10px;
}

.appointment-hero ul {
  margin-top: 6px;
  list-style: disc;
  padding-left: 20px;
  font-size: 0.92rem;
}

.appointment-hero ul li {
  margin-bottom: 4px;
}

.appointment-hero ul li::marker {
  color: var(--soft-blue);
}

/* Two-column layout for info + form */
.appointment-layout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: flex-start;
}

/* Cards */
.appointment-info-card,
.appointment-form-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 0 10px 30px rgba(15, 37, 56, 0.12);
  border: 1px solid rgba(21, 52, 79, 0.06);
}

.appointment-info-card h2,
.appointment-form-card h2 {
  font-size: 1.35rem;
  color: var(--deep-blue);
  margin-bottom: 0.45rem;
}

.appointment-info-card ol,
.appointment-info-card ul {
  padding-left: 20px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.appointment-info-card li {
  margin-bottom: 6px;
}

.appointment-disclaimer {
  font-size: 0.8rem;
  color: #666;
  margin-top: 10px;
}

.appointment-form-note {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 10px;
}

/* Form grid */
.appointment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 6px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.field input,
.field textarea {
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid #d2dde7;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  background: #fcfdff;
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 1px rgba(134, 207, 230, 0.8);
  background: #f9fdff;
}

/* Specialties (checkbox grid) */
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin-top: 4px;
  font-size: 0.9rem;
}

.specialties-grid label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.specialties-grid input {
  margin-top: 2px;
}

/* Appointment submit CTA – reuse animated banner button, but full width */
.appointment-form-card .appointment-submit-cta {
  width: 100%;
  margin-top: 8px;
  text-align: center;
  display: inline-block;
}

/* keep text centered nicely inside */
.appointment-form-card .appointment-submit-cta .btn-text {
  display: inline-block;
}

/* NEW: make the Submit Request button look like a modern hero-blue pill */
.appointment-form-card .appointment-submit-cta{
  border-radius:999px;
  background:linear-gradient(135deg,var(--deep-blue),var(--accent));
  box-shadow:0 12px 28px rgba(15,37,56,0.35);
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.95rem 2.2rem;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.03em;
}

/* Remove the 80s border-line animation just for this button */
.appointment-form-card .appointment-submit-cta .btn-lines span{
  display:none;
}

/* Turn off the wavy letter animation on this button only */
.appointment-form-card .appointment-submit-cta .btn-text span{
  animation:none!important;
}

.appointment-form-card .appointment-submit-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(15,37,56,0.45);
}

.appointment-form-card .appointment-submit-cta:active{
  transform:translateY(0);
  box-shadow:0 8px 20px rgba(15,37,56,0.3);
}



.appointment-form-card .btn.full-width:hover {
  background: linear-gradient(120deg, var(--accent), var(--brand-3));
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(21, 52, 79, 0.4);
}

.appointment-form-card .btn.full-width:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(21, 52, 79, 0.3);
}

/* Status text under the button */
.form-status {
  margin-top: 10px;
  font-size: 0.9rem;
  min-height: 1.2em;
  color: var(--deep-blue);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .appointment-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .appointment-hero {
    padding: 20px 18px 22px;
  }

  .appointment-grid {
    grid-template-columns: 1fr;
  }

  .specialties-grid {
    grid-template-columns: 1fr;
  }
}


.appointment-info-card,
.appointment-form-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 0 10px 30px rgba(15, 37, 56, 0.12);
  border: 1px solid rgba(21, 52, 79, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.appointment-info-card:hover,
.appointment-form-card:hover {
  box-shadow: 0 16px 38px rgba(15, 37, 56, 0.18);
  transform: translateY(-3px);
}

/* NEW: stop the hover "jump" on the referral (second) card only */
.appointment-form-card:hover{
  transform:none;
}


/* Contact form loading state */
.contact-form .btn.is-loading {
  opacity: 0.75;
  cursor: wait;
  position: relative;
}

.contact-form .btn.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  border-top-color: transparent;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  animation: contact-btn-spin 0.6s linear infinite;
}

@keyframes contact-btn-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}