/* ==========================================================================
   Intercare Health Center — stylesheet
   ========================================================================== */

:root{
  --c-primary:#0f8fc4;
  --c-primary-dark:#0b6a94;
  --c-primary-darker:#0a3552;
  --c-primary-light:#e6f5fb;
  --c-accent:#e0793f;
  --c-accent-dark:#c15f29;
  --c-bg:#fbfaf6;
  --c-surface:#ffffff;
  --c-text:#20302d;
  --c-text-muted:#5b6b67;
  --c-border:#e6e2d8;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 10px rgba(15,60,55,.06);
  --shadow-md:0 10px 30px rgba(15,60,55,.10);
  --max:1180px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Fallback reserved space for the fixed header and the slim fixed bottom
     quick-actions bar, corrected precisely by script.js (syncFixedChrome)
     once the page has laid out — keeps each one's own real height, so
     content is never hidden underneath either of them. */
  --header-h:108px;
  --quickbar-h:60px;
}
@media (max-width:860px){
  :root{--header-h:150px;}
}

*,*::before,*::after{box-sizing:border-box;}
svg{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;
  font-family:var(--font);
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* The header is pinned (position:fixed) at the top and the slim
     quick-actions bar is pinned at the bottom — both stay on screen at all
     times while scrolling. This reserves matching space at the start/end
     of the page so content is never hidden underneath either one. */
  padding-top:var(--header-h);
  padding-bottom:var(--quickbar-h);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font);line-height:1.2;margin:0 0 .5em;font-weight:700;color:var(--c-primary-darker);}
p{margin:0 0 1em;color:var(--c-text-muted);}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
section{padding:72px 0;}
.section-tight{padding:48px 0;}

.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-accent-dark);
  background:#fdeee1;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.section-head{max-width:680px;margin:0 0 44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.section-head p{font-size:1.05rem;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:.96rem;
  border:2px solid transparent;cursor:pointer;transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--c-accent);color:#fff;}
.btn-primary:hover{background:var(--c-accent-dark);}
.btn-outline{border-color:rgba(255,255,255,.6);color:#fff;background:transparent;}
.btn-outline:hover{background:rgba(255,255,255,.14);}
.btn-teal{background:var(--c-primary);color:#fff;}
.btn-teal:hover{background:var(--c-primary-dark);}
.btn-ghost{border-color:var(--c-primary);color:var(--c-primary);background:transparent;}
.btn-ghost:hover{background:var(--c-primary-light);}
.btn-sm{padding:9px 18px;font-size:.85rem;}
.btn-block{width:100%;justify-content:center;}

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--c-primary-darker);color:#cfe6e2;font-size:.83rem;
}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;padding-bottom:8px;gap:16px;flex-wrap:wrap;
}
.topbar a{color:#e9f5f3;}
.topbar .topbar-links{display:flex;gap:22px;flex-wrap:wrap;}
.topbar .topbar-links span,.topbar .topbar-links a{display:inline-flex;align-items:center;gap:6px;}
.topbar svg{width:14px;height:14px;flex:none;}
.topbar .social{display:flex;gap:12px;}
.topbar .social a{opacity:.85;}
.topbar .social a:hover{opacity:1;}

/* ---------- Header / Nav ---------- */
header.site-header{
  /* Pinned in place — stays visible on screen at all times while the page
     scrolls (position:fixed is used rather than sticky so this holds even
     inside a scrolling wrapper, e.g. the combined preview's page router). */
  position:fixed;top:0;left:0;right:0;z-index:200;background:#fff;
  border-bottom:1px solid var(--c-border);
}
/* max-width override (Round 20, 2026-09-11): the header row (logo + nav
   links + CTA button) needs ~1205px at full content width on English pages
   (the Arabic labels are shorter and fit within the site-wide 1180px
   --max easily) — 25px more than the shared .container cap allows, which is
   what caused the flex row to overflow/shrink in the first place. Since
   .nav-wrap carries both the shared .container class and its own class on
   the same element, this rule (appearing later in the cascade) wins over
   .container's max-width for the header only, leaving every other section's
   width untouched. */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;max-width:1240px;}
