/* Hallmark · shape: stacked argument · genre: editorial · theme: brand · redesign: full · job: book
 * paper: #FBF7F8 · accent: #C8A46A · display: Alexandria · body: Readex Pro · hero: Stage · nav: kept · footer: kept · signature: the logo's leaf cut around the real Eva reception
 * axes: light/geometric-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: E, the real photographs are 2x upscales so the hero stays inside the size they can hold */
/* Hallmark · reworded "رعاية تبدأ بالاهتمام بك" to one h1 holding the headline and the former eyebrow line, same words · 54 names the eyebrow */
/* Hallmark · answered F20 · the header is shared chrome, kept out of this redesign by the owner's scope */
/* Hallmark · hero-review: fix · 4 findings · 3 resolved 1 unresolved · the second hero action stays: existing wiring */
/* Hallmark · dismissed 58 · the hero's gold line is the former eyebrow folded into the h1, kept words the owner's copy needs for the clinic's name */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 dismissed · gap: the lead article title typo is CMS content */
/* Homepage only: enqueued on the front page, scoped to .eva-website-home so the shared header, footer and inner pages cannot shift. */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-sm: 0.875rem; --text-md: 1rem; --text-display: clamp(2.5rem, 4.4vw + 0.5rem, 5rem); --text-section: clamp(2rem, 2.2vw + 1rem, 3.25rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-2xl: 1.953rem; --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
  --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px;
  --color-paper: #FBF7F8; --color-paper-2: #F4EAF0; --color-ink: #22151F; --color-muted: #5E4B5B; --color-rule: #E9DCE4;
  --color-night: #1B1020; --color-plum: #3A1D42; --color-purple: #3E1F49; --color-on-dark: #F4ECF1; --color-on-dark-2: #CDBFCA; --color-rule-dark: rgba(230, 211, 168, 0.24);
  --color-accent: #C8A46A; --color-accent-hover: #D9BF8E; --color-accent-ink: #1B1020; --color-gold-soft: #E6D3A8;
  --color-focus: #3E1F49; --color-focus-dark: #E6D3A8;
  --font-display: 'Alexandria', 'Readex Pro', Tahoma, sans-serif; --font-body: 'Readex Pro', Tahoma, system-ui, sans-serif;
  --leaf-photo: 88% 0 88% 0 / 64% 0 64% 0;
}
html, body { overflow-x: clip; }
::selection { background: var(--color-gold-soft); color: var(--color-ink); }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
.eva-website-home { --ring: var(--color-focus); overflow: clip; caret-color: var(--color-accent); }
.eva-website-home h1, .eva-website-home h2, .eva-website-home h3 { overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.eva-website-home h2 { font-size: var(--text-section); font-weight: 300; line-height: 1.3; }
.eva-website-home p { text-wrap: pretty; }
.eva-website-home a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.eva-website-home a:active { transform: translateY(1px); }
.eva-website-home .card-link .eva-icon--arrow, .eva-website-home .text-link .eva-icon--arrow, .eva-website-home .eva-button .eva-icon--arrow { display: none; }

/* Hero: the real reception in the logo's leaf, both tips on screen */
.eva-website-home .eva-hero { --ring: var(--color-focus-dark); background: var(--color-night); color: var(--color-on-dark); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; min-block-size: calc(100dvh - 114px); padding-block: var(--space-xl); padding-inline: var(--gutter); }
.eva-website-home .eva-hero h1 { max-inline-size: none; margin-block-end: var(--space-lg); color: var(--color-on-dark); font-weight: 300; }
.eva-website-home .hero-title { display: block; font-size: var(--text-display); line-height: 1.22; }
.eva-website-home .hero-name { display: block; margin-block-start: var(--space-md); font-family: var(--font-body); font-size: var(--text-md); font-weight: 300; line-height: 1.6; color: var(--color-gold-soft); }
.eva-website-home .eva-hero .hero-lead { max-inline-size: 34rem; margin-block-end: var(--space-xl); font-size: var(--text-md); font-weight: 400; color: var(--color-on-dark-2); }
.eva-website-home .eva-hero .wp-block-button__link { min-block-size: 52px; padding-block: 0; padding-inline: var(--space-xl); line-height: 1.2; }
.eva-website-home .eva-hero-arch img { block-size: min(76dvh, 44rem); border-radius: var(--leaf-photo); object-position: 50% 62%; }

/* Departments: edge to edge on night, the hero's ground running on */
.eva-website-home .eva-layout--triptych { --ring: var(--color-focus-dark); background: var(--color-night); padding-block: var(--space-2xl) 0; padding-inline: 0 !important; }
.eva-website-home .eva-layout--triptych > h2 { padding-inline: var(--gutter); margin-block-end: var(--space-xl); color: var(--color-on-dark); }
.eva-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xs); }
.triptych-panel { position: relative; isolation: isolate; display: flex; align-items: flex-end; block-size: clamp(30rem, 44vw, 42rem); color: var(--color-on-dark); text-decoration: none; }
.triptych-panel:hover { color: var(--color-on-dark); }
.eva-website-home .triptych-panel:focus-visible { outline-offset: -6px; }
.triptych-media { position: absolute; inset: 0; z-index: -2; }
.triptych-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.triptych-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in oklab, var(--color-night) 96%, transparent) 42%, transparent 80%); }
.triptych-body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-xl); }
.eva-website-home .triptych-title { margin: 0; font-size: clamp(1.75rem, 1.4vw + 1rem, 2.25rem); font-weight: 300; line-height: 1.3; color: var(--color-on-dark); }
.triptych-text { font-size: var(--text-md); line-height: 1.7; color: var(--color-on-dark-2); }
.eva-website-home .triptych-panel .card-link { margin-block-start: var(--space-xs); font-size: var(--text-md); color: var(--color-gold-soft); transition: color var(--dur-short) var(--ease-out); }
.eva-website-home .triptych-panel:hover .card-link { color: var(--color-on-dark); }

