/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
/* ---------- Design tokens ---------- */
:root {
--bg: #ffffff;
--bg-soft: #f8fbfd;
--bg-section: #f0f7fa;
--ink: #1a2942;
--ink-soft: #4a5878;
--ink-mute: #8a96aa;
--accent: #4ab8c4;
--accent-deep: #2d8a96;
--accent-soft: #d4eef1;
--gold: #c9a961;
--line: #e2ebf0;
--shadow-sm: 0 2px 8px rgba(74, 184, 196, 0.08);
--shadow-md: 0 8px 24px rgba(26, 41, 66, 0.06);
--shadow-lg: 0 20px 60px rgba(26, 41, 66, 0.08);
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
--serif-ar: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; /* Arabic headings (client pick, 2026-10-14) */
--brand-ar: 'Amiri', 'Cormorant Garamond', serif; /* Arabic brand name only (header + footer logo) */
--sans-ar: 'Tajawal', 'Inter', sans-serif;
--container: 1200px;
--gutter: 24px;
--radius-card: 12px;
--radius-pill: 999px;
--radius-cta: 24px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
body {
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
font-weight: 400;
letter-spacing: -0.005em;
}
/* ---------- Arabic typography ---------- */
[dir="rtl"] body { font-family: var(--sans-ar); letter-spacing: 0; font-size: 17px; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .serif { font-family: var(--serif-ar); letter-spacing: 0; }
[dir="rtl"] .eyebrow { letter-spacing: 0.15em; }
/* ---------- Bilingual visibility ---------- */
[lang="en"] .ar-only { display: none !important; }
[lang="ar"] .en-only { display: none !important; }
/* ---------- Typography utilities ---------- */
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.018em; color: var(--ink); margin: 0 0 16px; }
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; }
h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 400; }
h4 { font-size: 18px; font-weight: 500; font-family: var(--sans); letter-spacing: 0; }
p { margin: 0 0 16px; color: var(--ink-soft); }
[dir="rtl"] p { color: var(--ink-soft); }
.eyebrow {
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-deep);
margin: 0 0 16px;
display: inline-block;
}
[dir="rtl"] .eyebrow { text-transform: none; font-family: var(--sans-ar); font-size: 13px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 96px 0; position: relative; }
@media (max-width: 768px) { section { padding: 64px 0; } }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 28px;
border-radius: var(--radius-pill);
font-weight: 500;
font-size: 15px;
transition: all 0.3s var(--ease);
cursor: pointer;
border: 1.5px solid transparent;
letter-spacing: 0.01em;
white-space: nowrap;
}
.btn-primary { background: var(--accent); color: white; box-shadow: 0 4px 14px rgba(74, 184, 196, 0.3); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(74, 184, 196, 0.4); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.btn-ghost { padding: 12px 22px; color: var(--ink); }
.btn-ghost:hover { color: var(--accent-deep); }
.btn-cta { padding: 16px 36px; border-radius: var(--radius-cta); font-size: 16px; }
.btn svg { width: 18px; height: 18px; }
/* ---------- Nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: 16px 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
transition: box-shadow 0.3s var(--ease), padding 0.3s var(--ease), background 0.3s var(--ease);
border-bottom: 1px solid transparent;
}
.nav.scrolled {
padding: 10px 0;
box-shadow: var(--shadow-sm);
background: rgba(255, 255, 255, 0.96);
border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; }
[dir="rtl"] .logo { font-family: var(--brand-ar); }
.logo-mark {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
display: flex; align-items: center; justify-content: center;
color: white; font-family: var(--serif); font-size: 16px; font-weight: 500;
box-shadow: 0 2px 6px rgba(45, 138, 150, 0.25);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--accent-deep); }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transition: transform 0.3s var(--ease); transform-origin: center; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--line);
font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
color: var(--ink-soft);
transition: all 0.2s;
display: flex; align-items: center; gap: 6px;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.lang-toggle svg { width: 14px; height: 14px; }
.nav-book { padding: 10px 22px; font-size: 14px; }
/* Mobile nav */
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 8px; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: 0.3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); transition: 0.3s; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1100px) {
.nav-toggle { display: flex; }
.nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: white; padding: 24px var(--gutter) 32px; gap: 20px; border-top: 1px solid var(--line); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: 0.3s var(--ease); box-shadow: var(--shadow-md); }
.nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-links a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
.nav-links a::after { display: none; }
}
@media (max-width: 480px) {
.nav-book { display: none; }
}
/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #cfe9ed 0%, #e8f5f7 35%, #f5f0e6 100%); }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 3s ease-out; }
.hero-bg video.loaded { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.88); }
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: clamp(44px, 7vw, 84px); margin-bottom: 24px; }
.hero-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-soft); max-width: 600px; margin: 0 auto 40px; line-height: 1.7; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-shape { position: absolute; z-index: 1; opacity: 0.6; }
.hero-shape.s1 { top: 18%; left: 6%; width: 80px; }
.hero-shape.s2 { top: 22%; right: 8%; width: 60px; transform: rotate(28deg); }
.hero-shape.s3 { bottom: 18%; left: 12%; width: 50px; transform: rotate(-15deg); }
.hero-shape.s4 { bottom: 22%; right: 10%; width: 70px; transform: rotate(45deg); }
@media (max-width: 768px) {
.hero { padding: 100px 0 60px; }
.hero-ctas { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
.hero-shape.s1 { width: 50px; left: 4%; }
.hero-shape.s2 { width: 40px; right: 4%; }
.hero-shape.s3, .hero-shape.s4 { display: none; }
}
.hero-stagger > * { opacity: 0; transform: translateY(16px); }
.hero.ready .hero-eyebrow { animation: fadeUp 0.7s var(--ease) 0.1s forwards; }
.hero.ready .hero-title { animation: fadeUp 0.7s var(--ease) 0.3s forwards; }
.hero.ready .hero-sub { animation: fadeUp 0.7s var(--ease) 0.5s forwards; }
.hero.ready .hero-ctas { animation: fadeUp 0.7s var(--ease) 0.7s forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ---------- Welcome / About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-img-wrap { position: relative; aspect-ratio: 4/5; }
.about-img { width: 100%; height: 100%; border-radius: var(--radius-card); background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 50%, #e8f5f7 100%); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.about-img::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.7), transparent 60%); }
.about-img::after { content: ''; position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); width: 60%; height: 50%; background: linear-gradient(180deg, transparent, rgba(74, 184, 196, 0.18)); border-radius: 50% 50% 0 0; filter: blur(20px); }
.about-img-tag { position: absolute; bottom: 24px; left: 24px; background: white; padding: 14px 18px; border-radius: 10px; box-shadow: var(--shadow-md); font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.about-img-tag svg { width: 18px; height: 18px; color: var(--accent); }
.about-shape { position: absolute; }
.about-shape.t1 { top: -16px; right: -16px; width: 70px; opacity: 0.7; }
.about-shape.t2 { bottom: -22px; left: -28px; width: 90px; opacity: 0.5; }
.about-shape.t3 { top: 40%; right: -32px; width: 55px; opacity: 0.6; transform: rotate(20deg); }
@media (max-width: 768px) {
.about-grid { grid-template-columns: 1fr; gap: 56px; }
.about-img-wrap { max-width: 420px; margin: 0 auto; }
}
/* ---------- Services ---------- */
.section-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.service-card {
background: white;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
border: 1px solid var(--line);
display: flex; flex-direction: column;
flex: 0 1 calc((100% - 56px) / 3);
max-width: calc((100% - 56px) / 3);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-img { aspect-ratio: 4/3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.service-img svg.service-icon { width: 64px; height: 64px; color: var(--accent-deep); opacity: 0.85; transition: transform 0.5s var(--ease); }
.service-card:hover .service-img svg.service-icon { transform: scale(1.08); }
.service-img.g1 { background: linear-gradient(135deg, #d4eef1 0%, #b6e1e6 100%); }
.service-img.g2 { background: linear-gradient(135deg, #e6f3ee 0%, #cde5dc 100%); }
.service-img.g3 { background: linear-gradient(135deg, #f3eede 0%, #e6d8b8 100%); }
.service-img.g4 { background: linear-gradient(135deg, #ecf5f7 0%, #d4eef1 100%); }
.service-img.g5 { background: linear-gradient(135deg, #f0eff8 0%, #d8d6ec 100%); }
.service-img.g6 { background: linear-gradient(135deg, #fbeae5 0%, #f3d4cc 100%); }
.service-body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.service-body h3 { font-size: 22px; margin-bottom: 8px; font-weight: 400; }
.card-sub { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; white-space: nowrap; }
[dir="rtl"] .card-sub { font-family: var(--sans-ar); }
.service-body p { font-size: 14.5px; flex: 1; margin-bottom: 16px; color: var(--ink-soft); }
.service-link { font-size: 13px; font-weight: 500; color: var(--accent-deep); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.service-link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.service-card:hover .service-link svg { transform: translateX(4px); }
[dir="rtl"] .service-card:hover .service-link svg { transform: translateX(-4px) scaleX(-1); }
[dir="rtl"] .service-link svg { transform: scaleX(-1); }
@media (max-width: 900px) {
.services-grid { gap: 20px; }
.service-card { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
.service-card { flex-basis: 100%; max-width: 100%; }
}
/* ---------- Doctor section ---------- */
.doctor-section { background: var(--bg-section); }
.doctor-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; }
.doctor-portrait-wrap { position: relative; }
.doctor-portrait {
aspect-ratio: 4/5;
border-radius: 200px 200px 24px 24px;
background: linear-gradient(160deg, #d4eef1 0%, #b6e1e6 35%, #f5f0e6 90%);
box-shadow: var(--shadow-lg);
position: relative; overflow: hidden;
display: flex; align-items: flex-end; justify-content: center;
}
.doctor-portrait::before {
content: 'MA';
position: absolute;
top: 32%; left: 50%; transform: translate(-50%, -50%);
font-family: var(--serif); font-weight: 300; font-style: italic;
font-size: 96px; color: rgba(255,255,255,0.85);
letter-spacing: -0.04em;
}
.doctor-portrait::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
background: linear-gradient(180deg, transparent, rgba(45, 138, 150, 0.15));
}
.doctor-frame-tag {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
background: white; padding: 14px 22px; border-radius: 999px;
box-shadow: var(--shadow-md);
font-size: 13px; color: var(--ink); font-weight: 500;
white-space: nowrap;
}
.doctor-tagline {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 21px; line-height: 1.4; color: var(--accent-deep);
margin: -4px 0 20px;
}
[dir="rtl"] .doctor-tagline { font-family: var(--sans-ar); font-style: normal; font-size: 22px; }
.doctor-pull-quote {
margin: 32px 0;
padding: 24px 0 24px 32px;
border-left: 2px solid var(--accent);
font-family: var(--serif); font-style: italic; font-weight: 300;
font-size: 22px; line-height: 1.5; color: var(--ink);
}
[dir="rtl"] .doctor-pull-quote { padding: 24px 32px 24px 0; border-left: none; border-right: 2px solid var(--accent); font-family: var(--sans-ar); font-style: normal; }
.doctor-signature { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--accent-deep); margin-top: 16px; display: block; }
[dir="rtl"] .doctor-signature { font-family: var(--sans-ar); font-style: normal; }
.doctor-credentials { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.credential-chip { font-size: 12px; padding: 6px 14px; border-radius: 999px; background: white; color: var(--ink-soft); border: 1px solid var(--line); letter-spacing: 0.04em; }
@media (max-width: 900px) {
.doctor-grid { grid-template-columns: 1fr; gap: 56px; }
.doctor-portrait-wrap { max-width: 380px; margin: 0 auto; }
}
/* ---------- Why choose us ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.why-list li:last-child { border-bottom: none; }
.why-check {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--accent-soft);
display: flex; align-items: center; justify-content: center;
color: var(--accent-deep);
}
.why-check svg { width: 20px; height: 20px; }
.why-list h4 { margin: 4px 0 4px; font-size: 17px; font-weight: 500; color: var(--ink); }
[dir="rtl"] .why-list h4 { font-family: var(--sans-ar); }
.why-list p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.why-image { aspect-ratio: 1/1; border-radius: var(--radius-card); background: linear-gradient(135deg, #f0f7fa 0%, #d4eef1 50%, #b6e1e6 100%); position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.why-image::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(circle at 25% 30%, rgba(255,255,255,0.5), transparent 40%),
radial-gradient(circle at 75% 70%, rgba(201,169,97,0.18), transparent 50%);
}
@media (max-width: 900px) {
.why-grid { grid-template-columns: 1fr; gap: 56px; }
.why-image { max-width: 420px; margin: 0 auto; }
}
/* ---------- Gallery ---------- */
.gallery-section { background: var(--bg-soft); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; grid-auto-rows: 220px; }
.gallery-item { position: relative; border-radius: var(--radius-card); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item .gimg { width: 100%; height: 100%; }
.gimg.b1 { background: linear-gradient(135deg, #d4eef1, #b6e1e6 60%, #2d8a96); }
.gimg.b2 { background: linear-gradient(135deg, #f5f0e6, #e6d8b8 50%, #c9a961); }
.gimg.b3 { background: linear-gradient(135deg, #ecf5f7, #cfe9ed 50%, #4ab8c4); }
.gimg.b4 { background: linear-gradient(135deg, #e6f3ee, #cde5dc 50%, #6db09a); }
.gimg.b5 { background: linear-gradient(135deg, #f0eff8, #d8d6ec 50%, #8a82c1); }
.gimg.b6 { background: linear-gradient(135deg, #fbeae5, #f3d4cc 50%, #d49180); }
.gallery-item::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(26, 41, 66, 0.55));
pointer-events: none;
}
.gallery-label {
position: absolute; bottom: 14px; left: 14px; right: 14px;
color: white; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
z-index: 2; font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
[dir="rtl"] .gallery-label { text-transform: none; letter-spacing: 0; font-family: var(--sans-ar); }
.gallery-label::before { content: ''; width: 24px; height: 1px; background: white; opacity: 0.7; }
@media (max-width: 768px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 12px; }
.gallery-item.tall { grid-row: span 1; }
}
/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.92); z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-content { width: min(900px, 100%); aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; position: relative; box-shadow: var(--shadow-lg); }
.lightbox-img { width: 100%; height: 100%; }
.lightbox-close { position: absolute; top: -50px; right: 0; color: white; font-size: 28px; width: 44px; height: 44px; border-radius: 50%; }
[dir="rtl"] .lightbox-close { right: auto; left: 0; }
.lightbox-caption { position: absolute; bottom: 24px; left: 24px; color: white; font-family: var(--serif); font-style: italic; font-size: 20px; }
/* ---------- Gallery page: reusable albums ---------- */
.album { margin: 0 auto 96px; }
.album:last-of-type { margin-bottom: 0; }
.album-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.album-head h2 { margin-bottom: 14px; }
.album-caption { font-size: 16.5px; color: var(--ink-soft); margin: 0 0 10px; }
.album-note { font-size: 13px; color: var(--ink-mute); margin: 0; font-style: italic; line-height: 1.6; }
[dir="rtl"] .album-note { font-family: var(--sans-ar); font-style: normal; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.photo-tile {
position: relative; margin: 0;
border-radius: var(--radius-card); overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--shadow-sm);
background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 100%);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.photo-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.photo-tile img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center top;
transition: transform 0.5s var(--ease);
}
.photo-tile:hover img { transform: scale(1.05); }
@media (max-width: 768px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 380px) { .photo-grid { grid-template-columns: 1fr; } }
/* ---------- Testimonials slider ---------- */
.testimonials-section { padding: 96px 0; }
.testimonials-track { position: relative; max-width: 760px; margin: 0 auto; }
.testimonials-viewport { overflow: hidden; }
.testimonials-rail { display: flex; transition: transform 0.6s var(--ease); }
.testimonial { flex: 0 0 100%; padding: 0 8px; box-sizing: border-box; text-align: center; }
.testimonial-quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.5; color: var(--ink); margin-bottom: 28px; }
[dir="rtl"] .testimonial-quote { font-family: var(--sans-ar); font-style: normal; }
.testimonial-name { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; color: var(--accent-deep); }
.testimonial-loc { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.slider-arrows { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.slider-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; transition: 0.3s; color: var(--ink-soft); }
.slider-arrow:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.slider-arrow svg { width: 16px; height: 16px; }
[dir="rtl"] .slider-arrow svg { transform: scaleX(-1); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: 0.3s; cursor: pointer; }
.slider-dot.active { background: var(--accent); width: 28px; border-radius: 4px; }
/* ---------- FAQ ---------- */
.faq-section { background: var(--bg-section); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
width: 100%; text-align: left; padding: 24px 0;
display: flex; justify-content: space-between; align-items: center; gap: 20px;
font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); font-weight: 400; color: var(--ink);
transition: color 0.3s;
}
[dir="rtl"] .faq-q { text-align: right; font-family: var(--serif-ar); }
.faq-q:hover { color: var(--accent-deep); }
.faq-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; transition: 0.4s var(--ease); }
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); color: white; }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 0 28px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 700px; }
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.contact-info-block { padding: 24px 0; border-bottom: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start; }
.contact-info-block:last-of-type { border-bottom: none; padding-bottom: 32px; }
.contact-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; }
.contact-icon svg { width: 18px; height: 18px; }
.contact-info-block h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin: 4px 0 6px; }
[dir="rtl"] .contact-info-block h4 { font-family: var(--sans-ar); text-transform: none; letter-spacing: 0; font-size: 13px; }
.contact-info-block p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.whatsapp-link { color: #25D366 !important; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.contact-form { background: white; padding: 40px; border-radius: var(--radius-card); box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
[dir="rtl"] .form-field label { text-transform: none; letter-spacing: 0; font-family: var(--sans-ar); font-size: 13px; }
.form-field input, .form-field select, .form-field textarea {
width: 100%; padding: 14px 16px;
border: 1.5px solid var(--line); border-radius: 8px;
background: var(--bg-soft);
transition: 0.2s; font-size: 15px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-submit { width: 100%; margin-top: 8px; padding: 16px; }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; gap: 56px; }
.contact-form { padding: 28px; }
.form-row { grid-template-columns: 1fr; }
}
/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,0.85); padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 64px; padding-bottom: 64px; }
.footer-logo { color: white; font-family: var(--serif); font-size: 28px; font-weight: 400; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
[dir="rtl"] .footer-logo { font-family: var(--brand-ar); }
.footer-tagline { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 320px; }
.footer h4 { color: white; font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
[dir="rtl"] .footer h4 { font-family: var(--sans-ar); text-transform: none; letter-spacing: 0; font-size: 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: 14.5px; color: rgba(255,255,255,0.7); transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
.footer-contact p { color: rgba(255,255,255,0.7); font-size: 14.5px; margin-bottom: 8px; line-height: 1.5; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 24px 0;
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
font-size: 13px; color: rgba(255,255,255,0.5);
}
.footer-watermark { font-size: 12.5px; color: rgba(255,255,255,0.45); font-style: italic; }
.footer-watermark a { color: rgba(255,255,255,0.7); border-bottom: 1px dotted rgba(255,255,255,0.4); }
.footer-watermark a:hover { color: var(--accent); }
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ---------- WhatsApp FAB ---------- */
.wa-fab {
position: fixed; bottom: 24px; right: 24px; z-index: 40;
width: 60px; height: 60px;
background: #25D366; color: white;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
[dir="rtl"] .wa-fab { right: auto; left: 24px; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55); }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab::before {
content: ''; position: absolute; inset: -6px;
border-radius: 50%;
background: rgba(37, 211, 102, 0.35);
z-index: -1;
animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
/* ---------- Real photos (media-swap pass) ---------- */
.logo-mark-img {
width: 40px; height: 40px;
border-radius: 10px;
object-fit: contain;
background: white;
padding: 3px;
box-shadow: 0 2px 6px rgba(45, 138, 150, 0.18);
}
.footer .logo-mark-img { background: white; }
/* Self-healing image placeholder (revealed when an ![]()
fails to load) */
.img-ph {
position: absolute; inset: 0; z-index: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 100%);
border-radius: inherit;
}
.img-ph svg { width: 54px; height: 54px; color: var(--accent-deep); opacity: 0.5; }
img.img-failed { visibility: hidden; }
.hero-bg img.hero-photo {
width: 100%; height: 100%; object-fit: cover;
position: relative; z-index: 1;
}
.hero.has-photo .hero-overlay { background: rgba(26, 41, 66, 0.62); }
.hero.has-photo .hero-title { color: #ffffff; }
.hero.has-photo .hero-sub { color: rgba(255, 255, 255, 0.88); }
.hero.has-photo .hero-eyebrow { color: #9fe1e8; }
.hero.has-photo .btn-outline {
color: #ffffff; border-color: rgba(255, 255, 255, 0.6); background: transparent;
}
.hero.has-photo .btn-outline:hover {
color: var(--accent-deep); border-color: #ffffff; background: rgba(255, 255, 255, 0.96);
}
.about-img.has-img::before,
.about-img.has-img::after { content: none; }
.about-img img.about-photo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; border-radius: inherit;
}
.doctor-portrait.has-img::before,
.doctor-portrait.has-img::after { content: none; }
.doctor-portrait img.doctor-photo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center top;
border-radius: inherit;
}
.service-img img.service-photo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.3s var(--ease);
}
.service-card:hover .service-img img.service-photo { transform: scale(1.06); }
.why-image.has-img::before { content: none; }
.why-image img.why-image-photo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
z-index: 0;
}
.why-image.has-img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0));
pointer-events: none;
z-index: 1;
}
/* ---------- Active nav item (subpages) ---------- */
.nav-links a[aria-current="page"] { color: var(--accent-deep); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1100px) {
.nav-links a[aria-current="page"] { color: var(--accent-deep); }
}
/* ---------- CTA band (subpages) ---------- */
.cta-band { background: var(--bg-section); text-align: center; }
.cta-band .container { max-width: 720px; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { margin-bottom: 28px; }
/* ==========================================================================
MULTI-PAGE / FROST-STYLE COMPONENTS (orthodontics hub, treatment pages, doctors)
========================================================================== */
/* ---------- Compact hero (subpages) ---------- */
.hero.hero-compact { min-height: 64vh; padding: 124px 0 72px; }
@media (max-width: 768px) { .hero.hero-compact { min-height: auto; padding: 108px 0 56px; } }
/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 13px; color: var(--ink-mute); margin-bottom: 18px; letter-spacing: 0.01em; }
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; opacity: 0.6; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 500; }
[dir="rtl"] .breadcrumb { font-family: var(--sans-ar); }
/* ---------- 3-pillar approach row ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pillar { text-align: center; padding: 8px; }
.pillar-icon { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; }
.pillar-icon svg { width: 28px; height: 28px; }
.pillar h3 { font-size: 23px; margin-bottom: 10px; }
.pillar p { font-size: 15px; color: var(--ink-soft); margin: 0; }
@media (max-width: 768px) { .pillars { grid-template-columns: 1fr; gap: 40px; } }
/* ---------- Split (text + image) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse { direction: ltr; }
.split-img { border-radius: var(--radius-card); overflow: hidden; position: relative; aspect-ratio: 4/3; box-shadow: var(--shadow-md); background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 100%); }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .split { grid-template-columns: 1fr; gap: 36px; } }
/* ---------- Benefit / bullet list ---------- */
.benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.benefit-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.benefit-list .bl-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.benefit-list .bl-check svg { width: 15px; height: 15px; }
/* ---------- Numbered steps ---------- */
.steps { display: grid; gap: 22px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--serif); font-style: italic; font-size: 21px; display: flex; align-items: center; justify-content: center; }
[dir="rtl"] .step-num { font-family: var(--serif-ar); font-style: normal; }
.step h4 { margin: 8px 0 4px; font-size: 17px; font-weight: 500; color: var(--ink); }
[dir="rtl"] .step h4 { font-family: var(--sans-ar); }
.step p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
/* ---------- Doctors hub cards ---------- */
.doctors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 920px; margin: 0 auto; }
.doc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.doc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.doc-card-img { aspect-ratio: 5/4; position: relative; overflow: hidden; background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 100%); }
.doc-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s var(--ease); }
.doc-card:hover .doc-card-img img { transform: scale(1.04); }
.doc-card-body { padding: 28px 26px; flex: 1; display: flex; flex-direction: column; }
.doc-card-body h3 { margin: 0 0 4px; font-size: 24px; }
.doc-title { color: var(--accent-deep); font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 14px; }
[dir="rtl"] .doc-title { font-family: var(--sans-ar); letter-spacing: 0; }
.doc-card-body p { font-size: 15px; flex: 1; margin-bottom: 18px; }
@media (max-width: 768px) { .doctors-grid { grid-template-columns: 1fr; max-width: 420px; } }
/* ---------- Featured doctor (top, centered) + placeholder cards ---------- */
.doctor-featured { max-width: 480px; margin: 0 auto 40px; }
.doc-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.doc-featured-badge {
display: inline-block; align-self: flex-start;
font-family: var(--sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent-deep); background: var(--accent-soft);
padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
[dir="rtl"] .doc-featured-badge { font-family: var(--sans-ar); letter-spacing: 0; text-transform: none; }
.doc-soon { margin-top: auto; padding-top: 6px; font-size: 13px; font-style: italic; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 8px; }
[dir="rtl"] .doc-soon { font-family: var(--sans-ar); font-style: normal; }
.doc-soon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.55; flex-shrink: 0; }
/* ---------- Representative quote grid ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.quote-card p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
[dir="rtl"] .quote-card p { font-family: var(--sans-ar); font-style: normal; }
.quote-card .q-name { font-size: 13px; font-weight: 600; color: var(--accent-deep); letter-spacing: 0.04em; }
.quote-disclaimer { text-align: center; font-size: 12.5px; color: var(--ink-mute); margin-top: 26px; font-style: italic; }
[dir="rtl"] .quote-disclaimer { font-family: var(--sans-ar); font-style: normal; }
@media (max-width: 768px) { .quote-grid { grid-template-columns: 1fr; } }
/* ---------- Before/After placeholder tiles ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ba-tile { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; position: relative; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 100%); color: var(--accent-deep); text-align: center; padding: 16px; }
.ba-tile span { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
[dir="rtl"] .ba-tile span { text-transform: none; letter-spacing: 0; font-family: var(--sans-ar); }
.ba-disclaimer { text-align: center; font-size: 12.5px; color: var(--ink-mute); margin-top: 20px; font-style: italic; }
[dir="rtl"] .ba-disclaimer { font-family: var(--sans-ar); font-style: normal; }
@media (max-width: 560px) { .ba-grid { grid-template-columns: 1fr; } }
/* ---------- Mini-FAQ on detail pages (static, no JS) ---------- */
.mini-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 4px; }
.mini-faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.mini-faq-item h4 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); margin: 0 0 8px; }
[dir="rtl"] .mini-faq-item h4 { font-family: var(--serif-ar); }
.mini-faq-item p { margin: 0; font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; }
/* ---------- Accessibility: skip link + keyboard focus ---------- */
.skip-link { position: fixed; top: -100%; inset-inline-start: 16px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-md); }
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .case-shot:focus-visible { border-radius: var(--radius-pill); }
.case-shot:focus-visible { border-radius: 0; }
/* ---------- Doctor profile page (template: dr-munaf-al-chalabi.html) ---------- */
.profile-hero { background: linear-gradient(180deg, var(--bg-section) 0%, var(--bg) 100%); padding: 148px 0 88px; }
@media (max-width: 768px) { .profile-hero { padding: 116px 0 64px; } }
.profile-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
@media (max-width: 900px) {
.profile-hero-grid { grid-template-columns: 1fr; gap: 48px; }
/* width:100% is load-bearing: with margin:0 auto the grid item stops stretching, and the
portrait's children are all absolutely positioned, so auto width collapses to 0. */
.profile-hero-grid .doctor-portrait-wrap { width: 100%; max-width: 340px; margin: 0 auto; order: -1; }
}
/* Entrance stagger: .profile-hero has no .hero class, so main.js's .hero.ready
trigger never fires here — run the fadeUp keyframes directly from CSS. */
.profile-hero .hero-stagger > * { animation: fadeUp 0.7s var(--ease) forwards; }
.profile-hero .hero-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.profile-hero .hero-stagger > *:nth-child(2) { animation-delay: 0.25s; }
.profile-hero .hero-stagger > *:nth-child(3) { animation-delay: 0.4s; }
.profile-hero .hero-stagger > *:nth-child(4) { animation-delay: 0.55s; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--accent-deep); margin-bottom: 22px; transition: color 0.2s var(--ease); }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 15px; height: 15px; }
[dir="rtl"] .back-link svg { transform: scaleX(-1); }
.profile-hero h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 10px; }
.profile-role { color: var(--accent-deep); font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; }
[dir="rtl"] .profile-role { font-family: var(--sans-ar); letter-spacing: 0; text-transform: none; font-size: 16px; }
.qual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .qual-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
/* Opt-in: centers a trailing part-row when the card count isn't a multiple of 3 (Mustafa: 5 cards → 3 + 2).
Flex, not grid, because grid can't center an incomplete last row. Grids that fill their rows (Munaf: 3)
never opt in and are unaffected. */
.qual-grid.is-centered { display: flex; flex-wrap: wrap; justify-content: center; }
.qual-grid.is-centered .qual-card { flex: 0 1 calc((100% - 56px) / 3); }
@media (max-width: 900px) { .qual-grid.is-centered .qual-card { flex: 1 1 100%; } }
.qual-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 32px 28px; box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.qual-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.qual-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.qual-icon svg { width: 24px; height: 24px; }
.qual-card h3 { font-size: 21px; margin-bottom: 8px; }
.qual-card p { font-size: 14.5px; margin: 0; line-height: 1.6; }
/* Before/after cases grid (doctor background pages) */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.case-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (max-width: 560px) { .case-pair { grid-template-columns: 1fr; } }
.case-shot { position: relative; aspect-ratio: 3/4; overflow: hidden; padding: 0; cursor: zoom-in; background: linear-gradient(135deg, #d4eef1 0%, #f5f0e6 100%); display: block; width: 100%; }
.case-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 0.4s var(--ease); }
.case-shot:hover img, .case-shot:focus-visible img { transform: scale(1.04); }
.case-tag { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 1; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); pointer-events: none; }
[dir="rtl"] .case-tag { font-family: var(--sans-ar); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.case-num { padding: 14px 18px; font-size: 13px; color: var(--ink-mute); text-align: center; letter-spacing: 0.04em; }
[dir="rtl"] .case-num { font-family: var(--sans-ar); letter-spacing: 0; }
/* Radiograph variant (endodontic case pages, e.g. dr-mustafa-majeed.html): a single diagnostic X-ray
per card, never a before/after pair. Keeps the .case-shot class so main.js's lightbox binding and the
img-placeholder frame list still apply; only fit, ratio and backdrop change.
object-fit MUST stay contain — cropping a radiograph destroys the diagnostic content. The sources are
mixed 1:1 and ~1.9:1 on black film, so a black tile makes the letterboxing invisible. */
.case-shot.is-xray { aspect-ratio: 4/3; background: #000; }
.case-shot.is-xray img { object-fit: contain; object-position: center; }
/* main.js injects an .img-ph placeholder (inset:0, teal→ivory gradient) into every .case-shot frame, and
it paints over the tile's background — so the gradient, not black, would fill the letterbox bars around
a contained radiograph. Blacken the placeholder itself; its tooth icon still shows if an image 404s. */
.case-shot.is-xray .img-ph { background: #000; }
/* No hover zoom: scaling a contained image pushes the film past the tile edge, which crops it. */
.case-shot.is-xray:hover img, .case-shot.is-xray:focus-visible img { transform: none; }
/* Showcase variant (finished-result tiles, e.g. dr-mohamed-al-khfaje.html): one standalone photo per card,
never a before/after pair and never labelled as an "after". Keeps .case-shot so main.js's lightbox
binding and the img-placeholder frame list still apply; only ratio and object-position change.
Ratio 4/3, NOT the default 3/4: the clinic's burned-in script watermark ("Mk mohammed Al-khfaje") runs
nearly the full width of the source on some tiles, and any frame narrower than the widest watermarked
source clips it mid-word ("Mk mohammed A…"). The watermarked sources are 1280x960 (1.333) and 1280x1280
(1.000), so 4/3 is the narrowest frame that still shows 100% of the image width on all of them.
object-position bottom: the 1:1 sources lose 25% of their height in a 4/3 frame and the watermark sits on
the bottom edge, so anchoring to the bottom is what keeps it in frame. The 3:2 sources have no vertical
overflow here, so the Y value is inert for them — it only ever acts on the square tiles.
The before/after .case-grid deliberately stays at the default 3/4; this variant must not leak into it. */
.case-shot.is-showcase { aspect-ratio: 4/3; }
.case-shot.is-showcase img { object-position: center bottom; }
/* Caption slot — reserved but intentionally empty until the doctor supplies per-case text.
min-height keeps cards level while the slot is blank.
--ink-soft, not --ink-mute: mute is 2.99:1 on white and fails WCAG AA for body text. */
.case-caption { padding: 14px 18px; min-height: 46px; font-size: 13px; color: var(--ink-soft); text-align: center; line-height: 1.6; }
[dir="rtl"] .case-caption { font-family: var(--sans-ar); }
/* Lightbox: real-photo mode (case shots) — the base .lightbox-img only carries gradient classes */
.lightbox-img.has-photo { background: #101828; }
.lightbox-img.has-photo img { width: 100%; height: 100%; object-fit: contain; }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
.hero-stagger > * { opacity: 1; transform: none; }
.wa-fab::before { display: none; }
}
/* === Clinic photography (added) ===
Support for the 2026-09 professional shoot in img/clinic/. Tokens only, no new
palette values, no new motion. Added in phases; each block notes its phase. */
/* --- Phase 1: homepage hero + about --- */
/* The hero photo is now art-directed, so the ![]()
sits inside a . is
inline by default, which would collapse the img's height:100%; this restores the layer
geometry the bare ![]()
used to have. The .en-only/.ar-only display:none !important
rules still win over this, so language switching is unaffected. */
.hero-bg > picture {
position: absolute; inset: 0; z-index: 1;
display: block;
}
/* Focal points from the shoot manifest: keeps the reception desk and the MK logo wall in
frame as the cover-crop changes shape. Desktop/tablet source and the vertical phone
source are framed differently, hence the breakpoint — it matches the one. */
.hero-bg > picture > img.hero-photo { object-position: 45% 55%; }
@media (max-width: 767px) {
.hero-bg > picture > img.hero-photo { object-position: 50% 60%; }
}
/* Measured against the real hero photo (a bright white-ceiling lounge) at 375/390/768/
1024/1440/1920px: the inherited 0.62 navy left .hero-title at 4.35:1, just under AA.
0.64 is the smallest step that clears 4.5:1 at every one of those widths (4.51–4.63).
color-mix keeps this on --ink rather than a hard-coded rgba(); browsers without it fall
back to the 0.62 rule above, which is the previous behaviour rather than a broken one. */
.hero.has-photo .hero-overlay {
background: color-mix(in srgb, var(--ink) 64%, transparent);
}
/* About/intro photo — home-page.jpg (3:2 landscape, 2026-09-29) in the 4:5 frame: full height shows, about half
the width. 38% 55% keeps the blue chair, the smile monitor and the red laser in frame. */
.about-img img.about-photo { object-position: 38% 55%; }
/* --- Phase 2: "Inside the clinic" grid, Equipment album, contact facade --- */
/* Clinic-photo tile. Reuses .case-shot wholesale (lightbox binding, .img-ph frame, focus
ring) and changes only what the shoot requires:
- 3:2 to match every source file, instead of the 3:4 portrait the case galleries use.
This also satisfies the shoot's crop-safety rule for the team photos in Phase 3.
- no hover zoom. .case-shot scales its image 1.04 on hover/focus; these are rooms, not
clinical close-ups, and the brief rules out hover zooms. Motion is removed rather
than re-timed so nothing new animates. */
.case-shot.clinic-shot { aspect-ratio: 3/2; }
.case-shot.clinic-shot img { object-position: 50% 50%; transition: none; }
.case-shot.clinic-shot:hover img,
.case-shot.clinic-shot:focus-visible img { transform: none; }
/* Focal points, one per photo, straight from the shoot manifest. Kept here rather than in
inline styles so every crop decision for the shoot sits in one place. */
.clinic-shot.focal-reception-desk img { object-position: 40% 60%; }
.clinic-shot.focal-vip-lounge img { object-position: 45% 55%; }
.clinic-shot.focal-vip-entrance img { object-position: 50% 50%; }
.clinic-shot.focal-vip-corridor img { object-position: 50% 50%; }
.clinic-shot.focal-room-01 img { object-position: 50% 55%; }
.clinic-shot.focal-room-02 img { object-position: 50% 55%; }
.clinic-shot.focal-room-03 img { object-position: 50% 55%; }
.clinic-shot.focal-room-04 img { object-position: 45% 55%; }
.clinic-shot.focal-room-05 img { object-position: 45% 50%; }
.clinic-shot.focal-zeiss img { object-position: 40% 45%; }
.clinic-shot.focal-zumax img { object-position: 40% 50%; }
.clinic-shot.focal-scanner img { object-position: 55% 40%; }
.clinic-shot.focal-xray img { object-position: 50% 40%; }
.clinic-shot.focal-laser img { object-position: 50% 55%; }
.clinic-shot.focal-loupes img { object-position: 45% 60%; }
.clinic-shot.focal-handheld img { object-position: 45% 55%; }
/* Landscape tiles get two columns on phones instead of the .photo-grid default of one
below 380px — a 3:2 tile at full phone width is taller than it needs to be, and the
grid's own 768px rule already drops to two. */
@media (max-width: 380px) {
#inside .photo-grid, #equipment .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* Clinic facade in the contact column. Mirrors .contact-info-block spacing so it reads as
the last item in that stack rather than a new component. */
.clinic-figure { margin: 0; padding-top: 8px; }
.clinic-figure img {
width: 100%; height: auto; aspect-ratio: 3/2;
object-fit: cover; object-position: 55% 45%;
border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
.clinic-figure figcaption {
margin-top: 10px; font-size: 13.5px; color: var(--ink-mute); line-height: 1.5;
}
[dir="rtl"] .clinic-figure figcaption { font-family: var(--sans-ar); font-size: 14.5px; }
/* --- Phase 3: doctors.html team banner --- */
/* Wide group photo above the doctor grid. Crop safety is the whole design here: the shoot
rule is "3:2 or wider, never taller than 4:3", because anything taller starts cutting
through heads. 2:1 with the manifest's 50% 35% focal point shows source rows 140–1340 of
1600 — the seven faces sit at roughly 530–860, so they clear both edges comfortably and
the crop lands around hip level.
Below 768px it falls back to the source's own 3:2: a 2:1 strip on a phone is ~180px tall
and the faces become unreadable, and 3:2 crops nothing at all. */
.team-banner {
margin: 0 0 56px;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 2/1;
position: relative;
}
.team-banner img {
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 35%;
}
@media (max-width: 767px) {
.team-banner { aspect-ratio: 3/2; margin-bottom: 36px; }
}
/* Focal points for the Phase 3 swaps. These frames are fixed-ratio (the hero is
viewport-shaped at min-height 64vh; .split-img is 4:3) and both are narrower than the
3:2 sources, so unlike the 3:2 gallery tiles these crops are real and the manifest's
focal point decides what survives. Applied as classes on the ![]()
because the
stylesheet is shared by every page and there is no per-page body class to key off. */
.hero-photo.focal-room-01 { object-position: 50% 55%; }
.hero-photo.focal-room-04 { object-position: 45% 35%; }
.hero-photo.focal-ortho { object-position: 55% 55%; }
.split-img img.focal-xray { object-position: 50% 40%; }
/* --- Phase 4: hero sub-headline contrast --- */
/* Against the new lounge photo at overlay 0.64 the inherited rgba(255,255,255,0.88) left
.hero-sub at 4.00:1 — under AA for normal-size text. Full white takes it to 4.62:1, the
same ratio .hero-title already achieves, with no overlay change and no new colour: this
is the exact value .hero-title is declared with a few lines above.
Note .hero-eyebrow (#9fe1e8) is still 3.17:1 and would need overlay 0.76 to pass, which
visibly darkens the photo — left as-is by decision, not oversight. */
.hero.has-photo .hero-sub { color: #ffffff; }
/* === Pre-meeting QA fixes (2026-09-29) ===
Bug fixes only: no new colours, fonts or motion. Each rule names the audit item it closes
(mk-audit-2026-09-29/audit-report.md). */
/* C1 — homepage frames collapsed to 0x0 on phones. Same cause and fix as the doctor pages
(style.css "width:100% is load-bearing"): with margin:0 auto the grid item stops stretching,
and every child is absolutely positioned, so the width falls to 0. The two decorative
triangles are pulled inward so the wider frame doesn't push past the gutter. */
@media (max-width: 900px) {
.why-image, .doctor-portrait-wrap { width: 100%; }
}
/* The About triangles sit 28-32px outside their column; below ~1250px (container at full width) that pushes
~16px past the viewport and adds a sideways scroll. Pull it inside the gutter there. */
@media (max-width: 1280px) {
.about-shape.t3 { right: -16px; }
.about-shape.t2 { left: -20px; } /* RTL puts this column on the left edge */
}
@media (max-width: 768px) {
.about-img-wrap { width: 100%; }
.about-shape.t2 { left: -12px; }
.about-shape.t3 { right: -8px; }
}
/* H1 — letter-spacing pulls Arabic letters apart (breaks joining). Several components set it
(.eyebrow 0.15em in RTL, .btn, chips, dropdown group heads, logo…); zero it for Arabic. The
«عربي» toggle label is Arabic even on English pages. */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
.lang-toggle .en-only { letter-spacing: 0; }
/* H2 — no faux-italic Arabic, and the lightbox caption follows the reading side. */
[dir="rtl"] .lightbox-caption { left: auto; right: 24px; font-family: var(--sans-ar); font-style: normal; font-size: 17px; }
[dir="rtl"] .footer-watermark { font-style: normal; }
/* H3 — trailing arrow icons inside buttons point forward in both directions. The WhatsApp
icon is always the first child, so it is untouched. */
[dir="rtl"] .btn > svg:last-child { transform: scaleX(-1); }
/* H8 — opt-in for galleries of side-by-side / stacked before-after composites (Dr. Yaseen):
show the whole image instead of a 3:4 centre crop that cuts the panels in half. */
.case-shot.is-composite img { object-fit: contain; object-position: center; background: #fff; }
.case-shot.is-composite:hover img, .case-shot.is-composite:focus-visible img { transform: none; }
/* H10 — reserved caption slots stay invisible until they have text (they reappear on their own). */
.case-caption:empty,
.case-caption:has(> .en-only:empty):has(> .ar-only:empty) { display: none; }
/* M27 — Arabic body text a touch more room. Arabic headings: see "Font C" at the end of this file. */
[dir="rtl"] body { line-height: 1.75; }
/* C3 — booking form status line (WhatsApp hand-off). */
.form-status { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.form-status.is-error { color: var(--ink); font-weight: 500; }
/* M9 — keyboard focus on the gallery's before/after tiles (now focusable). */
.gallery-item:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
/* === Header brand (client request 2026-09-29) ===
Official transparent MK mark (img/mk-logo-mark.png, 341x240, used as supplied) sits directly on the header:
no tile, padding, border, shadow or filter. 58px tall on desktop, 44px when the menu is collapsed (<=1100px,
which covers 768px and below). The longer clinic name wraps to two lines instead of truncating, and the nav
collapses into the existing hamburger menu below 1100px. The footer keeps the original logo on its white
tile: the full logo's wordmark is not readable on the navy footer at footer size. */
.nav .logo-mark-img { width: auto; height: 58px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; filter: none; mix-blend-mode: normal; flex-shrink: 0; }
.nav .logo { min-width: 0; flex: 0 1 auto; font-size: 21px; line-height: 1.15; }
.nav .logo > span { max-width: 10em; }
@media (max-width: 1280px) {
.nav .logo { font-size: 18px; }
}
@media (max-width: 1100px) {
.nav .logo-mark-img { height: 44px; }
.nav .logo { font-size: 17px; }
}
@media (max-width: 480px) {
.nav-inner { gap: 10px; }
.nav .logo { font-size: 14px; gap: 8px; }
}
@media (max-width: 400px) {
.nav-inner { gap: 8px; }
.nav-actions { gap: 6px; }
.lang-toggle { padding: 7px 10px; }
.nav .logo { font-size: 13.5px; gap: 6px; }
}
/* Keep the doctor's name on one line when the clinic name wraps ("Mohammed Al-Khfaje / Dental Center"). */
.logo .nowrap, .footer-logo .nowrap { white-space: nowrap; }
/* === Doctors page pyramid (clinic request 2026-09-29) ===
Row 1: Dr. Mohammed's featured card (.doctor-featured, unchanged). Below it one flex row of 7 identical cards:
>=1100px 3 then 4 (the .row-break forces the wrap, so row 3 is visibly wider than row 2);
600-1099px 2 per row with the last odd card centred; <600px one per row. Order mirrors naturally in RTL. */
.doctors-grid.is-pyramid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; max-width: 920px; }
.doctors-grid.is-pyramid > .doc-card { flex: 0 0 calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); min-width: 0; }
.doctors-grid.is-pyramid > .row-break { display: none; }
@media (min-width: 1100px) {
.doctors-grid.is-pyramid { max-width: none; }
.doctors-grid.is-pyramid > .doc-card { flex-basis: calc((100% - 84px) / 4); max-width: calc((100% - 84px) / 4); }
.doctors-grid.is-pyramid > .row-break { display: block; flex-basis: 100%; height: 0; margin-top: -28px; }
.doctors-grid.is-pyramid .doc-card-body { padding: 24px 20px; }
}
@media (max-width: 599px) {
.doctors-grid.is-pyramid { max-width: 420px; }
.doctors-grid.is-pyramid > .doc-card { flex-basis: 100%; max-width: 100%; }
}
/* Long names/titles wrap inside the card instead of overflowing it. */
.doc-card-body h3, .doc-card-body .doc-title { overflow-wrap: anywhere; }
/* Dr. Ahmed's case gallery (dr-ahmed-ali.html): single case sheets of mixed shapes + before/after pairs.
Reuses .case-card/.case-pair/.case-shot, .is-xray (root canal: 4/3, black, contain) and the H8
.is-composite contain rule. New here: a 4/3 frame with a light-neutral letterbox for the cosmetic sheets,
and pairs spanning the row on desktop so their two frames match the single-sheet frames in size. */
.case-shot.is-wide { aspect-ratio: 4/3; }
.case-shot.is-composite.is-wide img { background: var(--bg-section); }
@media (min-width: 901px) { .case-grid > .case-card.is-span { grid-column: 1 / -1; } }
/* Lightbox (run 13). The close button sits 50px above .lightbox-content, which clipped it (overflow:hidden),
so it was invisible on every page; the clip and rounding now live on .lightbox-img instead.
The viewer also shrinks on short screens so the close button and arrows stay on screen
(170px = 24+24 padding + 50 close + ~70 arrows). */
.lightbox-content { overflow: visible; width: min(900px, 100%, calc((100vh - 170px) * 4 / 3)); }
.lightbox-content { width: min(900px, 100%, calc((100dvh - 170px) * 4 / 3)); }
.lightbox-img { border-radius: 12px; overflow: hidden; }
/* Captions stay inside the photo's width and readable on light photos. */
.lightbox-caption, [dir="rtl"] .lightbox-caption { left: 24px; right: 24px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6); pointer-events: none; }
/* Prev/next (injected by main.js). Phones/tablets: a centred pair under the photo. */
.lightbox-nav { position: absolute; top: calc(100% + 14px); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, 0.14); transition: background 0.2s var(--ease), opacity 0.2s var(--ease); }
.lightbox-nav[hidden] { display: none; }
.lightbox-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); }
.lightbox-nav:disabled { opacity: 0.3; cursor: default; }
.lightbox-nav.is-prev { inset-inline-start: calc(50% - 58px); }
.lightbox-nav.is-next { inset-inline-end: calc(50% - 58px); }
[dir="rtl"] .lightbox-nav svg { transform: scaleX(-1); }
/* Desktop: arrows either side of the photo, vertically centred. */
@media (min-width: 1024px) {
.lightbox-content { width: min(900px, calc(100% - 136px), calc((100vh - 120px) * 4 / 3)); }
.lightbox-content { width: min(900px, calc(100% - 136px), calc((100dvh - 120px) * 4 / 3)); }
.lightbox-nav { top: 50%; margin-top: -22px; }
.lightbox-nav.is-prev { inset-inline-start: -68px; }
.lightbox-nav.is-next { inset-inline-end: -68px; }
}
/* Dr. Ahmed: a lone last card in a two-column case grid sits centred (remove .is-solo if cases change). */
@media (min-width: 901px) { .case-grid > .case-card.is-solo { grid-column: 1 / -1; justify-self: center; width: calc((100% - 28px) / 2); } }
/* ---------- Services restructure (2026-10-02) ---------- */
/* Homepage service cards: the whole card is the link (stretched "Learn more"). Scoped to the homepage grid so
other card grids (orthodontics.html) keep their behaviour. */
#services .service-card { position: relative; }
#services .service-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Footer: brand / Explore / Services / Contact; 2 x 2 on tablets, one column on phones. */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } }
/* Category pages: one section per service item (.split when a real photo exists, a centred text block otherwise). */
.svc-intro { padding-bottom: 0; }
.svc-intro .section-head { margin-bottom: 0; }
.svc-item .section-head { margin-bottom: 0; }
.svc-item.is-text { padding: 72px 0; }
@media (max-width: 768px) { .svc-item.is-text { padding: 56px 0; } }
.svc-item .split .benefit-list { margin-top: 20px; }
/* Gallery Before & After tiles that hold a doctor's real cases (data-set lightbox groups). */
.gallery-item.has-cases > .case-shot { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.gallery-item.has-cases .gallery-label { pointer-events: none; }
/* .case-shot sets display:block, which beats the [hidden] attribute; the other cases in the set must stay unrendered (and unloaded). */
.gallery-item.has-cases > .case-shot[hidden] { display: none; }
/* Section anchors (cosmetic.html#emax-veneers etc.) land with the heading clear of the sticky header. */
.svc-item { scroll-margin-top: 48px; }
#sinus-lift { scroll-margin-top: 120px; }
/* Footer links: 44px-tall tap targets on touch-width screens (same visual rhythm: the padding replaces the li margin). */
@media (max-width: 1100px) {
.footer-links li { margin-bottom: 0; }
.footer-links a { display: inline-block; padding: 11px 0; min-height: 44px; min-width: 44px; }
}
/* Header tap targets (2026-10-02): invisible hit areas bring the language button and the menu button to 44px
without changing how they look. The menu button only grows into the gap on its own side, so the two never overlap. */
.lang-toggle, .nav-toggle { position: relative; }
.lang-toggle::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }
.nav-toggle::after { content: ''; position: absolute; top: -4px; bottom: -4px; inset-inline-start: -3px; inset-inline-end: -7px; }
/* Run 15: phone numbers (footer + contact block) are 44px-tall tap targets; the second number sits right under the first. */
.footer-contact a[href^="tel:"], .contact-info-block a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.footer-contact p:has(> a[href^="tel:"]), .contact-info-block p:has(> a[href^="tel:"]) { margin-bottom: 0; }
/* WhatsApp marker next to the WhatsApp-enabled number only (footer + contact block). Reuses .whatsapp-link green;
a 44px tap target that opens WhatsApp, while the number itself stays a tel: link. */
.whatsapp-link.tel-wa { margin-top: 0; margin-inline-start: 8px; gap: 4px; min-height: 44px; font-size: 12.5px; vertical-align: middle; }
.whatsapp-link.tel-wa svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer-contact p:has(> .tel-wa), .contact-info-block p:has(> .tel-wa) { display: flex; flex-wrap: wrap; align-items: center; }
/* ---------- Services menu (run 19, 2026-10-03) ----------
Same markup on all 20 pages: button#servicesBtn toggles #servicesMenu (js/main.js adds .open).
Above 1100px (header shows its links): a 3x2 panel under the header that scrolls inside itself on short screens.
1100px and below (hamburger menu): the panel opens inside the menu: 2x3 from 768px; on phones one column with
the treatments run together inline. Only .svc-menu-head is a link; the .svc-menu-list items are plain text. */
.nav-services-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; }
.nav-services-btn:hover, .nav-services-btn.is-current, .nav-services.open .nav-services-btn { color: var(--accent-deep); }
.nav-services-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.nav-services.open .nav-services-chevron { transform: rotate(180deg); }
.services-panel { overflow-x: hidden; }
.svc-menu-grid { display: grid; }
.svc-menu-col { min-width: 0; }
.nav-links a.svc-menu-head { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 8px 12px; margin-inline-start: -12px; border: 0; border-radius: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
[dir="rtl"] .nav-links a.svc-menu-head { font-size: 16px; }
.nav-links a.svc-menu-head::after { display: none; }
.nav-links a.svc-menu-head:hover,
.nav-links a.svc-menu-head[aria-current="page"] { color: var(--accent-deep); background: var(--accent-soft); }
.svc-menu-arrow { width: 14px; height: 14px; flex-shrink: 0; }
[dir="rtl"] .svc-menu-arrow { transform: scaleX(-1); }
.svc-menu-list { list-style: none; margin: 4px 0 0; padding: 0; }
.svc-menu-list li { padding: 4px 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere; cursor: default; }
[dir="rtl"] .svc-menu-list li { font-size: 14.5px; }
@media (min-width: 1101px) {
.services-panel {
position: absolute; top: 100%; left: 0; right: 0; margin-inline: auto; z-index: 60;
width: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
max-height: calc(100vh - var(--nav-h, 90px) - 16px);
max-height: calc(100dvh - var(--nav-h, 90px) - 16px);
overflow-y: auto; overscroll-behavior: contain;
background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-services.open .services-panel { opacity: 1; visibility: visible; transform: none; }
.svc-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; padding: 32px 12px; }
.svc-menu-col { padding: 0 32px; }
.svc-menu-col:not(:nth-child(3n + 1)) { border-inline-start: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .services-panel { transform: none; } }
@media (max-width: 1100px) {
/* The open hamburger menu fills the screen under the header and scrolls by itself (the page behind is locked
by main.js). Height comes from dvh, not bottom:0: the header's backdrop-filter makes it the containing block. */
.nav-links {
top: var(--nav-h, 64px);
height: calc(100vh - var(--nav-h, 64px));
height: calc(100dvh - var(--nav-h, 64px));
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.nav-links > * { flex-shrink: 0; }
.nav-services { width: 100%; }
.nav-services-btn { width: 100%; justify-content: space-between; min-height: 48px; padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
.nav-services-chevron { width: 16px; height: 16px; }
.services-panel { display: none; }
.nav-services.open .services-panel { display: block; }
.svc-menu-grid { grid-template-columns: minmax(0, 1fr); }
.svc-menu-col { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.nav-links a.svc-menu-head { padding: 8px 10px; margin-inline-start: -10px; font-size: 16px; }
/* Phones: the treatments of one service run together, separated by " · ". */
.svc-menu-list { margin-top: 2px; }
.svc-menu-list li { display: inline; padding: 0; font-size: 13px; line-height: 1.6; }
[dir="rtl"] .svc-menu-list li { font-size: 14px; }
.svc-menu-list li:not(:last-child)::after { content: "\00a0\00b7"; }
}
@media (min-width: 768px) and (max-width: 1100px) {
/* Tablets: the same panel as desktop, 2 columns x 3 rows, inside the menu. */
.svc-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-menu-col { padding: 14px 20px 16px; }
.svc-menu-col:nth-child(odd) { padding-inline-start: 0; }
.svc-menu-col:nth-child(even) { border-inline-start: 1px solid var(--line); }
.svc-menu-col:nth-last-child(-n + 2) { border-bottom: 0; }
.svc-menu-list li { display: block; padding: 3px 0; font-size: 14px; }
.svc-menu-list li:not(:last-child)::after { content: none; }
}
/* Page lock while the hamburger menu is open (iPhone-safe: main.js saves and restores the scroll position). */
body.nav-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* Homepage "Inside the Center" (run 19): 12 photos. 4 x 3 from 1100px, 3 x 4 from 768px, 2 x 6 below.
Tiles keep the .clinic-shot 3:2 frame (the photos are 3:2, so nothing is cropped) and the .photo-grid gaps. */
#inside .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { #inside .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #inside .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Gallery Before & After (run 20): with two tiles (Cosmetic fillings + Root canal, both .tall) the album is an even
pair at every width. Remove this rule when the Orthodontics / Direct veneers tiles come back. */
#before-after .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Karrar cases (2026-10-08): Orthodontics is back (Direct veneers still hidden), so 3 tiles: Orthodontics takes the
full first row and the other two pair below it, with no gap at any width. Remove when Direct veneers returns. */
#before-after .gallery-grid > .gallery-item[data-case="1"] { grid-column: 1 / -1; }
/* A case card's extra sheets (e.g. Dr. Karrar's case-05-2) are [hidden] buttons that open only in the lightbox;
.case-shot sets display:block, which beats the [hidden] attribute. */
.case-card > .case-shot[hidden] { display: none; }
/* Karrar cases: every sheet has the clinic's address and phone printed along its bottom edge, right where the shared
caption overlays the photo (in Arabic it covered the address). For his sheets only, the caption gets its own strip
under the photo, inside the same frame; the frame size, arrows and close button are unchanged. */
.lightbox-content:has(img[src*="/karrar/cases/"]) { display: flex; flex-direction: column; min-height: 0; background: #101828; border-radius: 12px; }
.lightbox-content:has(img[src*="/karrar/cases/"]) .lightbox-img { position: relative; flex: 1 1 0; min-height: 0; height: auto; border-radius: 12px 12px 0 0; }
.lightbox-content:has(img[src*="/karrar/cases/"]) .lightbox-img img { position: absolute; inset: 0; }
.lightbox-content:has(img[src*="/karrar/cases/"]) .lightbox-caption { position: static; flex: none; padding: 10px 24px 14px; font-size: 18px; line-height: 1.4; text-shadow: none; }
[dir="rtl"] .lightbox-content:has(img[src*="/karrar/cases/"]) .lightbox-caption { font-size: 16px; }
/* Homepage service card showing a whole case sheet (Restorative: Dr. Ahmed's case-03 with its signature bar).
Same 4:3 frame as the other cards; the image is never cropped, black fills the sides to match the sheet's own
black edges (on the ![]()
itself, so the injected .img-ph gradient never shows), and no hover zoom (it would crop). */
.service-img.is-contain img.service-photo { object-fit: contain; background: #000; }
.service-card:hover .service-img.is-contain img.service-photo { transform: none; }
/* Final audit (2026-10-06): tap targets. Invisible hit areas bring these to 44px tall without changing how they look
(same technique as the header buttons). Slider dots only grow 4px sideways so neighbouring dots never overlap. */
.slider-dot, .breadcrumb a, .back-link, .whatsapp-link:not(.tel-wa) { position: relative; }
.slider-dot::after { content: ''; position: absolute; top: -18px; bottom: -18px; left: -4px; right: -4px; }
.breadcrumb a::after { content: ''; position: absolute; top: -14px; bottom: -14px; left: 0; right: 0; }
.back-link::after { content: ''; position: absolute; top: -11px; bottom: -11px; left: 0; right: 0; }
.whatsapp-link:not(.tel-wa)::after { content: ''; position: absolute; top: -9px; bottom: -9px; left: 0; right: 0; }
/* Final audit (2026-10-06), RTL colour restore: the general '[dir="rtl"] p' rule (ink-soft) was beating these two
class colours in Arabic only. The Arabic footer tagline was dark grey on the navy footer (2.05:1, near-invisible);
the homepage testimonial quote was lighter than its English twin. Both now match English. */
[dir="rtl"] .footer-tagline { color: rgba(255, 255, 255, 0.65); }
[dir="rtl"] .testimonial-quote { color: var(--ink); }
/* === Font C (client pick, 2026-10-14) ===
Every Arabic heading that used Amiri now uses IBM Plex Sans Arabic 600 (--serif-ar). Only the 600 weight is
loaded, so every element on --serif-ar is set to 600: no faux bold, no faux italic. Line-height is at least 1.4
so stacked marks (e.g. the shadda in «كلّ») are never clipped. The brand name keeps Amiri (--brand-ar). */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .serif,
[dir="rtl"] .faq-q, [dir="rtl"] .mini-faq-item h4, [dir="rtl"] .step-num { font-weight: 600; font-style: normal; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .faq-q { line-height: 1.4; }
/* === Doctor cards: arch photos (client request, 2026-10-14; tint removed the same day) ===
The card photo uses the arch of the doctor-page hero portrait (.doctor-portrait): top radius 200px and
var(--shadow-lg), with a flat bottom. Browsers scale the 200px radii down to half the arch width when the arch is
narrower than 400px, so every card shows a full semicircle, like the hero at phone widths.
The arch sits straight on the white card: no tint, and no clipping box (overflow visible, so not even the
shadow can be cut into a square). It is centred with 16px at the sides. The space above it equals the card
text's top padding (--arch-gap = .doc-card-body padding-top: 28px, or 24px for the 4-across pyramid at
>=1100px), so the gap above the arch matches the gap below it to the name. The extra space comes from the
container's top padding (content-box), so the arch box keeps exactly the size it had (0.8 x card width - 16px
tall, card width - 32px wide) and object-fit/object-position crop the same. The injected .img-ph placeholder
takes the same shape. The hover zoom grows from the flat bottom. */
.doc-card { --arch-gap: 28px; }
@media (min-width: 1100px) { .doctors-grid.is-pyramid > .doc-card { --arch-gap: 24px; } }
.doc-card-img { background: none; overflow: visible; box-sizing: content-box; padding-top: calc(var(--arch-gap) - 16px); }
.doc-card-img > img, .doc-card-img > .img-ph {
top: var(--arch-gap); right: 16px; bottom: 0; left: 16px; width: calc(100% - 32px); height: calc(100% - var(--arch-gap));
border-radius: 200px 200px 0 0;
}
.doc-card-img > img { box-shadow: var(--shadow-lg); transform-origin: 50% 100%; }
/* Phone numbers stay on one line (booking FAQ wrapped "+964 771 / 333 3851" at 390px). */
a[href^="tel:"] bdi { white-space: nowrap; }
/* === Surgery page real cases (2026-10-14) ===
Real before/after cases inside three treatment sections of oral-surgery.html: #implants, #full-arch, #gum-contouring.
Reuses the doctor-page case components unchanged: .case-grid / .case-card / .case-pair / .case-shot, the .is-wide 4:3
frame (shows the full width of the 3:2 intraoral photos, ~5% trimmed at each side) and .is-composite (contain, never
cropped) for the one pair that mixes a portrait and a landscape photo (implant case 2).
New here: space between the section text and the cases (.svc-item .section-head has margin-bottom: 0), a centred consent
note in --ink-soft (--ink-mute fails WCAG AA at this size), and a centred last card when a section holds an odd number
of cases (2-column grid from 901px; at 900px and below .case-grid is already one centred 520px column).
No doctor is credited on this page (client instruction). */
.svc-cases { margin-top: 48px; }
.svc-cases > .album-note { max-width: 640px; margin: 0 auto 24px; text-align: center; color: var(--ink-soft); }
@media (min-width: 901px) {
.svc-cases .case-grid > .case-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 28px) / 2); }
}
@media (max-width: 768px) { .svc-cases { margin-top: 36px; } }
/* === Hero seal: "+15 years of care" (client pick 2026-10-17) ===
Ivory, navy and gold seal. Artwork: img/seal/hero-seal-en.svg and img/seal/hero-seal-ar.svg. Every letter in
the artwork is outlined, so the files need no fonts; do not edit them by hand.
Size (clinic, 2026-10-24): 168px above 1100px, 140px at 1100px and below; was 112px everywhere, the smallest size
at which the ring text still reads on a 1x screen. Shadow offsets/blurs scale with it (x1.5 / x1.25).
> 768px : top inline-end corner of the hero (top-right in English, top-left in Arabic), pushed toward the screen
edge, outside the 1200px container. The decorative triangle in that corner is hidden.
<= 768px: centred under the hero buttons (same breakpoint as the stacked buttons above).
Motion : fades in with the hero stagger, then one gold sheen. prefers-reduced-motion gets neither. */
.hero-seal {
--seal-size: 140px;
position: relative;
width: var(--seal-size);
height: var(--seal-size);
border-radius: 50%;
isolation: isolate;
pointer-events: none;
filter: drop-shadow(0 5px 15px rgba(6, 12, 22, 0.38)) drop-shadow(0 1.25px 2.5px rgba(6, 12, 22, 0.3));
}
.hero-seal img { display: block; width: 100%; height: 100%; max-width: none; }
/* Corner placement: tablet and desktop */
.hero-seal--corner {
position: absolute;
z-index: 3;
top: 126px; /* 90px header (58px logo + 2 x 16px padding) + 36px */
inset-inline-end: clamp(24px, 4vw, 64px); /* right edge in English, left edge in Arabic */
opacity: 0;
transform: translateY(16px);
}
.hero.ready .hero-seal--corner { animation: fadeUp 0.7s var(--ease) 0.9s forwards; }
@media (max-width: 1100px) {
.hero-seal--corner { top: 100px; } /* collapsed header is 76px (44px logo) */
}
/* Above 1100px only: 168px (clinic, 2026-10-24); shadow scaled x1.5 from the original 112px values. */
@media (min-width: 1101px) {
.hero-seal { --seal-size: 168px; filter: drop-shadow(0 6px 18px rgba(6, 12, 22, 0.38)) drop-shadow(0 1.5px 3px rgba(6, 12, 22, 0.3)); }
}
/* 1101-1279px: the one-line English headline reaches within ~20px of a 168px seal in its usual spot, so the seal
moves further into the corner (24px from the edge) and up (13px under the 91px header) instead of shrinking. */
@media (min-width: 1101px) and (max-width: 1279px) {
.hero-seal--corner { top: 104px; inset-inline-end: 24px; }
}
/* Phone placement: inside .hero-content, after the buttons. .hero-stagger > * already starts it hidden. */
.hero-seal--inline { display: none; margin: 32px auto 0; }
.hero.ready .hero-seal--inline { animation: fadeUp 0.7s var(--ease) 0.9s forwards; }
@media (max-width: 768px) {
.hero-seal--corner { display: none; }
.hero-seal--inline { display: block; }
}
/* The decorative triangle in the seal's corner would sit on top of it (tablet and desktop only). */
@media (min-width: 769px) {
[dir="ltr"] .hero.has-seal .hero-shape.s2,
[dir="rtl"] .hero.has-seal .hero-shape.s1 { display: none; }
}
/* One gold sheen after the entrance. The overlay blend brightens the gold and ivory and barely touches the navy;
isolation on .hero-seal keeps the blend inside the seal. The sweep follows the reading direction. */
.hero-seal__sheen {
position: absolute;
inset: 0;
border-radius: 50%;
overflow: hidden;
mix-blend-mode: overlay;
}
.hero-seal__sheen::before {
content: "";
position: absolute;
top: -12%;
bottom: -12%;
left: -72%;
width: 56%;
background: linear-gradient(100deg, rgba(255, 247, 226, 0) 0%, rgba(255, 247, 226, 0.9) 50%, rgba(255, 247, 226, 0) 100%);
transform: translateX(0) skewX(-14deg);
}
[dir="rtl"] .hero-seal__sheen::before { left: auto; right: -72%; transform: translateX(0) skewX(14deg); }
@keyframes sealSheen { to { transform: translateX(380%) skewX(-14deg); } }
@keyframes sealSheenRtl { to { transform: translateX(-380%) skewX(14deg); } }
@media (prefers-reduced-motion: no-preference) {
.hero.ready .hero-seal__sheen::before { animation: sealSheen 1.6s var(--ease) 1.7s both; }
[dir="rtl"] .hero.ready .hero-seal__sheen::before { animation-name: sealSheenRtl; }
}
@media (prefers-reduced-motion: reduce) {
.hero-seal--corner { opacity: 1; transform: none; }
.hero-seal__sheen { display: none; }
}
/* === Photo updates + gallery rebuild (2026-10-17) ===
1) Gallery sub-blocks: the Smile Showcase parts and, inside Before & After, one block per doctor, then "More smiles
from the Center" and the surgery cases. Each block = a centred heading (+ optional role line and profile link)
over a reused .case-grid / .photo-grid. Every .case-shot in a block shares one data-set, so the lightbox steps
through that block only.
2) .is-center / .is-narrow: layout helpers for 2-column case grids from 901px.
3) .case-shot.is-panorama: Dr. Osama's combined before/after X-ray at its own ratio (1324 x 712).
4) .split-img.is-contain (+ .is-panorama): a split image shown whole on black, framed at its own ratio
(oral-surgery.html #wisdom-teeth).
5) Dr. Mohammed's featured card on doctors.html: plain full-bleed rectangle, no arch (client request). It undoes the
arch rules above for .is-featured only; the 7 pyramid cards keep their arch. */
.album-sub { margin-top: 72px; }
.album-head + .album-sub { margin-top: 0; }
.album-sub-head { max-width: 680px; margin: 0 auto 28px; text-align: center; }
.album-sub-head h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 6px; }
.album-sub-role { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 4px; }
.album-sub-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--accent-deep); transition: color 0.2s var(--ease); }
.album-sub-link:hover { color: var(--ink); }
@media (max-width: 768px) { .album-sub { margin-top: 56px; } }
@media (min-width: 901px) {
.case-grid > .case-card.is-center { grid-column: 1 / -1; justify-self: center; width: calc((100% - 28px) / 2); }
.case-grid > .case-card.is-span.is-narrow { justify-self: center; width: min(100%, 760px); }
}
.case-shot.is-panorama { aspect-ratio: 331 / 178; }
.split-img.is-contain { background: #000; }
.split-img.is-contain img { object-fit: contain; object-position: center; }
.split-img.is-contain .img-ph { background: #000; }
.split-img.is-panorama { aspect-ratio: 331 / 178; }
.doc-card.is-featured .doc-card-img { padding-top: 0; overflow: hidden; }
.doc-card.is-featured .doc-card-img > img, .doc-card.is-featured .doc-card-img > .img-ph {
top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; transform-origin: 50% 50%;
}
/* 6) Added during the build (not in the brief): Dr. Ahmed's block holds his two grids back to back (on his page a group
heading sits between them), so the second grid gets the grid gap above it instead of touching the first. */
.album-sub .case-grid + .case-grid { margin-top: 28px; }
/* ============================================================
GBT steps strip (cosmetic.html #gbt-cleaning), 2026-10-17
Three small clinic photos in one row (before / during / after), kept quiet: max 720px wide, no lightbox,
no hover zoom. The row is a CSS grid, so in Arabic (dir="rtl") it runs right to left on its own: same
images, no mirrored copies. The ![]()
never gets a display value (that would fight .en-only / .ar-only);
it is absolutely positioned inside the 3:2 frame instead. The frame's soft background is what shows if a
photo fails (img.img-failed is visibility: hidden).
============================================================ */
.svc-steps { list-style: none; max-width: 720px; margin: 32px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.svc-step { margin: 0; padding: 0; min-width: 0; }
.svc-step-img { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-card); background: var(--bg-section); box-shadow: var(--shadow-sm); }
.svc-step-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.svc-step-label { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
[dir="rtl"] .svc-step-label { font-family: var(--sans-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }
@media (max-width: 768px) {
.svc-steps { margin-top: 24px; gap: 6px; }
.svc-step-img { border-radius: 8px; }
.svc-step-label { margin-top: 8px; font-size: 11.5px; letter-spacing: 0.06em; }
[dir="rtl"] .svc-step-label { font-size: 13px; letter-spacing: 0; }
}
/* ============================================================
International patients (index.html #international), 2026-10-17
Full-bleed navy band (--ink, the footer's colour) right before the testimonials. White text at reduced
alpha (as in the footer), --gold for the accents (eyebrow, rules, the number, Baghdad), --accent (teal)
for the country dots, the chips' highlight and the button. No new colours.
Layout: text ~40% / map ~60% from 1100px (Arabic: text on the right, the grid follows dir); below that the
text sits on top and the map runs full width; the flag chips span the full width underneath.
The map is NEVER mirrored: .intl-map is forced LTR and nothing in it is flipped. img/world-dots.svg and the
inline overlay share viewBox 0 0 1168 488, so the capitals and arcs sit on the dots exactly. Sizes inside
the overlay are in viewBox units, so they are set per breakpoint (--sw stroke, --ds dot scale, --fs label).
============================================================ */
.intl-section { background: var(--ink); color: rgba(255,255,255,0.86); padding: 112px 0; overflow: hidden; }
.intl-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px 64px; align-items: center; }
.intl-text .eyebrow { color: var(--gold); }
.intl-text h2 { color: white; }
.intl-text p { color: rgba(255,255,255,0.76); }
.intl-stat { margin: 32px 0 28px; padding: 26px 0 24px; border-top: 1px solid rgba(201,169,97,0.4); border-bottom: 1px solid rgba(201,169,97,0.4); }
.intl-num { display: block; font-family: var(--serif); font-weight: 400; font-style: normal; font-size: clamp(64px, 6.4vw, 92px); line-height: 0.9; letter-spacing: -0.01em; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.intl-num-label { display: block; margin-top: 12px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
[dir="rtl"] .intl-num { font-family: var(--serif); font-weight: 400; }
[dir="rtl"] .intl-num-label { font-family: var(--serif-ar); font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none; }
.intl-text p.intl-cta-line { margin: 0 0 22px; color: rgba(255,255,255,0.86); }
.intl-section a:focus-visible, .intl-section button:focus-visible { outline-color: var(--accent); }
.intl-map { position: relative; aspect-ratio: 1168 / 488; direction: ltr; --sw: 2.8; --ds: 1; --fs: 22px;
margin-inline-end: calc(-1 * clamp(0px, (100vw - 1200px) / 2, 96px)); } /* wide screens: reaches a little into the outer margin */
.intl-dots { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.17; }
.intl-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.intl-stop-a { stop-color: var(--accent); }
.intl-stop-b { stop-color: var(--gold); }
.intl-route { transition: opacity 0.25s var(--ease); }
.intl-arc { fill: none; stroke-width: var(--sw); stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0.85;
transition: stroke-dashoffset 1.2s var(--ease) calc(var(--i, 0) * 80ms), stroke-width 0.25s var(--ease), opacity 0.25s var(--ease); }
.intl-map.is-drawn .intl-arc { stroke-dashoffset: 0; }
.intl-dot { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(var(--ds)); transition: transform 0.25s var(--ease); }
.intl-hub-dot { fill: var(--gold); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; transform: scale(var(--ds)); }
.intl-pulse { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: intl-pulse 2.4s var(--ease) infinite; }
@keyframes intl-pulse { 0% { transform: scale(var(--ds)); opacity: 0.8; } 100% { transform: scale(calc(var(--ds) * 3.4)); opacity: 0; } }
.intl-label { font-family: var(--sans); font-size: var(--fs); font-weight: 500; letter-spacing: 0.04em; fill: rgba(255,255,255,0.9); }
[dir="rtl"] .intl-label { font-family: var(--sans-ar); letter-spacing: 0; }
/* chip hover / focus / tap: that route bright and thicker, the others dimmed */
.intl-routes.has-active .intl-route { opacity: 0.18; }
.intl-routes.has-active .intl-route.is-active { opacity: 1; }
.intl-route.is-active .intl-arc { stroke-width: calc(var(--sw) * 1.9); opacity: 1; }
.intl-route.is-active .intl-dot { transform: scale(calc(var(--ds) * 1.7)); }
.intl-flags { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intl-flags li { margin: 0; }
.intl-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 7px; padding-inline: 8px 16px; border-radius: var(--radius-pill);
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 500; line-height: 1.2;
transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); }
[dir="rtl"] .intl-chip { font-family: var(--sans-ar); font-size: 15px; }
.intl-chip img { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.intl-chip:hover, .intl-chip:focus-visible, .intl-chip.is-active { background: rgba(255,255,255,0.14); border-color: var(--accent); color: white; }
.intl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-pill); }
@media (max-width: 1099px) {
.intl-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.intl-text { max-width: 680px; }
.intl-map { --sw: 2.4; --fs: 18px; margin-inline: 0; }
}
@media (max-width: 768px) {
.intl-section { padding: 64px 0; }
.intl-grid { gap: 36px; }
.intl-num { font-size: 56px; }
.intl-stat { margin: 26px 0 24px; padding: 20px 0 18px; }
.intl-map { --sw: 3.4; --ds: 1.4; --fs: 26px; margin-inline: calc(-1 * var(--gutter)); } /* edge to edge on phones */
.intl-flags { gap: 8px; margin-top: 0; }
.intl-chip { gap: 8px; padding-inline: 6px 13px; font-size: 13px; }
[dir="rtl"] .intl-chip { font-size: 14px; }
}
@media (max-width: 560px) {
.intl-map { --sw: 4.4; --ds: 1.8; --fs: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.intl-arc { transition: none; stroke-dashoffset: 0; }
.intl-pulse { animation: none; display: none; }
}
/* International patients headline (2026-10-17): two intentional lines; each line is a block, so "to Baghdad" / «إلى بغداد»
always starts on its own line (a long line may still wrap on phones). Line 2 = gold, same font and weight as line 1. */
.intl-h-line { display: block; }
.intl-text h2 .intl-h-accent { color: var(--gold); }
/* English line 1 ("From all over the world,") is ~8.94 em wide; in the ~435px desktop column it would leave "world," alone on
a second line at 52px. From 1100px the English headline scales with its column (11cqi = 47.9px at 435px) so line 1 stays whole.
Arabic fits at full size and is unchanged. */
@media (min-width: 1100px) {
.intl-text { container-type: inline-size; }
[lang="en"] .intl-text h2 { font-size: min(52px, 11cqi); }
}
/* Plain hero (no photo), clinic round 2026-10-21: braces.html and clear-aligners.html lost their stock hero photos.
The base breadcrumb colours assume a dark photo overlay, so give the plain (light) hero dark breadcrumb text. */
.hero:not(.has-photo) .breadcrumb a { color: var(--ink-soft); }
.hero:not(.has-photo) .breadcrumb a:hover, .hero:not(.has-photo) .breadcrumb [aria-current="page"] { color: var(--ink); }
/* Gum graft arrows (clinic round, 2026-10-21): decorative overlay that main.js builds from .case-shot[data-arrows]
(also inside the lightbox). Tips are placed against the rendered photo; the shaft fades in and nudges toward the tip
once, in view. Hover zoom is off on these tiles so the photo never slides under its arrows. */
.graft-arrows { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.graft-arrow { position: absolute; width: 0; height: 0; transform-origin: 0 0; }
.graft-arrow svg { position: absolute; top: 0; max-width: none; overflow: visible; fill: var(--gold); stroke: var(--gold); stroke-linecap: round;
filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.8s var(--ease); }
.graft-arrows.is-in .graft-arrow svg { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .graft-arrow svg { opacity: 1; transform: none; transition: none; } }
.case-shot.has-arrows:hover img, .case-shot.has-arrows:focus-visible img { transform: none; }
.lightbox-img.has-photo { position: relative; }
.case-caption .graft-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
/* .photo-grid.is-balanced (clinic round, 2026-10-21): in the 3-column layout an incomplete last row is centred instead
of leaving an empty cell (6 tracks, each tile spans 2: same tile width and gaps as the plain grid). RTL mirrors it. */
@media (min-width: 769px) {
.photo-grid.is-balanced { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.photo-grid.is-balanced > * { grid-column: span 2; }
.photo-grid.is-balanced > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.photo-grid.is-balanced > :last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
}
.album-sub .case-grid + .photo-grid { margin-top: 28px; }