/* ==========================================================================
   Homepage mockup fidelity — sales-page medical layout
   Deep teal / sky / coral conversion system
   ========================================================================== */

:root {
	--color-primary: #0a4d4d;
	--color-primary-light: #127272;
	--color-primary-dark: #063636;
	--color-accent: #00a89a;
	--color-accent-hot: #e53935;
	--color-bg: #ffffff;
	--color-bg-alt: #f0f7fb;
	--color-bg-soft: #e7f6f4;
	--color-bg-tint: #fff5f4;
	--color-border: #d5e4ec;
	--color-text: #16313f;
	--color-text-muted: #5a7282;
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 2px 10px rgba(10, 77, 77, 0.07);
	--shadow-md: 0 12px 32px rgba(10, 77, 77, 0.12);
	--shadow-lg: 0 20px 50px rgba(10, 77, 77, 0.16);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.btn { border-radius: 999px; }
.btn-accent {
	background: var(--color-accent-hot);
	color: #fff;
	border-color: var(--color-accent-hot);
}
.btn-accent:hover {
	background: #c62828;
	border-color: #c62828;
	color: #fff;
}

.section-label { color: var(--color-accent); }
.section-label-on-dark { color: #8ff0e6; }

/* Header */
.site-header {
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(10px);
}
.header-cta {
	background: var(--color-primary);
	border-color: var(--color-primary);
	border-radius: 999px;
}

/* Hero */
.hero-mockup {
	padding-block: clamp(2.25rem, 5vw, 4rem) 4.5rem;
	background:
		radial-gradient(circle at 90% 10%, rgba(0,168,154,.16), transparent 35%),
		linear-gradient(180deg, #f3fafc 0%, #ffffff 70%);
}
.hero-eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: .75rem;
}
.hero-badge { display: none; }
.hero-mockup .hero-subtitle {
	font-size: clamp(1.15rem, 2.5vw, 1.5rem);
	font-weight: 700;
	color: var(--color-primary-dark);
}
.hero-mockup .hero-grid {
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
}
.hero-mockup .hero-media-video .video-embed-hero,
.hero-mockup .hero-photo-frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 16 / 10;
	background: #000;
}
.hero-mockup .hero-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stats */
.stats-strip { margin-top: -2.5rem; position: relative; z-index: 3; padding-bottom: 1.5rem; }
.trust-bar-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .9rem; }
.stat-card {
	display: flex; gap: .85rem; align-items: center;
	padding: 1.1rem 1rem; background: #fff; border: 1px solid var(--color-border);
	border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.stat-value { font-size: 1.35rem; line-height: 1.1; color: var(--color-primary-dark); }
.stat-label { font-size: .8rem; color: var(--color-text-muted); }
.trust-icon {
	width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
	background: rgba(0,168,154,.14); color: var(--color-primary);
}

/* Booking cards */
.section-booking-cards { background: var(--color-bg-alt); }
.booking-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.booking-card {
	background: #fff; border-radius: var(--radius-lg); padding: 1.5rem;
	border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.booking-card-accent { border-color: rgba(229,57,53,.25); background: linear-gradient(180deg,#fff,#fff8f7); }
.booking-note {
	display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--color-accent); margin-bottom: .5rem;
}
.booking-meta { color: var(--color-text-muted); margin-bottom: 1rem; }

/* Expertise icons */
.section-expertise-icons { background: #fff; }
.expertise-icons-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem;
}
.expertise-icon-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: .7rem; padding: 1.25rem .85rem; border-radius: var(--radius-md);
	background: var(--color-bg-alt); border: 1px solid var(--color-border);
	transition: transform .2s ease, box-shadow .2s ease;
}
.expertise-icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: #fff; }
.expertise-icon-mark {
	width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
	background: rgba(10,77,77,.08); color: var(--color-primary);
}
.expertise-icon-card strong { font-size: .92rem; color: var(--color-primary-dark); }

/* About checklist */
.section-about-checklist { background: var(--color-bg-soft); }
.about-checklist-grid {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-lg); align-items: center;
}
.about-checklist-photo {
	margin: 0 0 1rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.about-checklist-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.about-checklist-card {
	background: #fff; border-radius: var(--radius-lg); padding: 1.5rem;
	box-shadow: var(--shadow-md); border: 1px solid var(--color-border);
}
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 1.7rem; font-weight: 600; color: var(--color-primary-dark); }
.check-list li::before {
	content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
	background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* Stroke dark band */
.section-stroke-spotlight {
	background: linear-gradient(135deg,#063636 0%,#0a4d4d 55%,#0d6660 100%);
	color: rgba(255,255,255,.9);
}
.section-stroke-spotlight h2 { color: #fff; }
.stroke-spotlight-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-lg); align-items: center; }
.stroke-spotlight-content p { color: rgba(255,255,255,.82); }
.stroke-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.video-embed-stroke { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.stroke-visual-panel {
	min-height: 260px; border-radius: var(--radius-lg); padding: 1.5rem; display: flex;
	flex-direction: column; justify-content: flex-end; gap: .5rem;
	background: linear-gradient(160deg, rgba(0,0,0,.15), rgba(0,0,0,.55)), linear-gradient(145deg,#1a6b7a,#0a4d4d);
}
.stroke-visual-kicker {
	align-self: flex-start; padding: .3rem .7rem; border-radius: 999px; background: var(--color-accent-hot);
	color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase;
}
.stroke-emergency-note {
	margin-top: 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
	border-inline-start: 4px solid var(--color-accent-hot); border-radius: var(--radius-md); padding: 1rem;
}
.stroke-emergency-note strong { display: block; color: #ffc9c4; margin-bottom: .35rem; }
.stroke-emergency-note p { margin: 0; color: rgba(255,255,255,.8); font-size: .92rem; }

/* Diagnosis */
.section-diagnosis { background: #fff; }
.diagnosis-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem;
}
.diagnosis-card {
	padding: 1.25rem; border-radius: var(--radius-md); background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
}
.diagnosis-icon {
	display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: .7rem;
	background: linear-gradient(135deg,var(--color-accent),var(--color-accent-hot));
}
.diagnosis-card strong { display: block; margin-bottom: .35rem; color: var(--color-primary-dark); }
.diagnosis-card p { margin: 0; color: var(--color-text-muted); font-size: .9rem; }

/* Expertise lists */
.section-expertise-lists { background: var(--color-bg-alt); }
.expertise-lists-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.expertise-list-card {
	background: #fff; border-radius: var(--radius-lg); padding: 1.35rem 1.5rem;
	border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.expertise-list-card-alt { background: linear-gradient(180deg,#fff,#f3fffd); }
.expertise-list-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; color: var(--color-text-muted); }
.expertise-list-card li::marker { color: var(--color-accent); }

/* Schedule */
.section-schedule { background: #fff; }
.schedule-board {
	display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .55rem; margin-bottom: 1.25rem;
}
.schedule-day {
	text-align: center; padding: .85rem .4rem; border-radius: 14px;
	background: var(--color-bg-soft); border: 1px solid var(--color-border);
}
.schedule-day strong { display: block; color: var(--color-primary-dark); margin-bottom: .25rem; }
.schedule-day span { font-size: .72rem; color: var(--color-text-muted); line-height: 1.3; }
.schedule-day.is-closed { opacity: .55; background: #f5f5f5; }

/* Experience banner */
.section-experience-banner {
	padding-block: clamp(2.5rem,5vw,4rem);
	background: linear-gradient(120deg,#0a4d4d,#0f6a66 55%,#14807a);
	color: #fff;
}
.experience-banner-inner {
	display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-lg); align-items: center;
}
.experience-banner-copy h2 { color: #fff; }
.experience-banner-copy p { color: rgba(255,255,255,.85); max-width: 34rem; }
.experience-silhouette {
	min-height: 220px; border-radius: 50% 40% 45% 55%;
	background:
		radial-gradient(circle at 50% 30%, rgba(255,255,255,.25), transparent 40%),
		linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
	border: 1px solid rgba(255,255,255,.2);
}
.experience-banner-visual[style*="background-image"] {
	min-height: 220px;
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.experience-banner-visual[style*="background-image"] .experience-silhouette {
	min-height: 220px;
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(10,77,77,.35), rgba(10,77,77,.55));
	border: 0;
}

/* Locations */
.section-locations-cards { background: var(--color-bg-alt); }
.locations-cards-grid-2 {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: none; justify-content: stretch;
}
.location-place-card {
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: 1.35rem; box-shadow: var(--shadow-md);
}
.location-place-card-alt { background: linear-gradient(180deg,#fff,#fff7f6); }
.location-place-badge {
	display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--color-accent); margin-bottom: .45rem;
}
.location-place-meta { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.location-place-meta strong {
	display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent);
}

/* Symptoms wall */
.section-symptoms-wall { background: #fff; }
.symptoms-chip-grid {
	list-style: none; margin: 0 0 1.5rem; padding: 0;
	display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem;
}
.symptom-chip {
	text-align: center; padding: .85rem .5rem; border-radius: 12px; font-weight: 700; font-size: .88rem;
	background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-primary-dark);
}
.symptoms-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }

/* Home form */
.section-home-form { background: linear-gradient(135deg,#fff7f6,#f0faf9); }
.home-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.home-lead-form {
	background: #fff; border-radius: var(--radius-lg); padding: 1.35rem; border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md); display: grid; gap: .85rem;
}
.home-lead-form .form-group { display: grid; gap: .35rem; }
.home-lead-form label { font-weight: 600; font-size: .9rem; }
.home-lead-form input,
.home-lead-form textarea {
	width: 100%; border: 1px solid var(--color-border); border-radius: 12px; padding: .75rem .9rem;
	font: inherit; background: #fff;
}
.form-note { margin: 0; font-size: .8rem; color: var(--color-text-muted); }

/* Media proof */
.section-media-proof { background: var(--color-bg-alt); }
.media-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.video-embed-proof { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* Reviews */
.section-reviews-strip { background: #fff; }
.reviews-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.review-card {
	margin: 0; padding: 1.2rem; border-radius: var(--radius-md); background: #0a4d4d; color: #fff;
	box-shadow: var(--shadow-md);
}
.review-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.review-brand {
	width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; color: #4285f4; font-weight: 800;
}
.review-stars { color: #f6c344; letter-spacing: 1px; }
.review-card p { color: rgba(255,255,255,.92); }
.review-card footer { color: rgba(255,255,255,.75); font-size: .9rem; }

/* FAQ / CTA / Footer */
.section-faq { background: var(--color-bg-alt); }
.faq-item { background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: .2rem 1rem; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: .95rem 1.6rem .95rem 0; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
	background: rgba(0,168,154,.14); color: var(--color-primary);
}
.faq-item[open] summary::after { content: "–"; }

.section-cta-banner {
	background: linear-gradient(135deg,#063636,#0a4d4d 55%,#0f6a66);
	text-align: center;
}
.cta-banner-text h2, .cta-banner-text p { color: #fff; }
.cta-banner-actions { justify-content: center; }

.site-footer { background: linear-gradient(180deg,#063636,#041f1f); color: rgba(255,255,255,.82); }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--color-accent); }
.footer-heading { color: #fff; }
.footer-grid-mockup { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-lg); }
.footer-newsletter { margin-top: 1rem; }
.footer-newsletter-label { display: block; font-weight: 700; color: #fff; margin-bottom: .5rem; font-size: .9rem; }
.footer-newsletter-row { display: flex; gap: .5rem; }
.footer-newsletter input {
	flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: .65rem 1rem; font: inherit;
}

/* Hide unused old ribbon */
.qualifications-bar { display: none; }

/* Restored sections — mockup palette harmony */
.section-urdu {
	background:
		radial-gradient(circle at 15% 20%, rgba(0, 168, 154, 0.1), transparent 40%),
		linear-gradient(180deg, #f7fcfb, #ffffff);
}

.section-urdu .urdu-condition-item,
.section-urdu .urdu-symptoms,
.section-urdu .urdu-locations {
	border-color: var(--color-border);
	box-shadow: var(--shadow-sm);
}

.section-services {
	background: var(--color-bg-alt);
}

.section-training,
.section-leadership {
	background: #fff;
}

.section-milestones {
	background: var(--color-bg-soft);
}

.section-gallery-preview {
	background: var(--color-bg-alt);
}

.section-blog-preview {
	background: #fff;
}

@media (max-width: 992px) {
	.hero-mockup .hero-grid,
	.about-checklist-grid,
	.stroke-spotlight-inner,
	.home-form-grid,
	.experience-banner-inner,
	.media-proof-grid,
	.expertise-lists-grid,
	.booking-cards-grid,
	.locations-cards-grid-2 { grid-template-columns: 1fr; }

	.trust-bar-grid,
	.expertise-icons-grid,
	.diagnosis-grid,
	.reviews-grid { grid-template-columns: 1fr 1fr; }

	.schedule-board { grid-template-columns: repeat(4,minmax(0,1fr)); }
	.symptoms-chip-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.footer-grid-mockup { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	.stats-strip { margin-top: -1.25rem; }
	.trust-bar-grid,
	.expertise-icons-grid,
	.diagnosis-grid,
	.reviews-grid,
	.schedule-board,
	.symptoms-chip-grid,
	.footer-grid-mockup,
	.media-proof-grid { grid-template-columns: 1fr; }

	.schedule-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.symptoms-chip-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.symptoms-cta .btn,
	.stroke-actions .btn,
	.footer-newsletter-row { width: 100%; }
	.footer-newsletter-row { flex-direction: column; }
}