/* ============================================================
   HALE NUDGE HEALTHCARE — style.css
   Brand: Navy #082C61 | Teal #068081 | Gold #C89C40
   Fonts: DM Serif Display + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap');

/* ── CSS VARIABLES ────────────────────────────────────────── */
:root {
  --navy:      #082C61;
  --navy-d:    #051d42;
  --navy-m:    #0c3d8a;
  --navy-l:    #eef2fa;
  --navy-xl:   #f5f7fd;
  --teal:      #068081;
  --teal-d:    #045858;
  --teal-m:    #0aa5a6;
  --teal-l:    #e0f5f5;
  --teal-xl:   #f0fafa;
  --gold:      #C89C40;
  --gold-d:    #9a7428;
  --gold-l:    #fdf5e4;
  --white:     #ffffff;
  --cream:     #faf9f6;
  --gray-900:  #0d1117;
  --gray-700:  #374151;
  --gray-500:  #6b7280;
  --gray-300:  #d1d5db;
  --gray-200:  #e5e7eb;
  --gray-100:  #f3f4f6;
  --gray-50:   #f9fafb;
  --ff-head: 'DM Serif Display', Georgia, serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;
  --pad:     96px;
  --pad-sm:  64px;
  --gap:     28px;
  --ease:    cubic-bezier(.4,0,.2,1);
  --ease-o:  cubic-bezier(0,.55,.45,1);
  --sh-sm:   0 2px 12px rgba(8,44,97,.08);
  --sh-md:   0 8px 32px rgba(8,44,97,.12);
  --sh-lg:   0 20px 56px rgba(8,44,97,.16);
  --sh-xl:   0 32px 80px rgba(8,44,97,.20);
  --r-sm:    6px;
  --r-md:    14px;
  --r-lg:    22px;
  --r-xl:    36px;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:90px }
body { font-family:var(--ff-body); background:var(--white); color:var(--gray-900); overflow-x:hidden; line-height:1.65; -webkit-font-smoothing:antialiased }
img  { max-width:100%; height:auto; display:block }
a    { text-decoration:none; color:inherit }
ul   { list-style:none }
button { font-family:var(--ff-body); cursor:pointer; border:none; background:none }
h1,h2,h3,h4,h5 { font-family:var(--ff-head); line-height:1.1; color:var(--gray-900) }
h1 { font-size:clamp(2.6rem,5.5vw,5rem); font-weight:400 }
h2 { font-size:clamp(2rem,3.8vw,3.2rem); font-weight:400 }
h3 { font-size:clamp(1.5rem,2.6vw,2rem) }
h4 { font-size:1.15rem; font-weight:600 }
p  { color:var(--gray-500); font-weight:400; line-height:1.75 }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ── LAYOUT ───────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 var(--gap) }
.pad       { padding:var(--pad) 0 }
.pad-sm    { padding:var(--pad-sm) 0 }
.center    { text-align:center }
.center .lead { margin:12px auto 0 }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:var(--r-sm);
  font-family:var(--ff-body); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; transition:all .26s var(--ease);
  cursor:pointer; text-decoration:none; border:2px solid transparent;
  white-space:nowrap; line-height:1;
}
.btn-lg  { padding:17px 38px; font-size:1rem }
.btn-sm  { padding:10px 22px; font-size:.84rem }
.btn-navy   { background:var(--navy);  color:#fff }
.btn-navy:hover   { background:var(--navy-m); transform:translateY(-2px); box-shadow:0 8px 26px rgba(8,44,97,.28) }
.btn-teal   { background:var(--teal);  color:#fff }
.btn-teal:hover   { background:var(--teal-m); transform:translateY(-2px); box-shadow:0 8px 26px rgba(6,128,129,.30) }
.btn-gold   { background:var(--gold);  color:#fff }
.btn-gold:hover   { background:var(--gold-d); transform:translateY(-2px); box-shadow:0 8px 26px rgba(200,156,64,.35) }
.btn-outline       { border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.07); backdrop-filter:blur(8px) }
.btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.16); transform:translateY(-2px) }
.btn-outline-navy  { border-color:var(--navy); color:var(--navy) }
.btn-outline-navy:hover { background:var(--navy); color:#fff; transform:translateY(-2px) }
.btn-ghost-white   { color:rgba(255,255,255,.75); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; transition:all .2s var(--ease); padding:4px 0 }
.btn-ghost-white:hover { color:#fff; gap:12px }

/* ── EYEBROW ──────────────────────────────────────────────── */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--teal); margin-bottom:12px }
.eyebrow::before { content:''; width:24px; height:2px; background:var(--teal); border-radius:1px; flex-shrink:0 }
.eyebrow-white { color:rgba(255,255,255,.55) }
.eyebrow-white::before { background:rgba(255,255,255,.45) }

