/*  TriCity Health Directory – design system
    Theme: Professional blue + white, Apple-inspired minimal,
    Fonts: Bricolage Grotesque (headings) + Manrope (body)
*/

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  --ink-900:#071229;
  --ink-800:#0F1B36;
  --ink-700:#1E2B4D;
  --ink-500:#475569;
  --ink-400:#64748B;
  --ink-300:#94A3B8;
  --ink-200:#CBD5E1;
  --ink-100:#E2E8F0;
  --ink-50: #F1F5F9;

  --blue-900:#062A55;
  --blue-800:#083F7C;
  --blue-700:#0A4A8F;   /* primary */
  --blue-600:#0E5FB3;
  --blue-500:#1F7AD4;
  --blue-400:#3F95E8;
  --blue-100:#DCEBFA;
  --blue-50: #EEF6FF;

  --cyan-500:#0EA5E9;
  --cyan-400:#22B8E6;

  --mint-500:#10B981;
  --rose-500:#E11D48;
  --amber-500:#F59E0B;

  --bg:      #FFFFFF;
  --bg-soft: #F4F8FD;
  --bg-tint: #EAF2FB;
  --card:    #FFFFFF;
  --border:  #E5EDF6;
  --border-strong:#D2DEED;

  --shadow-sm:  0 1px 2px rgba(11,46,92,.06);
  --shadow:     0 6px 22px rgba(11,46,92,.07), 0 1px 2px rgba(11,46,92,.05);
  --shadow-lg:  0 24px 48px -16px rgba(11,46,92,.18), 0 6px 16px rgba(11,46,92,.06);
  --shadow-blue:0 18px 38px -14px rgba(14,95,179,.45);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;

  --font-display: "Bricolage Grotesque","SF Pro Display",ui-sans-serif,system-ui,sans-serif;
  --font-body:    "Manrope","SF Pro Text",ui-sans-serif,system-ui,sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-800);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto;}
a{color:var(--blue-700); text-decoration:none; transition:color .25s var(--ease);}
a:hover{color:var(--blue-500);}
::selection{background:var(--blue-100); color:var(--blue-900);}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--ink-900); margin:0 0 .6em; line-height:1.15; letter-spacing:-.01em; font-weight:700;}
h1{font-size:clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing:-.02em; font-weight:800;}
h2{font-size:clamp(1.55rem, 2.6vw, 2.25rem); letter-spacing:-.015em;}
h3{font-size:1.3rem;}
h4{font-size:1.05rem;}
p{margin:0 0 1em;}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}

button{font-family:inherit;}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--blue-700); color:#fff; padding:10px 16px; z-index:9999;}
.skip-link:focus{left:8px; top:8px;}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem;
  border-radius:var(--radius-pill);
  font-weight:600; font-size:.96rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--blue-700); color:#fff; box-shadow:var(--shadow-blue);}
