/* ==========================================================================
Oak Tree Medical Services — Cape Coast, Ghana
Design System: "Trust & Authority + Conversion" · Style: "Accessible & Ethical"
Palette: Medical teal + health green + ochre (from the building's arches)
Type: Lexend (headings) + Source Sans 3 (body)
Vanilla CSS · Mobile-first · WCAG-minded
========================================================================== */
/* ---------- Fonts ---------- */
/* Loaded via + in each page's — not @import, which is render-blocking. */
/* ---------- Design Tokens ---------- */
:root {
/* Brand — Oak Tree GREEN + RED + WHITE (from the logo).
NOTE: --teal-* names below hold the brand GREEN ramp (kept for stability);
--ochre-* names hold the brand RED ramp. */
--teal-900: #06341c; /* deep forest green (dark sections) */
--teal-800: #0a5a2e;
--teal-700: #0b7a3d;
--teal-600: #0c9346; /* PRIMARY brand green (logo tree) */
--teal-500: #16a34a;
--teal-100: #cdefd9;
--teal-50: #eaf8ef;
--green-700: #0b7a3d;
--green-600: #0c9346; /* primary CTA = brand green */
--green-500: #16a34a;
--wa: #25d366; /* WhatsApp brand */
--wa-dark: #128c7e;
--ochre-600: #b71c22; /* brand red — dark (logo wordmark / heartbeat) */
--ochre-500: #df232a; /* brand RED — accent */
--ochre-100: #fbe0e1;
--danger: #df232a;
/* Neutrals (warm, green-leaning) */
--ink: #12261a; /* headings — near-black green */
--body: #3a4a40; /* body text */
--muted: #5b6e63; /* muted text — darkened for AA on tinted sections */
--line: #e1eee6; /* borders */
--surface: #ffffff;
--bg: #f6fbf7; /* soft white-green page bg */
--bg-tint: #eef6f0;
/* Type scale */
--h1: clamp(2.3rem, 5.2vw, 4rem);
--h2: clamp(1.8rem, 3.4vw, 2.8rem);
--h3: clamp(1.25rem, 2vw, 1.6rem);
--lead: clamp(1.05rem, 1.6vw, 1.3rem);
/* Spacing */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
/* Radius */
--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
/* Shadow */
--sh-sm: 0 1px 2px rgba(16,38,43,.06), 0 1px 3px rgba(16,38,43,.05);
--sh-md: 0 6px 16px rgba(16,38,43,.08);
--sh-lg: 0 18px 40px rgba(16,38,43,.12);
--sh-xl: 0 30px 70px rgba(11,59,66,.20);
--ease: cubic-bezier(.22,.61,.36,1);
--nav-h: 72px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
font-family: 'Source Sans 3', system-ui, sans-serif;
color: var(--body);
background: var(--bg);
line-height: 1.65;
font-size: 16px;
/* overflow-x:hidden here (with overflow-y left at its default 'visible') triggers
a CSS spec quirk: browsers force-promote the visible axis to 'auto', turning
body into its own scroll container separate from the window — which silently
breaks anchor-link navigation and window.scrollTo(). overflow-x:clip avoids
creating a scroll container at all, so it doesn't trigger that promotion. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: 'Lexend', sans-serif; color: var(--ink); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--h1); font-weight: 800; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { max-width: 68ch; }
a { color: var(--teal-700); text-decoration: none; transition: color .2s var(--ease); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 3px; border-radius: 4px; }
/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tint { background: var(--bg-tint); }
.section--white { background: var(--surface); }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-family: 'Lexend', sans-serif; font-weight: 600; font-size: .8rem;
text-transform: uppercase; letter-spacing: .12em; color: var(--teal-700);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ochre-500); border-radius: 2px; }
/* Light-on-dark variant for hero contexts — replaces the old badge-pill-with-dot
(the single most generic "trusted-by" pattern left on the page). */
.hero .eyebrow { color: #fff; margin-bottom: var(--sp-5); }
.hero .eyebrow::before { background: var(--ochre-500); }
.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head h2 { margin: var(--sp-3) 0; }
.section-head p { color: var(--muted); font-size: var(--lead); }
.section-head.center p { margin-inline: auto; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 1rem;
padding: .95rem 1.6rem; border-radius: var(--r-pill); border: 2px solid transparent;
cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
min-height: 52px; white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--teal-700); color: #fff; box-shadow: var(--sh-md); }
.btn-primary:hover { background: var(--teal-800); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-wa { background: var(--wa); color: #05321f; box-shadow: var(--sh-md); }
.btn-wa:hover { background: #1ebe5b; transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-call { background: var(--teal-700); color: #fff; box-shadow: var(--sh-md); }
.btn-call:hover { background: var(--teal-800); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-outline { background: transparent; color: var(--teal-800); border-color: var(--teal-600); }
.btn-outline:hover { background: var(--teal-600); color: #fff; transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: #fff; color: var(--teal-800); border-color: #fff; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.08rem; min-height: 58px; }
/* ---------- Top bar (utility) ---------- */
.topbar { background: var(--teal-900); color: #cfeef3; font-size: .85rem; padding: .45rem 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: #fff; font-weight: 600; padding-block: .35rem; display: inline-flex; align-items: center; }
.topbar .topbar-item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar svg { width: 15px; height: 15px; opacity: .9; }
@media (max-width: 640px){ .topbar .hide-sm { display: none; } }
/* ---------- Navbar ---------- */
.navbar {
position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86);
backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line);
transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.navbar.scrolled { box-shadow: var(--sh-md); background: rgba(255,255,255,.96); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 1.18rem; color: var(--ink); letter-spacing: -.02em; }
.logo-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); color: #fff; box-shadow: var(--sh-sm); }
.logo-badge svg { width: 24px; height: 24px; }
.logo small { display: block; font-family: 'Source Sans 3'; font-weight: 500; font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links > a { font-family: 'Lexend', sans-serif; font-weight: 500; color: var(--body); padding: .5rem .8rem; border-radius: var(--r-sm); font-size: .96rem; }
.nav-links > a:not(.btn):hover { color: var(--teal-700); background: var(--teal-50); }
.nav-cta { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; }
.nav-cta .btn { padding: .6rem 1.1rem; min-height: 44px; font-size: .92rem; }
.menu-btn { display: none; background: none; border: 0; cursor: pointer; color: var(--ink); padding: .6rem; }
.menu-btn svg { width: 28px; height: 28px; }
@media (max-width: 960px) {
.menu-btn { display: block; }
.nav-links {
position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch;
background: #fff; padding: var(--sp-4); gap: .2rem; border-bottom: 1px solid var(--line);
box-shadow: var(--sh-lg); transform: translateY(-140%); visibility: hidden;
transition: transform .3s var(--ease), visibility .3s; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.nav-links.open { transform: translateY(0); visibility: visible; }
.nav-links > a { padding: .85rem 1rem; font-size: 1.05rem; border-radius: var(--r-md); }
.nav-cta { flex-direction: column; align-items: stretch; margin: .5rem 0 0; }
.nav-cta .btn { width: 100%; }
}
/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(105deg, rgba(6,40,22,.93) 0%, rgba(6,40,22,.74) 42%, rgba(6,40,22,.32) 100%),
linear-gradient(0deg, rgba(6,40,22,.6), rgba(6,40,22,0) 45%);
}
.hero .container { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero-inner { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.hero h1 .accent { color: var(--ochre-500); }
.hero p.lead { font-size: var(--lead); color: #e6f2f3; max-width: 56ch; margin-bottom: var(--sp-6); }
/* btn-call's fill only clears 3:1 boundary contrast against light backgrounds (navbar, mobile-bar);
both hero variants have a dark backdrop, so give it a visible edge there specifically. */
.hero .btn-call { border-color: rgba(255,255,255,.4); }
.hero .btn-call:hover { border-color: rgba(255,255,255,.6); }
.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-5); }
.hero-tags span { font-family: 'Lexend'; font-size: .8rem; font-weight: 600; color: #e6f2f3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: .32rem .75rem; border-radius: var(--r-pill); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.hero-assure { display: flex; flex-wrap: wrap; gap: var(--sp-5); color: #cfe6e8; }
.hero-assure div { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 500; }
.hero-assure svg { width: 20px; height: 20px; color: var(--green-500); flex-shrink: 0; }
.hero-insurance { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #a9cdd2; margin-top: var(--sp-4); }
.hero-insurance svg { width: 18px; height: 18px; color: var(--ochre-500); flex-shrink: 0; }
/* ---------- Trust strip ---------- */
.trust-strip { background: var(--teal-900); color: #fff; }
.trust-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding-block: var(--sp-6); }
.trust-item { display: flex; align-items: center; gap: .9rem; padding-left: .9rem; border-left: 2px solid rgba(226,163,44,.4); }
.trust-item .ti-ico { display: grid; place-items: center; color: var(--ochre-500); flex-shrink: 0; }
.trust-item .ti-ico svg { width: 26px; height: 26px; }
.trust-item strong { display: block; font-family: 'Lexend'; font-size: 1.05rem; color: #fff; line-height: 1.2; }
.trust-item span { font-size: .85rem; color: #a9cdd2; }
@media (max-width: 860px){ .trust-strip .container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .trust-strip .container { grid-template-columns: 1fr; } }
/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat { padding-inline: var(--sp-4); border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat .num { font-family: 'Lexend'; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: var(--teal-700); line-height: 1; }
.stat .num .plus { color: var(--ochre-500); }
.stat p { color: var(--muted); font-weight: 600; margin: .4rem auto 0; font-size: .95rem; }
@media (max-width: 640px){
.stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); }
.stat:nth-child(2n+1) { border-left: none; }
.stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
}
/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px){ .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .services-grid { grid-template-columns: 1fr; } }
.service-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: var(--sp-6); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
position: relative; overflow: hidden;
}
.service-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--teal-600), var(--green-500)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-ico { width: 54px; height: 66px; border-radius: 27px 27px 6px 6px; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); margin-bottom: var(--sp-4); border: 1px solid var(--teal-100); }
.service-ico svg { width: 26px; height: 26px; }
.service-card h3 { margin-bottom: var(--sp-2); }
.service-card p { color: var(--muted); font-size: .96rem; margin-bottom: var(--sp-4); }
.service-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font-size: .78rem; font-weight: 600; color: var(--teal-800); background: var(--teal-50); border: 1px solid var(--teal-100); padding: .25rem .65rem; border-radius: var(--r-pill); }
.card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--sp-4); font-family: 'Lexend'; font-weight: 600; font-size: .92rem; color: var(--teal-700); }
.card-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.card-link:hover { color: var(--ochre-500); }
.card-link:hover svg { transform: translateX(3px); }
/* ---------- Why / feature split ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; } }
.split-media { position: relative; }
.split-media img { width: 100%; height: auto; border-radius: 15% 15% var(--r-xl) var(--r-xl) / 7% 7% var(--r-xl) var(--r-xl); box-shadow: var(--sh-xl); }
.float-card {
position: absolute; bottom: -22px; left: -22px; background: #fff; border-radius: var(--r-lg);
padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-lg); display: flex; align-items: center; gap: .85rem; border: 1px solid var(--line);
}
.float-card .fc-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--green-600); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.float-card strong { font-family: 'Lexend'; color: var(--ink); display: block; font-size: 1.05rem; }
.float-card span { font-size: .82rem; color: var(--muted); }
@media (max-width: 560px){ .float-card { left: 50%; transform: translateX(-50%); bottom: -28px; white-space: nowrap; } }
.hero-visual .float-card { left: auto; right: -18px; bottom: -20px; }
.hero-visual .float-card .fc-ico { background: var(--ochre-500); }
@media (max-width: 900px){ .hero-visual .float-card { left: 50%; right: auto; transform: translateX(-50%); bottom: -24px; } }
.feat-list { display: grid; gap: var(--sp-5); margin: var(--sp-6) 0; }
.feat { display: flex; gap: var(--sp-4); align-items: flex-start; padding-top: var(--sp-1); border-top: 1px solid var(--line); }
.feat:first-child { border-top: none; padding-top: 0; }
.feat .fi { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ochre-500); flex-shrink: 0; margin-top: .1rem; }
.feat .fi svg { width: 26px; height: 26px; }
.feat h3 { font-family: 'Lexend'; color: var(--ink); font-size: 1.1rem; margin-bottom: .2rem; }
.feat p { color: var(--muted); font-size: .95rem; }
/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--sp-4); }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin: 0; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figure figcaption {
position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem .8rem;
color: #fff; font-family: 'Lexend'; font-weight: 500; font-size: .9rem;
background: linear-gradient(0deg, rgba(6,40,22,.85), transparent);
}
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
.gallery .wide.tall { border-radius: 12% 12% var(--r-lg) var(--r-lg) / 9% 9% var(--r-lg) var(--r-lg); }
@media (max-width: 760px){
.gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.gallery .wide { grid-column: span 2; }
.gallery .tall { grid-row: span 1; }
}
/* ---------- Testimonials — editorial pull-quote, not a centered review card ---------- */
.testi-wrap { max-width: 760px; }
.testi-card { position: relative; padding-left: clamp(1.5rem, 5vw, 3rem); border-left: 3px solid var(--ochre-500); }
.testi-quote {
display: block; font-family: 'Lexend'; font-weight: 800; font-size: 5rem; line-height: 1;
color: var(--ochre-500); opacity: .5; margin-bottom: -1.2rem; height: auto; width: auto;
}
.testi-slide { display: none; }
.testi-slide.active { display: block; animation: fadein .5s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }
.testi-card blockquote { font-family: 'Lexend'; font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--ink); line-height: 1.5; margin-bottom: var(--sp-5); max-width: 58ch; }
.testi-meta { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.testi-author { font-family: 'Lexend'; font-weight: 700; color: var(--ink); }
.testi-role { font-size: .88rem; color: var(--muted); }
.testi-stars { display: inline-flex; gap: .15rem; color: var(--ochre-500); }
.testi-stars svg { width: 14px; height: 14px; }
.testi-nav { display: flex; justify-content: flex-start; gap: .1rem; margin-top: var(--sp-6); padding-left: clamp(1.5rem, 5vw, 3rem); }
.testi-dot {
width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; cursor: pointer;
padding: 0; display: grid; place-items: center;
}
.testi-dot::before {
content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--line);
transition: background .2s var(--ease), width .2s var(--ease), border-radius .2s var(--ease);
}
.testi-dot.active::before { background: var(--teal-600); width: 30px; border-radius: var(--r-pill); }
/* ---------- CTA band ----------
Flat, quiet field — the arch motif is concentrated elsewhere (facility
photos, service icons) rather than repeated here as background texture. */
.cta-band { position: relative; overflow: hidden; background: var(--teal-900); color: #fff; border-radius: var(--r-xl); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3rem); text-align: center; }
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: #dff0f2; max-width: 52ch; margin: var(--sp-3) auto var(--sp-6); position: relative; font-size: var(--lead); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; position: relative; }
/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s var(--ease); }
.faq details[open] { box-shadow: var(--sh-md); }
.faq summary { cursor: pointer; padding: 1.15rem 1.4rem; font-family: 'Lexend'; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 22px; height: 22px; color: var(--teal-600); transition: transform .25s var(--ease); flex-shrink: 0; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { padding: 0 1.4rem 1.3rem; color: var(--muted); }
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-cards { display: grid; gap: var(--sp-4); }
.contact-card { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.contact-card .cc-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; flex-shrink: 0; }
.contact-card .cc-ico svg { width: 24px; height: 24px; }
.contact-card h3 { font-family: 'Lexend'; color: var(--ink); margin-bottom: .15rem; font-size: 1.05rem; }
.contact-card a, .contact-card p { color: var(--body); font-weight: 500; }
.contact-card a:hover { color: var(--teal-700); }
.map-card { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 1px solid var(--line); min-height: 340px; height: 100%;
background: linear-gradient(135deg, var(--teal-800), var(--teal-700)); position: relative; color: #fff; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.map-card::before { content: ""; position: absolute; inset: 0; opacity: .12;
background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; }
.map-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.map-card-inner { position: relative; height: 100%; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-6); gap: .3rem; }
.map-pin { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; margin-bottom: var(--sp-3); }
.map-pin svg { width: 32px; height: 32px; color: #fff; }
.map-card strong { font-family: 'Lexend'; font-size: 1.25rem; color: #fff; }
.map-sub { color: #e3f1f0; font-size: .95rem; }
.map-card .btn-outline { color: #fff; border-color: rgba(255,255,255,.7); }
.emergency { margin-top: var(--sp-4); display: flex; gap: .75rem; align-items: center; background: #fdecec; border: 1px solid #f6c9c9; color: #8a1c1c; padding: 1rem 1.25rem; border-radius: var(--r-md); font-weight: 600; }
.emergency svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--danger); }
/* ---------- Footer ---------- */
.footer { background: var(--teal-900); color: #b9d6da; padding-block: var(--sp-8) var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-6); }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 480px){ .footer-grid { grid-template-columns: 1fr; } }
.footer .logo { color: #fff; margin-bottom: var(--sp-4); }
.footer .logo small { color: #8fb7bc; }
.footer p { color: #9dc2c7; font-size: .94rem; }
.footer h5 { color: #fff; font-family: 'Lexend'; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-4); }
.footer-links { display: grid; gap: .6rem; }
.footer-links a { color: #a9cdd2; font-size: .95rem; }
.footer-links a:hover { color: #fff; }
.footer-links span { color: #5c7a72; font-size: .95rem; cursor: default; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; font-size: .92rem; color: #a9cdd2; }
.footer-contact svg { width: 18px; height: 18px; margin-top: 2px; color: var(--teal-500); flex-shrink: 0; }
.footer-contact a { color: #a9cdd2; }
.footer-contact a:hover { color: #fff; }
.footer-social { display: flex; gap: .6rem; margin-top: var(--sp-4); }
.footer-social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #cfeef3; transition: background .2s var(--ease), transform .2s var(--ease); }
.footer-social a:hover { background: var(--teal-600); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--sp-7); padding-top: var(--sp-5); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: #85adb2; }
/* ---------- Floating WhatsApp widget ---------- */
.wa-widget { position: fixed; right: 18px; bottom: 24px; z-index: 90; }
.wa-float {
position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
background: var(--wa); color: #05321f; display: grid; place-items: center;
box-shadow: 0 6px 18px rgba(37,211,102,.45), var(--sh-lg);
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float svg { width: 30px; height: 30px; grid-area: 1 / 1; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.wa-float .wa-ico-close { opacity: 0; transform: scale(.6) rotate(-45deg); }
.wa-float[aria-expanded="true"] .wa-ico-chat { opacity: 0; transform: scale(.6) rotate(45deg); }
.wa-float[aria-expanded="true"] .wa-ico-close { opacity: 1; transform: none; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(37,211,102,.55), var(--sh-lg); }
/* Hidden on mobile — the sticky call/WhatsApp bar already covers this action, and both together eat the thumb zone */
@media (max-width: 860px){ .wa-widget { display: none; } }
.wa-panel {
position: absolute; right: 0; bottom: 74px; width: 336px; max-width: calc(100vw - 36px);
background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-xl); border: 1px solid var(--line);
overflow: hidden; transform-origin: bottom right;
opacity: 0; visibility: hidden; transform: scale(.92) translateY(8px); pointer-events: none;
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* visibility:hidden (not just opacity/pointer-events) so the closed panel's textarea/buttons
drop out of the keyboard tab order entirely, same pattern as the mobile nav dropdown */
.wa-panel.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.wa-panel-header { background: var(--wa); color: #05321f; padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: .75rem; }
.wa-panel-header img { width: 38px; height: auto; flex-shrink: 0; }
.wa-panel-header strong { display: block; font-family: 'Lexend'; font-size: .98rem; }
.wa-panel-header span { display: block; font-size: .78rem; opacity: .8; }
.wa-panel-close {
margin-left: auto; background: rgba(5,50,31,.1); border: 0; border-radius: 50%; width: 28px; height: 28px;
display: grid; place-items: center; cursor: pointer; color: inherit; flex-shrink: 0;
}
.wa-panel-close svg { width: 16px; height: 16px; }
.wa-panel-body { padding: var(--sp-4) var(--sp-5) 0; background: var(--bg-tint); }
.wa-bubble {
background: var(--surface); border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; padding: var(--sp-3) var(--sp-4);
font-size: .9rem; color: var(--body); box-shadow: var(--sh-sm); margin-bottom: var(--sp-4); max-width: 88%;
}
.wa-panel-form { padding: var(--sp-4) var(--sp-5); background: var(--bg-tint); display: grid; gap: .6rem; }
.wa-panel-form textarea {
width: 100%; resize: vertical; min-height: 76px; padding: .7rem .85rem; border-radius: var(--r-sm);
border: 1px solid var(--line); font-family: inherit; font-size: .92rem; color: var(--ink); background: var(--surface);
}
.wa-panel-form textarea:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 1px; }
.wa-panel-form .btn { width: 100%; }
@media (prefers-reduced-motion: reduce){ .wa-panel { transition: none; } }
/* ---------- Mobile sticky action bar ---------- */
.mobile-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none;
grid-template-columns: 1fr 1fr; background: #fff; border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(16,38,43,.12); padding: .5rem; gap: .5rem;
padding-bottom: max(.5rem, env(safe-area-inset-bottom));
}
.mobile-bar .btn { min-height: 50px; }
@media (max-width: 860px){ .mobile-bar { display: grid; } body { padding-bottom: 76px; } }
/* ---------- Reveal animation ----------
Hidden state only applies once JS has proven it can run (html.js) and add
the .in class back — on flaky connections where main.js fails to load,
content stays visible instead of vanishing forever. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
/* ---------- Skip link (a11y) ---------- */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--teal-800); color: #fff; padding: .85rem 1.4rem; border-radius: 0 0 var(--r-md) 0;
font-family: 'Lexend'; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
/* ---------- Active nav link (service pages) ---------- */
.nav-links > a[aria-current="page"] { color: var(--teal-700); background: var(--teal-50); }
/* ---------- Brand logo image ---------- */
.logo-img { height: 46px; width: auto; display: block; }
.navbar .logo-img { height: 44px; }
@media (max-width: 480px){ .navbar .logo-img { height: 38px; } }
.footer-logo-chip { display: inline-block; background: #fff; padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--sh-sm); margin-bottom: var(--sp-4); }
.footer-logo-chip img { height: 52px; width: auto; display: block; }
/* ---------- Insurance partners ---------- */
.ins-head { text-align: center; margin-bottom: var(--sp-5); }
.ins-head .eyebrow { justify-content: center; }
.ins-head .eyebrow::before { display: none; }
.ins-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-top: .5rem; }
.ins-head p { color: var(--muted); margin: .5rem auto 0; }
.ins-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); max-width: 900px; margin-inline: auto; }
.ins-logos .ins { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); min-height: 104px; display: grid; place-items: center; padding: 1.25rem; box-shadow: var(--sh-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ins-logos .ins:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ins-logos .ins img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
@media (max-width: 640px){ .ins-logos { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Section-top brand accent (green→red) ---------- */
.brand-rule { height: 4px; width: 64px; border-radius: 4px; background: linear-gradient(90deg, var(--teal-600), var(--ochre-500)); }
.section-head.center .brand-rule { margin: 0 auto var(--sp-4); }
/* ---------- Service card with photo ---------- */
.service-card.has-photo { padding: 0; }
.service-card.has-photo .sc-photo { height: 180px; overflow: hidden; }
.service-card.has-photo .sc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.service-card.has-photo:hover .sc-photo img { transform: scale(1.06); }
.service-card.has-photo .sc-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.service-card.has-photo .service-ico { margin-top: -46px; position: relative; background: #fff; box-shadow: var(--sh-md); border: 1px solid var(--line); }
/* ---------- Service subpages ---------- */
.hero.subhero .container { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero.subhero .hero-inner { max-width: 760px; }
.crumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: #cfe6d8; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.crumb a { color: #fff; font-weight: 600; }
.crumb a:hover { color: var(--ochre-500); }
.crumb svg { width: 14px; height: 14px; opacity: .6; }
.prose { max-width: 720px; }
.prose h2 { margin-bottom: var(--sp-3); }
.prose p { color: var(--body); margin-bottom: var(--sp-4); }
.prose ul.checks { list-style: none; display: grid; gap: .85rem; margin: var(--sp-4) 0 var(--sp-5); }
.prose ul.checks li { display: flex; gap: .7rem; align-items: flex-start; color: var(--body); }
.prose ul.checks li svg { width: 20px; height: 20px; color: var(--teal-600); flex-shrink: 0; margin-top: 3px; }
.svc-offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 820px){ .svc-offer { grid-template-columns: 1fr; } }
.svc-offer .o { background: var(--surface); border-top: 3px solid var(--ochre-500); padding: var(--sp-5) var(--sp-2) 0; }
.svc-offer .o .oi { width: 40px; height: 40px; display: grid; place-items: center; color: var(--teal-700); margin-bottom: var(--sp-3); }
.svc-offer .o .oi svg { width: 28px; height: 28px; }
.svc-offer .o h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.svc-offer .o p { font-size: .93rem; color: var(--muted); }
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); counter-reset: st; }
@media (max-width: 820px){ .steps-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .steps-row { grid-template-columns: 1fr; } }
.steps-row .st { counter-increment: st; position: relative; padding-top: var(--sp-5); }
.steps-row .st::before { content: counter(st); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); color: #fff; font-family: 'Lexend'; font-weight: 700; display: grid; place-items: center; }
.steps-row .st h3 { font-family: 'Lexend'; color: var(--ink); margin: var(--sp-2) 0 .3rem; font-size: 1.05rem; }
.steps-row .st p { font-size: .92rem; color: var(--muted); }
.svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px){ .svc-split { grid-template-columns: 1fr; } }
.svc-split img { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto !important; }
.reveal, .js .reveal { opacity: 1; transform: none; transition: none; }
.wa-float { animation: none; }
}
/* ---------- Blog (statically-generated pages under /blog/) ---------- */
.blog-post .eyebrow { display: block; margin-bottom: var(--sp-3); }
.blog-post .eyebrow a { color: inherit; text-decoration: none; }
.blog-post .eyebrow a:hover { text-decoration: underline; }
.blog-post h1 { margin-bottom: .4rem; }
.blog-meta { font-size: .9rem; margin: 0 0 var(--sp-5); }
.blog-cover { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-lg); margin-bottom: var(--sp-6); }
.blog-body { font-size: 1.05rem; line-height: 1.75; color: var(--body); }
.blog-body h2 { font-family: 'Lexend'; color: var(--ink); margin: var(--sp-6) 0 var(--sp-3); font-size: 1.4rem; }
.blog-body h3 { font-family: 'Lexend'; color: var(--ink); margin: var(--sp-5) 0 var(--sp-2); font-size: 1.15rem; }
.blog-body p { margin: 0 0 var(--sp-4); }
.blog-body ul, .blog-body ol { margin: 0 0 var(--sp-4); padding-left: 1.4rem; }
.blog-body li { margin-bottom: .4rem; }
.blog-body blockquote { border-left: 3px solid var(--ochre-500); margin: 0 0 var(--sp-4); padding: .2rem 0 .2rem var(--sp-4); color: var(--muted); font-style: italic; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--sp-3) 0; }
.blog-body code { background: var(--bg-tint); padding: .15rem .4rem; border-radius: 4px; font-size: .9em; }
.blog-body pre { background: var(--bg-tint); padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; margin: 0 0 var(--sp-4); }
.blog-body pre code { background: none; padding: 0; }
.card-link-title { color: inherit; text-decoration: none; }
.card-link-title:hover { color: var(--teal-600); }