/* flex-shrink:0 (Round 20, 2026-09-11): without this, the nav-wrap flex row
   (logo + nav links + CTA button) can exceed the 1180px container on English
   pages, since the English nav labels ("Insurance", "Patient Center",
   "Request Appointment", etc.) run noticeably longer than their Arabic
   equivalents. Flexbox's default flex-shrink:1 then shrinks ALL three
   children to fit — including the logo — and because .brand-logo has a fixed
   height:38px with width:auto capped by the global img{max-width:100%} rule,
   that shrink squashed only the logo's width while its height stayed pinned,
   visibly distorting/shrinking it on English pages only (Arabic's shorter nav
   text never overflowed, so its logo always rendered at full natural size).
   Pinning the logo lets the nav links and CTA button — which can absorb a
   few px of tightened spacing far less noticeably — take up any squeeze
   instead. */
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.18rem;color:var(--c-primary-darker);flex-shrink:0;}
.brand-logo{height:38px;width:auto;display:block;flex-shrink:0;}
.footer-brand-logo{background:#fff;padding:10px 18px;border-radius:12px;display:inline-flex;margin-bottom:16px;}
.footer-brand-logo .brand-logo{height:32px;}

/* Direct-child combinator only — a plain descendant selector here also
   matches the nested .nav-dropdown <ul>, forcing it to align-items:center
   (shrink-wrapping + centering each item) instead of the start-aligned,
   full-width stretch .nav-dropdown defines for itself below. */
nav.main-nav>ul{display:flex;gap:0;align-items:center;}
nav.main-nav a{
  padding:10px 11px;border-radius:8px;font-weight:600;font-size:.87rem;color:var(--c-text);
  white-space:nowrap;transition:background .15s,color .15s;
}
nav.main-nav a:hover{background:var(--c-primary-light);color:var(--c-primary-dark);}
nav.main-nav a.active{color:var(--c-primary);background:var(--c-primary-light);}

.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;
}
.nav-toggle span{width:24px;height:2px;background:var(--c-primary-darker);border-radius:2px;}

/* ---------- Nav dropdowns ("Services" / "Our Team") ----------
   Desktop: a small caret sits beside the link; the submenu reveals on
   hover or keyboard focus (:focus-within), and also toggles via the
   caret button/JS so it works the same way without a mouse. Positioned
   with logical properties so it mirrors automatically in Arabic RTL. */