/* ── SECTION TITLES ───────────────────────────────────────── */
.sec-title { font-family:var(--ff-head); color:var(--gray-900); line-height:1.1 }
.sec-title em  { color:var(--teal); font-style:italic }
.sec-title .g  { color:var(--gold); font-style:italic }
.lead { color:var(--gray-500); font-size:1.03rem; line-height:1.75; max-width:600px }

/* ── REVEAL ANIMATIONS ────────────────────────────────────── */
.rv, .rv-l, .rv-r { transition:opacity .75s var(--ease), transform .75s var(--ease) }
.js .rv   { opacity:0; transform:translateY(28px) }
.js .rv-l { opacity:0; transform:translateX(-32px) }
.js .rv-r { opacity:0; transform:translateX(32px) }
.rv.on, .rv-l.on, .rv-r.on { opacity:1 !important; transform:none !important }
.d1 { transition-delay:.07s }  .d2 { transition-delay:.14s }
.d3 { transition-delay:.21s }  .d4 { transition-delay:.28s }
.d5 { transition-delay:.35s }  .d6 { transition-delay:.42s }

/* ── NAVBAR ───────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .38s var(--ease), box-shadow .38s var(--ease);
}
.nav.at-top  { background:rgba(4,22,56,.22); backdrop-filter:blur(8px) }
.nav.scrolled {
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(8,44,97,.07), 0 4px 24px rgba(8,44,97,.07);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between; height:90px;
}

/* Logo */
.nav-logo { display:flex; align-items:center; flex-shrink:0 }
.nav-logo img {
  height:120px; width:auto; transition:all .3s var(--ease);
  filter:brightness(0) invert(1);
}
.nav.scrolled .nav-logo img {
  filter:none;
  height:100px;
}