.btn--primary:hover{background:var(--blue-600); color:#fff; transform:translateY(-1px);}
.btn--ghost{background:transparent; color:var(--blue-700); border-color:var(--border-strong);}
.btn--ghost:hover{background:var(--blue-50); border-color:var(--blue-400);}
.btn--light{background:#fff; color:var(--blue-700); border-color:#fff;}
.btn--light:hover{transform:translateY(-1px); background:var(--blue-50);}
.btn--sm{padding:.55rem 1rem; font-size:.88rem;}
.btn--lg{padding:1.05rem 1.7rem; font-size:1.02rem;}
.btn--block{width:100%; justify-content:center;}
.btn svg{width:18px; height:18px;}

.iconbtn{
  width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--ink-800);
  cursor:pointer; transition:.25s var(--ease);
}
.iconbtn:hover{background:var(--blue-50); color:var(--blue-700);}
.iconbtn svg{width:22px; height:22px;}
.iconbtn--menu{display:none;}

/* =========================================================
   4. TOPBAR + STICKY HEADER
   ========================================================= */
.topbar{background:var(--blue-900); color:#cfe1f7; font-size:.84rem;}
.topbar__inner{display:flex; gap:1.4rem; padding:8px var(--gutter); flex-wrap:wrap;}
.topbar a{color:#cfe1f7;}
.topbar a:hover{color:#fff;}
.topbar__item{display:inline-flex; align-items:center; gap:.45rem;}
.topbar__item--right{margin-left:auto;}
.topbar__item svg{width:14px; height:14px; opacity:.8;}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid rgba(220,232,247,.85);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{background:rgba(255,255,255,.92); box-shadow:0 2px 24px rgba(11,46,92,.08);}
.site-header__inner{display:flex; align-items:center; gap:1.2rem; height:var(--header-h);}

.brand{display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.01em; color:var(--ink-900);}
.brand:hover{color:var(--ink-900);}
.brand__text span{color:var(--blue-700);}
.brand--sm{font-size:1rem;}
.brand--footer{color:#fff;}
.brand--footer span{color:var(--cyan-400);}

.primary-nav{margin-left:1rem;}
.primary-nav ul{display:flex; gap:.4rem; list-style:none; padding:0; margin:0;}
.primary-nav > ul > li > a{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.6rem .9rem; border-radius:10px;
  color:var(--ink-700); font-weight:600; font-size:.95rem;
  position:relative;
}
.primary-nav a:hover{background:var(--blue-50); color:var(--blue-700);}
.primary-nav a.is-active{color:var(--blue-700);}
.primary-nav a.is-active::after{content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--blue-700); border-radius:2px;}
.caret{width:14px !important; height:14px !important; transition:transform .2s var(--ease);}
.has-mega:hover .caret{transform:rotate(180deg);}

.header-actions{margin-left:auto; display:flex; align-items:center; gap:.6rem;}
.header-cta{display:inline-flex;}

/* MEGA MENU */
.has-mega{position:static;}
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.has-mega:hover .mega, .has-mega:focus-within .mega{opacity:1; pointer-events:auto; transform:translateY(0);}
.mega__inner{max-width:var(--container); margin:0 auto; padding:28px var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:18px 32px;}
.mega ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
.mega a{display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:10px; color:var(--ink-700); font-size:.92rem;}
.mega a:hover{background:var(--blue-50); color:var(--blue-700);}
.mega svg{width:16px; height:16px; color:var(--blue-700);}
.mega--narrow .mega__inner--narrow{grid-template-columns:1fr; max-width:380px; margin-left:auto;}
.mega--narrow a{padding:.8rem .9rem; align-items:flex-start;}
.mega--narrow strong{display:block; color:var(--ink-900);}
.mega__sub{display:block; font-size:.8rem; color:var(--ink-500); margin-top:2px;}

.searchbar{border-top:1px solid var(--border); background:#fff; padding:14px 0;}
.searchbar__form{display:flex; gap:.6rem; align-items:center; background:var(--bg-soft); padding:.4rem; border-radius:var(--radius-pill); border:1px solid var(--border);}
.searchbar__form > svg{width:20px; height:20px; color:var(--ink-400); margin-left:.6rem;}
.searchbar__form input[type="search"]{flex:1; border:0; background:transparent; padding:.85rem .4rem; font-size:1rem; outline:none; color:var(--ink-900);}
.searchbar__form select{background:transparent; border:0; padding:.6rem .8rem; color:var(--ink-700); outline:none; font-family:inherit;}

/* MOBILE DRAWER */
.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
  background:#fff; z-index:200; transform:translateX(100%);
  transition:transform .35s var(--ease);
  box-shadow:-12px 0 40px rgba(7,18,41,.18);
  display:flex; flex-direction:column;
}
.mobile-drawer.is-open{transform:translateX(0);}
.mobile-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border);}
.mobile-drawer__nav{padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;}
.mobile-drawer__nav a{padding:14px 12px; border-radius:12px; color:var(--ink-800); font-weight:600;}
.mobile-drawer__nav a:hover{background:var(--blue-50);}
.mobile-drawer__nav details summary{padding:14px 12px; cursor:pointer; border-radius:12px; font-weight:600; list-style:none;}
.mobile-drawer__nav details summary::after{content:"+"; float:right; color:var(--blue-700);}
.mobile-drawer__nav details[open] summary::after{content:"–";}
.mobile-drawer__sub{display:flex; flex-direction:column; padding-left:10px; border-left:2px solid var(--blue-100); margin-left:12px;}
.mobile-drawer__sub a{padding:10px 12px; font-weight:500; color:var(--ink-700);}
.mobile-drawer__cta{margin-top:8px; justify-content:center;}
.backdrop{position:fixed; inset:0; background:rgba(7,18,41,.4); z-index:150;}

/* BREADCRUMB */
.breadcrumb{background:var(--bg-soft); border-bottom:1px solid var(--border); font-size:.86rem;}
.breadcrumb ol{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:14px 0; margin:0; list-style:none; color:var(--ink-500);}
.breadcrumb a{color:var(--ink-600); color:var(--ink-500);}
.breadcrumb a:hover{color:var(--blue-700);}
.breadcrumb [aria-current="page"]{color:var(--ink-800); font-weight:600;}
.breadcrumb svg{width:14px; height:14px; opacity:.5;}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:90px 0 110px;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(34,184,230,.18), transparent 60%),
    radial-gradient(700px 600px at 110% 10%, rgba(10,74,143,.18), transparent 60%),
    linear-gradient(180deg, #F4F9FE 0%, #FFFFFF 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(10,74,143,.07) 1px, transparent 1px);
  background-size:22px 22px; mask-image:linear-gradient(180deg,#000 50%,transparent);
}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; position:relative;}
.hero__badge{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); font-size:.83rem; color:var(--ink-700); box-shadow:var(--shadow-sm);}
.hero__badge .dot{width:8px; height:8px; border-radius:50%; background:var(--mint-500); box-shadow:0 0 0 3px rgba(16,185,129,.18);}
.hero h1{margin-top:18px;}
.hero h1 em{font-style:normal; background:linear-gradient(120deg, var(--blue-700), var(--cyan-500)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero__lead{font-size:1.12rem; color:var(--ink-500); max-width:540px;}
.hero__stats{display:flex; gap:32px; margin-top:30px;}
.hero__stats div strong{font-family:var(--font-display); font-size:1.6rem; color:var(--ink-900); display:block; line-height:1;}
.hero__stats div span{font-size:.85rem; color:var(--ink-500);}
.hero__search{margin-top:32px; background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-lg); padding:14px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:center;}
.hero__search .field{display:flex; align-items:center; gap:.5rem; padding:12px 14px; border-radius:14px; background:var(--bg-soft);}
.hero__search .field input, .hero__search .field select{border:0; background:transparent; outline:none; width:100%; font:inherit; color:var(--ink-900);}
.hero__search .field svg{width:18px; height:18px; color:var(--blue-700);}
.hero__chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.chip{display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .85rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); font-size:.84rem; color:var(--ink-700); transition:.25s var(--ease);}
.chip:hover{border-color:var(--blue-400); color:var(--blue-700); transform:translateY(-1px);}
.chip svg{width:14px; height:14px; color:var(--blue-700);}