.nav-item.has-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;margin-inline-start:-4px;flex:none;
  background:none;border:none;cursor:pointer;color:var(--c-text-muted);
  border-radius:6px;transition:transform .15s ease,background .15s ease,color .15s ease;
}
.nav-dropdown-toggle svg{width:13px;height:13px;}
.nav-dropdown-toggle:hover{background:var(--c-primary-light);color:var(--c-primary-dark);}
.nav-item.has-dropdown:hover .nav-dropdown-toggle,
.nav-item.has-dropdown:focus-within .nav-dropdown-toggle,
.nav-item.has-dropdown.open .nav-dropdown-toggle{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute;top:100%;inset-inline-start:0;margin-top:6px;
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  padding:8px;min-width:250px;display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:210;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown,
.nav-item.has-dropdown.open .nav-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-dropdown a{padding:10px 12px;border-radius:7px;font-size:.85rem;white-space:normal;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(120deg,var(--c-primary-darker),var(--c-primary) 65%);
  color:#fff;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.10),transparent 45%),
             radial-gradient(circle at 8% 90%,rgba(224,121,63,.25),transparent 40%);
  pointer-events:none;
}
.hero .container{position:relative;padding-top:88px;padding-bottom:88px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.2vw,3.4rem);margin-bottom:.4em;}
.hero .lede{color:#dcefec;font-size:1.15rem;max-width:520px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.hero-stats{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap;}
.hero-stats div strong{display:block;font-size:1.5rem;color:#fff;}
.hero-stats div span{font-size:.82rem;color:#bfe0da;}
.hero-card{
  background:#fff;border-radius:var(--radius-lg);padding:28px;color:var(--c-text);
  box-shadow:var(--shadow-md);
}
.hero-card h3{font-size:1.05rem;margin-bottom:14px;}
.hero-card ul li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--c-border);font-size:.92rem;color:var(--c-text-muted);}
.hero-card ul li:last-child{border-bottom:none;}
.hero-card ul li svg{width:18px;height:18px;color:var(--c-primary);flex:none;margin-top:2px;}

.page-hero{
  background:linear-gradient(120deg,var(--c-primary-darker),var(--c-primary) 75%);
  color:#fff;padding:56px 0 64px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.12),transparent 40%);
}
.page-hero .container{position:relative;}
.page-hero .eyebrow{background:rgba(255,255,255,.16);color:#fff;}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.3em;}
.page-hero p{color:#dcefec;max-width:640px;font-size:1.05rem;margin-bottom:0;}
.breadcrumb{font-size:.85rem;color:#bfe0da;margin-bottom:16px;}
.breadcrumb a{color:#eafaf7;font-weight:600;}
.breadcrumb span{opacity:.6;margin:0 6px;}

/* ---------- Cards / Grids ---------- */
.grid{display:grid;gap:26px;}
/* minmax(0,1fr), not a bare 1fr (shorthand for minmax(auto,1fr)) — a plain
   1fr won't shrink a column past its content's min-content width, so a
   card with enough text in it can force the whole grid wider than its
   container on a narrow phone. Round 35: caught this overflowing the
   5-across "Our core values" grid once it dropped to 2 columns below
   860px. minmax(0,1fr) keeps the equal-width behavior everywhere there's
   room, and only kicks in as a safety net when there isn't. */
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr));}

.card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.icon-badge{
  width:52px;height:52px;border-radius:14px;background:var(--c-primary-light);color:var(--c-primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.icon-badge svg{width:26px;height:26px;}
.card h3{font-size:1.12rem;margin-bottom:10px;}
.card p{font-size:.93rem;margin-bottom:14px;}
.card .card-link{font-weight:700;color:var(--c-primary);font-size:.88rem;display:inline-flex;align-items:center;gap:6px;}
.card .card-link svg{width:15px;height:15px;}

.service-card{
  display:flex;flex-direction:column;height:100%;
}

/* Wide service card (Round 31) — spans every column of the grid it sits in,
   for a service that doesn't fit the same card shape as the rest (e.g. a
   cross-department offering like In-School Services), rather than leaving
   it as a lone orphan card at the end of an odd-numbered grid. */
.service-card-wide{
  grid-column:1/-1;flex-direction:row;align-items:center;gap:28px;
}
.service-card-wide .icon-badge{margin-bottom:0;flex:none;}
.service-card-wide .card-link{margin-top:0!important;flex:none;white-space:nowrap;}

/* Video / recording cards */
.video-card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;
  display:flex;flex-direction:column;height:100%;
}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-primary-darker);display:block;}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease;}
.video-card:hover .video-thumb img{transform:scale(1.04);}
.video-duration{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;
  font-size:.72rem;font-weight:700;padding:3px 7px;border-radius:5px;letter-spacing:.02em;
}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,20,25,.06);transition:background .15s;}
.video-card:hover .video-play{background:rgba(10,20,25,.22);}
.video-play-icon{
  width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;color:var(--c-primary);box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.video-play-icon svg{width:19px;height:19px;margin-left:3px;}
.video-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.video-body h3{font-size:.98rem;line-height:1.4;margin:0;}
.video-meta{font-size:.82rem;color:var(--c-text-muted);margin:0 0 auto;}
.video-body .card-link{margin-top:10px;}

/* Event photo gallery */
.event-photo{
  position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);display:block;background:var(--c-primary-darker);
}
.event-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.event-photo:hover img{transform:scale(1.05);}
.event-photo .event-photo-caption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(to top,rgba(10,20,25,.78),rgba(10,20,25,0));
  color:#fff;font-size:.82rem;font-weight:600;line-height:1.35;
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;
}
.event-photo:hover .event-photo-caption{opacity:1;transform:translateY(0);}

/* Values */
.value-card{text-align:center;padding:26px 18px;}
.value-card .icon-badge{margin:0 auto 16px;}

/* Team */
.team-member{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);
  padding:20px;display:flex;gap:14px;align-items:center;
}
.team-avatar{
  width:52px;height:52px;border-radius:50%;background:var(--c-primary-light);color:var(--c-primary);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex:none;
}
.team-member h4{font-size:.97rem;margin:0 0 3px;color:var(--c-text);}
.team-member span{font-size:.82rem;color:var(--c-text-muted);}
.team-member .team-avatar-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;display:block;}
.dept-block{margin-bottom:52px;}
.dept-block-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.dept-block-head h2{margin:0;font-size:1.4rem;}
.dept-count{font-size:.82rem;color:var(--c-text-muted);background:var(--c-primary-light);padding:5px 14px;border-radius:999px;font-weight:600;}

