/* ============================================================
   Karama Medical Centre — design system
   Healing teal + warm neutral + soft coral
   ============================================================ */
:root{
  --bg:        #F7FAF9;
  --bg-2:      #EEF5F3;
  --surface:   #FFFFFF;
  --text:      #14302C;
  --muted:     #5E726E;
  --primary:   #138C7F;
  --primary-d: #0F7468;
  --secondary: #0B5C53;
  --accent:    #F1775E;
  --accent-d:  #E2624A;
  --border:    #DCE7E4;
  --focus:     #138C7F;

  --shadow-sm: 0 1px 2px rgba(11,92,83,.05), 0 1px 3px rgba(11,92,83,.06);
  --shadow-md: 0 6px 18px -6px rgba(11,92,83,.14), 0 2px 6px rgba(11,92,83,.06);
  --shadow-lg: 0 24px 56px -20px rgba(11,92,83,.28), 0 8px 20px -12px rgba(11,92,83,.18);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);

  --ff-head: "Poppins", system-ui, -apple-system, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

h1,h2,h3,h4{ font-family: var(--ff-head); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }

:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- layout ---------- */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.section{ padding-block: clamp(56px, 9vw, 110px); }
.eyebrow{
  font-family: var(--ff-head); font-weight: 600; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before{ content:""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
.section-head{ max-width: 640px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head h2{ font-size: clamp(28px, 4.4vw, 46px); margin-top: 14px; }
.section-head p{ color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); margin-top: 16px; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ff-head); font-weight: 600; font-size: 15.5px;
  padding: 14px 24px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  min-height: 50px; transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg{ width: 19px; height: 19px; flex: none; }
.btn:active{ transform: translateY(1px); }
.btn-accent{ background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(241,119,94,.65); }
.btn-accent:hover{ background: var(--accent-d); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(241,119,94,.7); }
.btn-primary{ background: var(--primary); color: #fff; box-shadow: 0 8px 20px -10px rgba(19,140,127,.6); }
.btn-primary:hover{ background: var(--primary-d); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--secondary); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary); background: #fff; }
.btn-white{ background: #fff; color: var(--secondary); }
.btn-white:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline-white{ background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(4px); }
.btn-outline-white:hover{ background: rgba(255,255,255,.18); border-color:#fff; }
.btn-sm{ padding: 10px 18px; min-height: 42px; font-size: 14px; }

/* ---------- cards ---------- */
.card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }

/* ---------- pills / chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--r-pill); padding: 8px 16px;
  font-size: 14px; font-weight:600; color: var(--secondary); font-family: var(--ff-head);
}
.chip svg{ width:17px; height:17px; color: var(--primary); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled{ border-color: var(--border); box-shadow: var(--shadow-sm); }
.nav-inner{ display:flex; align-items:center; justify-content: space-between; gap: 20px; height: 76px; }
.nav-logo{ display:flex; align-items:center; gap: 12px; }
.nav-logo img{ height: 52px; width:auto; }
.nav-logo .wordmark{ display:flex; flex-direction:column; line-height:1; }
.nav-logo .wordmark b{ font-family: var(--ff-head); font-weight:700; font-size:18px; color: var(--secondary); letter-spacing:-.01em; }
.nav-logo .wordmark span{ font-size:11px; color: var(--muted); letter-spacing:.08em; margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap: 4px; }
.nav-links a{
  font-family: var(--ff-head); font-weight:500; font-size:15px; color: var(--text);
  padding: 9px 14px; border-radius: var(--r-pill); transition: background .18s, color .18s;
}
.nav-links a:hover{ background: var(--bg-2); color: var(--primary); }
.nav-actions{ display:flex; align-items:center; gap: 10px; }
.nav-call{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-head); font-weight:600; color: var(--secondary); font-size:15px; padding: 9px 12px; border-radius: var(--r-pill); }
.nav-call:hover{ color: var(--primary); }
.nav-call svg{ width:18px; height:18px; color: var(--primary); }
.nav-toggle{ display:none; background:none; border:none; padding:8px; color: var(--secondary); }
.nav-toggle svg{ width:28px; height:28px; }

.nav-mobile{ display:none; }
@media (max-width: 940px){
  .nav-links, .nav-actions .nav-call, .nav-actions .btn-ghost{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-mobile{
    display:block; position: fixed; inset: 76px 0 auto 0; z-index:55;
    background: var(--surface); border-bottom:1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: 14px var(--pad) 24px; transform: translateY(-12px); opacity:0; pointer-events:none;
    visibility:hidden; transition: transform .26s ease, opacity .26s ease, visibility .26s ease; max-height: calc(100vh - 76px); overflow:auto;
  }
  .nav-mobile.open{ transform: translateY(0); opacity:1; pointer-events:auto; visibility:visible; }
  .nav-mobile a{ display:block; font-family:var(--ff-head); font-weight:500; font-size:18px; padding: 14px 6px; border-bottom:1px solid var(--border); }
  .nav-mobile .btn{ width:100%; margin-top:16px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position: relative; overflow: hidden; background:
   radial-gradient(120% 90% at 88% 0%, #E7F3F0 0%, rgba(231,243,240,0) 55%),
   linear-gradient(180deg, #FBFDFC 0%, var(--bg) 100%); }
.hero-inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items:center; padding-block: clamp(48px, 7vw, 96px); }
.hero-badge{ margin-bottom: 22px; }
.hero h1{ font-size: clamp(34px, 5.6vw, 62px); line-height: 1.04; }
.hero h1 em{ font-style: normal; color: var(--primary); position: relative; white-space: nowrap; }
.hero-sub{ font-size: clamp(17px, 1.9vw, 20px); color: var(--muted); margin-top: 22px; max-width: 33ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 32px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 30px; }
.hero-meta div{ display:flex; align-items:center; gap:9px; font-size:14.5px; color: var(--secondary); font-weight:500; }
.hero-meta svg{ width:18px; height:18px; color: var(--primary); flex:none; }

/* hero visual: layered real photos */
.hero-visual{ position: relative; min-height: 460px; }
.hero-photo{ position:absolute; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg); background: var(--bg-2); border: 5px solid #fff; }
.hero-photo img{ width:100%; height:100%; object-fit: cover; }
.hero-photo--main{ inset: 0 0 32px 18%; }
.hero-photo--sub{ width: 46%; aspect-ratio: 1/1.15; left: 0; bottom: 0; z-index:2; }
.hero-deco{ position:absolute; z-index:3; }
.hero-stat{
  position:absolute; z-index:4; right: -6px; top: 30px; background:#fff; border-radius: var(--r);
  box-shadow: var(--shadow-md); padding: 14px 18px; display:flex; align-items:center; gap:12px; border:1px solid var(--border);
}
.hero-stat b{ font-family:var(--ff-head); font-size:26px; color: var(--primary); display:block; line-height:1; }
.hero-stat span{ font-size:12.5px; color: var(--muted); }
.hero-stat .dot{ width:42px;height:42px;border-radius:12px;background:var(--bg-2);display:grid;place-items:center;color:var(--primary); }
.hero-stat .dot svg{ width:22px;height:22px; }

@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ min-height: 420px; max-width: 460px; }
  .hero-sub{ max-width: 46ch; }
}
@media (max-width: 460px){
  .hero-visual{ min-height: 340px; }
  .hero-stat{ padding: 10px 13px; }
  .hero-stat b{ font-size:21px; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ background: var(--secondary); color: #fff; }
.trust-inner{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-block: 6px; }
.trust-item{ display:flex; align-items:center; gap: 13px; padding: 24px 20px; }
.trust-item + .trust-item{ border-left: 1px solid rgba(255,255,255,.12); }
.trust-item svg{ width: 26px; height:26px; color: var(--accent); flex:none; }
.trust-item b{ font-family:var(--ff-head); font-weight:600; font-size:15px; display:block; line-height:1.25; }
.trust-item span{ font-size: 12.5px; color: rgba(255,255,255,.62); }
@media (max-width: 900px){
  .trust-inner{ grid-template-columns: repeat(2,1fr); }
  .trust-item{ padding: 18px 14px; }
  .trust-item:nth-child(odd){ border-left:none; }
  .trust-item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12); }
  .trust-item:last-child{ grid-column: span 2; justify-content:center; border-top:1px solid rgba(255,255,255,.12); }
}
@media (max-width: 480px){
  .trust-item span{ display:none; }
}

/* ============================================================
   SPECIALTIES
   ============================================================ */
.spec-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.spec-card{ position: relative; display:flex; flex-direction:column; padding: 26px; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.spec-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #C9DCD7; }
.spec-icon{ width: 54px; height:54px; border-radius: 14px; background: var(--bg-2); display:grid; place-items:center; color: var(--primary); margin-bottom: 18px; transition: background .2s, color .2s; }
.spec-card:hover .spec-icon{ background: var(--primary); color:#fff; }
.spec-icon svg{ width:28px; height:28px; }
.spec-card h3{ font-size: 20px; }
.spec-card p{ color: var(--muted); font-size: 15px; margin-top: 9px; flex: 1; }
.spec-card .spec-foot{ margin-top: 18px; display:flex; align-items:center; gap: 8px; font-family:var(--ff-head); font-weight:600; font-size:14px; color: var(--primary); }
.spec-card .spec-foot svg{ width:16px;height:16px; transition: transform .2s; }
.spec-card:hover .spec-foot svg{ transform: translateX(4px); }
@media (max-width: 900px){ .spec-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .spec-grid{ grid-template-columns: 1fr; } .spec-card{ padding: 22px; } }

/* ============================================================
   DIAGNOSTICS
   ============================================================ */
.diag{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.diag-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:center; }
.diag-photos{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.diag-photos figure{ margin:0; border-radius: var(--r); overflow:hidden; box-shadow: var(--shadow-md); position:relative; background:var(--bg-2); }
.diag-photos figure img{ width:100%; height:100%; object-fit:cover; }
.diag-photos figure.tall{ grid-row: span 2; aspect-ratio: auto; }
.diag-photos figure:not(.tall){ aspect-ratio: 4/3; }
.diag-photos figcaption{ position:absolute; left:12px; bottom:12px; background: rgba(11,92,83,.82); color:#fff; font-size:12px; font-weight:600; font-family:var(--ff-head); padding:5px 11px; border-radius: var(--r-pill); backdrop-filter: blur(4px); }
.diag-list{ list-style:none; padding:0; margin: 26px 0 0; display:grid; gap: 14px; }
.diag-list li{ display:flex; gap: 15px; align-items:flex-start; }
.diag-list .di{ width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;color:var(--primary);flex:none; box-shadow: var(--shadow-sm);}
.diag-list .di svg{ width:23px;height:23px; }
.diag-list b{ font-family:var(--ff-head); font-size:16.5px; display:block; }
.diag-list p{ color: var(--muted); font-size:14.5px; margin-top:2px; }
@media (max-width: 820px){ .diag-layout{ grid-template-columns:1fr; } .diag-photos{ order:-1; } }

/* ============================================================
   DOCTORS
   ============================================================ */
.doc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.doc-card{ overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; }
.doc-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.doc-photo{ position:relative; aspect-ratio: 1/1; background: linear-gradient(160deg,#E7F3F0,#D9ECE7); overflow:hidden; }
.doc-photo img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.doc-tag{ position:absolute; top:12px; left:12px; background: rgba(255,255,255,.92); color: var(--secondary); font-family:var(--ff-head); font-weight:600; font-size:11.5px; padding:5px 11px; border-radius:var(--r-pill); backdrop-filter: blur(4px); box-shadow: var(--shadow-sm); }
.doc-info{ padding: 16px 18px 20px; }
.doc-info h3{ font-size: 17.5px; }
.doc-info .role{ color: var(--primary); font-weight:600; font-size:14px; font-family:var(--ff-head); margin-top:3px; }
.doc-info .langs{ color: var(--muted); font-size:13px; margin-top:8px; display:flex; align-items:center; gap:6px; }
.doc-info .langs svg{ width:14px;height:14px; }
@media (max-width: 900px){ .doc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .doc-grid{ grid-template-columns: 1fr; } }
.consent-note{ display:flex; gap:9px; align-items:center; justify-content:center; margin-top: 26px; color: var(--muted); font-size:13px; }
.consent-note svg{ width:15px;height:15px;color:var(--primary); flex:none; }

/* ============================================================
   ABOUT / HERITAGE
   ============================================================ */
.heritage{ background: var(--secondary); color:#fff; position:relative; overflow:hidden; }
.heritage h2{ color:#fff; }
.heritage .eyebrow{ color: #7FD8CB; }
.heritage .eyebrow::before{ background: var(--accent); }
.heritage-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items:center; }
.heritage p{ color: rgba(255,255,255,.82); font-size: clamp(16px,1.7vw,18px); margin-top: 18px; }
.heritage-year{ font-family:var(--ff-head); font-weight:700; font-size: clamp(80px, 16vw, 180px); line-height:.82; color: rgba(255,255,255,.07); letter-spacing:-.04em; }
.heritage-card{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: clamp(28px,4vw,44px); position:relative; }
.heritage-card .quote{ font-family:var(--ff-head); font-weight:600; font-size: clamp(20px,2.6vw,28px); line-height:1.3; color:#fff; }
.heritage-card .by{ margin-top:22px; display:flex; align-items:center; gap:14px; }
.heritage-card .by .av{ width:46px;height:46px;border-radius:50%; background: var(--accent); display:grid;place-items:center;color:#fff;font-family:var(--ff-head);font-weight:700;font-size:18px; }
.heritage-card .by b{ font-family:var(--ff-head); display:block; font-size:15px; }
.heritage-card .by span{ font-size:13px; color: rgba(255,255,255,.6); }
.heritage-stats{ display:flex; gap: 14px; flex-wrap:wrap; margin-top: 32px; }
.heritage-stats div{ flex:1; min-width: 120px; }
.heritage-stats b{ font-family:var(--ff-head); font-weight:700; font-size: clamp(28px,3.4vw,38px); color: var(--accent); display:block; line-height:1; }
.heritage-stats span{ font-size:13.5px; color: rgba(255,255,255,.72); margin-top:6px; display:block; }
@media (max-width: 820px){ .heritage-inner{ grid-template-columns:1fr; } }

/* ============================================================
   BRANCHES
   ============================================================ */
.branch-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.branch-card{ padding: 24px; display:flex; flex-direction:column; gap: 6px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.branch-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color:#C9DCD7; }
.branch-card.flagship{ background: linear-gradient(165deg, #fff 0%, #F1F8F6 100%); border-color:#C9DCD7; }
.branch-flag{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; background: var(--accent); color:#fff; font-family:var(--ff-head); font-weight:600; font-size:11.5px; padding:4px 11px; border-radius:var(--r-pill); margin-bottom:6px; letter-spacing:.03em; }
.branch-card h3{ font-size:19px; }
.branch-card .addr{ color: var(--muted); font-size:14.5px; display:flex; gap:8px; }
.branch-card .addr svg{ width:17px;height:17px;color:var(--primary);flex:none;margin-top:2px; }
.branch-card .bphone{ margin-top: auto; padding-top: 14px; display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-head); font-weight:600; color: var(--primary); font-size:15px; }
.branch-card .bphone svg{ width:17px;height:17px; }
@media (max-width: 880px){ .branch-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .branch-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT / BOOK
   ============================================================ */
.contact{ background: var(--bg-2); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px,4vw,48px); align-items:start; }
.book-card{ background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: clamp(26px,3.4vw,40px); box-shadow: var(--shadow-md); }
.book-card h3{ font-size: clamp(22px,2.6vw,28px); }
.book-card > p{ color:var(--muted); font-size:15px; margin-top:8px; }
.field{ margin-top: 18px; }
.field label{ display:block; font-family:var(--ff-head); font-weight:600; font-size:13.5px; margin-bottom:7px; color: var(--secondary); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--ff-body); font-size:16px; color: var(--text);
  padding: 13px 15px; border:1.5px solid var(--border); border-radius: var(--r-sm); background:#fff;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(19,140,127,.14); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book-card .btn{ width:100%; margin-top: 22px; }
.book-note{ display:flex; gap:9px; align-items:center; justify-content:center; margin-top:16px; color:var(--muted); font-size:12.5px; }
.book-note svg{ width:15px;height:15px;color:var(--primary);flex:none; }
.book-success{ text-align:center; padding: 24px 8px; }
.book-success .ok{ width:64px;height:64px;border-radius:50%;background:#E7F3F0;color:var(--primary);display:grid;place-items:center;margin:0 auto 18px; }
.book-success .ok svg{ width:34px;height:34px; }
.book-success h3{ font-size:24px; }
.book-success p{ color:var(--muted); margin-top:10px; }

.contact-info{ display:flex; flex-direction:column; gap: 14px; }
.info-row{ display:flex; gap: 15px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius: var(--r); padding: 18px 20px; }
.info-row .ii{ width:46px;height:46px;border-radius:12px;background:var(--bg-2);display:grid;place-items:center;color:var(--primary);flex:none; }
.info-row .ii svg{ width:22px;height:22px; }
.info-row b{ font-family:var(--ff-head); font-size:15px; display:block; margin-bottom:3px; }
.info-row p, .info-row a{ color:var(--muted); font-size:14.5px; }
.info-row a:hover{ color: var(--primary); }
.info-row .gap-flag{ display:inline-block; margin-top:4px; font-size:12px; color: var(--accent-d); font-weight:600; }

/* map placeholder */
.map-ph{ margin-top:14px; border-radius: var(--r); overflow:hidden; border:1px dashed #B9D0CB; background:
   repeating-linear-gradient(45deg, #EAF3F0, #EAF3F0 14px, #E2EEEB 14px, #E2EEEB 28px);
   min-height: 220px; display:grid; place-items:center; text-align:center; position:relative; }
.map-ph .pin{ width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--primary);box-shadow:var(--shadow-md);margin:0 auto 14px; }
.map-ph .pin svg{ width:26px;height:26px; }
.map-ph b{ font-family:var(--ff-head); font-size:15px; color: var(--secondary); }
.map-ph span{ display:block; font-size:13px; color: var(--muted); margin-top:5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:-.01em; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background: #0A2E2A; color: rgba(255,255,255,.7); padding-block: clamp(48px,6vw,72px) 28px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand img{ height: 92px; width:auto; margin-bottom: 18px; background:#fff; border-radius: var(--r); padding: 12px; }
.footer-brand p{ font-size:14.5px; max-width: 30ch; line-height:1.65; }
.footer h4{ color:#fff; font-size:14px; font-family:var(--ff-head); letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer ul a, .footer ul li{ font-size:14.5px; color: rgba(255,255,255,.7); }
.footer ul a:hover{ color: var(--accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:13px; color: rgba(255,255,255,.5); }
.footer-bottom .grp{ color: rgba(255,255,255,.62); }
.footer-bottom .grp b{ color:#fff; }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr 1fr; gap:28px; } .footer-brand{ grid-column: span 2; } }
@media (max-width: 440px){ .footer-top{ grid-template-columns: 1fr; } .footer-brand{ grid-column: span 1; } }

/* ============================================================
   MOBILE ACTION BAR
   ============================================================ */
.mab{ display:none; }
@media (max-width: 760px){
  .mab{
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; position: fixed; left:0; right:0; bottom:0; z-index:70;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top:1px solid var(--border);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px -10px rgba(11,92,83,.25);
  }
  .mab a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; border-radius: 14px; font-family:var(--ff-head); font-weight:600; font-size:12px; }
  .mab a svg{ width:20px;height:20px; }
  .mab .m-call{ background: var(--bg-2); color: var(--secondary); }
  .mab .m-dir{ background: var(--bg-2); color: var(--secondary); }
  .mab .m-book{ background: var(--accent); color:#fff; }
  body{ padding-bottom: 74px; }
}

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
  .reveal.in{ opacity:1; transform: none; }
}