/* hero visual */
.hero__visual{position:relative; min-height:420px;}
.hero__card{
  position:absolute; background:#fff; border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
  padding:18px;
}
.hero__card--main{top:40px; right:20px; width:280px;}
.hero__card--doctor{top:280px; right:230px; width:240px; transform:rotate(-3deg);}
.hero__card--rating{top:0; left:20px; width:200px;}
.hero__card h4{margin:0; font-size:1rem;}
.hero__card .muted{color:var(--ink-500); font-size:.85rem;}
.hero__avatar{width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg, var(--blue-700), var(--cyan-500)); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-display); font-size:1.3rem;}
.hero__row{display:flex; align-items:center; gap:12px;}
.hero__row + .hero__row{margin-top:10px;}
.hero__pill{display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .6rem; background:var(--blue-50); color:var(--blue-700); border-radius:var(--radius-pill); font-size:.74rem; font-weight:600;}
.hero__rating{font-size:1.6rem; font-family:var(--font-display); font-weight:800; color:var(--ink-900);}

/* =========================================================
   6. SECTION HELPERS
   ========================================================= */
.section{padding:80px 0;}
.section--tight{padding:54px 0;}
.section--soft{background:var(--bg-soft);}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px;}
.section__head h2{margin:0;}
.section__head p{color:var(--ink-500); margin:6px 0 0; max-width:620px;}
.section__head .btn{flex-shrink:0;}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-700); margin-bottom:10px;}

/* =========================================================
   7. CARD GRIDS (departments, doctors, hospitals, cities)
   ========================================================= */