/* Rich team profile cards (Team page) */
.team-profile-card{
  display:flex;gap:20px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);
  padding:24px;box-shadow:var(--shadow-sm);height:100%;
}
.tpc-photo{
  width:104px;height:104px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--c-primary-light);color:var(--c-primary);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;
}
.tpc-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.tpc-body{min-width:0;}
.tpc-body h3{margin:0 0 2px;font-size:1.05rem;}
.tpc-title{display:block;color:var(--c-primary-dark);font-weight:600;font-size:.85rem;margin-bottom:10px;}
.tpc-meta{display:flex;flex-wrap:wrap;gap:7px 18px;margin-bottom:12px;}
.tpc-meta-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--c-text-muted);}
.tpc-meta-item svg{width:14px;height:14px;flex:none;color:var(--c-primary);}
.tpc-bio{font-size:.87rem;line-height:1.65;color:var(--c-text);margin:0;}
.tpc-bio + .tpc-bio{margin-top:10px;}
.tpc-whatsapp{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:8px 14px;
  border-radius:999px;background:#e8f8ee;color:#0f8a3d;font-weight:700;font-size:.8rem;
  transition:background .15s ease;
}
.tpc-whatsapp svg{width:15px;height:15px;flex:none;}
.tpc-whatsapp:hover{background:#d8f3e1;}
@media (max-width:560px){
  .team-profile-card{flex-direction:column;padding:20px;}
  .tpc-photo{width:88px;height:88px;}
}

/* Alternating bands */
.band-light{background:var(--c-surface);}
.band-tint{background:var(--c-primary-light);}
.band-dark{background:var(--c-primary-darker);color:#dcefec;}
.band-dark h2,.band-dark h3,.band-dark h4{color:#fff;}
.band-dark p{color:#bcd9d3;}

/* Chips */
.chip-list{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  background:var(--c-primary-light);color:var(--c-primary-dark);font-weight:600;font-size:.85rem;
  padding:8px 16px;border-radius:999px;
}
.chip-outline{background:transparent;border:1.5px solid var(--c-border);color:var(--c-text-muted);}

/* Two column content */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.reverse .split-media{order:2;}
.media-panel{
  background:var(--c-primary-light);border-radius:var(--radius-lg);padding:34px;height:100%;
}
.check-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;}
.check-list svg{width:19px;height:19px;color:var(--c-primary);flex:none;margin-top:2px;}
.check-list li span{color:var(--c-text);font-weight:500;}

/* Vision statement — a single prominent line, not a checklist item */
.vision-statement{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--c-primary-light);border-radius:var(--radius-md);
  border-inline-start:4px solid var(--c-accent);
  padding:22px 26px;margin:24px 0;
}
.vision-statement .icon-badge{margin-bottom:0;background:#fff;flex:none;}
.vision-statement-text .eyebrow{background:transparent;padding:0;color:var(--c-accent-dark);margin-bottom:6px;}
.vision-statement-text p{
  margin:0;font-size:1.3rem;line-height:1.4;font-weight:700;
  color:var(--c-primary-darker);
}
@media (max-width:640px){
  .vision-statement-text p{font-size:1.1rem;}
}

/* CTA banner */
.cta-banner{
  background:linear-gradient(120deg,var(--c-primary),var(--c-primary-dark));
  border-radius:var(--radius-lg);color:#fff;padding:48px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-banner h3{color:#fff;font-size:1.5rem;margin-bottom:6px;}
.cta-banner p{color:#d7ede9;margin:0;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* Tables/lists for insurance & patient center */
.info-list{display:grid;gap:16px;}
.info-list .info-item{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);
  padding:20px 22px;
}
.info-item h4{font-size:1rem;margin-bottom:6px;color:var(--c-primary-dark);}
.info-item p{margin:0;font-size:.92rem;}

.two-col-list{columns:2;column-gap:40px;}
.two-col-list li{break-inside:avoid;padding:7px 0;font-size:.93rem;color:var(--c-text-muted);display:flex;gap:8px;}
.two-col-list li svg{width:16px;height:16px;color:var(--c-primary);flex:none;margin-top:3px;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;}
.contact-detail{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--c-border);}
.contact-detail:last-child{border-bottom:none;}
.contact-detail .icon-badge{margin-bottom:0;}
.contact-detail h4{font-size:.95rem;margin-bottom:3px;}
.contact-detail p{margin:0;font-size:.92rem;}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--c-border);margin-top:22px;box-shadow:var(--shadow-sm);}
.map-frame iframe{width:100%;height:280px;border:0;display:block;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--c-text);}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--c-border);
  font-family:var(--font);font-size:.94rem;background:#fff;color:var(--c-text);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-primary);}