/* Services: rows on paper, the head held beside them */
.eva-website-home .eva-layout--list { padding-block: var(--section-gap-s) var(--section-gap); }
.eva-website-home .eva-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.eva-website-home .eva-layout--list .directory-intro h2 { max-inline-size: 11ch; }
.eva-website-home .service-list { border-block: 1px solid var(--color-rule); }
.eva-website-home .service-list a { align-items: baseline; padding: var(--space-lg) 0; border-radius: 0; transition: color var(--dur-short) var(--ease-out); }
.eva-website-home .service-list a:hover { background: none; padding-inline: 0; color: var(--color-purple); }
.eva-website-home .service-name { min-width: 0; }
.eva-website-home .service-title { font-size: var(--text-title); font-weight: 300; line-height: 1.5; }

/* Doctors: the leaf portraits, on blush */
.eva-website-home .eva-layout--portraits { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.eva-website-home .eva-layout--portraits .eva-section-head { margin-block-end: var(--space-2xl); }
.eva-website-home .portrait-grid { gap: var(--gap-columns); }
.eva-website-home .portrait { text-align: start; gap: var(--space-xs); }
.eva-website-home .portrait:nth-child(even) { margin-block-start: var(--space-2xl); }
.eva-website-home .portrait-media { margin-block-end: var(--space-xs); }
.eva-website-home .portrait-name { font-size: var(--text-title); font-weight: 300; line-height: 1.4; }
.eva-website-home .portrait-role { margin-block-start: 0; color: var(--color-muted); }
.eva-website-home .portrait:hover .portrait-media img { transform: none; }
.eva-website-home .portrait:hover .portrait-name { color: var(--color-purple); }

/* Why Eva: the figures set large, the reasons on hairlines, no boxes */
.eva-website-home .eva-promise { display: block; background: none; border-radius: 0; margin: 0; padding: var(--section-gap) var(--gutter) !important; }
.eva-website-home .promise-lead { display: block; }
.eva-website-home .promise-lead h2 { max-inline-size: none; margin-block-end: var(--space-2xl); }
.eva-website-home .eva-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.eva-website-home .eva-stats .stat { position: relative; font-size: var(--text-md); }
.eva-website-home .eva-stats .stat + .stat::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--gap-columns) / -2); border-inline-start: 1px solid var(--color-rule); }
.eva-website-home .eva-stats .stat strong { font-size: clamp(3.5rem, 7vw, 6.5rem); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.eva-website-home .promise-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-block-start: var(--space-3xl); }
.eva-website-home .promise-point { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) 0 0; border-block-start: 1px solid var(--color-rule); border-radius: 0; background: none; }
.eva-website-home .promise-point h3 { margin: 0; font-size: var(--text-title); font-weight: 300; color: var(--color-ink); }
.eva-website-home .promise-point h3::before { display: none; }
.eva-website-home .promise-point p, .eva-website-home .eva-promise .promise-point--dark p { font-size: var(--text-md); color: var(--color-muted); }
.eva-website-home .promise-point--pay { padding: var(--space-lg); border-block-start: 0; background: var(--color-paper-2); }
.eva-website-home .promise-point--pay h3 { color: var(--color-purple); }
.eva-website-home .bnpl-logos { margin-block-start: var(--space-xs) !important; }