.grid{display:grid; gap:22px;}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--auto-220{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.grid--auto-280{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

/* Department card */
.dept-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 20px; display:flex; gap:14px; align-items:flex-start;
  transition:.3s var(--ease);
  position:relative; overflow:hidden;
}
.dept-card::after{
  content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px;
  background:radial-gradient(circle, rgba(10,74,143,.06), transparent 70%);
}
.dept-card:hover{transform:translateY(-3px); border-color:var(--blue-400); box-shadow:var(--shadow);}
.dept-card__icon{
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg, var(--blue-50), var(--blue-100));
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--blue-700); flex-shrink:0;
}
.dept-card__icon svg{width:22px; height:22px;}
.dept-card h3{margin:0 0 4px; font-size:1.05rem; color:var(--ink-900);}
.dept-card p{margin:0; font-size:.86rem; color:var(--ink-500); line-height:1.45;}
.dept-card .arr{position:absolute; right:18px; top:22px; color:var(--ink-300); transition:.25s var(--ease);}
.dept-card:hover .arr{color:var(--blue-700); transform:translateX(4px);}

/* Doctor card */
.doc-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:.3s var(--ease); position:relative;
}
.doc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent;}
.doc-card__media{
  height:160px; position:relative;
  background:linear-gradient(135deg, #DCEBFA 0%, #EAF6FF 100%);
  display:flex; align-items:flex-end; justify-content:center;
}
.doc-card__media::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(10,74,143,.1) 1px, transparent 1px);
  background-size:14px 14px;
}
.doc-card__avatar{
  width:92px; height:92px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-700), var(--cyan-500));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:2rem;
  border:5px solid #fff; box-shadow:var(--shadow-blue);
  transform:translateY(50%);
  position:relative; z-index:1;
}
.doc-card__body{padding:54px 20px 20px; text-align:center;}
.doc-card__body h3{font-size:1.08rem; margin:0;}
.doc-card__qual{font-size:.82rem; color:var(--ink-400); margin:2px 0 8px;}
.doc-card__spec{display:inline-block; font-size:.78rem; color:var(--blue-700); background:var(--blue-50); padding:.3rem .7rem; border-radius:var(--radius-pill); font-weight:600;}
.doc-card__meta{display:flex; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-strong); font-size:.84rem; color:var(--ink-500);}
.doc-card__meta strong{color:var(--ink-900); display:block;}
.doc-card__meta > div{min-width:0;}
.doc-card__meta > div > *{display:block;}
.doc-card__meta > div .rating{display:inline-flex; line-height:1;}
.doc-card__cta{margin-top:14px; display:flex; gap:8px;}
.doc-card__cta .btn{flex:1; justify-content:center; padding:.6rem .8rem; font-size:.85rem;}

.rating{display:inline-flex; align-items:center; gap:.3rem; color:var(--amber-500); font-weight:700; font-size:.85rem;}
.rating svg{width:14px; height:14px; fill:currentColor;}
.rating .count{color:var(--ink-400); font-weight:500;}

/* Hospital card */
.hosp-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:.3s var(--ease);
}
.hosp-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.hosp-card__media{
  height:170px; position:relative;
  background:linear-gradient(120deg, var(--blue-700), var(--cyan-500));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.hosp-card__media svg{width:64px; height:64px; opacity:.95;}
.hosp-card__media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 90%, rgba(255,255,255,.18), transparent 50%);
}
.hosp-card__city{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.95); color:var(--blue-700); padding:.3rem .7rem; border-radius:var(--radius-pill); font-size:.74rem; font-weight:700;}
.hosp-card__body{padding:18px 20px 20px;}
.hosp-card h3{margin:0 0 4px; font-size:1.08rem;}
.hosp-card__addr{font-size:.84rem; color:var(--ink-500); display:flex; align-items:center; gap:.3rem;}
.hosp-card__addr svg{width:14px; height:14px;}
.hosp-card__tags{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 14px;}
.hosp-card__tags span{font-size:.74rem; padding:.25rem .55rem; background:var(--blue-50); color:var(--blue-700); border-radius:var(--radius-pill); font-weight:600;}
.hosp-card__foot{display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px dashed var(--border-strong);}
.hosp-card__foot a{font-size:.85rem; font-weight:600;}