.form-note{font-size:.8rem;color:var(--c-text-muted);margin-top:10px;}
.form-success{
  display:none;background:var(--c-primary-light);color:var(--c-primary-dark);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:.9rem;font-weight:600;margin-top:16px;
}

/* Accordion (patient rights) */
.accordion-item{border:1px solid var(--c-border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;background:#fff;}
.accordion-trigger{
  width:100%;text-align:left;padding:18px 22px;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1rem;color:var(--c-primary-darker);
  font-family:var(--font);
}
.accordion-trigger svg{width:18px;height:18px;color:var(--c-primary);transition:transform .2s ease;flex:none;}
.accordion-item.open .accordion-trigger svg{transform:rotate(180deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.accordion-panel-inner{padding:0 22px 20px;}
.accordion-panel-inner ul li{display:flex;gap:10px;padding:6px 0;font-size:.92rem;color:var(--c-text-muted);}
.accordion-panel-inner ul li svg{width:16px;height:16px;color:var(--c-primary);flex:none;margin-top:4px;}

/* Blog empty state */
.empty-state{
  text-align:center;padding:70px 24px;background:var(--c-surface);border:1px dashed var(--c-border);border-radius:var(--radius-lg);
}
.empty-state .icon-badge{margin:0 auto 20px;width:64px;height:64px;}
.empty-state .icon-badge svg{width:32px;height:32px;}

/* Legal */
.legal h2{font-size:1.2rem;margin-top:2em;}
.legal p,.legal li{color:var(--c-text-muted);font-size:.94rem;}
.legal ul{padding-left:1.2em;list-style:disc;}
.legal ul li{margin-bottom:.4em;}

/* Footer */
footer.site-footer{
  /* Back in the normal page flow — appears once, at the very end of the
     page, like a regular footer. The slim .quick-bar (below) is what stays
     pinned on screen at all times; a full multi-column footer pinned for
     the whole scroll took up too much of the screen, especially on phones. */
  background:var(--c-primary-darker);color:#bcd9d3;padding-top:64px;
}
.footer-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr 1fr .95fr;gap:32px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand .brand-mark{background:rgba(255,255,255,.14);}
.footer-grid p{color:#a9cac4;font-size:.9rem;}
.footer-grid h4{color:#fff;font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul a{color:#bcd9d3;font-size:.92rem;}
.footer-grid ul a:hover{color:#fff;}
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;
  justify-content:center;transition:background .15s;
}
.footer-social a:hover{background:var(--c-accent);}
.footer-social svg{width:17px;height:17px;color:#fff;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.82rem;color:#8fb5ae;
  flex-wrap:wrap;gap:10px;
}
.footer-bottom a{color:#a9cac4;}
.footer-bottom a:hover{color:#fff;}
.footer-bottom-links{display:flex;gap:18px;}

/* ---------- Regulatory / compliance badges ---------- */
.footer-compliance{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.footer-compliance img{height:34px;width:auto;background:#fff;border-radius:8px;padding:5px 10px;display:block;flex:none;}
.license-badge{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap;}
.license-badge img{height:110px;width:auto;background:#fff;border-radius:10px;padding:10px 16px;border:1px solid var(--c-border);flex:none;}

/* ---------- Insurance provider logo grid ---------- */
.insurer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
.insurer-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-md);
  padding:18px;display:flex;align-items:center;justify-content:center;height:96px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.insurer-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.insurer-card img{max-height:56px;max-width:100%;width:auto;object-fit:contain;}
@media (max-width:860px){
  .insurer-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .insurer-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .insurer-card{height:76px;padding:12px;}
  .insurer-card img{max-height:40px;}
}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .split .split-media{order:-1;}
  .contact-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
/* Round 37 fix: below 1230px — the width at which .nav-wrap's own widened
   max-width (Round 20) guarantees the full desktop nav row has room to
   fit — the header didn't have enough space for the full inline nav
   links row *plus* the language switch, the Request Appointment button,
   and the hamburger. Between roughly 900px and 1230px this pushed the
   Request Appointment button half or fully off the visible header — off
   the right edge in English, off the left edge in Arabic (RTL) — which
   was flagged as a known, unfixed edge case back in Round 20 and
   confirmed again (and asked to be fixed) in Round 37. The fix: move the
   nav's collapse-to-hamburger breakpoint out from 860px to 1230px, so
   the full inline nav-links row — the actual thing competing for space
   — is gone throughout this whole range. With just the logo, language
   switch, CTA button and hamburger left to fit, there's comfortable room
   at any width down to where the Round 35 phone-width fix already takes
   over at 860px. The @media(max-width:860px) block below still owns
   everything phone-specific: the extra spacing compacting, and the
   page's own grid/hero/footer/form layout changes. */
@media (max-width:1230px){
  nav.main-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;padding:20px 24px;display:none;
    flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--header-h) - var(--quickbar-h));border-top:1px solid var(--c-border);
    box-shadow:0 12px 24px rgba(15,60,55,.12);
    z-index:160; /* stay above the pinned quick-actions bar so every link is reachable */
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav>ul{flex-direction:column;align-items:stretch;gap:4px;}
  nav.main-nav a{padding:14px 8px;font-size:1.02rem;}
  .nav-toggle{display:flex;}

  /* Dropdown becomes an inline expandable list — hover doesn't exist on
     touch/tablet, so the caret button (JS-driven, see script.js) is what
     opens it here; the height is set from the panel's real scrollHeight
     rather than a guessed value, same pattern as the accordion component. */
  .nav-item.has-dropdown{flex-direction:column;align-items:stretch;position:relative;}
  .nav-dropdown-toggle{
    position:absolute;inset-inline-end:2px;top:2px;width:44px;height:44px;margin:0;
  }
  .nav-dropdown-toggle svg{width:16px;height:16px;}
  .nav-dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0;margin-top:0;min-width:0;background:transparent;
    max-height:0;overflow:hidden;transition:max-height .2s ease;
  }
  .nav-dropdown a{padding-block:12px;padding-inline:30px 8px;font-size:.95rem;color:var(--c-text-muted);}
}

@media (max-width:860px){
  .topbar .topbar-links span:nth-child(3){display:none;}

  /* Round 35 fix: .nav-wrap zeroes its horizontal padding at full width
     (Round 20, so the desktop nav row could claim the extra ~25px it
     needs) — on mobile that left the header row running edge-to-edge with
     no side gutter, and worse, the logo's fixed 38px height (at its
     ~5.9:1 wide-lockup aspect ratio, ~224px wide) left too little room for
     the language pill + appointment button + hamburger beside it. The row
     overflowed the viewport by ~25px, pushing the hamburger toggle mostly
     off-screen — off the right edge in English, off the left edge in
     Arabic (RTL mirrors the row) — so it was nearly impossible to tap.
     Restoring a real gutter and shrinking the logo + compacting the
     nav-cta controls brings the row back inside the screen with margin to
     spare, verified down to a 360px-wide viewport. */
  .nav-wrap{padding-inline:16px;}
  .brand-logo{height:28px;}
  .nav-cta{gap:8px;}
  .lang-switch{padding:7px 11px;font-size:.8rem;}
  .nav-cta .btn.btn-sm{padding:9px;}
  .nav-toggle{padding:7px;}
  /* The dropdown-becomes-a-list and hamburger-toggle rules that used to
     live here moved into the wider @media(max-width:1230px) block above
     (Round 37) — they're not duplicated here since that block already
     covers every width this one does. */
  .nav-cta .btn span.btn-label{display:none;}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .grid-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .service-card-wide{flex-direction:column;align-items:flex-start;text-align:left;gap:14px;}
  .service-card-wide .card-link{margin-top:4px!important;}
  .hero .container{padding-top:48px;padding-bottom:56px;}
  section{padding:52px 0;}
  .cta-banner{flex-direction:column;text-align:center;justify-content:center;}
  .footer-grid{grid-template-columns:1fr;padding-bottom:32px;}
  .form-grid{grid-template-columns:1fr;}
  .two-col-list{columns:1;}
  .step-track{grid-template-columns:1fr!important;}
  .step-track::before{display:none;}
}

/* ==========================================================================
   Precision Health — sub-brand theme
   Applied via body class (whole page) or wrapped around a single section
   (e.g. a homepage teaser) to re-skin just that part of the page using the
   same component library.
   ========================================================================== */
.precision-theme{
  --c-primary:#0199d2;
  --c-primary-dark:#017aa8;
  --c-primary-darker:#0c3a52;
  --c-primary-light:#e5f6fc;
  --c-accent:#16cffe;
  --c-accent-dark:#00b8ec;
  --c-text:#2c2c2e;
  --c-text-muted:#6e6e70;
  --c-border:#e2e2e4;
}
.precision-theme .eyebrow{background:#e5f6fc;color:var(--c-primary-dark);}
.precision-theme .band-tint{background:var(--c-primary-light);}
.precision-theme .btn-primary{background:var(--c-primary);}
.precision-theme .btn-primary:hover{background:var(--c-primary-dark);}
.precision-band{background:var(--c-primary-darker);color:#dfeffa;}
.precision-band h2,.precision-band h3,.precision-band h4{color:#fff;}
.precision-band p{color:#b9dcee;}
.precision-band .check-list li span{color:#dfeffa;}
.precision-band .check-list svg{color:#16cffe;}
.precision-band .eyebrow{background:rgba(255,255,255,.14);color:#dfeffa;}

/* Investment / price callout */
.price-box{
  background:var(--c-surface);border:1.5px solid var(--c-primary);border-radius:var(--radius-lg);
  padding:36px;text-align:center;max-width:420px;margin:0 auto;
}
.price-box .price-label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);}
.price-box .price-value{font-size:2.4rem;font-weight:800;color:var(--c-primary);margin:6px 0 0;}

/* Numbered step track (journeys / roadmaps) */
.step-track{display:grid;gap:20px;position:relative;align-items:start;}
.step-track-5{grid-template-columns:repeat(5,1fr);}
.step-track-4{grid-template-columns:repeat(4,1fr);}
.step{position:relative;text-align:left;}
.step-num{
  width:38px;height:38px;border-radius:50%;background:var(--c-primary);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:.95rem;flex:none;
}
.step h4{font-size:.98rem;margin-bottom:6px;}
.step p{font-size:.86rem;margin-bottom:0;}

/* Two-column "not / is" comparison */
.compare-not svg{color:var(--c-text-muted)!important;}
.compare-not li span{color:var(--c-text-muted);}

/* ---------- Language switch ---------- */
.lang-switch{
  font-weight:700;font-size:.86rem;color:var(--c-primary-dark);
  padding:8px 14px;border-radius:999px;border:1.5px solid var(--c-primary-light);
  background:var(--c-primary-light);white-space:nowrap;transition:background .15s,color .15s;
}
.lang-switch:hover{background:var(--c-primary);color:#fff;}

/* ---------- Quick-actions bar (pinned to the bottom of the screen) ---------- */
.quick-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:flex;gap:1px;
  background:rgba(255,255,255,.10);
  box-shadow:0 -6px 20px rgba(6,20,24,.20);
}
.quick-bar-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 10px;background:var(--c-primary-darker);color:#eaf6fb;
  font-weight:700;font-size:.85rem;white-space:nowrap;transition:background .15s;
}
.quick-bar-item svg{width:19px;height:19px;flex:none;color:#eaf6fb;}
.quick-bar-item:hover{background:var(--c-primary-dark);}
.quick-bar-cta{background:var(--c-accent);}
.quick-bar-cta:hover{background:var(--c-accent-dark);}
@media (max-width:480px){
  .quick-bar-item span{display:none;}
  .quick-bar-item{padding:15px 8px;}
}

/* Round 35: on very narrow phones (<=340px, e.g. an original iPhone SE)
   the 860px breakpoint's already-compacted header row still runs a few
   pixels past the edge — tighten it a bit further rather than leave the
   hamburger toggle clipped for that slice of devices too. */
@media (max-width:340px){
  .nav-wrap{padding-inline:10px;gap:6px;}
  .brand-logo{height:24px;}
  .nav-cta{gap:6px;}
  .lang-switch{padding:6px 9px;font-size:.75rem;}
  .nav-cta .btn.btn-sm{padding:7px;}
  .nav-toggle{padding:6px;}
}

/* ================================================================
   Arabic (RTL) — applies whenever the page sets dir="rtl"
   ================================================================ */
[dir="rtl"]{
  --font:'Cairo','Noto Kufi Arabic',-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .footer-grid h4,
[dir="rtl"] .price-box .price-label{
  letter-spacing:normal;text-transform:none;
}
[dir="rtl"] .accordion-trigger{text-align:right;}
[dir="rtl"] .step{text-align:right;}
[dir="rtl"] .video-duration{right:auto;left:8px;}
[dir="rtl"] .nav-toggle span{align-self:flex-end;}