/* Nav links */
.nav-links { display:flex; align-items:center; gap:2px; margin-left:20px }
.nav-links li { position:relative }
.nav-links a {
  display:block; padding:8px 14px; border-radius:6px;
  font-size:.9rem; font-weight:500; transition:all .2s var(--ease);
  color:rgba(255,255,255,.9);
}
.nav-links a:hover, .nav-links a.active { color:#fff; background:rgba(255,255,255,.12) }
.nav.scrolled .nav-links a { color:var(--gray-700) }
.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a.active { color:var(--navy); background:var(--navy-xl) }

/* ── DROPDOWN ─────────────────────────────────────────────── */
.nav-drop { position:relative }
.nav-drop-menu {
  position:absolute; top:100%; left:50%;
  background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-xl);
  padding:14px 10px 10px; min-width:215px; border-top:3px solid var(--teal);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  transform:translateX(-50%) translateY(4px);
  z-index:999;
}
.nav-drop-menu::before {
  content:''; position:absolute;
  top:-12px; left:0; right:0; height:12px;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-drop:not(:hover):not(:focus-within) .nav-drop-menu { transition-delay:.08s }
.nav-drop-menu a {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:6px;
  font-size:.88rem; font-weight:500; color:var(--gray-700); transition:all .2s var(--ease);
  background:transparent; cursor:pointer;
}
.nav-drop-menu a:hover { background:var(--teal-l); color:var(--teal-d) }
.nav-drop-menu a span  { font-size:1rem; width:22px; text-align:center; flex-shrink:0 }

/* Nav right */
.nav-right { display:flex; align-items:center; gap:12px }
.nav-phone {
  display:flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem;
  color:rgba(255,255,255,.9); white-space:nowrap; transition:color .2s;
}
.nav.scrolled .nav-phone { color:var(--navy) }

/* Hamburger */
.ham {
  display:none; flex-direction:column; gap:5px; padding:8px;
  border-radius:6px; z-index:1001; position:relative; cursor:pointer;
}
.ham span {
  display:block; width:23px; height:2px; border-radius:1px;
  background:rgba(255,255,255,.9); transition:all .3s var(--ease);
}
.nav.scrolled .ham span { background:var(--navy) }
.ham.open span           { background:var(--navy) !important }
.ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

/* ── MOBILE MENU ──────────────────────────────────────────── */
.mob-menu {
  position:fixed; inset:0; z-index:900;
  background:linear-gradient(160deg, var(--navy-d) 0%, var(--navy) 55%, var(--teal-d) 100%);
  transform:translateX(-100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.mob-menu.open { transform:translateX(0) }
.mob-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.12); flex-shrink:0;
}
.mob-top-logo img { height:46px; width:auto; filter:brightness(0) invert(1) }
.mob-close {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.2);
  color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s var(--ease); flex-shrink:0;
}
.mob-close:hover { background:rgba(255,255,255,.24); transform:rotate(90deg) }
.mob-body { padding:20px 28px 36px; flex:1; display:flex; flex-direction:column }
.mob-divider { width:40px; height:3px; background:linear-gradient(90deg,var(--teal-m),var(--gold)); border-radius:2px; margin:8px 0 18px }
.mob-menu a {
  display:block; padding:14px 0;
  font-size:1.08rem; font-weight:600; color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.09); transition:all .2s var(--ease);
}
.mob-menu a:hover { color:#fff; padding-left:10px }
.mob-menu a[aria-current="page"] { color:var(--gold) }
.mob-cta     { margin-top:28px; display:flex; flex-direction:column; gap:11px }
.mob-phone   { font-size:1.22rem; font-weight:700; color:#fff; margin-bottom:4px }
.mob-phone a { color:#fff }

/* ── TICKER ───────────────────────────────────────────────── */
.ticker { background:var(--teal-d); height:38px; overflow:hidden; display:flex; align-items:center }
.ticker-inner { display:flex; overflow:hidden; width:100% }
.ticker-track { display:flex; animation:tick 32s linear infinite; white-space:nowrap; will-change:transform }
.tick-item { display:inline-flex; align-items:center; gap:8px; padding:0 48px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.62) }
.tick-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0 }
@keyframes tick { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ── SERVICE STRIP ────────────────────────────────────────── */
.svc-strip { background:var(--navy) }
.svc-strip-grid { display:grid; grid-template-columns:repeat(4,1fr) }
.svc-strip-item {
  display:block; padding:34px 26px;
  border-right:1px solid rgba(255,255,255,.07);
  transition:background .25s var(--ease); text-decoration:none;
}
.svc-strip-item:last-child { border-right:none }
.svc-strip-item:hover { background:rgba(255,255,255,.04) }
.svc-strip-icon { width:46px; height:46px; border-radius:10px; background:rgba(6,128,129,.2); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:14px; transition:background .25s }
.svc-strip-item:hover .svc-strip-icon { background:rgba(6,128,129,.35) }
.svc-strip-item h4 { font-size:1rem; color:#fff; margin-bottom:5px }
.svc-strip-item p  { font-size:.83rem; color:rgba(255,255,255,.48); line-height:1.55 }
.svc-strip-link    { display:inline-flex; align-items:center; gap:5px; color:var(--teal-m); font-size:.79rem; font-weight:600; margin-top:11px; transition:gap .2s }
.svc-strip-item:hover .svc-strip-link { gap:10px }

/* ── INTRO / TWO-COL SECTIONS ────────────────────────────── */
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.intro-photo { position:relative; border-radius:var(--r-xl); overflow:hidden }
.intro-photo img { width:100%; height:560px; object-fit:cover; display:block }
.intro-badge { position:absolute; bottom:26px; left:-24px; background:#fff; border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:14px }
.intro-badge-n { font-family:var(--ff-head); font-size:2.2rem; color:var(--teal); line-height:1 }
.intro-badge-t { font-size:.75rem; color:var(--gray-500); font-weight:600; line-height:1.4; max-width:80px }
.intro-accent  { position:absolute; top:-18px; right:-18px; width:80px; height:80px; border-radius:50%; background:var(--gold); opacity:.18; pointer-events:none }
.intro-feats   { margin-top:28px; display:flex; flex-direction:column; gap:20px }
.intro-feat    { display:flex; gap:14px; align-items:flex-start }
.intro-feat-icon { width:44px; height:44px; border-radius:10px; background:var(--navy-l); display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0 }
.intro-feat h5 { font-family:var(--ff-head); font-size:.97rem; margin-bottom:3px; color:var(--navy) }
.intro-feat p  { font-size:.88rem }

/* ── SERVICES GRID ────────────────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px }
.svc-card {
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(8,44,97,.07); transition:all .3s var(--ease); position:relative;
}
.svc-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--teal),var(--navy));
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease);
}
.svc-card:hover { transform:translateY(-7px); box-shadow:var(--sh-lg); border-color:transparent }
.svc-card:hover::after { transform:scaleX(1) }
.svc-photo { width:100%; height:195px; object-fit:cover; display:block }
.svc-body  { padding:22px 24px 24px }
.svc-icon-row { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.svc-icon  { width:38px; height:38px; border-radius:8px; background:var(--teal-l); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; transition:background .25s }
.svc-card:hover .svc-icon { background:var(--teal) }
.svc-card h4 { font-family:var(--ff-head); font-size:1.06rem; color:var(--navy) }
.svc-card p  { font-size:.88rem; line-height:1.65; margin-top:6px }
.svc-link { display:inline-flex; align-items:center; gap:5px; color:var(--teal); font-weight:600; font-size:.83rem; margin-top:12px; transition:gap .2s }
.svc-link:hover { gap:11px }

/* ── STATS BAR ────────────────────────────────────────────── */
.stats-bar  { background:linear-gradient(135deg,var(--navy-d),var(--navy)); padding:56px 0 }
.stats-row  { display:grid; grid-template-columns:repeat(4,1fr) }
.stat       { text-align:center; padding:16px; position:relative }
.stat:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background:rgba(255,255,255,.1) }
.stat-n     { display:block; font-family:var(--ff-head); font-size:clamp(2.4rem,4vw,3.6rem); color:#fff; line-height:1 }
.stat-gold  { color:var(--gold) }
.stat-l     { display:block; font-size:.8rem; color:rgba(255,255,255,.45); margin-top:7px; font-weight:500; letter-spacing:.04em }

/* ── TESTIMONIALS ─────────────────────────────────────────── */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px }
.test-card { background:#fff; border-radius:var(--r-lg); padding:28px 24px; border:1px solid rgba(8,44,97,.07); box-shadow:var(--sh-sm); transition:all .3s var(--ease); position:relative; overflow:hidden }
.test-card::before { content:'"'; font-family:var(--ff-head); font-size:6rem; color:var(--teal-l); line-height:.6; position:absolute; top:14px; left:14px; pointer-events:none }
.test-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md) }
.test-stars { color:var(--gold); font-size:.8rem; letter-spacing:2px; margin-bottom:11px; position:relative; z-index:1 }
.test-text  { font-size:.9rem; line-height:1.74; color:var(--gray-700); font-style:italic; margin-bottom:20px; position:relative; z-index:1 }
.test-author { display:flex; align-items:center; gap:11px }
.test-av    { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:linear-gradient(135deg,var(--navy-l),var(--teal-l)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:var(--navy) }
.test-name  { font-weight:700; font-size:.88rem; color:var(--navy) }
.test-loc   { font-size:.75rem; color:var(--gray-500) }

/* ── PROGRAMS SECTION ─────────────────────────────────────── */
.programs-sec { background:var(--navy); padding:80px 0 }
.prog-tags    { display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; justify-content:center }
.prog-tag     { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.74); padding:8px 16px; border-radius:var(--r-sm); font-size:.8rem; font-weight:600; transition:all .22s var(--ease) }
.prog-tag:hover { background:rgba(6,128,129,.22); border-color:var(--teal-m); color:#fff }
.prog-pdot    { width:5px; height:5px; border-radius:50%; background:var(--teal-m); flex-shrink:0 }
.prog-cta     { margin-top:40px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap }
.prog-cta p   { color:rgba(255,255,255,.68); font-size:.99rem; max-width:500px }
.prog-cta strong { color:var(--gold) }

/* ── CTA BANNER ───────────────────────────────────────────── */
.cta-banner { background:linear-gradient(135deg,var(--teal-d),var(--teal)); padding:76px 0; position:relative; overflow:hidden }
.cta-banner::before,.cta-banner::after { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.06) }
.cta-banner::before { width:300px; height:300px; top:-80px; right:-80px }
.cta-banner::after  { width:190px; height:190px; bottom:-55px; left:-55px }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; position:relative; z-index:1 }
.cta-inner h2 { font-family:var(--ff-head); color:#fff; font-size:clamp(1.9rem,3.2vw,2.8rem); margin-bottom:10px }
.cta-inner p  { color:rgba(255,255,255,.72); max-width:500px }
.cta-btns { display:flex; gap:12px; flex-wrap:wrap }

/* ── PROCESS ──────────────────────────────────────────────── */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:52px; position:relative }
.process-grid::before { content:''; position:absolute; top:34px; left:12%; right:12%; height:1px; background:linear-gradient(90deg,var(--teal-l),var(--navy-l)); z-index:0 }
.proc-step { text-align:center; position:relative; z-index:1 }
.proc-n    { width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--teal-l); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:var(--ff-head); font-size:1.65rem; color:var(--navy); box-shadow:var(--sh-sm); transition:all .3s var(--ease) }
.proc-step:hover .proc-n { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:var(--sh-md) }
.proc-step h4 { font-family:var(--ff-head); font-size:.97rem; color:var(--navy); margin-bottom:6px }
.proc-step p  { font-size:.86rem }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:52px; align-items:start }
.faq-list { display:flex; flex-direction:column; gap:9px }
.faq-item { background:#fff; border-radius:var(--r-md); border:1px solid rgba(8,44,97,.08); overflow:hidden; transition:all .25s var(--ease) }
.faq-item.open { border-color:var(--teal-l); box-shadow:var(--sh-sm) }
.faq-q    { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; cursor:pointer; font-weight:600; font-size:.92rem; color:var(--gray-900); gap:10px }
.faq-chev { width:26px; height:26px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0; transition:all .25s var(--ease); color:var(--gray-700) }
.faq-item.open .faq-chev { background:var(--teal); color:#fff; transform:rotate(180deg) }
.faq-a    { display:none; padding:0 18px 15px; font-size:.88rem; color:var(--gray-700); line-height:1.7 }
.faq-item.open .faq-a { display:block }

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero { background:linear-gradient(135deg,var(--navy-d),var(--navy)); padding:148px 0 88px; position:relative; overflow:hidden }
.page-hero::before { content:''; position:absolute; top:-100px; right:-80px; width:440px; height:440px; border-radius:50%; background:rgba(6,128,129,.1) }
.page-hero h1 { color:#fff; margin-bottom:14px }
.page-hero p  { color:rgba(255,255,255,.68); max-width:560px; font-size:1.04rem }
.breadcrumb   { display:flex; align-items:center; gap:8px; font-size:.77rem; margin-bottom:16px }
.breadcrumb a { color:var(--gold) }
.breadcrumb a:hover { color:var(--gold-l) }
.breadcrumb span { color:rgba(255,255,255,.32) }

/* ── FORMS ────────────────────────────────────────────────── */
.form-wrap { background:#fff; border-radius:var(--r-xl); padding:40px; box-shadow:var(--sh-md) }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:16px }
.form-group label { font-weight:600; font-size:.83rem; color:var(--gray-700) }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  padding:11px 15px; border:1.5px solid var(--gray-300); border-radius:var(--r-sm);
  font-family:var(--ff-body); font-size:.92rem; transition:border .2s, box-shadow .2s;
  background:#fff; width:100%; color:var(--gray-900);
  -webkit-appearance:none;
}
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(6,128,129,.1);
}
.form-group input:not([type="checkbox"]):not([type="radio"]).error,
.form-group select.error,
.form-group textarea.error { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1) }
.form-group textarea { resize:vertical; min-height:96px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-note { font-size:.75rem; color:var(--gray-500); margin-top:-10px }
.form-section-title { font-family:var(--ff-head); font-size:1.2rem; color:var(--navy); margin:24px 0 16px; padding-bottom:8px; border-bottom:2px solid var(--navy-l) }
.alert { padding:14px 18px; border-radius:var(--r-sm); margin-bottom:20px; font-weight:500; font-size:.9rem }
.alert-success { background:#f0fdf4; border:1px solid #86efac; color:#166534 }
.alert-error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b }
.req { color:#ef4444; margin-left:2px }
.file-label { display:flex; align-items:center; gap:10px; padding:11px 15px; border:1.5px dashed var(--gray-300); border-radius:var(--r-sm); cursor:pointer; transition:all .2s; color:var(--gray-500); font-size:.88rem }
.file-label:hover { border-color:var(--teal); color:var(--teal) }
input[type="file"] { display:none }

/* ── CHECKBOX / RADIO — always visible native controls ───── */
.check-group { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px }
.check-group input[type="checkbox"],
.check-group input[type="radio"] {
  width:18px; height:18px;
  accent-color:var(--teal);
  margin-top:2px; flex-shrink:0;
  /* Force native appearance — prevent CSS resets from hiding controls */
  appearance:auto;
  -webkit-appearance:auto;
  opacity:1;
  visibility:visible;
  position:static;
  clip:auto;
  cursor:pointer;
}
.check-group label { font-size:.88rem; color:var(--gray-700); cursor:pointer }

.privacy-note { font-size:.73rem; color:var(--gray-500); text-align:center; margin-top:10px }
.privacy-note a { color:var(--teal) }

/* ── CARDS ────────────────────────────────────────────────── */
.val-card { background:#fff; border-radius:var(--r-md); padding:28px 24px; border:1px solid rgba(8,44,97,.07); text-align:center; transition:all .3s var(--ease) }
.val-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md) }
.val-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.45rem; margin:0 auto 14px }
.val-card h4 { font-family:var(--ff-head); font-size:1.04rem; color:var(--navy); margin-bottom:7px }
.team-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(8,44,97,.07); transition:all .3s var(--ease) }
.team-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg) }
.team-photo { width:100%; height:255px; object-fit:cover; object-position:top; display:block }
.team-body { padding:20px 22px }
.team-role { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:5px }
.team-body h4 { font-family:var(--ff-head); font-size:1.1rem; color:var(--navy); margin-bottom:6px }
.job-card { display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:var(--r-md); padding:20px 22px; border:1px solid rgba(8,44,97,.07); gap:14px; transition:all .25s var(--ease) }
.job-card:hover { border-color:var(--teal-l); box-shadow:var(--sh-md); transform:translateX(4px) }
.job-card h4 { font-family:var(--ff-head); font-size:1rem; color:var(--navy); margin-bottom:4px }
.job-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.job-tag { padding:3px 9px; border-radius:100px; font-size:.69rem; font-weight:600 }
.jtg-n { background:var(--navy-xl); color:var(--navy) }
.jtg-t { background:var(--teal-l); color:var(--teal-d) }
.jtg-g { background:var(--gold-l); color:var(--gold-d) }
.cc-card { background:#fff; border-radius:var(--r-md); padding:22px; border:1px solid rgba(8,44,97,.07); display:flex; align-items:flex-start; gap:13px; transition:all .25s var(--ease) }
.cc-card:hover { box-shadow:var(--sh-md); transform:translateY(-2px) }
.cc-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0 }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer { background:#0a0f1a; padding:64px 0 0 }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:42px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.06) }
.footer-logo { height:120px; width:auto; filter:brightness(0) invert(1); opacity:.9; margin-bottom:14px; display:block }
.footer-brand p { color:rgba(255,255,255,.38); font-size:.85rem; line-height:1.72; max-width:260px; margin-top:9px }
.footer-tagline { color:rgba(255,255,255,.24) !important; font-size:.78rem !important; margin-top:6px }
.footer-soc { display:flex; gap:8px; margin-top:16px }
.soc-b { width:33px; height:33px; border-radius:50%; background:rgba(255,255,255,.06); color:rgba(255,255,255,.38); font-size:.74rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .22s; cursor:pointer }
.soc-b:hover { background:var(--teal); color:#fff }
.footer-col h5 { font-family:var(--ff-head); font-size:1rem; color:#fff; margin-bottom:14px }
.footer-links { display:flex; flex-direction:column; gap:8px }
.footer-links a { color:rgba(255,255,255,.36); font-size:.84rem; transition:color .2s }
.footer-links a:hover { color:var(--teal-m) }
.fci { display:flex; align-items:flex-start; gap:8px; color:rgba(255,255,255,.38); font-size:.84rem; margin-bottom:9px }
.fci a { color:rgba(255,255,255,.38); transition:color .2s }
.fci a:hover { color:var(--teal-m) }
.footer-bot { display:flex; align-items:center; justify-content:space-between; padding:20px 0; flex-wrap:wrap; gap:9px }
.footer-bot p { color:rgba(255,255,255,.22); font-size:.77rem }
.footer-bl { display:flex; gap:16px }
.footer-bl a { color:rgba(255,255,255,.22); font-size:.77rem; transition:color .2s }
.footer-bl a:hover { color:rgba(255,255,255,.5) }

/* ── CHAT WIDGET ──────────────────────────────────────────── */
.chat-w     { position:fixed; bottom:26px; right:26px; z-index:9999 }
.chat-tog   { width:57px; height:57px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--navy)); box-shadow:0 8px 28px rgba(8,44,97,.35); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:transform .25s }
.chat-tog:hover { transform:scale(1.08) }
.chat-tog svg { width:24px; height:24px; fill:#fff }
.chat-badge { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:var(--gold); color:#fff; font-size:.6rem; font-weight:700; display:none; align-items:center; justify-content:center; border:2px solid #fff }
.chat-panel { position:absolute; bottom:68px; right:0; width:330px; background:#fff; border-radius:20px; box-shadow:var(--sh-xl); display:none; flex-direction:column; overflow:hidden; border:1px solid rgba(8,44,97,.07) }
.chat-panel.open { display:flex }
.chat-hdr   { background:linear-gradient(135deg,var(--navy),var(--teal-d)); padding:14px 16px; display:flex; align-items:center; gap:10px }
.chat-av    { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0 }
.chat-nm    { color:#fff; font-weight:700; font-size:.88rem }
.chat-st    { color:rgba(255,255,255,.55); font-size:.7rem; display:flex; align-items:center; gap:5px; margin-top:2px }
.chat-sdot  { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:pulse 2s infinite; flex-shrink:0 }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
.chat-xb    { color:rgba(255,255,255,.5); font-size:1rem; padding:3px; margin-left:auto; cursor:pointer; transition:color .2s }
.chat-xb:hover { color:#fff }
.chat-msgs  { height:240px; overflow-y:auto; padding:13px; display:flex; flex-direction:column; gap:9px }
.cmsg       { max-width:82% }
.cmsg-b     { align-self:flex-start }
.cmsg-u     { align-self:flex-end }
.cbub       { padding:9px 13px; border-radius:14px; font-size:.83rem; line-height:1.52 }
.cmsg-b .cbub { background:var(--gray-100); color:var(--gray-900); border-bottom-left-radius:3px }
.cmsg-u .cbub { background:linear-gradient(135deg,var(--navy),var(--teal-d)); color:#fff; border-bottom-right-radius:3px }
.chat-quick { display:flex; gap:5px; flex-wrap:wrap; padding:7px 12px }
.cqb        { padding:5px 11px; border-radius:100px; border:1.5px solid var(--teal); color:var(--teal); font-size:.72rem; font-weight:600; cursor:pointer; background:none; font-family:var(--ff-body); transition:all .2s }
.cqb:hover  { background:var(--teal); color:#fff }
.chat-ir    { display:flex; padding:10px 12px; border-top:1px solid var(--gray-100) }
.chat-in    { flex:1; padding:9px 12px; border-radius:10px 0 0 10px; border:1.5px solid var(--gray-300); border-right:none; font-family:var(--ff-body); font-size:.84rem; outline:none; background:var(--gray-100) }
.chat-in:focus { border-color:var(--teal); background:#fff }
.chat-snd   { width:40px; border-radius:0 10px 10px 0; background:linear-gradient(135deg,var(--navy),var(--teal-d)); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center }
.chat-snd svg { width:16px; height:16px; fill:#fff }
.tdots { display:flex; gap:4px; align-items:center }
.td { width:6px; height:6px; border-radius:50%; background:var(--gray-500); animation:tdot 1.2s ease-in-out infinite }
.td:nth-child(2){animation-delay:.2s}.td:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,60%,100%{transform:none}30%{transform:translateY(-5px)} }

/* Back to top */
.btt { position:fixed; bottom:92px; right:28px; width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; align-items:center; justify-content:center; box-shadow:var(--sh-md); cursor:pointer; border:none; font-size:.9rem; transition:all .25s var(--ease); z-index:9998 }
.btt { display:none }
.btt.on { display:flex }
.btt:hover { background:var(--teal); transform:translateY(-3px) }

/* ── GRID HELPERS ─────────────────────────────────────────── */
.two-col   { display:grid; grid-template-columns:1fr 1fr; gap:40px }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.four-col  { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }

/* ── SPACING HELPERS ──────────────────────────────────────── */
.mt-12{margin-top:12px} .mt-20{margin-top:20px} .mt-28{margin-top:28px}
.mt-32{margin-top:32px} .mt-44{margin-top:44px} .mt-52{margin-top:52px}

/* ── TABLET (max 1100px) ──────────────────────────────────── */
@media(max-width:1100px){
  .svc-grid       { grid-template-columns:repeat(2,1fr) }
  .footer-grid    { grid-template-columns:1fr 1fr }
  .process-grid::before { display:none }
  .stats-row      { grid-template-columns:repeat(2,1fr) }
  .stat:nth-child(2)::after { display:none }
  .faq-grid       { grid-template-columns:1fr; gap:40px }
  .intro-grid     { gap:44px }
  .svc-strip-grid { grid-template-columns:repeat(2,1fr) }
  .test-grid      { grid-template-columns:1fr 1fr }
  .four-col       { grid-template-columns:repeat(2,1fr) }
  .three-col      { grid-template-columns:repeat(2,1fr) }
  .nav-inner      { height:100px }
  .nav-logo img   { height:90px }
  .nav.scrolled .nav-logo img { height:80px }
}

/* ── MOBILE (max 768px) ───────────────────────────────────── */
@media(max-width:768px){
  :root { --pad:56px; --pad-sm:40px; --gap:20px }

  .ham                 { display:flex }
  .nav-links,
  .nav-right           { display:none }
  .nav-inner           { height:80px }
  .nav-logo img        { height:72px }
  .nav.scrolled .nav-logo img { height:64px }

  h1 { font-size:clamp(2rem,8vw,3rem) }
  h2 { font-size:clamp(1.7rem,6vw,2.4rem) }
  h3 { font-size:clamp(1.3rem,5vw,1.8rem) }
  .sec-title { font-size:clamp(1.7rem,6vw,2.4rem) }
  .lead      { font-size:.97rem }

  .page-hero           { padding:120px 0 60px }
  .page-hero h1        { font-size:clamp(1.9rem,7vw,2.8rem) }
  .page-hero p         { font-size:.95rem }

  .svc-grid,.test-grid,
  .two-col,.three-col,.four-col,
  .intro-grid,.faq-grid { grid-template-columns:1fr }
  .faq-grid            { gap:32px }
  .intro-badge         { left:12px }
  .intro-photo img     { height:320px }
  .intro-feat-icon     { width:38px; height:38px; font-size:1rem }

  .svc-strip-grid      { grid-template-columns:1fr 1fr }
  .svc-strip-item      { padding:22px 18px }

  .stats-row           { grid-template-columns:1fr 1fr }
  .stat-n              { font-size:2.4rem }

  .cta-inner           { flex-direction:column; text-align:center }
  .cta-btns            { justify-content:center; flex-direction:column; width:100% }
  .cta-btns .btn       { width:100%; justify-content:center }
  .cta-banner          { padding:52px 0 }

  .prog-cta            { flex-direction:column; text-align:center }
  .prog-cta .btn       { width:100%; justify-content:center }
  .prog-tags           { gap:7px }
  .prog-tag            { font-size:.75rem; padding:7px 13px }

  .process-grid        { grid-template-columns:1fr 1fr; gap:20px }
  .proc-n              { width:56px; height:56px; font-size:1.4rem }

  .form-row            { grid-template-columns:1fr }
  .form-wrap           { padding:26px 20px; border-radius:var(--r-lg) }
  .form-section-title  { font-size:1.05rem }

  .svc-card            { border-radius:var(--r-md) }
  .svc-photo           { height:180px }
  .val-card            { padding:22px 18px }
  .job-card            { flex-direction:column; align-items:flex-start }
  .job-card .btn       { width:100%; justify-content:center; margin-top:8px }
  .cc-card             { padding:18px }
  .test-card           { padding:22px 18px }

  .footer              { padding:48px 0 0 }
  .footer-grid         { grid-template-columns:1fr; gap:32px }
  .footer-logo         { height:80px }
  .footer-brand p      { max-width:100% }
  .footer-bot          { flex-direction:column; text-align:center; gap:12px }
  .footer-bl           { flex-wrap:wrap; justify-content:center; gap:12px }

  .chat-panel          { width:calc(100vw - 40px); right:-6px }
  .btn-lg              { padding:15px 28px; font-size:.95rem }
  .faq-q               { font-size:.88rem }
}

/* ── SMALL MOBILE (max 480px) ────────────────────────────── */
@media(max-width:480px){
  :root { --pad:44px; --pad-sm:32px }

  .nav-inner           { height:70px }
  .nav-logo img        { height:60px }
  .nav.scrolled .nav-logo img { height:54px }

  .svc-strip-grid      { grid-template-columns:1fr }
  .svc-strip-item      { padding:18px 16px; border-right:none; border-bottom:1px solid rgba(255,255,255,.07) }
  .svc-strip-item:last-child { border-bottom:none }

  .stats-row           { grid-template-columns:1fr 1fr }
  .process-grid        { grid-template-columns:1fr; gap:16px }
  .footer-grid         { grid-template-columns:1fr }
  .footer-bl           { flex-direction:column; align-items:center; gap:8px }
  .form-wrap           { padding:20px 16px }
  .test-grid           { grid-template-columns:1fr }
  .intro-badge         { display:none }
  .page-hero           { padding:100px 0 48px }
  .cta-btns            { gap:10px }
  .tick-item           { padding:0 28px; font-size:.68rem }
  .faq-grid            { gap:24px }
  .job-tags            { gap:4px }
  .job-tag             { font-size:.65rem; padding:3px 7px }
}

/* Desktop default layout for referrals */
.referrals-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

/* Mobile responsive layout */
@media screen and (max-width: 768px) {
  .referrals-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Desktop default layout for contact page */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

/* Mobile responsive layout */
@media screen and (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}