/* City card */
.city-card{
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  background:linear-gradient(160deg, var(--blue-800), var(--blue-700));
  color:#fff; padding:32px; min-height:260px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:.35s var(--ease);
}
.city-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-blue);}
.city-card--mohali{background:linear-gradient(160deg, #093E78, #0B66B7);}
.city-card--panchkula{background:linear-gradient(160deg, #07315F, #1A8DD0);}
.city-card h3{color:#fff; font-size:1.9rem; margin:0;}
.city-card p{color:rgba(255,255,255,.85); max-width:300px;}
.city-card__stats{display:flex; gap:20px; font-size:.85rem;}
.city-card__stats strong{display:block; font-family:var(--font-display); font-size:1.4rem; color:#fff;}
.city-card__cta{display:inline-flex; align-items:center; gap:.4rem; color:#fff; font-weight:600;}
.city-card__cta:hover{color:#fff;}
.city-card::before{
  content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,255,255,.15), transparent 60%);
  pointer-events:none;
}

/* =========================================================
   8. ARTICLES / FAQ / TESTIMONIALS
   ========================================================= */
.article-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; transition:.3s var(--ease);
}
.article-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.article-card__media{height:170px; background:linear-gradient(135deg, var(--blue-50), var(--blue-100)); position:relative; display:flex; align-items:center; justify-content:center; color:var(--blue-700);}
.article-card__media svg{width:54px; height:54px; opacity:.8;}
.article-card__body{padding:18px 20px;}
.article-card__cat{font-size:.74rem; font-weight:700; color:var(--blue-700); text-transform:uppercase; letter-spacing:.1em;}
.article-card h3{font-size:1.1rem; margin:8px 0 6px;}
.article-card__meta{font-size:.82rem; color:var(--ink-400);}

.faq{display:flex; flex-direction:column; gap:12px;}
.faq details{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; transition:.3s var(--ease);}
.faq details[open]{border-color:var(--blue-400); box-shadow:var(--shadow);}
.faq summary{cursor:pointer; list-style:none; font-weight:700; color:var(--ink-900); display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.faq summary::after{content:"+"; color:var(--blue-700); font-size:1.3rem; transition:transform .3s var(--ease);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary::-webkit-details-marker{display:none;}
.faq details > p{margin-top:12px; color:var(--ink-500);}

.testi{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px; position:relative;
}
.testi__quote{font-family:var(--font-display); font-size:3.6rem; color:var(--blue-100); line-height:1; position:absolute; top:14px; right:18px;}
.testi__text{color:var(--ink-700); font-size:1.02rem;}
.testi__author{display:flex; align-items:center; gap:12px; margin-top:18px;}
.testi__author .hero__avatar{width:44px; height:44px; font-size:1.1rem;}
.testi__author strong{display:block;}
.testi__author span{font-size:.84rem; color:var(--ink-500);}

/* =========================================================
   9. NEWSLETTER + FOOTER
   ========================================================= */
.newsletter{
  background:linear-gradient(120deg, var(--blue-700), var(--blue-800));
  color:#fff; padding:50px 0;
  position:relative; overflow:hidden;
}
.newsletter::before{
  content:""; position:absolute; right:-60px; bottom:-100px; width:340px; height:340px;
  background:radial-gradient(circle, rgba(34,184,230,.3), transparent 60%);
}
.newsletter__inner{display:flex; gap:30px; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.newsletter h3{color:#fff; margin:0; font-size:1.6rem;}
.newsletter p{margin:6px 0 0; color:rgba(255,255,255,.85);}
.newsletter__form{display:flex; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:6px; border-radius:var(--radius-pill); min-width:380px;}
.newsletter__form input{flex:1; border:0; background:transparent; padding:.85rem 1rem; color:#fff; outline:none; font:inherit;}
.newsletter__form input::placeholder{color:rgba(255,255,255,.7);}
.newsletter__form .btn{background:#fff; color:var(--blue-700);}
.newsletter__form .btn:hover{background:var(--blue-50);}

.site-footer{background:#06224A; color:#cfdcef; padding:64px 0 96px;}
.site-footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:50px;}
.site-footer h4{color:#fff; font-size:1rem; margin-bottom:14px; letter-spacing:.02em;}
.site-footer__h4--mt{margin-top:24px;}
.site-footer__col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.site-footer__col a{color:#9fb4cf;}
.site-footer__col a:hover{color:#fff;}
.two-col{display:grid !important; grid-template-columns:1fr 1fr; gap:8px 16px;}
.site-footer__about{color:#9fb4cf; font-size:.92rem; max-width:340px; margin:12px 0 18px;}
.site-footer__contact{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px; font-size:.9rem;}
.site-footer__contact li{display:flex; align-items:center; gap:.55rem;}
.site-footer__contact svg{width:16px; height:16px; color:var(--cyan-400);}
.site-footer__social{display:flex; gap:10px;}
.site-footer__social a{
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center;
  color:#cfdcef; transition:.25s var(--ease);
}
.site-footer__social a:hover{background:var(--cyan-500); color:#fff; transform:translateY(-2px);}
.site-footer__social svg{width:18px; height:18px;}
.site-footer__bottom{margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:.84rem; color:#90a4c2;}

/* FLOATING BUTTONS */
.floating-actions{
  position:fixed; right:18px; bottom:80px; z-index:60;
  display:flex; flex-direction:column; gap:12px;
}
.fab{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; color:var(--blue-700);
  border-radius:var(--radius-pill);
  padding:.9rem 1.05rem; font-weight:700; font-size:.86rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  transition:.25s var(--ease);
}
.fab:hover{transform:translateX(-4px); color:var(--blue-700);}
.fab svg{width:20px; height:20px;}
.fab--call{background:var(--blue-700); color:#fff; border-color:transparent;}
.fab--call:hover{background:var(--blue-600); color:#fff;}
.fab--whatsapp{background:#25D366; color:#fff; border-color:transparent;}
.fab--whatsapp:hover{background:#1ebd5b; color:#fff;}
.fab--emergency{background:var(--rose-500); color:#fff; border-color:transparent; animation:pulse 2.4s infinite;}
.fab--emergency:hover{background:#be123c; color:#fff;}
.fab__label{display:inline-block;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.35),var(--shadow-lg)} 50%{box-shadow:0 0 0 12px rgba(225,29,72,0),var(--shadow-lg)}}

/* MOBILE BOTTOM BAR */
.mobile-bottombar{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:70;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
  padding:8px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.mobile-bottombar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 2px; font-size:.7rem; color:var(--ink-500); font-weight:600;
}
.mobile-bottombar a svg{width:20px; height:20px;}
.mobile-bottombar a:hover{color:var(--blue-700);}
.mobile-bottombar__cta{position:relative; color:#fff !important;}
.mobile-bottombar__cta::before{content:""; position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; background:var(--blue-700); box-shadow:var(--shadow-blue);}
.mobile-bottombar__cta svg{position:relative; z-index:1; color:#fff;}
.mobile-bottombar__cta span{position:relative; z-index:1; color:var(--ink-500);}

/* =========================================================
   10. DETAIL PAGES (DOCTOR, HOSPITAL)
   ========================================================= */
.profile-hero{
  background:linear-gradient(135deg, #062A55 0%, #0E5FB3 100%);
  color:#fff; padding:60px 0 80px; position:relative; overflow:hidden;
}
.profile-hero::before{
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:24px 24px;
}
.profile-hero__inner{display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center; position:relative;}
.profile-hero__avatar{
  width:148px; height:148px; border-radius:28px;
  background:linear-gradient(135deg, var(--cyan-400), var(--blue-700));
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:3.2rem;
  display:flex; align-items:center; justify-content:center;
  border:5px solid rgba(255,255,255,.18); flex-shrink:0;
}
.profile-hero h1{color:#fff; margin:0 0 8px;}
.profile-hero__qual{color:rgba(255,255,255,.8); font-size:1.05rem;}
.profile-hero__meta{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:.93rem;}
.profile-hero__meta span{display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.92);}
.profile-hero__meta svg{width:16px; height:16px; color:var(--cyan-400);}
.profile-hero__cta{display:flex; flex-direction:column; gap:8px;}

.profile-body{display:grid; grid-template-columns:1fr 320px; gap:40px; padding:60px 0;}
.profile-body__main > section{margin-bottom:42px;}
.profile-body h2{font-size:1.4rem; margin-bottom:14px;}
.profile-body h3{font-size:1.1rem; margin-bottom:10px;}
.profile-body p{color:var(--ink-700);}
.profile-body ul.checklist{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px;}
.profile-body ul.checklist li{display:flex; align-items:flex-start; gap:.5rem; color:var(--ink-700); font-size:.95rem;}
.profile-body ul.checklist li::before{content:""; width:18px; height:18px; border-radius:50%; background:var(--blue-50) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A4A8F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat; flex-shrink:0; margin-top:3px;}

.profile-sidebar{display:flex; flex-direction:column; gap:18px; position:sticky; top:calc(var(--header-h) + 20px); align-self:flex-start;}
.sb-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px;}
.sb-card h4{margin:0 0 12px; font-size:1.02rem;}
.sb-card .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border); font-size:.92rem; color:var(--ink-700);}
.sb-card .row:last-child{border-bottom:0;}
.sb-card .row strong{color:var(--ink-900);}

.kv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.kv{background:var(--bg-soft); border-radius:14px; padding:14px;}
.kv span{display:block; font-size:.8rem; color:var(--ink-500);}
.kv strong{display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--ink-900); margin-top:2px;}

.pill-list{display:flex; flex-wrap:wrap; gap:8px;}
.pill-list span{padding:.45rem .85rem; background:var(--blue-50); color:var(--blue-700); border-radius:var(--radius-pill); font-size:.84rem; font-weight:600;}

.review{padding:18px 0; border-bottom:1px dashed var(--border);}
.review:last-child{border-bottom:0;}
.review__head{display:flex; gap:12px; align-items:center; margin-bottom:8px;}
.review__head .hero__avatar{width:42px; height:42px; font-size:1rem;}
.review__head .who{font-weight:700;}
.review__head .when{font-size:.78rem; color:var(--ink-400);}
.review__rating{margin-left:auto;}

.map-placeholder{
  height:300px; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:
    linear-gradient(135deg, var(--blue-50), #fff),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(10,74,143,.05) 12px 14px);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--blue-700);
}
.map-placeholder svg{width:48px; height:48px;}
.map-placeholder::after{
  content:"Google Map placeholder — embed iframe here";
  position:absolute; bottom:14px; left:14px; right:14px; font-size:.84rem; color:var(--ink-500); text-align:center;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__visual{display:none;}
  .grid--4{grid-template-columns:repeat(3,1fr);}
  .site-footer__grid{grid-template-columns:repeat(2,1fr); gap:36px;}
  .profile-body{grid-template-columns:1fr;}
  .profile-sidebar{position:static;}
}
@media (max-width: 800px){
  .primary-nav{display:none;}
  .iconbtn--menu{display:inline-flex;}
  .header-cta span{display:none;}
  .header-cta{padding:.55rem .8rem;}
  .topbar__item--hide-sm{display:none;}
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr);}
  .hero__search{grid-template-columns:1fr; gap:6px;}
  .hero__stats{flex-wrap:wrap; gap:18px;}
  .profile-hero__inner{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .profile-hero__avatar{margin:0 auto;}
  .profile-body ul.checklist{grid-template-columns:1fr;}
  .kv-grid{grid-template-columns:1fr 1fr;}
  .newsletter__form{min-width:0; width:100%;}
  .mobile-bottombar{display:flex;}
  body{padding-bottom:80px;}
  .floating-actions{bottom:90px; right:12px;}
  .fab__label{display:none;}
  .fab{padding:14px; border-radius:50%; width:52px; height:52px; justify-content:center;}
  .section{padding:54px 0;}
  .hero{padding:60px 0 70px;}
}
@media (max-width: 520px){
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr;}
  .site-footer__grid{grid-template-columns:1fr;}
  .section__head{flex-direction:column; align-items:flex-start;}
}

/* =========================================================
   12. UTILS / ANIMATIONS
   ========================================================= */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.center{text-align:center;}
.mt-0{margin-top:0!important}.mt-2{margin-top:1rem}.mt-4{margin-top:2rem}
.muted{color:var(--ink-500);}
.hide-sm{}
@media (max-width: 800px){.hide-sm{display:none!important}}
.cta-band{
  background:linear-gradient(135deg, #062A55, #0E5FB3);
  color:#fff; border-radius:var(--radius-xl); padding:48px;
  display:flex; gap:30px; justify-content:space-between; align-items:center;
  position:relative; overflow:hidden;
}
.cta-band::after{content:""; position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; background:radial-gradient(circle, rgba(34,184,230,.35), transparent 60%);}
.cta-band h2{color:#fff; margin:0;}
.cta-band p{color:rgba(255,255,255,.85); margin:6px 0 0; max-width:520px;}
.cta-band .btns{display:flex; gap:10px; flex-wrap:wrap;}
@media (max-width: 800px){
  .cta-band{flex-direction:column; align-items:flex-start; padding:32px;}
}