/* Branches: the cities at section size on plum, beside the lit sign */
.eva-website-home .eva-layout--citysign { --ring: var(--color-focus-dark); background: var(--color-plum); padding-block: var(--section-gap-s); }
.cities-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.eva-website-home .eva-layout--citysign h2 { margin-block-end: var(--space-xl); color: var(--color-on-dark); }
.eva-website-home .city-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: 0; }
.eva-website-home .city-line li { display: block; border-block-start: 1px solid var(--color-rule-dark); }
.eva-website-home .city-line li + li::before { display: none; }
.eva-website-home .city-line a { display: block; white-space: nowrap; font-weight: 300; padding-block: var(--space-sm); font-size: var(--text-section); line-height: 1.4; color: var(--color-gold-soft); }
.eva-website-home .city-line a:hover { color: var(--color-on-dark); }
.cities-photo { margin: 0; }
.cities-photo img { display: block; inline-size: 100%; block-size: 26rem; object-fit: cover; object-position: 50% 30%; border-radius: 30% 0 30% 0 / 26% 0 26% 0; }

/* Articles: one lead, two beside it, on hairlines */
.eva-website-home .eva-articles { padding-block: var(--section-gap) var(--section-gap-s); }
.eva-website-home .eva-articles .eva-section-head { margin-block-end: var(--space-2xl); }
.eva-website-home .article-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: var(--gap-columns); }
.eva-website-home .article-card, .eva-website-home .article-card--feature { grid-row: auto; justify-content: flex-start; min-block-size: 0; padding: var(--space-lg) 0 0; border-block-start: 1px solid var(--color-rule); border-radius: 0; background: none; color: var(--color-ink); }
.eva-website-home .article-media { display: none; }
.eva-website-home .article-body { gap: var(--space-xs); }
.eva-website-home .article-term { order: 2; color: var(--color-muted); }
.eva-website-home .article-card h3 { font-size: var(--text-title); font-weight: 300; line-height: 1.5; color: var(--color-ink); }
.eva-website-home .article-card--feature h3 { font-size: var(--text-2xl); font-weight: 300; line-height: 1.4; }
.eva-website-home .article-excerpt { order: 3; font-size: var(--text-md); color: var(--color-muted); }
.eva-website-home .article-card--feature .article-term { color: var(--color-muted); }

/* Booking: the page ends on night and runs into the footer */
.eva-website-home .eva-booking { --ring: var(--color-focus-dark); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg) var(--space-2xl); align-items: end; margin: 0; padding: var(--section-gap-s) var(--gutter) !important; border-radius: 0; background: var(--color-night); text-align: start; }
.eva-website-home .eva-booking h2 { grid-row: span 2; margin: 0; font-size: var(--text-display); line-height: 1.22; color: var(--color-on-dark); }
.eva-website-home .eva-booking p { margin: 0; max-inline-size: 34rem; font-size: var(--text-md); font-weight: 400; color: var(--color-on-dark-2); }
.eva-website-home .eva-booking .wp-block-buttons { justify-content: flex-start; }
.eva-website-home .eva-booking .wp-block-button__link { min-block-size: 52px; padding-block: 0; line-height: 1.2; }

@media (max-width: 60rem) {
  .eva-website-home .eva-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); min-block-size: 0; padding: var(--space-lg) var(--gutter) 0; }
  .eva-website-home .eva-hero-arch { order: -1; max-inline-size: none; margin-inline: 0; }
  .eva-website-home .eva-hero-arch img { block-size: auto; aspect-ratio: 4 / 3; }
  .eva-website-home .eva-hero .hero-lead { margin-block-end: var(--space-lg); }
  .eva-website-home .eva-hero .wp-block-button__link { padding-inline: var(--space-lg); }
  .eva-website-home .eva-hero .wp-block-buttons { flex-wrap: nowrap; }
  .eva-website-home { --gutter: 1.25rem; --section-gap-s: 80px; --section-gap: 96px; }
  .eva-triptych { grid-template-columns: minmax(0, 1fr); }
  .triptych-panel { block-size: 26rem; }
  .triptych-body { padding: var(--space-lg) var(--gutter); }
  .eva-website-home .eva-split { grid-template-columns: minmax(0, 1fr); }
  .eva-website-home .eva-layout--list .directory-intro h2 { max-inline-size: none; }
  .eva-website-home .promise-points, .eva-website-home .article-grid, .cities-split, .eva-website-home .eva-booking { grid-template-columns: minmax(0, 1fr); }
  .eva-website-home .eva-booking h2 { grid-row: auto; }
  .cities-photo img { block-size: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 40rem) {
  .eva-website-home .eva-stats { grid-template-columns: minmax(0, 1fr); }
  .eva-website-home .eva-stats { gap: 0; }
  .eva-website-home .eva-stats .stat { padding-block: var(--space-md); }
  .eva-website-home .eva-stats .stat + .stat { border-block-start: 1px solid var(--color-rule); }
  .eva-website-home .eva-stats .stat + .stat::before { display: none; }
  .eva-website-home .portrait:nth-child(even) { margin-block-start: 0; }
  .eva-website-home .portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .eva-website-home a:active { transform: none; } }
