/* ─────────────────────────────────────────────────────────────
   International Specialist Hospital — site stylesheet
   Foundation: Untitled UI tokens (type scale, warm-gray ramp,
   shadow ramp, 4px grid, 1280 container) + hospital brand ramp.
───────────────────────────────────────────────────────────── */
:root{
  /* brand — navy/sky, sampled from the logo (#172E76 / #222D7C / #009EE3) */
  --brand-25:#F5FBFE;--brand-50:#EAF6FD;--brand-100:#D3ECFA;--brand-200:#A8DBF5;--brand-300:#6FC4EE;
  --brand-400:#2FB0E8;--brand-500:#009EE3;--brand-600:#0071B8;--brand-700:#0F4F9E;--brand-800:#222D7C;--brand-900:#172E76;--brand-950:#0D1A48;
  /* accent — logo red: emergency / call affordances only */
  --accent-50:#FBEDEE;--accent-100:#F6D4D7;--accent-200:#EBA6AC;--accent-500:#B8121F;--accent-600:#9A0F1A;--accent-700:#7A0B14;
  --pink-500:#E5007D;
  /* lime: rare high-attention CTA accent (fertility booking); muted chartreuse tuned against navy/blue/red */
  --lime-100:#F1F3D3;--lime-surface:#E6EBA8;--lime-500:#C8CF48;--lime-600:#B3BA35;--lime-ink:var(--brand-950);
  /* warm gray (Untitled "gray-warm") */
  --gray-25:#FDFDFC;--gray-50:#FAFAF8;--gray-100:#F4F4F1;--gray-200:#E8E7E2;--gray-300:#D5D3CC;--gray-400:#A5A29A;
  --gray-500:#76736B;--gray-600:#58554E;--gray-700:#413F3A;--gray-800:#282622;--gray-900:#1B1A17;--gray-950:#12110F;
  /* warm editorial surface: preserved from the former homepage promise section */
  --surface-warm-50:#FBFAF7;--surface-warm-100:#F3EFE8;
  --success-50:#ECFDF3;--success-500:#17B26A;--success-700:#067647;
  --error-50:#FEF3F2;--error-500:#F04438;--error-700:#B42318;
  --warning-50:#FFFAEB;--warning-500:#F79009;
  /* text roles */
  --text:var(--gray-900);--text-2:var(--gray-600);--text-3:var(--gray-500);--text-on-brand:#fff;
  /* radius (Untitled) */
  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;--r-2xl:16px;--r-3xl:20px;--r-4xl:24px;--r-full:9999px;
  /* shadows (Untitled) */
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 1px 3px rgba(16,24,40,.1),0 1px 2px -1px rgba(16,24,40,.1);
  --sh-md:0 4px 6px -1px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06);
  --sh-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
  --sh-xl:0 20px 24px -4px rgba(16,24,40,.08),0 8px 8px -4px rgba(16,24,40,.03);
  --sh-2xl:0 24px 48px -12px rgba(16,24,40,.18);
  --sh-3xl:0 32px 64px -12px rgba(16,24,40,.14);
  /* type */
  --font-display:"Zain","Almarai","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --container:1280px;--gutter:32px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* brand pattern (assets/patterns): white main for navy surfaces, navy line for light ones; tile sizes */
  --pt-white:url(../patterns/main-white.svg);--pt-ink:url(../patterns/main-ink.svg);--pt-color:url(../patterns/main.svg);
  --pt-size:440px;  /* overlays: large + faint */
  --glass-bg:rgba(255,255,255,.12);--glass-border:rgba(255,255,255,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:#fff;color:var(--text);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;letter-spacing:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* type scale (Untitled display-* / text-*, Arabic leading +10%) */
.d-2xl{font-family:var(--font-display);font-size:72px;line-height:1.15;font-weight:800}
.d-xl{font-family:var(--font-display);font-size:60px;line-height:1.15;font-weight:800}
.d-lg{font-family:var(--font-display);font-size:48px;line-height:1.2;font-weight:800}
.d-md{font-family:var(--font-display);font-size:36px;line-height:1.25;font-weight:800}
.d-sm{font-family:var(--font-display);font-size:30px;line-height:1.3;font-weight:800}
.d-xs{font-family:var(--font-display);font-size:24px;line-height:1.35;font-weight:800}
.t-xl{font-size:20px;line-height:1.6}
.t-lg{font-size:18px;line-height:1.65}
.t-md{font-size:16px;line-height:1.7}
.t-sm{font-size:14px;line-height:1.6}
.t-xs{font-size:12px;line-height:1.5}
.medium{font-weight:500}.semibold{font-weight:600}
.c2{color:var(--text-2)}.c3{color:var(--text-3)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;color:var(--text);line-height:1.25}
p{color:var(--text-2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand-600);margin-bottom:12px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-500)}

/* icons */
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* brand icons (tools/icons.mjs) carry one coral accent via --ic-a; on red surfaces it falls back to the icon colour */
.icon-box.accent,.header.on-navy .call-split .btn-brand{--ic-a:currentColor}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;line-height:1.5;padding:12px 20px;border-radius:var(--r-lg);border:1px solid transparent;transition:.2s var(--ease);white-space:nowrap;box-shadow:var(--sh-xs)}
.btn .ic{width:18px;height:18px}
.btn-primary{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-brand{background:var(--brand-800);color:#fff;border-color:var(--brand-800)}
.btn-brand:hover{background:var(--brand-900);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-secondary{background:#fff;color:var(--gray-700);border-color:var(--gray-300)}
.btn-secondary:hover{background:var(--gray-50);color:var(--gray-900)}
.btn-ghost{background:transparent;color:var(--brand-700);box-shadow:none;border-color:transparent}
.btn-ghost:hover{background:var(--brand-50)}
.btn-white{background:#fff;color:var(--brand-800);border-color:#fff}
.btn-white:hover{background:var(--brand-50)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-lg{padding:14px 24px;font-size:17px}
.btn-sm{padding:8px 14px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand-700);font-size:15px}
.link .ic{width:16px;height:16px;transition:transform .2s}
.link:hover .ic{transform:translateX(-3px)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 12px;border-radius:var(--r-full);background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100)}
.badge.accent{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-100)}
.badge.success{background:var(--success-50);color:var(--success-700);border-color:#ABEFC6}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--success-500)}

/* header */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(23,46,118,.08);transition:background .35s,box-shadow .35s,transform .35s var(--ease)}
/* tucked away while scrolling down to read; site.js brings it back on any upward scroll */
.header.is-tucked{transform:translateY(-100%);box-shadow:none}
/* RTL grid: column 1 = physical right (actions), column 3 = physical left (logo) */
.header .container{max-width:none;padding-inline:clamp(20px,3.2vw,64px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;grid-column:1;grid-row:1}
.brand-en{display:none}
.brand-mark{width:56px;height:56px;flex:none;border-radius:50%}
.brand-text{line-height:1.15}
.brand-text b{display:block;font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--brand-900);letter-spacing:-.005em}
.brand-text span{display:block;margin-top:2px;font-size:11.5px;color:var(--gray-500)}
.nav{display:flex;align-items:center;justify-content:space-evenly;gap:0;grid-column:2;grid-row:1}
.nav a{font-size:15px;font-weight:500;color:var(--gray-700);padding:8px 14px;border-radius:var(--r-md);transition:.15s}
.nav a:hover{background:var(--brand-25);color:var(--gray-900)}
.nav a.active{color:var(--brand-700);background:var(--brand-50)}
.header-actions{display:flex;align-items:center;gap:10px;grid-column:3;grid-row:1}
.header-actions>.btn-primary{border-radius:var(--r-full);padding:10px 24px;box-shadow:none}
/* call: outlined pill (V2 header), WhatsApp as a quiet icon inside the same pill */
.call-split{display:inline-flex;border-radius:var(--r-full);overflow:hidden;border:1.5px solid var(--brand-600);background:#fff}
.call-split .btn{border-radius:0;box-shadow:none;padding:9px 18px;border:0}
.call-split .btn:hover{transform:none;box-shadow:none}
.call-split .btn-brand{background:#fff;color:var(--brand-700)}
.call-split .btn-brand:hover{background:var(--brand-50)}
.btn-wa{background:#fff;color:var(--brand-700);border-color:var(--gray-300);border-inline-start:0;padding:10px 12px}
.call-split .btn-wa{display:none}
.btn-wa:hover{background:var(--brand-50)}
.menu-toggle{display:none}
.menu-btn{display:none;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--gray-300);place-items:center;color:var(--gray-700);background:#fff}
/* header overlaid on the hero (homepage): transparent, white type, glass controls; turns solid on scroll */
.header.over{margin-bottom:-76px}
.header.over:not(.is-scrolled){background:linear-gradient(to bottom,rgba(13,26,72,.38),rgba(13,26,72,0) 88%);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.header.over:not(.is-scrolled) .brand-text{display:none}
.header.over:not(.is-scrolled) .brand-mark{width:60px;height:60px;box-shadow:0 2px 12px rgba(13,26,72,.35)}
.header.over:not(.is-scrolled) .nav a{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(13,26,72,.4)}
.header.over:not(.is-scrolled) .nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.header.over:not(.is-scrolled) .nav a.active{background:rgba(255,255,255,.16);color:#fff}
.header.over:not(.is-scrolled) .header-actions .btn,.header.over:not(.is-scrolled) .menu-btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none}
.header.over:not(.is-scrolled) .header-actions .btn:hover,.header.over:not(.is-scrolled) .menu-btn:hover{background:rgba(255,255,255,.24)}
.header.over:not(.is-scrolled) .header-actions>.btn-primary{background:rgba(255,255,255,.92);color:var(--brand-900);border-color:transparent}
.header.over:not(.is-scrolled) .header-actions>.btn-primary:hover{background:#fff}
.header.over:not(.is-scrolled) .call-split{box-shadow:none;border:1px solid rgba(255,255,255,.38)}
.header.over:not(.is-scrolled) .call-split .btn{border:0}
.header.over:not(.is-scrolled) .btn-wa{border-inline-start:1px solid rgba(255,255,255,.3)}

/* sections */
.section{padding-block:96px}
.section.tight{padding-block:64px}
.section.gray{background:var(--gray-50)}
.section.brand-soft{background:var(--brand-25)}
.section-head{max-width:640px;margin-bottom:48px}
.section-head.center{text-align:center;margin-inline:auto}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{margin-bottom:12px}
.section-head p{font-size:18px}
.section-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none;flex-wrap:wrap}
.section-head.row > div{max-width:640px}

/* cards */
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-2xl);box-shadow:var(--sh-xs);transition:.25s var(--ease)}
.card.hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--gray-300)}
.icon-box{width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,var(--brand-500),var(--brand-900));color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -10px rgba(23,46,118,.6);position:relative;overflow:hidden;flex:none}
.icon-box .ic{width:24px;height:24px;position:relative;stroke-width:1.6;filter:drop-shadow(0 1px 2px rgba(13,26,72,.3))}
.icon-box.accent{background:linear-gradient(145deg,var(--accent-500),var(--accent-700))}
.icon-box.glass{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--glass-border)}

/* hero */
/* Dual-mode background: default = photo/depth mode (works without JS).
   JS flips data-hero-mode to "video" on fast connections and attaches sources. */
.hero{position:relative;overflow:hidden;background:var(--brand-950);color:#fff;display:grid;grid-template-rows:1fr auto;min-height:100vh;min-height:100svh}
.hero-bg,.hero-scrim,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;transition:opacity 1.1s var(--ease);animation:kenburns 22s ease-in-out infinite alternate}
.hero-slide.is-active{opacity:1}
/* per-slide framing: --zoom widens the photo, --shift slides it so the subject sits clear of the copy */
.hero-base,.hero-subject,.hero-video{position:absolute;top:0;bottom:0;left:var(--shift,0%);width:var(--zoom,100%);min-width:calc(100% - var(--shift,0%) + 2%);max-width:none;height:100%;object-fit:cover;object-position:var(--focus,50% 40%)}
/* bleed hides the blurred edge */
.hero-base{z-index:0;filter:grayscale(.8) blur(2px) brightness(.7);top:-4px;bottom:-4px;left:calc(var(--shift,0%) - 4px);width:calc(var(--zoom,100%) + 8px);min-width:calc(100% - var(--shift,0%) + 2% + 8px);height:calc(100% + 8px)}
.hero-slide::before{content:"";position:absolute;inset:0 0 128px;z-index:1;pointer-events:none;background:url(../patterns/hero-geometry.svg) center/cover no-repeat,linear-gradient(to left,rgba(19,45,105,.48),rgba(19,45,105,.12) 46%,transparent 72%)}
.hero-slide.pattern-flip::before{transform:scaleX(-1);opacity:.52}
.hero-subject{z-index:2;filter:saturate(.87) contrast(1.02) brightness(.98);-webkit-mask-image:radial-gradient(ellipse var(--rx,40%) var(--ry,62%) at var(--sx,42%) var(--sy,55%),#000 45%,transparent 100%);mask-image:radial-gradient(ellipse var(--rx,40%) var(--ry,62%) at var(--sx,42%) var(--sy,55%),#000 45%,transparent 100%)}
.hero-subject.is-cutout{-webkit-mask-image:none;mask-image:none}
.hero-video{opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);z-index:3}
.hero[data-hero-mode="video"] .hero-slide.is-active .hero-video.is-ready{opacity:1}
.hero-scrim{z-index:2;background:linear-gradient(to bottom,rgba(13,26,72,.3),transparent 20%),linear-gradient(to left,rgba(13,26,72,.54) 0%,rgba(13,26,72,.3) 38%,rgba(13,26,72,.03) 68%),linear-gradient(to top,rgba(13,26,72,.28),transparent 38%)}
.hero.copy-end .hero-scrim{background:linear-gradient(to bottom,rgba(13,26,72,.3),transparent 20%),linear-gradient(to right,rgba(13,26,72,.56) 0%,rgba(13,26,72,.32) 38%,rgba(13,26,72,.03) 68%),linear-gradient(to top,rgba(13,26,72,.28),transparent 38%)}
@media (max-width:900px){.hero-slide::before{bottom:96px;opacity:.58}.hero-slide.pattern-flip::before{opacity:.32}}
.hero-inner{position:relative;z-index:3;width:100%;padding-block:150px 64px;display:flex;align-items:center}
.hero.copy-end .hero-inner{justify-content:flex-end}
.hero-copy{max-width:580px;transition:opacity .35s,transform .35s}
.hero-copy.is-fading{opacity:0;transform:translateY(8px)}
.hero-copy h1{color:#fff;font-size:58px;line-height:1.16;margin-bottom:18px;animation:fadeUp .7s .08s var(--ease) both;text-shadow:0 2px 24px rgba(13,26,72,.35)}
.hero-copy h1 em{font-style:normal;color:var(--brand-300);white-space:nowrap}
.hero-copy p{color:#E5EDF6;font-size:19px;max-width:520px;margin-bottom:28px;animation:fadeUp .7s .16s var(--ease) both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .7s .24s var(--ease) both}
/* brand band: frosted glass over the photo; skewed navy ribbon (calligraphy) at RTL start,
   logo + English name + tagline ribbon at the end. Photo stays visible behind everything. */
.hero-band{position:relative;z-index:3;height:128px}
.band-bg{position:absolute;inset:0;overflow:hidden}
.band-glass{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.34),rgba(255,255,255,.66));backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);border-top:1px solid rgba(255,255,255,.55)}
.band-navy{position:absolute;top:0;bottom:0;left:calc(50% - 36px);right:-120px;transform:skewX(18deg);background:linear-gradient(to bottom,rgba(23,46,118,.84),rgba(23,46,118,.94));border-left:7px solid var(--accent-500);box-shadow:-12px 0 24px rgba(13,26,72,.18)}
.band-inner{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr}
.band-ar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 32px 10px 60px;color:#fff}
.naskh{height:50px;width:auto;color:#fff;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.band-sub{font-size:14.5px;color:var(--brand-100);font-weight:500;letter-spacing:.01em;text-align:center;min-height:1.6em;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.band-sub.is-fading{opacity:0;transform:translateY(5px)}
.band-en{position:relative;font-family:var(--font-display);color:var(--brand-900)}
.band-en::before{content:"";position:absolute;left:64px;right:-8px;top:0;height:4px;background:var(--accent-500);opacity:.9}
.band-logo{position:absolute;left:0;bottom:12px;width:112px;height:112px;filter:drop-shadow(0 6px 14px rgba(13,26,72,.35))}
.band-en-text{position:absolute;left:134px;top:14px}
.band-en-text b{display:block;font-size:25px;font-weight:800;line-height:1.15;color:var(--brand-900);letter-spacing:-.01em}
.band-en-text b i{font-style:normal;color:var(--accent-500)}
.band-en-text span{display:block;font-size:13px;color:var(--brand-800);font-family:var(--font-body);font-weight:500;line-height:1.4;margin-top:2px}
.band-ribbon{position:absolute;left:100px;bottom:16px;height:36px;padding:0 28px 0 46px;background:var(--brand-900);color:#fff;display:flex;align-items:center;font-size:17px;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);box-shadow:0 4px 12px rgba(13,26,72,.25)}
.band-ribbon::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent-500)}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero-video{display:none}}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--gray-200);border-radius:var(--r-2xl);background:#fff;overflow:hidden;box-shadow:var(--sh-xs)}
.trust > div{display:flex;align-items:center;gap:14px;padding:22px 24px;border-inline-start:1px solid var(--gray-200)}
.trust > div:first-child{border-inline-start:0}
.trust .ic{width:22px;height:22px;color:var(--brand-600)}
.trust b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.trust span{font-size:13px;color:var(--text-3)}

/* intent tiles */
.intents{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.intent{padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px;min-height:260px}
.intent h3{font-size:22px;line-height:1.3}
.intent p{font-size:15px;flex:1}
.intent .link{margin-top:auto}
.intent.urgent{background:var(--brand-800);color:#fff;border-color:var(--brand-800)}
.intent.urgent h3{color:#fff}
.intent.urgent p{color:var(--brand-100)}
.intent.urgent .icon-box{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18)}
.intent.urgent .link{color:#fff}
.intent.urgent:hover{background:var(--brand-900)}

/* why us */
.why{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.why-media{position:relative}
.why-media img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:var(--r-4xl)}
.why-note{position:absolute;bottom:28px;inset-inline-end:28px;background:#fff;border-radius:var(--r-xl);padding:16px 18px;box-shadow:var(--sh-xl);max-width:300px;border:1px solid var(--gray-200)}
.why-note b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.why-note span{font-size:13px;color:var(--text-2);line-height:1.5}
.why-list{display:grid;gap:26px;margin-top:36px}
.why-list li{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start}
.why-list b{display:block;font-family:var(--font-display);font-size:21px;font-weight:800;margin-bottom:4px}
.why-list p{font-size:15.5px}

/* departments grid */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dept{padding:26px;display:flex;flex-direction:column;gap:14px}
.dept h3{font-size:21px}
.dept p{font-size:15px;flex:1}
.dept-img{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;margin:-26px -26px 4px}
.dept-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dept:hover .dept-img img{transform:scale(1.05)}
.dept.photo{padding-top:0;overflow:hidden}
.dept.photo .dept-img{margin:0 -26px 10px;border-radius:0}

/* doctors */
.doctors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.doctor{padding:16px 16px 20px;display:flex;flex-direction:column}
.doctor img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-xl);margin-bottom:16px}
.doctor h3{font-size:20px;margin-bottom:4px;padding-inline:4px}
.doctor .role{font-size:14px;color:var(--brand-700);font-weight:600;padding-inline:4px;margin-bottom:6px}
.doctor p{font-size:14px;padding-inline:4px;flex:1}
.doctor .actions{display:flex;gap:8px;margin-top:16px;padding-inline:4px}
.doctors.five{grid-template-columns:repeat(5,1fr)}
.doctors.five .doctor h3{font-size:17px}
.doctors.five .doctor .role{font-size:13px}

/* story */
.story{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:var(--r-4xl);overflow:hidden;background:var(--brand-900);color:#fff}
.story img{width:100%;height:100%;object-fit:cover;min-height:420px}
.story-body{padding:56px 60px;display:flex;flex-direction:column;justify-content:center}
.story-body .eyebrow{color:var(--brand-200)}.story-body .eyebrow::before{background:var(--brand-300)}
.story-body blockquote{font-family:var(--font-display);font-size:30px;line-height:1.45;font-weight:700;margin-bottom:26px}
.story-body cite{font-style:normal;font-size:14px;color:var(--brand-200);display:block}
.story-body cite b{display:block;color:#fff;font-size:16px;font-weight:600}

/* cta band */
.cta{background:linear-gradient(160deg,var(--brand-800),var(--brand-950));color:#fff;border-radius:28px;padding:64px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-2xl)}
.cta::before{content:"";position:absolute;inset:0;background:var(--pt-white) 0 0/var(--pt-size);opacity:.045;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse at 30% 50%,#000 30%,transparent 85%)}
.cta::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(111,196,238,.28),transparent 65%);inset-inline-start:-180px;bottom:-260px;pointer-events:none}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff;font-size:38px;margin-bottom:12px}
.cta p{color:var(--brand-100);font-size:17px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:1}
.cta.photo{display:block;padding-inline-end:42%;min-height:340px}
.cta.photo .cta-actions{justify-content:flex-start;margin-top:26px}
.cta-photo{position:absolute;inset-block:0;inset-inline-end:0;width:46%;z-index:0}
.cta-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-mask-image:linear-gradient(to right,#000 40%,transparent 96%);mask-image:linear-gradient(to right,#000 40%,transparent 96%);opacity:.92}

/* page hero (inner pages) */
.page-hero{background:var(--brand-25);border-bottom:1px solid var(--gray-200);padding-block:56px 48px}
.page-hero h1{font-size:44px;margin-bottom:10px}
.page-hero p{font-size:18px;max-width:640px}
.page-hero.dark{position:relative;isolation:isolate;overflow:hidden;background:var(--brand-950);border-bottom:0;color:#fff;padding-block:72px 64px;min-height:340px;display:flex;align-items:center}
.page-hero.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-img) center/cover;filter:saturate(.75);opacity:.45}
.page-hero.dark::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(13,26,72,.4),rgba(13,26,72,.1) 60%),linear-gradient(to top,rgba(13,26,72,.42),transparent 50%)}
.page-hero.dark h1{color:#fff;font-size:52px;line-height:1.15;margin-bottom:14px;max-width:720px}
.page-hero.dark p{color:var(--brand-100);font-size:18px}
.dash{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--brand-100);margin-bottom:18px;letter-spacing:.02em}
.dash::before{content:"";width:28px;height:2px;background:var(--accent-500)}
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--text-3);margin-bottom:18px;align-items:center}
.crumbs .ic{width:14px;height:14px}
.page-hero.split .container{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.page-hero.split img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--r-3xl);box-shadow:var(--sh-xl)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{font-size:14px;font-weight:500;padding:8px 14px;border-radius:var(--r-full);border:1px solid var(--gray-300);background:#fff;color:var(--gray-700);transition:.15s}
.chip:hover,.chip.on{background:var(--brand-700);color:#fff;border-color:var(--brand-700)}

/* dept detail */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.two-img{border-radius:24px;aspect-ratio:4/3.4;object-fit:cover;width:100%}
.checks{display:grid;gap:12px;margin-top:20px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--gray-800)}
.checks .ic{width:22px;height:22px;color:var(--brand-600);margin-top:3px;stroke-width:2.2}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{padding:24px 22px}
.step .n{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--brand-300);line-height:1;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:14px}
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rate{padding:28px 26px}
.rate .n{font-family:var(--font-display);font-size:52px;font-weight:800;color:var(--brand-700);line-height:1;margin-bottom:8px}
.rate>span{font-size:15px;color:var(--text-2)}
.faq-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:start}
.faq details{border:1px solid var(--gray-200);border-radius:var(--r-xl);background:#fff;padding:0 22px;margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--brand-600);transition:.2s}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{padding-bottom:18px;font-size:15px}
.sidebar{position:sticky;top:96px}
.sidebar .card{padding:26px}
.sidebar h4{font-size:17px;margin-bottom:12px}
.sidebar dl{display:grid;gap:12px;font-size:14px}
.sidebar dt{color:var(--text-3);font-size:12.5px}
.sidebar dd{font-weight:500}

/* forms */
.form{padding:36px}
.form h3{font-size:24px;margin-bottom:6px}
.form > p{margin-bottom:24px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:500;color:var(--gray-700)}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--gray-300);border-radius:var(--r-md);background:#fff;color:var(--text);width:100%;box-shadow:var(--sh-xs);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-400);box-shadow:0 0 0 4px var(--brand-100)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2376736B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;padding-left:38px}
.field .hint{font-size:13px;color:var(--text-3)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start}
.call-card{background:linear-gradient(160deg,var(--brand-800),var(--brand-950));color:#fff;border-radius:24px;padding:40px 44px;border:1px solid rgba(255,255,255,.12);box-shadow:var(--sh-2xl),inset 0 3px 0 var(--accent-500)}
.call-card .eyebrow{color:var(--brand-200)}.call-card .eyebrow::before{background:var(--brand-300)}
.call-card h3{color:#fff;font-size:30px;margin-bottom:14px}
.call-numbers{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;margin-bottom:26px}
.call-number{font-family:var(--font-display);font-size:40px;font-weight:900;color:#fff;letter-spacing:.02em;line-height:1.15;text-decoration:none}
.call-number .ltr{text-decoration:underline;text-decoration-color:var(--brand-300);text-underline-offset:8px;text-decoration-thickness:3px;transition:text-decoration-color .2s}
.call-number:hover .ltr{text-decoration-color:#fff}
.call-sep{width:12px;height:3px;border-radius:2px;background:var(--brand-300);opacity:.6;flex:none}
.call-card p{color:var(--brand-100);font-size:16px;max-width:52ch}
.call-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.call-steps{display:grid;gap:10px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.call-steps li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--brand-100)}
.call-steps b{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;font-family:var(--font-display);font-size:15px}
.info-list{display:grid;gap:10px}
.info-list>a,.info-list>div{display:flex;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--gray-200);border-radius:var(--r-xl);background:#fff;transition:.15s}
.info-list>a:hover{border-color:var(--brand-300);box-shadow:var(--sh-sm)}
.info-list .icon-box{width:44px;height:44px;border-radius:12px;background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100);box-shadow:none}
.info-list .icon-box::after{display:none}
.info-list .icon-box .ic{width:22px;height:22px;filter:none}
.info-list b{display:block;font-size:15.5px;font-weight:600;color:var(--text)}
.info-list b+span{display:block;font-size:13.5px;color:var(--text-2);margin-top:2px}
.hours{display:grid;gap:0;border:1px solid var(--gray-200);border-radius:var(--r-xl);overflow:hidden}
.hours div{display:flex;justify-content:space-between;padding:12px 18px;font-size:14.5px;border-top:1px solid var(--gray-200);background:#fff}
.hours div:first-child{border-top:0}
.hours div span:last-child{color:var(--text-2)}
.map{border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--gray-200);min-height:380px;position:relative;background:var(--gray-100)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.emergency{background:var(--error-50);border:1px solid #FECDCA;border-radius:var(--r-2xl);padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.emergency .icon-box{background:#fff;color:var(--error-700);border-color:#FECDCA}
.emergency b{display:block;font-size:17px;font-weight:600;color:var(--error-700);margin-bottom:4px}
.emergency p{font-size:14.5px;color:var(--gray-700)}

/* footer */
.footer{background:linear-gradient(180deg,var(--brand-950),#08122F);color:var(--brand-200);padding-block:64px 0;font-size:14px;position:relative;isolation:isolate}
.footer::before{content:"";position:absolute;inset:0;background:var(--pt-white) 0 0/var(--pt-size);opacity:.025;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%);mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.footer::after{content:"";position:absolute;top:0;inset-inline-start:0;width:38%;height:5px;background:var(--accent-500);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.footer>.container{position:relative}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.footer .brand-text b{color:#fff}.footer .brand-text span{color:var(--brand-300)}
.footer p{color:var(--brand-200);font-size:14px;margin-top:16px;max-width:340px}
.footer h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px}
.footer ul{display:grid;gap:10px}
.footer ul a:hover{color:#fff}
.social{display:flex;gap:8px;margin-top:20px}
.social a{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--glass-border);background:var(--glass-bg);display:grid;place-items:center;color:#fff;transition:.2s}
.social a:hover{background:rgba(255,255,255,.22)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--brand-300)}
.footer-credit{color:inherit;text-decoration:none;unicode-bidi:isolate}.footer-credit:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* mobile bar */
.mobile-bar{display:none}

/* responsive */
@media (max-width:1100px){
  .intents{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .trust > div:nth-child(3){border-inline-start:0}
  .trust > div:nth-child(n+3){border-top:1px solid var(--gray-200)}
  .doctors.five{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero-copy h1{font-size:46px}
}
@media (max-width:900px){
  .nav{display:none}
  .header .container{grid-template-columns:auto 1fr auto}
  .menu-btn{display:grid}
  .menu-toggle:checked ~ .nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:76px;inset-inline:16px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-2xl);padding:10px;box-shadow:var(--sh-xl);z-index:5}
  .menu-toggle:checked ~ .nav a{padding:12px 14px}
  .call-split .btn span{display:none}
  .header.over:not(.is-scrolled) .menu-toggle:checked ~ .nav a{color:var(--gray-700);text-shadow:none}
  .hero-slide{--zoom:100%;--shift:0%}
  .hero-inner{padding-block:120px 44px}
  .hero-copy h1{font-size:38px}
  /* band collapses to the navy calligraphy strip; the English/logo block moves into the header (.brand-en) */
  .hero-band{height:auto}
  .band-navy,.band-en{display:none}
  .band-inner{grid-template-columns:1fr}
  .band-ar{background:linear-gradient(to bottom,rgba(23,46,118,.86),rgba(23,46,118,.95));margin-inline:calc(-1 * var(--gutter));padding:12px 20px 14px;border-top:4px solid var(--accent-500)}
  .header.over .brand-mark,.header.over .brand-text{display:none}
  /* over the hero: logo only; once the header turns solid on scroll, the English block slides in beside it */
  .header.over .brand-en{display:flex;align-items:center;gap:8px;font-family:var(--font-display);color:var(--brand-900)}
  .header.over .brand-en-text{display:flex;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease),opacity .3s}
  .header.over.is-scrolled .brand-en-text{max-width:260px;opacity:1;white-space:normal}
  .header.over.is-scrolled .brand-en-text b{white-space:nowrap}
  .header.over.is-scrolled .brand-en-text>span{white-space:normal;line-height:1.25}
  .brand-en img{width:68px;height:68px;flex:none;filter:drop-shadow(0 2px 8px rgba(13,26,72,.35));transition:width .3s,height .3s}
  .header.over.is-scrolled .brand-en img{width:56px;height:56px;filter:none}
  .brand-en-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
  .brand-en-text b{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
  .brand-en-text b i{font-style:normal;color:var(--accent-500)}
  .brand-en-text>span{font-size:9.5px;font-family:var(--font-body);font-weight:500;color:var(--brand-800);margin-top:1px;white-space:nowrap}
  .brand-en-text>.brand-ribbon{margin-top:4px;background:var(--brand-900);color:#fff;font-family:var(--font-display);font-size:11.5px;font-weight:700;padding:2px 10px 2px 8px;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);position:relative;line-height:1.5}
  .brand-ribbon::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent-500)}
  .why,.two,.story,.contact-grid,.page-hero.split .container,.faq-grid{grid-template-columns:1fr}
  .story img{min-height:260px;max-height:340px}
  .story-body{padding:36px 28px}
  .story-body blockquote{font-size:24px}
  .depts,.doctors{grid-template-columns:1fr 1fr}
  .cta{grid-template-columns:1fr;padding:40px 28px}
  .cta-actions{justify-content:flex-start}
  .section{padding-block:64px}
  .section-head h2,.page-hero h1{font-size:32px}
  .page-hero.dark{min-height:0;padding-block:48px 40px}
  .page-hero.dark h1{font-size:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .rates{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media (max-width:600px){
  .container{padding-inline:20px}
  .section{padding-block:48px}
  .section.tight{padding-block:32px}
  .section-head{margin-bottom:28px}
  .section-head p{font-size:16px}
  .d-md{font-size:28px;line-height:1.3}
  .d-xs{font-size:22px}
  .eyebrow{font-size:13px;margin-bottom:8px}
  /* hero: fills the whole first screen — the mobile call bar stays hidden until
     you scroll past it, so there is no bar to leave room for here. */
  .hero{min-height:100vh;min-height:100svh}
  .hero-inner{padding-block:104px 32px}
  .hero-copy h1{font-size:34px}
  .hero-copy{width:100%;min-width:0}
  .hero-copy p{font-size:16.5px;margin-bottom:20px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero-slide{--sx:50%;--sy:45%;--rx:60%;--ry:55%}
  /* Bright slides washed the copy out on phones, where the text sits right on
     top of the subject. A scrim alone cannot fix that — a bright photo stays
     bright — so the media itself is pulled down first, then the scrim and a
     soft shadow carry the rest. Keeps every slide at roughly the contrast the
     opening (already dark) frame had. */
  .band-ar{margin-inline:-20px}
  .brand-en img{width:68px;height:68px}
  .header.over.is-scrolled .brand-en img{width:56px;height:56px}
  .header.over.is-scrolled .brand-en-text{max-width:190px}
  .header.over.is-scrolled .brand-en-text>span:not(.brand-ribbon){display:none}
  .brand-en-text b{font-size:13.5px}
  .brand-en-text>span{font-size:8.5px}
  .brand-en-text>.brand-ribbon{font-size:10.5px;margin-top:3px}
  .naskh{height:36px}
  .band-sub{font-size:12.5px}
  /* intent tiles as compact rows */
  .intents{grid-template-columns:1fr;gap:12px}
  .intent{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;padding:18px 18px 16px;min-height:0;align-items:start}
  .intent .icon-box{width:44px;height:44px;grid-row:1/4}
  .intent h3{font-size:19px;margin:0}
  .intent p{font-size:14px;line-height:1.6;margin:4px 0 6px}
  .intent .link{font-size:14px;margin:0}
  /* two-column blocks: photo first, short and attached to the text */
  .two{gap:20px}
  .two>.two-img{order:-1;aspect-ratio:16/10;border-radius:16px}
  .checks{gap:8px;margin-top:14px}
  .checks li{font-size:14.5px}
  .why{gap:22px}
  .why-media img{aspect-ratio:16/10;border-radius:16px}
  .why-note{position:static;margin-top:12px;max-width:none;box-shadow:var(--sh-sm)}
  .why-list{margin-top:22px;gap:18px}
  .why-list b{font-size:19px}
  /* doctor cards become horizontal rows */
  .doctors,.doctors.five{grid-template-columns:1fr;gap:12px}
  .doctor{display:grid;grid-template-columns:92px 1fr;column-gap:14px;row-gap:2px;padding:14px;align-items:start}
  .doctor img{grid-row:1/4;aspect-ratio:1;border-radius:12px;margin:0}
  .doctor h3{font-size:18px;padding:0;margin:0}
  .doctor .role{padding:0;margin:0 0 4px;font-size:13px}
  .doctor p{padding:0;font-size:13.5px;line-height:1.55}
  .doctor .actions{grid-column:1/-1;padding:0;margin-top:12px}
  .doctor .actions .btn{flex:1}
  .depts{grid-template-columns:1fr;gap:14px}
  .story img{min-height:200px;max-height:240px}
  .story-body{padding:28px 22px}
  .story-body blockquote{font-size:21px}
  .page-hero{padding-block:36px 32px}
  .page-hero p{font-size:16px}
  .call-numbers{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
  .call-number{font-size:34px}
  .call-number .ltr{text-underline-offset:6px;text-decoration-thickness:2px}
  .call-sep{display:none}
  .page-hero.split img{aspect-ratio:16/10;border-radius:16px}
  .page-hero.split .container{gap:24px}
  .chips{margin-top:16px;gap:6px}
  .chip{font-size:13px;padding:7px 12px}
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 78%;scroll-snap-align:start}
  .rates{gap:12px}
  .trust,.fgrid{grid-template-columns:1fr}
  .trust > div{border-inline-start:0;border-top:1px solid var(--gray-200)}
  .trust > div:first-child{border-top:0}
  .footer-grid{grid-template-columns:1fr}
  .cta{padding:32px 22px}
  .cta h2{font-size:28px}
  .brand-text span{display:none}
  .brand-text b{font-size:17px;white-space:nowrap}
  .brand-mark{width:54px;height:54px}
  .header .container{gap:12px}
  .header-actions>.btn-primary,.call-split{display:none}
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;inset-inline:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--gray-200);transition:transform .3s var(--ease),opacity .3s var(--ease)}
  /* Over the hero the bar stays out of the way — the hero has its own CTAs.
     JS adds .is-hidden while the hero is still on screen (see index.html). */
  .js .mobile-bar.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
}

/* ─────────────────────────────────────────────────────────────
   Below-hero language: navy + frosted glass + brand pattern.
   Everything here echoes .hero-band (glass strip, skewed navy
   ribbon, red hairline) and the hero's depth-of-field photo mask.
───────────────────────────────────────────────────────────── */
/* pattern behind text on blue surfaces */
.pat{position:relative;isolation:isolate}
.pat::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--pt-white) 0 0/var(--pt-size);opacity:.045;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 45%,#000 25%,transparent 85%)}
.pat>*{position:relative;z-index:1}
.pat.soft::before{background:var(--pt-ink) 0 0/var(--pt-size);opacity:.03}
/* thin zigzag (assets/patterns/zigzag-thin-ink.svg): index medical-departments section */
.pat.zz::before{background:url(../patterns/zigzag-thin-ink.svg) 0 0/240px auto;opacity:.14}

/* glass primitives */
.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
/* skewed navy tag with the red hairline (from .band-ribbon) */
.tag{display:inline-flex;align-items:center;height:30px;padding:0 16px 0 22px;background:var(--brand-900);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.01em;position:relative;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);box-shadow:0 4px 12px rgba(13,26,72,.25)}
.tag::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent-500)}
/* floating colour orbs (hero glow) */
.orb{position:absolute;width:var(--s,380px);height:var(--s,380px);border-radius:50%;background:radial-gradient(circle,var(--c,rgba(111,196,238,.35)),transparent 66%);inset-inline-start:var(--x,0);top:var(--y,0);pointer-events:none;z-index:0;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(22px,-16px) scale(1.06)}}

/* navy sections */
.section.navy{background:linear-gradient(165deg,var(--brand-900) 0%,var(--brand-950) 100%);color:#fff;overflow:hidden}
.section.navy h2,.section.navy h3{color:#fff}
.section.navy p{color:var(--brand-100)}
.section.navy .eyebrow{color:var(--brand-200)}.section.navy .eyebrow::before{background:var(--brand-300)}
.section.navy .btn-secondary{background:var(--glass-bg);color:#fff;border-color:var(--glass-border);backdrop-filter:blur(10px)}
.section.navy .btn-secondary:hover{background:rgba(255,255,255,.22)}

/* section divider: an always-full hairline on the boundary between sections, etched with a light
   highlight beneath it. As it scrolls into view, --p (0 → 1, set by site.js) deepens a soft neutral
   shadow along it from the centre outward. */
.sep{--p:0;position:relative;height:0;z-index:2;width:min(calc(var(--container) - 2 * var(--gutter)),calc(100% - 32px));margin-inline:auto}
.sep::before,.sep::after{content:"";position:absolute;inset-inline:0}
.sep::before{top:0;height:2px;background:linear-gradient(to right,transparent,var(--gray-200) 12%,var(--gray-200) 88%,transparent) top/100% 1px no-repeat,linear-gradient(to right,transparent,rgba(255,255,255,.9) 12%,rgba(255,255,255,.9) 88%,transparent) bottom/100% 1px no-repeat}
.sep::after{top:-3px;height:7px;background:radial-gradient(closest-side,rgba(13,26,72,.13),rgba(13,26,72,.04) 55%,transparent);filter:blur(1.5px);transform:scaleX(var(--p));opacity:var(--p)}
.sep::before{background:linear-gradient(to right,transparent,var(--gray-200) 12%,var(--gray-200) 88%,transparent)}
.sep::after{top:-3px;height:7px;background:radial-gradient(closest-side,rgba(47,176,232,.22),rgba(47,176,232,.07) 55%,transparent);filter:blur(1.5px);transform:scaleX(var(--p));opacity:var(--p)}

/* intent tiles v2 */
.intent{border-radius:24px;padding:28px 26px 26px;background:linear-gradient(180deg,#fff,var(--gray-25));position:relative;overflow:hidden;isolation:isolate}
.intent::after{content:"";position:absolute;inset-inline-end:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--brand-100),transparent 66%);z-index:-1;transition:transform .5s var(--ease)}
.intent:hover::after{transform:scale(1.5)}
.intent .link{margin-top:auto}
.intent.urgent{background:linear-gradient(160deg,var(--brand-800),var(--brand-950));border-color:rgba(255,255,255,.14);box-shadow:inset 0 3px 0 var(--accent-500)}
.intent.urgent::before{content:"";position:absolute;inset:0;background:var(--pt-white) 0 0/320px;opacity:.05;z-index:-1;-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 80%)}
.intent.urgent::after{background:radial-gradient(circle,rgba(184,18,31,.5),transparent 66%)}
.intent.urgent .icon-box{background:var(--glass-bg);backdrop-filter:blur(12px);border-color:var(--glass-border)}
.intent.urgent:hover{background:linear-gradient(160deg,var(--brand-900),var(--brand-950))}

/* depth-of-field photo (the hero's B&W-blur + colour-ellipse trick) */
.depth{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:4/4.6;background:var(--brand-950);box-shadow:var(--sh-2xl)}
.depth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%)}
.depth .d-base{filter:grayscale(1) blur(3px) brightness(.9);transform:scale(1.04)}
.depth .d-sub{-webkit-mask-image:radial-gradient(ellipse var(--rx,48%) var(--ry,60%) at var(--sx,50%) var(--sy,48%),#000 45%,transparent 100%);mask-image:radial-gradient(ellipse var(--rx,48%) var(--ry,60%) at var(--sx,50%) var(--sy,48%),#000 45%,transparent 100%)}
.depth::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,26,72,.42),transparent 48%);pointer-events:none}

/* departments page: bento grid spilling out of the page hero */
.depts-hero{padding-block:48px 0;border-bottom:0}
.depts-hero .bento{margin-bottom:-120px}
.depts-hero+.section{padding-top:calc(96px + 120px)}
.bento{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;grid-template-rows:340px 230px;gap:14px}
.b-head{grid-column:1;grid-row:1;align-self:start;padding-top:4px}
.b-head h1{font-size:44px;margin-bottom:10px}
.b-head p{font-size:17px}
.b-head .btn{margin-top:18px}
.b-wide{grid-column:2/4;grid-row:1}
.b-side{grid-column:4;grid-row:1}
.b-sm{grid-row:2}
/* open state: the chosen department's detail panel takes a full row and the cards shrink into a strip below it */
.bento.is-open{grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto 150px}
.bento.is-open .b-head{grid-column:1/-1;grid-row:1;padding-bottom:6px}
.bento.is-open .b-head p{max-width:640px}
.bento.is-open .b-head h1{font-size:30px;margin-bottom:4px}
.bento.is-open .b-head p{display:none}
.bento.is-open .dpanel{grid-column:1/-1;grid-row:2}
.bento.is-open .bcard{grid-column:auto;grid-row:3;box-shadow:var(--sh-md)}
.bento.is-open .bcard:hover{transform:none}
.bento.is-open .bcard p,.bento.is-open .bcard-go,.bento.is-open .bcard .tag{display:none}
.bento.is-open .bcard h3{font-size:16.5px;line-height:1.25}
.bento.is-open .bcard-body{inset-inline:14px;bottom:12px;padding-inline-end:0}
.bento.is-open .bcard.is-active{outline:3px solid var(--brand-400);outline-offset:3px}
.bento.is-open .bcard:not(.is-active) img{filter:saturate(.7)}
.dpanel{position:relative;background:#fff;border:1px solid var(--gray-200);border-radius:22px;padding:40px 44px;box-shadow:var(--sh-2xl);display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;isolation:isolate;touch-action:pan-y}
.dpanel[hidden]{display:none}
.dpanel.is-in{animation:fadeUp .5s var(--ease) both}
/* Card-deck swipe: the panel follows the finger, then either flicks away to
   the neighbouring department or springs back. */
.dpanel.is-dragging{animation:none;transition:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.dpanel.is-settling{animation:none;transition:transform .32s var(--ease),opacity .32s var(--ease)}
/* the outgoing card leaves sideways and the next one arrives from the other
   side, so keep the travel inside the grid instead of widening the page */
.bento.is-open{overflow-x:clip;overflow-clip-margin:40px}
.dpanel-foot{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
.dpanel-dots{display:flex;align-items:center;gap:8px}
.dpanel-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--gray-300);transition:.25s var(--ease)}
.dpanel-dot:hover{background:var(--gray-400)}
.dpanel-dot.is-on{width:26px;background:var(--brand-600)}
/* previous / next arrows beside the dots (desktop); a faint "next service" line replaces them on phones */
.dpanel-nav{display:flex;align-items:center;gap:14px}
.dpanel-arrow{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--brand-100);background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.dpanel-arrow:hover{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.dpanel-arrow:focus-visible,.dpanel-next:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.dpanel-arrow .ic{width:18px;height:18px;stroke-width:2}
.dpanel-arrow.is-prev .ic{transform:scaleX(-1)}
.dpanel-next{display:none;align-items:center;gap:8px;max-width:100%;padding:8px 4px;border:0;background:none;color:var(--text-3);font-size:14px;line-height:1.3}
.dpanel-next b{font-weight:600;color:var(--brand-700)}
.dpanel-next .ic{width:16px;height:16px;flex:none;stroke-width:2;opacity:.55}
.dept-slogan{margin-top:10px;font-size:20px;line-height:1.5;font-weight:600;color:var(--brand-700)}
.dept-slogan+.t-lg{margin-top:8px!important}
.dpanel-hint{display:none;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.dpanel-hint .ic{width:15px;height:15px}
@media (hover:none){.dpanel-hint{display:flex}}
.dpanel-close{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--gray-300);background:#fff;color:var(--gray-700);display:grid;place-items:center;z-index:2;transition:.2s}
.dpanel-close:hover{background:var(--brand-800);color:#fff;border-color:var(--brand-800)}
.dpanel-close .ic{width:18px;height:18px;stroke-width:2}
.dept-detail{display:contents}
.dept-detail[hidden]{display:none}
.dept-detail .two-img{aspect-ratio:4/3.6}
.dept-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.bcard{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--brand-950);color:#fff;isolation:isolate;box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.12);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2xl)}
.bcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 40%);transition:transform .9s var(--ease)}
.bcard:hover img{transform:scale(1.06)}
.bcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(13,26,72,.86) 0%,rgba(13,26,72,.4) 34%,rgba(13,26,72,.02) 62%),linear-gradient(to bottom,rgba(13,26,72,.2),transparent 28%)}
.bcard .tag{position:absolute;top:16px;inset-inline-start:0;z-index:2}
.bcard-body{position:absolute;inset-inline:22px;bottom:20px;z-index:2;padding-inline-end:56px}
.bcard h3{color:#fff;font-size:24px;line-height:1.2;margin-bottom:4px}
.bcard p{color:var(--brand-100);font-size:14px;line-height:1.55;max-width:46ch}
.b-sm h3{font-size:20px}
.b-sm p{font-size:13px}
.bcard-go{position:absolute;bottom:20px;inset-inline-end:20px;z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass-bg);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.3s var(--ease)}
.bcard-go .ic{width:18px;height:18px;stroke-width:2}
.bcard:hover .bcard-go{background:#fff;color:var(--brand-900);transform:translateX(-4px)}
.b-head .eyebrow{margin-bottom:10px}
.b-head h2{margin:0}
.kashida{letter-spacing:0;font-variant-ligatures:none}
.b-head .stack{font-size:54px;line-height:1.05;font-weight:900}
.b-head .stack span{display:block}
.b-head .sub{font-size:19px;color:var(--text-2);margin-top:14px;line-height:1.5;max-width:26ch}
.b-head .sub b{display:block;font-weight:800;color:var(--brand-900)}
@media (max-width:1100px){
  .bento{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 300px;grid-auto-rows:210px}
  .b-head{grid-column:1/-1;grid-row:1;padding-bottom:4px}
  .b-wide{grid-column:1/3;grid-row:2}
  .b-side{grid-column:3;grid-row:2}
  .b-sm{grid-row:auto}
  .bento.is-open{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;grid-auto-rows:130px}
  .bento.is-open .bcard{grid-row:auto}
  .dpanel{grid-template-columns:1fr;padding:28px;gap:24px}
  .dept-detail .two-img{order:-1;aspect-ratio:16/9}
}
@media (max-width:900px){
  .dpanel-arrow{display:none}
  .dpanel-nav{gap:0}
  .dpanel-next{display:inline-flex}
  .dpanel-hint{display:none!important}
}
@media (max-width:600px){
  .depts-hero{padding-top:36px}
  .depts-hero .bento{margin-bottom:-60px}
  .depts-hero+.section{padding-top:calc(48px + 60px)}
  .bento,.bento.is-open{display:flex;flex-direction:column;gap:12px}
  .b-head h1{font-size:32px}
  .b-head p{font-size:16px}
  .bcard{aspect-ratio:16/10;border-radius:16px}
  .bcard h3{font-size:21px}
  .bcard p{font-size:13.5px}
  .bcard-body{inset-inline:16px;bottom:16px;padding-inline-end:52px}
  .bcard-go{bottom:16px;inset-inline-end:16px}
  .bento.is-open .bcard{aspect-ratio:auto;height:84px}
  .bento.is-open .bcard h3{font-size:16px}
  .dpanel{padding:20px;border-radius:16px;gap:18px}
  .dpanel-close{top:12px;inset-inline-end:12px;width:36px;height:36px}
  .dpanel .d-md{font-size:26px}
  .dept-detail .two-img{aspect-ratio:16/10;border-radius:12px}
}

/* doctors v2 */
/* Horizontal rail so the whole roster fits at any width — three cards plus a
   peek on desktop, one-up swiping on phones. Vertical padding keeps the hover
   lift and shadow from being clipped by the scroll container. */
.docs{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px 0 18px;margin-block:-8px -18px}
.docs::-webkit-scrollbar{display:none}
.docs-head-actions{display:flex;align-items:center;gap:12px}
.docs-nav{display:flex;gap:8px}
.docs-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--gray-300);background:#fff;color:var(--gray-700);display:grid;place-items:center;transition:.2s}
.docs-arrow:hover{background:var(--brand-800);border-color:var(--brand-800);color:#fff}
.docs-arrow .ic{width:18px;height:18px;stroke-width:2}
.docs-arrow.flip .ic{transform:scaleX(-1)}
.doc{flex:0 0 calc((100% - 40px)/3 - 22px);scroll-snap-align:start;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--gray-200);box-shadow:var(--sh-xs);display:flex;flex-direction:column;transition:.35s var(--ease)}
.doc:hover{transform:translateY(-5px);box-shadow:var(--sh-xl);border-color:var(--gray-300)}
.doc-media{position:relative;aspect-ratio:1/1;background:var(--brand-950);overflow:hidden}
.doc-media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .9s var(--ease)}
.doc:hover .doc-media img{transform:scale(1.05)}
.doc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,26,72,.75),rgba(13,26,72,.1) 45%,transparent 65%)}
.doc-plate{position:absolute;inset-inline:12px;bottom:12px;z-index:1;color:#fff;border-radius:14px;padding:10px 14px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.doc-plate h3{color:#fff;font-size:19px;margin:0 0 2px;line-height:1.25}
.doc-plate .role{font-size:13px;color:var(--brand-200);font-weight:600}
.doc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:14px}
.doc-body p{font-size:14px;flex:1}
.doc-body .actions{display:flex;gap:8px}
.doc-body .actions .btn{flex:1}

/* story v2 (navy, depth photo) */
.story{background:transparent;border-radius:0;overflow:visible;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;color:#fff}
.story .depth{aspect-ratio:4/5}
.story-body{padding:0}
.story-body blockquote{position:relative;padding-top:44px}
.story-body blockquote::before{content:"”";position:absolute;top:-6px;inset-inline-start:-4px;font-size:110px;line-height:1;color:var(--brand-300);opacity:.35;font-family:var(--font-display);pointer-events:none}
.story-body cite{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.story-body cite b{display:inline}

/* scroll reveal (JS adds .js to <html>) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .cta.photo{padding-inline-end:28px;min-height:0}
  .cta-photo{display:none}
  .doc{flex-basis:calc((100% - 20px)/2 - 26px)}
  .story{grid-template-columns:1fr;gap:28px}
  .story .depth{aspect-ratio:16/11}
}
@media (max-width:600px){
  .intent::after{display:none}
  .intent .icon-box{width:44px;height:44px;border-radius:12px}
  .depth{aspect-ratio:16/11;border-radius:18px}
  .docs{gap:12px;padding:4px 20px 16px;margin:0 -20px}
  .doc{flex-basis:82%;border-radius:18px}
  .docs-nav{display:none}
  .story .depth{aspect-ratio:4/3.4}
  .story .depth img{min-height:0;max-height:none}
  .story-body blockquote{padding-top:38px}
  .story-body blockquote::before{top:-4px;font-size:90px}
  .cta{border-radius:20px}
}

/* ── phone polish: index/departments/about (agent A) ── */
/* index: scroll-pinned doctors rail. JS (index.html) adds .is-pinned, sizes
   #docs-pin to stage height + track overflow, and drives the track's translateX. */
.docs-sec.is-pinned{padding-block:0}
.docs-sec.is-pinned .docs-stage{position:sticky;top:76px;height:calc(100vh - 76px);height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;overflow:clip}
.docs-sec.is-pinned .docs-stage>.container{width:100%;min-width:0}
.docs-sec.is-pinned .docs{overflow:visible;scroll-snap-type:none;will-change:transform;min-width:0}
.docs-sec.is-pinned .docs-nav{display:none}
.doc-body p{margin:0}
@media (max-width:600px){
  .docs-sec.is-pinned .docs-stage{padding-bottom:72px}
  .docs-sec .section-head{margin-bottom:20px;gap:14px}
  .docs-sec .section-head h2{margin-bottom:0}
  .docs-sec.is-pinned .doc{flex-basis:min(78%,calc(100svh - 440px))}
  .doc-body{padding:12px 16px 14px}
}
/* index: doctors rail on a deep navy band, bright photo cards, progress counter,
   and a closing "all doctors" card. (No overflow on the section: sticky needs it.) */
.docs-sec{background:radial-gradient(110% 70% at 90% 0%,rgba(47,176,232,.18),transparent 60%),linear-gradient(165deg,var(--brand-900) 0%,var(--brand-950) 100%);color:#fff}
.docs-sec h2{color:#fff}
.docs-sec .eyebrow{color:var(--brand-200)}.docs-sec .eyebrow::before{background:var(--brand-300)}
.docs-sec .section-head{align-items:flex-end}
.docs-sec .docs-arrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.docs-progress{display:none;align-items:center;gap:16px;font-family:var(--font-display);font-weight:700;color:var(--brand-200);font-size:15px}
.docs-sec.is-pinned .docs-progress{display:flex}
.docs-count{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.docs-count b{color:#fff;font-size:24px;font-variant-numeric:tabular-nums}
.docs-progress i{display:block;width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.docs-progress i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(to left,#fff,var(--brand-300));transform:scaleX(0);transform-origin:right}
.docs-sec .doc{border:0;box-shadow:0 14px 28px -16px rgba(0,0,0,.55)}
.docs-sec .doc:hover{border:0}
.docs-sec .doc-media{aspect-ratio:4/4.6}
.docs-sec.is-pinned .doc-media{aspect-ratio:auto;height:clamp(220px,calc(100svh - 400px),470px)}
.docs-sec .doc-plate{background:rgba(13,26,72,.66);border-color:rgba(255,255,255,.16)}
.docs-sec .doc-body p{color:var(--text-2);font-size:15px;line-height:1.6}
.doc-all{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.24)!important;box-shadow:none!important;color:#fff;padding:28px;gap:10px;justify-content:flex-end}
.doc-all:hover{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
.doc-all-go{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--brand-900);display:grid;place-items:center;margin-bottom:auto;transition:.25s var(--ease)}
.doc-all-go .ic{width:24px;height:24px;stroke-width:2}
.doc-all:hover .doc-all-go{background:var(--brand-300);color:var(--brand-950)}
.doc-all>b{font-family:var(--font-display);font-size:30px;line-height:1.25;font-weight:800}
.doc-all>span:last-child{color:var(--brand-100);font-size:15px;line-height:1.6}
@media (max-width:600px){
  .docs-sec.is-pinned .doc{flex-basis:78%}
  .docs-sec.is-pinned .doc-media{height:clamp(200px,calc(100svh - 450px),420px)}
  .docs-sec .section-head.row{gap:12px}
  .docs-progress{width:100%;gap:12px}
  .docs-progress i{flex:1;width:auto}
  .docs-count b{font-size:20px}
  .doc-all{padding:22px}
  .doc-all>b{font-size:26px}
}

/* ── phone polish: contact/doctors (agent B) ── */
/* shared header on narrow phones (<=380px): brand + logo + menu overflowed the 320px row */
@media (max-width:380px){.brand-text b{font-size:15px}.brand-mark{width:46px;height:46px}.header .container{gap:8px}}
/* doctors: cards hold photo, name, role and one line — no per-card buttons */
.section .doc-list .doc-full{grid-template-columns:120px 1fr;align-items:center}
body:has(.doc-list) .page-hero.dark{min-height:0;padding-block:56px 48px}
@media (max-width:600px){
  /* contact: short title band, compact call card, no repeated phone rows */
  body:has(.call-card) .page-hero{padding-block:22px 20px}
  body:has(.call-card) .page-hero .crumbs{margin-bottom:8px}
  #book{padding-top:24px}
  .call-card{padding:24px 20px;border-radius:20px}
  .call-card h3{font-size:24px;margin-bottom:10px}
  .call-number{font-size:32px;display:inline-block;padding-block:4px}
  .call-actions{margin-top:18px;gap:10px}
  .call-actions .btn{flex:1 1 100%;min-height:52px}
  .call-steps{margin-top:22px;padding-top:18px;gap:8px}
  .info-list{gap:8px}
  .info-list>a[href^="tel:"],.info-list>a[href*="wa.me"]{display:none}
  .info-list>a,.info-list>div{padding:10px 14px;min-height:56px}
  .info-list .icon-box{width:40px;height:40px}
  .hours div{padding:12px 16px;font-size:15px}
  #map{padding-bottom:40px}
  #map .section-head{margin-bottom:16px;gap:14px}
  #map .section-head .btn{width:100%;min-height:48px}
  .map{min-height:280px}
  /* doctors: one compact row per doctor, single booking path below */
  body:has(.doc-list) .page-hero.dark{padding-block:32px 28px}
  body:has(.doc-list) .page-hero.dark h1{font-size:32px;margin-bottom:0}
  body:has(.doc-list) .page-hero.dark .dash{margin-bottom:10px}
  .section .doc-list .doc-full{grid-template-columns:84px 1fr;gap:14px;padding:12px;align-items:center}
  .doc-list .doc-full h3{font-size:19px}
  .doc-list .doc-full .role{font-size:14px;margin-bottom:4px}
  .doc-list .doc-full p{font-size:15px;line-height:1.55}
  .section .doc-list{gap:10px}
  .doc-list>.card:last-child .btn{flex:1;min-height:48px}
}
/* index: header takes the navy + red "authority" look while over the doctors band */
.header.on-navy,.header.over.on-navy{background:rgba(13,26,72,.94);box-shadow:inset 0 -2px 0 var(--accent-500),0 10px 30px -12px rgba(0,0,0,.5);transition:background .35s,box-shadow .35s,transform .35s var(--ease)}
.header.on-navy .brand-text b,.header.on-navy .brand-en-text b{color:#fff}
.header.on-navy .brand-text span,.header.on-navy .brand-en-text>span{color:var(--brand-200)}
.header.on-navy .brand-en-text b i{color:#ff5a5f}
.header.on-navy .brand-en-text>.brand-ribbon{background:var(--accent-500);color:#fff}
.header.on-navy .brand-ribbon::before{background:#fff;opacity:.5}
.header.on-navy .nav a{color:rgba(255,255,255,.86)}
.header.on-navy .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.header.on-navy .nav a.active{background:rgba(255,255,255,.14);color:#fff}
.header.on-navy .call-split{box-shadow:none;border:1px solid rgba(255,255,255,.3)}
.header.on-navy .call-split .btn-brand{background:var(--accent-500);border-color:var(--accent-500);color:#fff}
.header.on-navy .btn-wa{background:rgba(255,255,255,.1);color:#fff;border-color:transparent}
.header.on-navy .header-actions>.btn-primary{background:#fff;color:var(--brand-900);border-color:#fff}
.header.on-navy .menu-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.header.on-navy .menu-toggle:checked ~ .nav a{color:var(--gray-700)}
.header.on-navy .brand-mark,.header.on-navy .brand-en img{box-shadow:0 0 0 2px rgba(255,255,255,.9);border-radius:50%}

/* Home activities: honest upcoming states, a small image gallery, and a booking advert. */
.hospital-life{padding-block:80px 88px;background:linear-gradient(180deg,var(--surface-warm-50),var(--surface-warm-100));color:var(--brand-950)}
.hospital-life .container{max-width:1180px}
.hospital-life-head{display:flex;align-items:end;justify-content:space-between;gap:42px;padding-bottom:26px;border-bottom:1px solid #D8D5CD;margin-bottom:28px}
.hospital-life-kicker{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--accent-600)}
.hospital-life-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-500)}
.hospital-life h2{font-size:clamp(39px,3.6vw,52px);line-height:1.15;color:var(--brand-950);margin-top:10px;text-wrap:balance}
.hospital-life h2 em{font-style:normal;color:var(--brand-800)}
.hospital-life-head>p{max-width:25ch;font-size:15px;line-height:1.75;color:var(--gray-600)}
.hospital-life-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:stretch}
.hospital-life-upcoming{display:grid;grid-template-rows:1fr 1fr}
.hospital-life-item{position:relative;padding:25px 4px 28px;border-bottom:1px solid #D8D5CD}
.hospital-life-item:first-child{padding-top:8px}
.hospital-life-num{font-size:13px;font-weight:600;color:var(--brand-600)}
.hospital-life-soon{float:left;color:var(--accent-600);font-size:12px;font-weight:600;background:rgba(184,18,31,.07);padding:2px 10px;border-radius:100px}
.hospital-life-item h3{font-size:clamp(27px,2.3vw,34px);color:var(--brand-950);margin:21px 0 6px}
.hospital-life-item p{font-size:14px;line-height:1.65;color:var(--gray-600)}
.hospital-life-gallery{position:relative;min-height:390px;margin:0;overflow:hidden;border-radius:18px;background:var(--brand-950)}
.hospital-life-photos{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr 1fr;gap:3px}
.hospital-life-photos img{width:100%;height:100%;object-fit:cover;min-width:0}
.hospital-life-photos img:first-child{object-position:60% center}
.hospital-life-gallery::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,26,72,.88),transparent 58%);pointer-events:none}
.hospital-life-gallery figcaption{position:absolute;z-index:1;inset-inline:28px;bottom:25px;display:flex;flex-direction:column;align-items:flex-start;color:#fff}
.hospital-life-gallery figcaption span{font-size:13px;font-weight:600;color:var(--brand-100)}
.hospital-life-gallery figcaption strong{font-family:var(--font-display);font-size:32px;line-height:1.2}
.hospital-life-booking{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;margin-top:28px;padding:28px 34px;background:var(--brand-950);color:#fff;border-inline-start:5px solid var(--accent-500);border-radius:14px}
.hospital-life-booking::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/main-thin-white.svg) center/300px auto repeat;opacity:.05;pointer-events:none}
.hospital-life-booking span{display:block;color:var(--brand-200);font-size:13px;font-weight:600;margin-bottom:3px}
.hospital-life-booking h3{color:#fff;font-size:clamp(24px,2.3vw,30px)}
.hospital-life-booking a{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:#fff;color:var(--brand-950);padding:12px 24px;border-radius:100px;font-weight:700;transition:background .2s,color .2s,transform .2s}
.hospital-life-booking a:hover{background:var(--lime-500);color:var(--lime-ink);transform:translateY(-2px)}
.hospital-life-booking a:focus-visible{outline:3px solid var(--brand-300);outline-offset:4px}
.hospital-life-booking a .ic{width:18px;height:18px}
@media (max-width:900px){
  .hospital-life-grid{grid-template-columns:1fr 1fr;gap:20px}
  .hospital-life-gallery{min-height:360px}
}
@media (max-width:600px){
  .hospital-life{padding-block:56px 60px}
  .hospital-life-head{display:block;padding-bottom:20px;margin-bottom:8px}
  .hospital-life h2{font-size:34px}
  .hospital-life-head>p{max-width:none;margin-top:10px;font-size:14px}
  .hospital-life-grid{grid-template-columns:1fr;gap:22px}
  .hospital-life-item{padding:20px 2px 24px}
  .hospital-life-item:first-child{padding-top:20px}
  .hospital-life-item h3{font-size:28px;margin-top:14px}
  .hospital-life-gallery{min-height:280px}
  .hospital-life-gallery figcaption{inset-inline:20px;bottom:18px}
  .hospital-life-gallery figcaption strong{font-size:27px}
  .hospital-life-booking{display:block;margin-top:22px;padding:26px 22px}
  .hospital-life-booking h3{font-size:27px}
  .hospital-life-booking a{width:100%;margin-top:20px}
  .docs-head-actions{width:100%}
  .docs-sec.is-pinned .doc-media{height:clamp(190px,calc(100svh - 500px),400px)}
}
/* index + departments (phone): the four small department cards pair up 2-across */
@media (max-width:600px){
  .bento:not(.is-open){display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .bento:not(.is-open) .b-head,.bento:not(.is-open) .b-wide,.bento:not(.is-open) .b-side{grid-column:1/-1}
  .bento:not(.is-open) .b-sm{aspect-ratio:1/1.12;border-radius:16px}
  .bento:not(.is-open) .b-sm p{display:none}
  .bento:not(.is-open) .b-sm .bcard-body{inset-inline:14px;bottom:14px;padding-inline-end:0}
  .bento:not(.is-open) .b-sm h3{font-size:18px;line-height:1.3;margin:0}
  .bento:not(.is-open) .b-sm .bcard-go{top:12px;bottom:auto;inset-inline-end:12px;width:36px;height:36px}
  .bento:not(.is-open) .b-sm .tag{top:14px;height:26px;font-size:12.5px;padding:0 12px 0 18px}
}
@media (max-width:600px){
  .bento:not(.is-open){grid-template-rows:none;grid-auto-rows:auto}
  .bento:not(.is-open)>*{grid-row:auto}
  .bento:not(.is-open) .b-wide,.bento:not(.is-open) .b-side{aspect-ratio:16/10.5}
  /* CTA card buttons: full-width, equal stack (shared .cta rule) */
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%;justify-content:center}
}
/* index: faint brand pattern layer on the (sticky) doctors stage, soft-edged;
   moved by index.html with the rail travel (.docs-pat) */
.docs-stage{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
/* pattern: a real layer moved with translate3d from the scroll handler (no idle loop, no blur, no per-frame style vars) */
.docs-pat{position:absolute;inset:-80px;z-index:-1;pointer-events:none;background:url(../patterns/main-thin-white.svg) 0 0/var(--pt-size) repeat;opacity:.11;will-change:transform;-webkit-mask-image:radial-gradient(ellipse 85% 90% at 50% 45%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 85% 90% at 50% 45%,#000 45%,transparent 100%)}
.docs-stage>.container{position:relative}
/* index (phone): the kashida section title is scaled down so it doesn't eat a whole screen */
@media (max-width:600px){
  .b-head .stack{font-size:42px}
  .b-head .sub{font-size:17px;margin-top:10px;max-width:none}
}
/* index (phone): bottom call bar follows the header's navy + red state */
@media (max-width:600px){
  .mobile-bar{transition:transform .3s var(--ease),opacity .3s var(--ease),background-color .35s,border-color .35s}
  .mobile-bar .btn{transition:background-color .35s,color .35s,border-color .35s}
  .mobile-bar.on-navy{background:rgba(13,26,72,.96);border-top-color:var(--accent-500);box-shadow:0 -10px 30px -14px rgba(0,0,0,.5)}
  .mobile-bar.on-navy .btn-brand{background:#fff;color:var(--brand-900);border-color:#fff}
  .mobile-bar.on-navy .btn-primary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
}
/* loop 3 (phone): intent tiles — the later "v2" rule was undoing the compact phone padding;
   departments breadcrumb gets a proper tap height */
@media (max-width:600px){
  .intent{padding:16px 16px 14px;border-radius:18px}
  .intent h3{font-size:18.5px;line-height:1.35}
  .intent p{font-size:15px;margin:4px 0 4px}
  .intents{gap:10px}
  .depts-hero .crumbs{font-size:14px;margin-bottom:10px}
  .depts-hero .crumbs a{display:inline-flex;align-items:center;min-height:44px}
}

/* ── fertility guide: editorial article layout (ga-) ─────────────
   Photo hero with tinted title, one centred reading column, bands alternating
   white / pale tint, headings with the key word in brand colour, chevron lists. */
.ga-hero{position:relative;isolation:isolate;overflow:hidden;min-height:420px;display:flex;align-items:center;background:var(--brand-950)}
.ga-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--ga-img) 50% 35%/cover}
.ga-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(13,26,72,.66) 0%,rgba(13,26,72,.44) 45%,rgba(13,26,72,.14) 100%)}
.ga-hero .container{width:100%}
.ga-hero .crumbs{color:var(--brand-200);margin-bottom:14px}
.ga-hero .crumbs a:hover{color:#fff}
.ga-hero h1{color:#fff;font-size:56px;line-height:1.15;max-width:560px;text-shadow:0 2px 20px rgba(13,26,72,.35)}

.ga{--ga-col:860px}
.ga-band{padding-block:72px}
.ga-band.tint{background:var(--brand-25)}
.ga-col{max-width:var(--ga-col);margin-inline:auto;padding-inline:var(--gutter)}
.ga h2{font-size:38px;line-height:1.3;margin-bottom:18px;color:var(--gray-900)}
.ga h2 em{font-style:normal;color:var(--brand-600)}
.ga-col h2:not(:first-child){margin-top:64px}
.ga p{font-size:18px;line-height:1.9;color:var(--gray-700);margin-bottom:14px}
.ga a:not(.btn){color:var(--brand-700);border-bottom:1px dashed var(--brand-300)}
.ga a:not(.btn):hover{color:var(--brand-900);border-bottom-style:solid}

.ga-intro{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.ga-intro img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:28px}

.ga-sub{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--gray-900);margin:30px 0 10px;text-decoration:underline;text-decoration-color:var(--brand-300);text-underline-offset:6px}
.ga-list,.ga-steps{display:grid;gap:10px;margin:6px 0 18px}
.ga-list li,.ga-steps li{position:relative;padding-inline-start:30px;font-size:18px;line-height:1.8;color:var(--gray-700)}
.ga-list li b,.ga-steps li b{color:var(--gray-900);font-weight:600}
/* chevron pointing in the reading direction (left in RTL) */
.ga-list li::before{content:"";position:absolute;inset-inline-start:6px;top:.72em;width:8px;height:8px;border-top:2px solid var(--brand-600);border-left:2px solid var(--brand-600);transform:rotate(-45deg)}
.ga-steps{counter-reset:ga}
.ga-steps li{counter-increment:ga;padding-inline-start:40px}
.ga-steps li::before{content:counter(ga);position:absolute;inset-inline-start:0;top:.3em;width:26px;height:26px;border-radius:50%;background:var(--brand-800);color:#fff;font-family:var(--font-display);font-size:15px;font-weight:800;display:grid;place-items:center;line-height:1}
.ga-facts{display:flex;flex-wrap:wrap;gap:10px 28px;padding:14px 0;margin-bottom:18px!important;border-block:1px solid var(--brand-100)}
.ga-facts span{font-size:16px;color:var(--gray-600)}
.ga-facts b{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--brand-800);margin-inline-end:6px}

.ga-faq details{border-bottom:1px solid var(--gray-200)}
.ga-faq details:first-child{border-top:1px solid var(--gray-200)}
.ga-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:18px;font-weight:600;color:var(--gray-900)}
.ga-faq summary::-webkit-details-marker{display:none}
.ga-faq summary::after{content:"";flex:none;width:9px;height:9px;border-bottom:2px solid var(--brand-600);border-left:2px solid var(--brand-600);transform:rotate(-45deg) translateY(-3px);transition:transform .2s}
.ga-faq details[open] summary::after{transform:rotate(135deg) translateY(-3px)}
.ga-faq details p{margin:0;padding-bottom:18px;font-size:17px}

.ga-book{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:48px;padding:24px 28px;border-radius:var(--r-3xl);background:var(--brand-800);color:#fff}
.ga-book b{display:block;font-family:var(--font-display);font-size:24px;font-weight:800}
.ga-book span{font-size:14.5px;color:var(--brand-100)}
.ga-book-actions{display:flex;gap:10px;flex-wrap:wrap}
.ga-hours{display:flex;flex-wrap:wrap;gap:2px 14px}
.ga-hours span{white-space:nowrap}
.ga-col.ga-wide{max-width:1180px}
.ga-book .btn-primary{background:#fff;color:var(--brand-800);border-color:#fff}
.ga-book .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none}

.ga-note{margin-top:40px!important;padding-top:24px;border-top:1px solid var(--gray-300);font-size:15px!important;font-style:italic;color:var(--text-3)!important}

.ga-related h2{margin-bottom:26px}
.ga-related ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px}
.ga-related li{position:relative;padding-inline-start:22px;font-size:17px}
.ga-related li::before{content:"";position:absolute;inset-inline-start:2px;top:.65em;width:7px;height:7px;border-top:2px solid var(--brand-600);border-left:2px solid var(--brand-600);transform:rotate(-45deg)}
.ga-related a:not(.btn){border-bottom:0;color:var(--gray-800)}
.ga-related a:not(.btn):hover{color:var(--brand-700)}

.ga-top{position:fixed;inset-inline-end:24px;bottom:24px;z-index:80;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--brand-700);color:#fff;box-shadow:var(--sh-lg);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.ga-top.on{opacity:1;transform:none;pointer-events:auto}
.ga-top:hover{background:var(--brand-900)}

@media (max-width:900px){
  .ga-intro{grid-template-columns:1fr;gap:28px}
  .ga-related ul{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .ga-hero{min-height:340px;text-align:center}
  .ga-hero .crumbs{justify-content:center}
  .ga-hero h1{font-size:38px;margin-inline:auto}
  .ga-band{padding-block:48px}
  .ga h2{font-size:29px}
  .ga-col h2:not(:first-child){margin-top:44px}
  .ga p,.ga-list li,.ga-steps li{font-size:17px}
  .ga-intro img{aspect-ratio:16/11;border-radius:20px}
  .ga-book{padding:22px;margin-top:36px}
  .ga-book-actions{width:100%}
  .ga-book-actions .btn{flex:1}
  .ga-related ul{grid-template-columns:1fr}
  .ga-top{bottom:calc(84px + env(safe-area-inset-bottom));inset-inline-end:16px;width:46px;height:46px}
}



/* phone header: a taller bar gives the logo even room top and bottom; the logo and
   the menu button share one centre line and sit on the page's side margins */
@media (max-width:900px){
  .header .container{height:84px;align-items:center}
  .header.over{margin-bottom:-84px}
  .header .brand{align-self:center}
  .brand-en img{width:60px;height:60px}
  .header.over.is-scrolled .brand-en img{width:52px;height:52px}
}


/* index hero (phone): original tinted treatment at ~70% strength; each slide is framed for a tall screen */
@media (max-width:600px){
  .hero-slide .hero-subject,.hero-slide .hero-video{filter:brightness(.74) saturate(.92)}
  .hero-slide .hero-base{filter:grayscale(1) blur(2px) brightness(.7);object-position:var(--mfocus,var(--focus,50% 30%))}
  .hero-slide .hero-subject{object-position:var(--mfocus,var(--focus,50% 30%))}
  .hero-scrim{background:
    linear-gradient(to top,rgba(13,26,72,.66) 0%,rgba(13,26,72,.44) 34%,rgba(13,26,72,.34) 78%,rgba(13,26,72,.42) 100%),
    radial-gradient(130% 55% at 50% 44%,rgba(13,26,72,.22) 0%,rgba(13,26,72,.1) 62%,rgba(13,26,72,0) 100%)}
  .hero-copy h1{text-shadow:0 2px 16px rgba(13,26,72,.6)}
  .hero-copy p{color:#E5EDF6;text-shadow:0 1px 12px rgba(13,26,72,.65)}
}

/* homepage header over the hero (desktop): the hero carries the logo band and doctor link,
   so the header shows only the menu, spread across the full width.
   Logo and buttons return once the header turns solid on scroll. */
@media (min-width:901px){
  .header.over:not(.is-scrolled) .brand,.header.over:not(.is-scrolled) .header-actions{display:none}
  .header.over:not(.is-scrolled) .nav{grid-column:1/-1;width:min(100%,1150px);justify-self:center}
  .header.over:not(.is-scrolled) .nav a{font-size:16px;padding-inline:18px}
}


/* ── about page (ab2-): formal text column beside a fixed brand panel ── */
.ab2{padding-block:28px 80px}
.ab2 .crumbs{margin-bottom:24px}
.ab2-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}
.ab2-mark{grid-column:2;grid-row:1;position:sticky;top:104px;display:flex;flex-direction:column;align-items:center;padding:40px 32px 34px;border-radius:32px;background:linear-gradient(180deg,var(--brand-25),#fff);border:1px solid var(--brand-100);box-shadow:0 24px 50px -32px rgba(13,26,72,.35)}
.ab2-mark img{width:230px;height:230px;filter:drop-shadow(0 14px 28px rgba(13,26,72,.2))}
.ab2-tag{margin-top:18px;padding:5px 16px 5px 22px;background:var(--brand-900);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);box-shadow:inset 0 3px 0 var(--accent-500)}
.ab2-text{grid-column:1;grid-row:1;counter-reset:ab2}
.ab2-text h1{font-size:42px;line-height:1.28;color:var(--brand-900);margin-bottom:10px}
.ab2-en{font-size:15px;color:var(--brand-600);padding-bottom:26px;border-bottom:3px solid var(--brand-900);position:relative}
.ab2-en::after{content:"";position:absolute;bottom:-3px;inset-inline-start:0;width:72px;height:3px;background:var(--accent-500)}
.ab2-text section{counter-increment:ab2;display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding-block:30px;border-bottom:1px solid var(--gray-200)}
.ab2-text section:last-child{border-bottom:0}
.ab2-text section::before{content:counter(ab2,decimal-leading-zero);grid-row:1/span 9;font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.5;color:var(--brand-300)}
.ab2-text section>*{grid-column:2}
.ab2-text h2{font-size:24px;line-height:1.5;margin-bottom:10px;color:var(--gray-900)}
.ab2-text p{font-size:17px;line-height:1.95;color:var(--gray-700);margin-bottom:10px}
.ab2-text p:last-child{margin-bottom:0}
.ab2-list{display:grid;gap:6px}
.ab2-list li{position:relative;padding-inline-start:18px;font-size:17px;line-height:1.85;color:var(--gray-700)}
.ab2-list li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--brand-500)}
.ab2-list a{color:var(--brand-800);font-weight:600}
.ab2-list a:hover{color:var(--brand-600)}
.ab2-note{font-size:15px!important;color:var(--text-3)!important;margin-top:12px}
.ab2-dl{display:grid}
.ab2-dl div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--gray-100)}
.ab2-dl div:last-child{border-bottom:0}
.ab2-dl dt{font-size:15px;color:var(--text-3)}
.ab2-dl dd{font-size:16.5px;color:var(--gray-800)}
.ab2-dl a{color:var(--brand-800)}
@media (max-width:1100px){.ab2-grid{grid-template-columns:minmax(0,1fr) 320px;gap:40px}.ab2-mark img{width:190px;height:190px}}
@media (max-width:900px){
  .ab2-grid{grid-template-columns:1fr;gap:0}
  /* phone: the logo stays pinned as a faint watermark behind the scrolling text */
  .ab2-mark{grid-column:1;grid-row:1;top:30vh;z-index:0;pointer-events:none;opacity:.035;height:0;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
  .ab2-mark img{width:260px;height:260px;filter:none}
  .ab2-mark .ab2-tag{display:none}
  .ab2-text{grid-column:1;grid-row:1;position:relative;z-index:1}
}
@media (max-width:600px){
  .ab2{padding-block:18px 48px}
  .ab2 .crumbs{margin-bottom:12px}
  .ab2-text h1{font-size:28px}
  .ab2-en{font-size:13.5px;padding-bottom:18px}
  .ab2-text section{grid-template-columns:34px 1fr;column-gap:10px;padding-block:22px}
  .ab2-text section::before{font-size:17px}
  .ab2-text h2{font-size:21px}
  .ab2-text p,.ab2-list li{font-size:16px}
  .ab2-dl div{grid-template-columns:1fr;gap:0;padding:8px 0}
}
/* ── fertility page (fp-): compact and direct ─────────────────── */
.fp-hero{background:var(--brand-25);border-bottom:1px solid var(--brand-100);padding-block:40px;position:relative;isolation:isolate;overflow:hidden}
.fp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.fp-hero h1{font-size:46px;line-height:1.2;margin-bottom:10px;color:var(--brand-900)}
.fp-hero p{font-size:18px;color:var(--gray-700);max-width:520px}
.fp-hero-img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:24px}
.fp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.fp-note{font-size:14.5px!important;color:var(--text-3)!important;margin-top:12px}
.fp-also{margin-top:18px;font-size:15.5px;color:var(--gray-700)}
.fp-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.fp-rates{display:flex;gap:14px;margin-top:14px}
.fp-rates div{flex:1;padding:18px 20px;border-radius:var(--r-2xl);background:#fff;border:1px solid var(--gray-200)}
.fp-rates b{display:block;font-family:var(--font-display);font-size:40px;line-height:1.1;color:var(--brand-800)}
.fp-rates span{font-size:14.5px;color:var(--gray-600)}
.fp-small{font-size:14px;color:var(--text-3);margin-top:12px}
@media (max-width:900px){
  .fp-hero-grid,.fp-two{grid-template-columns:1fr;gap:28px}
  .fp-hero-img{display:none}
}
@media (max-width:600px){
  .fp-hero{padding-block:24px 28px}
  .fp-hero h1{font-size:32px}
  .fp-hero p{font-size:16.5px}
  .fp-actions .btn{flex:1}
  .fp-rates b{font-size:34px}
}

/* phone footer: brand and contact span the width, the two link lists sit side by side.
   No space is reserved under it: the bottom call bar hides while the footer is on screen. */
@media (max-width:600px){
  .footer{padding-top:44px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px;padding-bottom:28px}
  .footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}
  .footer p{margin-top:12px}
  .footer h4{margin-bottom:10px}
  .footer ul{gap:8px}
  .footer-bottom{padding-block:16px 20px;font-size:12.5px}
}

/* contact: compact navy intro band with white type, for contrast */
body:has(.call-card) .page-hero{background:linear-gradient(160deg,var(--brand-900),var(--brand-950));border-bottom:3px solid var(--accent-500);padding-block:44px 40px;position:relative;isolation:isolate;overflow:hidden}
body:has(.call-card) .page-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pt-white) 0 0/var(--pt-size);opacity:.04;-webkit-mask-image:linear-gradient(to left,transparent 15%,#000 70%);mask-image:linear-gradient(to left,transparent 15%,#000 70%)}
body:has(.call-card) .page-hero h1{color:#fff;margin-bottom:0}
body:has(.call-card) .page-hero .crumbs,body:has(.call-card) .page-hero .crumbs a{color:var(--brand-200)}
body:has(.call-card) .page-hero .crumbs a:hover{color:#fff}
body:has(.call-card) #book{padding-top:48px}
@media (max-width:640px){:root{--pt-size:320px}}

/* Home: doctor proof in the hero, then patient routes and compact next-step actions. */
@media (min-width:901px){
  .hero{min-height:100vh;min-height:100svh}
  .hero-slide::before{bottom:clamp(128px,15.8vh,140px)}
  .hero-inner{max-width:1354px;padding-block:120px 50px}
  .hero-copy h1{font-size:clamp(52px,3.25vw,62px)}
  .hero-band{height:clamp(128px,15.8vh,140px)}
  .hero-band .band-inner{max-width:1354px}
}
.hero-actions{align-items:center;gap:12px}
.hero-doctors-link{display:inline-flex;align-items:center;gap:14px;color:#fff;font-weight:600;font-size:17px;text-shadow:0 1px 8px rgba(13,26,72,.6)}
.hero-doctors-link>span{display:inline-flex;align-items:center;gap:5px;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;white-space:nowrap}
.hero-doctors-label{font:inherit}
.hero-doctors-link .ic{width:17px;height:17px;transition:transform .2s}
.hero-doctors-link:hover>span{color:var(--brand-300);border-color:var(--brand-300)}
.hero-doctors-link:hover .ic{transform:translateX(-3px)}
.hero-doctors-link .fpx-avatars li{width:46px;height:46px;margin-inline-start:-13px}
.hero-doctors-link .fpx-avatars li:first-child{margin-inline-start:0}
.hero-doctors-link:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:8px}
.home-help{position:relative;isolation:isolate;overflow:hidden;padding-block:72px 76px;background:radial-gradient(ellipse 35% 40% at 4% 86%,#f8f7f2,transparent 85%),#fff}
.home-help .container{max-width:1160px}
.home-help::before,.home-help::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:280px;height:480px;background:url(../patterns/main-thin-line.svg) center/280px auto repeat-y;opacity:.045;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18% 74%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18% 74%,transparent)}
.home-help::before{top:-90px;inset-inline-start:-205px}
.home-help::after{bottom:-120px;inset-inline-end:-205px;transform:rotate(180deg)}
.home-help-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:start}
.home-help-intro{max-width:600px}
.home-help-kicker{display:flex;align-items:center;gap:14px;color:var(--brand-600);font-size:15px;font-weight:600;margin-bottom:10px}
.home-help-kicker::before,.home-help-kicker::after{content:"";width:56px;height:1px;background:var(--brand-300)}
.home-help-intro h2{font-family:var(--font-display);font-size:clamp(38px,3.5vw,51px);line-height:1.18;color:var(--brand-950);text-wrap:balance}
.home-help-intro h2 em{font-style:normal;color:var(--brand-600)}
.home-help-intro p{font-size:17px;color:var(--gray-700);margin-top:14px;max-width:44ch;line-height:1.8}
.home-help-options{margin-top:38px}
.home-help-options a{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;border-bottom:1px solid #d9e0e9;color:var(--brand-950);font-family:var(--font-display);font-size:clamp(25px,2.1vw,30px);font-weight:800;line-height:1.2;transition:color .2s,padding .25s var(--ease)}
.home-help-options a:first-child{border-top:1px solid #d9e0e9}
.home-help-options a:hover{color:var(--brand-600);padding-inline-start:10px}
.home-help-options .ic{width:23px;height:23px;color:var(--brand-600);opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s}
.home-help-options a:hover .ic,.home-help-options a:focus-visible .ic{opacity:1;transform:none}
.home-help-read{padding-top:4px}
.home-help-read h3{display:flex;align-items:center;gap:12px;color:var(--brand-700);font-size:21px;margin-bottom:7px}
.home-help-read h3 span{width:44px;height:2px;background:var(--brand-700)}
.home-help-story{display:block;padding:15px 0 18px;border-bottom:1px solid #d9e0e9}
.home-help-story strong{display:block;color:var(--brand-950);font-family:var(--font-display);font-size:24px;line-height:1.28;transition:color .2s}
.home-help-story p{font-size:16px;line-height:1.75;margin-top:6px;color:var(--gray-600);max-width:46ch}
.home-help-story>span{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--brand-600);font-size:15px;font-weight:600}
.home-help-story .ic{width:16px;height:16px}
.home-help-story:hover strong{color:var(--brand-600)}
.home-help a:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px}
@media (max-width:900px){
  .home-help-grid{gap:40px}
  .home-help-options a{font-size:27px;min-height:92px}
}
@media (max-width:700px){
  .home-help{padding-block:56px 52px}
  .home-help-grid{grid-template-columns:1fr;gap:40px}
  .home-help-intro{text-align:center;margin-inline:auto}
  .home-help-kicker{justify-content:center;font-size:15px}
  .home-help-kicker::before,.home-help-kicker::after{display:none}
  .home-help-intro h2{font-size:clamp(34px,7.5vw,44px)}
  .home-help-intro p{font-size:16px;margin:12px auto 0;max-width:32ch}
  .home-help-options{margin-top:30px}
  .home-help-options a{min-height:78px;font-size:clamp(22px,5.8vw,28px)}
  .home-help-options .ic{opacity:1;transform:none;width:19px;height:19px;color:var(--error-500)}
  .home-help-read h3{font-size:26px;margin-bottom:4px}
  .home-help-story strong{font-size:23px}
  .hero-slide::before{opacity:.35;background-size:auto 100%,cover;background-position:70% center,center}
  .hero-slide.pattern-flip::before{opacity:.22}
  .hero-actions{align-items:flex-start}
  .hero-doctors-link{gap:10px;font-size:15px}
  .hero-doctors-link .fpx-avatars li{width:38px;height:38px;margin-inline-start:-10px}
}
@media (max-width:420px){
  .home-help-options a{font-size:22px;min-height:76px}
  .hero-doctors-link{gap:8px;font-size:14px}
  .hero-doctors-link .fpx-avatars li{width:34px;height:34px;margin-inline-start:-9px}
}
@media (max-width:600px){body:has(.call-card) .page-hero{padding-block:24px 22px}body:has(.call-card) #book{padding-top:24px}}

/* about: the hospital name in hand-drawn Naskh calligraphy. On first view it writes itself in:
   a pen-width outline is traced while a right-to-left sweep uncovers it, then the ink fills. */
.ab2-naskh{display:block;width:280px;max-width:100%;height:auto;aspect-ratio:229/49.5;margin-top:24px;overflow:visible;color:var(--brand-800)}
.ab2-naskh use{fill:currentColor;stroke:currentColor;stroke-width:.35;stroke-dasharray:1000;stroke-dashoffset:0}
.js .ab2-naskh:not(.is-written) use{fill-opacity:0;stroke-dashoffset:1000}
.js .ab2-naskh:not(.is-written){clip-path:inset(-40% -6% -40% 106%)}
.ab2-naskh.is-written{clip-path:inset(-40% -6% -40% -6%);transition:clip-path 2.6s cubic-bezier(.45,.05,.35,1)}
.ab2-naskh.is-written use{transition:stroke-dashoffset 2.8s cubic-bezier(.45,.05,.35,1),fill-opacity 1s ease 2.2s}
.ab2-naskh-m{display:none}
@media (max-width:900px){
  .ab2-mark .ab2-naskh{display:none}
  .ab2-naskh-m{display:none}
}
@media (prefers-reduced-motion:reduce){.ab2-naskh use{fill-opacity:1!important;stroke-dashoffset:0!important}.ab2-naskh{clip-path:none!important}}

/* fertility: five doctors — stacked cards on desktop, compact rows below 1100px */
@media (min-width:1101px){
}

/* index hero (desktop): deeper tint on the copy side, video included, for legible text */
@media (min-width:601px){
  .hero-scrim{background:linear-gradient(to bottom,rgba(13,26,72,.34),transparent 20%),linear-gradient(to left,rgba(10,27,77,.74) 0%,rgba(15,37,90,.52) 38%,rgba(13,26,72,.04) 68%),linear-gradient(to top,rgba(13,26,72,.27),transparent 38%)}
  .hero.copy-end .hero-scrim{background:linear-gradient(to bottom,rgba(13,26,72,.34),transparent 20%),linear-gradient(to right,rgba(10,27,77,.74) 0%,rgba(15,37,90,.52) 38%,rgba(13,26,72,.04) 68%),linear-gradient(to top,rgba(13,26,72,.27),transparent 38%)}
  .hero-copy h1{text-shadow:0 2px 18px rgba(13,26,72,.5)}
  .hero-copy p{text-shadow:0 1px 10px rgba(13,26,72,.55)}
}
/* videos cover the frame themselves (framed at encode time), not the photo's zoom/shift */
.hero-video{left:0;width:100%;min-width:0;top:0;bottom:0;height:100%}

/* once a slide's video has taken over, the photo layers under it stop zooming (no repaints of the blurred photo behind a playing video) */
.hero[data-hero-mode="video"] .hero-slide.has-video{animation:none}
.hero[data-hero-mode="video"] .hero-slide.has-video .hero-base,.hero[data-hero-mode="video"] .hero-slide.has-video .hero-subject{visibility:hidden}

/* Fertility intro: the photo fills the end side of the section behind a slanted divider that
   leans like the home hero's brand band (skewX 18deg, red edge, navy tint). Physical
   left/right because the site is RTL-only: copy sits at the right, media at the left. */
.fp-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fp-facts li{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(23,46,118,.08);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);font-size:14.5px;color:var(--brand-900);font-weight:600}
.fp-facts .ic{width:20px;height:20px;color:var(--brand-600);flex:none}
@media (max-width:900px){
  }
@media (max-width:600px){
  .fp-facts li{width:100%}
}
@media (max-width:600px){
}

/* Desktop: every open department panel is the same height, sized so the panel and the strip of
   cards under it fit one screen. Content is centred inside; the photo fills the column. */
@media (min-width:1101px){
  .bento.is-open{grid-template-rows:auto var(--ph) var(--strip);row-gap:14px;--strip:130px;--ph:clamp(380px,calc(100svh - 76px - var(--strip) - 64px),620px)}
  .bento.is-open .dpanel{padding:24px 40px 16px;grid-template-rows:minmax(0,1fr) auto;gap:12px 44px;overflow:hidden}
  .bento.is-open .dept-detail>div{align-self:safe center;max-height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .bento.is-open .dept-detail:not([hidden]){display:contents}
  .bento.is-open .dept-detail .two-img{aspect-ratio:auto;height:100%;max-height:calc(var(--ph) - 90px);min-height:0}
  .bento.is-open .dpanel .checks{gap:8px;margin-top:14px}
  .bento.is-open .dept-actions{margin-top:18px}
}
/* delivery-room panel carries a checklist card: compact them so it fits the shared height */
@media (min-width:1101px){
  .bento.is-open .dept-detail[data-dept="er"] .card{padding:14px 18px!important;margin-top:14px!important}
  .bento.is-open .dept-detail[data-dept="er"] .card b{margin-bottom:6px!important;font-size:15px}
  .bento.is-open .dept-detail[data-dept="er"] .card .checks{grid-template-columns:1fr 1fr;gap:6px 16px!important}
  .bento.is-open .dept-detail[data-dept="er"] .card .checks li{font-size:14px}
  .bento.is-open .dept-detail[data-dept="er"] .dept-actions{margin-top:14px}
  .bento.is-open .dpanel{overflow-y:auto}
}

/* Open-panel photo: same sliced composition as the fertility intro (hero lean, red edge, navy tint).
   Phones/tablets keep a plain rounded photo; the slant only applies on desktop. */
.dimg{position:relative;overflow:hidden;isolation:isolate;border-radius:18px;background:var(--brand-950)}
.dimg-edge{display:none}
.dimg-stage{position:absolute;inset:0}
.dimg-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dimg-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(23,46,118,.5),rgba(23,46,118,.08) 38%,transparent 62%),linear-gradient(to top,rgba(13,26,72,.22),transparent 40%)}
.dimg .tag{position:absolute;bottom:16px;left:0;z-index:2;padding:0 22px 0 16px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
@media (min-width:1101px){
  .bento.is-open .dpanel .dimg{--lean:80px;grid-column:2;grid-row:1/-1;align-self:stretch;justify-self:stretch;width:auto;height:auto;max-height:none;margin:-24px 0 -16px -40px;border-radius:0;overflow:visible;background:none}
  .bento.is-open .dpanel .dimg-stage{clip-path:polygon(0 0,calc(100% - var(--lean)) 0,100% 100%,0 100%);background:var(--brand-900)}
  .bento.is-open .dpanel .dimg-edge{display:block;position:absolute;top:0;bottom:0;left:0;right:-7px;background:var(--accent-500);clip-path:polygon(0 0,calc(100% - var(--lean)) 0,100% 100%,0 100%)}
  .bento.is-open .dpanel-foot{grid-column:1;grid-row:2}
}
/* short desktop windows: slimmer strip and padding so the strip always stays on screen */
@media (min-width:1101px) and (max-height:760px){
  .bento.is-open{--strip:104px}
  .bento.is-open .dpanel{padding-block:16px 10px}
  .bento.is-open .dpanel .dimg{margin-block:-16px -10px}
  .bento.is-open .bcard h3{font-size:15px}
}

/* ─────────────────────────────────────────────────────────────
   Fertility page: editorial chapters (fpd diagnosis · fpu band · fpt treatments · fpdoc doctors)
   Pattern = traced brand pattern (assets/patterns), used as cropped geometry, not wallpaper.
───────────────────────────────────────────────────────────── */
.fp-giant{font-family:var(--font-display);font-weight:900;font-size:clamp(76px,7.6vw,124px);line-height:.95;color:var(--brand-900);letter-spacing:-.01em;white-space:nowrap;margin:0}
.fp-stage{display:inline-grid;place-items:center;width:52px;height:52px;background:var(--brand-900);color:#fff;font-family:var(--font-display);font-weight:900;font-size:28px;line-height:1;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:inset 0 -4px 0 var(--accent-500)}

/* ── opening: actions mosaic (full height, like a picture panel) | navy frieze bar over the intro ───────────────
   mosaic = guide (end side) | test photo-card over the booking bar; flush blocks bleeding to the page edge.
   Bar: fp-bar.svg (flower · half-disc · star, from layout-gen V2) repeated on brand navy. */
.fpx{--bar:clamp(58px,4.4vw,84px);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,34%);grid-template-rows:var(--bar) auto;
  grid-template-areas:"acts band" "acts intro";direction:ltr;background:#fff;border-bottom:3px solid var(--accent-500)}
.fpx>*{direction:rtl}
.fpx::before{content:"";grid-area:band;background:var(--brand-950) url(../patterns/fp-bar.svg) 100% 50%/auto 74% repeat-x}
.fpx-acts{grid-area:acts;display:grid;grid-template-columns:minmax(0,1.36fr) minmax(0,1fr);grid-template-rows:1.7fr 1fr;
  grid-template-areas:"test guide" "book guide";min-height:clamp(380px,27vw,560px)}
.fpx .btn{border-radius:var(--r-full)}

/* guide: V2 line art (petals, quarter arc, star) anchored on the far side */
.fpx-guide{grid-area:guide;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  padding:clamp(26px,2.4vw,44px) clamp(24px,2.2vw,40px);padding-inline-start:clamp(28px,5vw,96px);background:var(--brand-950);color:#fff;text-decoration:none}
.fpx-guide::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/fp-guide-lines.svg) -24px 0/auto 100% no-repeat}
.fpx-guide-t{position:relative}
.fpx-guide-t b{display:block;max-width:5.6em;text-wrap:balance;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,2.4vw,42px);line-height:1.12;margin-bottom:10px}
.fpx-guide-t span{display:block;font-size:clamp(14px,.95vw,16px);line-height:1.75;color:var(--brand-100);max-width:21ch}
.fpx-guide-btn{align-self:flex-start;margin-top:8px;padding:10px 22px;font-size:15px}
.fpx-guide:hover .fpx-guide-btn{background:var(--lime-500);border-color:var(--lime-500);color:var(--lime-ink)}

/* test: ICSI micrograph (cell on the far side, calm blue under the text) */
.fpx-test{grid-area:test;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;
  padding:clamp(24px,2.2vw,40px);padding-inline-end:44%;background:var(--brand-600);color:#fff;text-decoration:none;transition:background .3s}
.fpx-test::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/fp-test-icsi.jpg) 0 50%/cover no-repeat;
  transition:transform 1.2s cubic-bezier(.22,.8,.2,1);transform-origin:20% 50%}
.fpx-test:hover::before{transform:scale(1.04)}
.fpx-test-t b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,2.4vw,42px);line-height:1.12;margin-bottom:8px}
.fpx-test-t span{display:block;font-size:clamp(14px,.95vw,16px);line-height:1.7;color:var(--brand-50)}
.fpx-test-btn{margin-top:6px;padding:10px 22px;font-size:15px}
.fpx-test:hover .fpx-test-btn{background:var(--lime-500);border-color:var(--lime-500);color:var(--lime-ink)}

/* booking: plain lime bar, calendar disc + text */
.fpx-book{grid-area:book;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:18px;padding:clamp(18px,1.6vw,30px) clamp(24px,2.2vw,40px);
  background:#E7EDB2;color:var(--brand-950);text-decoration:none;transition:background .3s}
.fpx-book:hover{background:#DCE59A}
.fpx-book-ic{flex:none;width:clamp(56px,4.4vw,80px);height:clamp(56px,4.4vw,80px);border-radius:50%;display:grid;place-items:center;background:var(--brand-900);color:#fff;--ic-a:#E7EDB2}
.fpx-book-ic .ic{width:clamp(22px,1.8vw,30px);height:clamp(22px,1.8vw,30px)}
.fpx-book-t b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2vw,36px);line-height:1.15}
.fpx-book-t span{font-size:clamp(13px,.9vw,15px);color:var(--brand-800);opacity:.85}


.fpx-intro{grid-area:intro;position:relative;display:flex;flex-direction:column;padding:26px 40px 30px 36px;background:#fff}
.fpx-intro .crumbs{margin-bottom:22px;font-size:13.5px;white-space:nowrap}
.fpx-intro h1{white-space:nowrap;font-size:clamp(30px,2.55vw,44px);line-height:1.18;color:var(--brand-900);margin-bottom:10px;letter-spacing:-.005em}
.fpx-lead{font-size:clamp(15.5px,1vw,18px);line-height:1.8;color:var(--gray-600);margin-bottom:18px}
.fpx-proof{display:flex;align-items:center;gap:14px;padding-top:16px;border-top:1px solid var(--gray-200);margin-top:auto}
.fpx-avatars{display:flex;flex:none}
.fpx-avatars li{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(13,26,72,.16);margin-inline-start:-13px;background:var(--brand-50)}
.fpx-avatars li:first-child{margin-inline-start:0}
.fpx-avatars img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.fpx-proof-t{max-width:300px}
.fpx-proof-t b{display:block;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--brand-900);line-height:1.3}
.fpx-proof-t span{display:block;font-size:13px;line-height:1.55;color:var(--gray-500);margin-top:1px}

/* ── 1 · diagnosis: COPY (step | intro) → TITLE ─────────────── */
.fpd{--tfs:clamp(60px,5.4vw,92px);--edge:max(32px,calc((100vw - var(--container)) / 2 + var(--gutter)));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,34%);grid-template-areas:"copy head";direction:ltr;background:#fff}
.fpd>*{direction:rtl}
.fpd-head{grid-area:head;display:grid;justify-content:start;align-content:end;row-gap:clamp(14px,1.4vw,24px);padding:clamp(34px,3vw,52px) 40px 0 36px}
/* the number sits above the title's far (left) end, with air between */
.fpd-num{justify-self:end;display:grid;place-items:center;width:clamp(34px,2.6vw,46px);height:clamp(34px,2.6vw,46px);margin:0;background:var(--brand-900);color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.3vw,22px);line-height:1}
.fpd-title{font-family:var(--font-display);font-weight:800;font-size:var(--tfs,clamp(60px,5.4vw,92px));line-height:.9;color:var(--brand-900);margin:0;letter-spacing:-.01em}

/* RTL: intro close to the title, a hairline, then the step; both end on the title's baseline */
.fpd-copy{grid-area:copy;align-self:end;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:end;
  padding:0 clamp(20px,2.4vw,44px) 0 var(--edge)}
.fpd{--edge:clamp(28px,5vw,96px);padding-bottom:clamp(28px,2.6vw,48px)}
.fpd-intro{font-size:clamp(15.5px,1vw,18px);line-height:1.9;color:var(--gray-600);margin:0;padding-inline-end:clamp(20px,2.4vw,44px);border-inline-end:1px solid var(--gray-200)}
.fpd-step{padding-inline-start:clamp(20px,2.4vw,44px)}
.fpd-step h3{font-size:clamp(22px,1.8vw,30px);line-height:1.3;color:var(--brand-900);margin:0 0 8px}
.fpd-step p{font-size:clamp(15.5px,1vw,18px);line-height:1.9;color:var(--gray-600)}


@media (max-width:1240px) and (min-width:1101px){.fpx-intro .crumbs{font-size:12.5px}}
@media (max-width:1100px){
  /* intro first, then the actions: test + booking side by side over the guide */
  .fpx{grid-template-columns:1fr;grid-template-rows:var(--bar) auto auto;grid-template-areas:"band" "intro" "acts"}
  .fpx-intro{padding:20px 28px 26px}
  .fpx-intro h1{white-space:normal}
  .fpx-acts{grid-template-rows:auto auto;min-height:0}
  .fpx-guide{padding-inline-start:clamp(20px,1.8vw,30px)}
  .fpd-intro{border:0;padding:0}
  .fpd-step{padding:0}
  .fpd-copy{align-self:auto}
}
@media (max-width:640px){
  .fpx-intro{padding:18px 20px 22px}
  .fpx-intro .crumbs{font-size:12px;margin-bottom:16px}
  .fpx-avatars li{width:44px;height:44px;margin-inline-start:-12px}
  .fpx-proof-t b{font-size:17px}
  .fpx-acts{grid-template-columns:1fr;grid-template-areas:"test" "book" "guide"}
  .fpx-test{padding:26px 20px;padding-inline-end:38%}
  .fpx-test::before{background-position:12% 50%}
  .fpx-guide{padding:24px 20px}
  .fpx-guide-t b{font-size:26px}
}

/* 2 · treatments */
/* compact numbered index: title column (same as 1 · diagnosis) | 2-column list with hairlines and a faint checker tint; the guide is the 8th cell */
.fpt{display:grid;grid-template-columns:minmax(420px,34%) minmax(0,1fr);margin:clamp(40px,4vw,72px) 0 0;border-block:3px solid var(--accent-500)}
.fpt-head{--tfs:clamp(60px,5.4vw,92px);position:relative;isolation:isolate;display:grid;justify-content:start;align-content:center;row-gap:clamp(14px,1.4vw,24px);padding:0 40px 0 36px}
.fpd-head,.fpt-head{grid-template-columns:calc(var(--tfs) * 4.6)}
/* chapter strips: a thin crimson line opens and closes the chapter (as under the hero); a faint pattern fills the title box */
.fpt{position:relative}
.fpt-head{background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,0))}
.fpt-head>*{position:relative}
.fpt-head::after{content:"";position:absolute;inset:0;z-index:-2;background:url(../patterns/main-thin-ink.svg) 100% 0/300px;opacity:.06;
  -webkit-mask-image:linear-gradient(to left,#000 25%,transparent 100%);mask-image:linear-gradient(to left,#000 25%,transparent 100%)}
.fpt-head::before{content:"";position:absolute;z-index:-1;inset-inline-start:calc(40px - var(--tfs) * .12);top:calc(50% - var(--tfs) * 1.3);width:calc(var(--tfs) * 1.25);height:calc(var(--tfs) * 1.25);
  background:url(../patterns/fp-star.svg) center/contain no-repeat;opacity:.92}
.fpt-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-inline-start:1px solid var(--gray-200)}
.fpt-list{display:contents;list-style:none;margin:0;padding:0}
.fpt-list li{display:flex}
/* clickable colour tiles: a playful but ordered palette (OKLCH, tools/palette.py); right column ice > royal > blush > mint, left blue > lime > teal > guide,
   so every tile contrasts with the one beside it and the one above it. A big thin-line shape of the treatment is blended into the tile's own pattern. */
.fpt-t{--bg:#fff;--fg:var(--brand-900);--muted:var(--gray-600);  position:relative;isolation:isolate;overflow:hidden;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "n p";column-gap:16px;row-gap:4px;align-content:start;
  padding:clamp(16px,1.4vw,22px) clamp(22px,2vw,32px);background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;transition:filter .3s}
.fpt-t:hover{filter:brightness(.95)}
.fpt-t2:hover,.fpt-t3:hover,.fpt-t6:hover{filter:brightness(1.14)}
.fpt-n{grid-area:n;min-width:1.1em;text-align:center;padding-top:2px;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1;color:currentColor;font-variant-numeric:tabular-nums}
.fpt-n::after{content:"";display:block;width:16px;height:2px;margin-top:8px;background:var(--accent-500);transition:width .45s cubic-bezier(.22,.8,.2,1)}
.fpt-t:hover .fpt-n::after,.fpt-t:focus-visible .fpt-n::after{width:30px}
.fpt-t h3{grid-area:t;margin:0;font-size:clamp(17px,1.25vw,20px);line-height:1.35;color:inherit}
.fpt-t p{grid-area:p;margin:0;font-size:clamp(14px,.95vw,15.5px);line-height:1.7;color:var(--muted);text-wrap:pretty}
.fpt-t:focus-visible{outline:3px solid var(--brand-700);outline-offset:-3px}
.fpt-t1{--bg:#D7ECFC}
.fpt-t2{--bg:linear-gradient(135deg,#0C7DC3,#0067AD);--fg:#fff;--muted:#E3F2FC}
.fpt-t3{--bg:linear-gradient(135deg,#0F2A6C,#12479D);--fg:#fff;--muted:#DCE8FA}
.fpt-t4{--bg:#E8EEB4}
.fpt-t5{--bg:#FFD9D3}
.fpt-t6{--bg:linear-gradient(135deg,#13808A,#006B76);--fg:#fff;--muted:#E1F4F5}
.fpt-t7{--bg:#C6EFE2}
@media (prefers-reduced-motion:reduce){.fpt-t,.fpt-n::after{transition:none}}
.fpt-guide{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;
  padding:clamp(16px,1.4vw,22px) clamp(20px,2vw,32px);border-radius:0;margin:0;background:linear-gradient(135deg,#0E1F55,#112457);color:#fff;text-decoration:none}
.fpt-guide:focus-visible{outline:3px solid var(--lime-500);outline-offset:-3px}
.fpt-guide::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(200px circle at var(--mx,70%) var(--my,30%),rgba(111,196,238,.28),transparent 70%)}
.fpt-guide:hover::after{opacity:1}
.fpt-guide::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/main-thin-white.svg) 0 0/320px;opacity:.12}
.fpt-guide-t{position:relative;padding-inline-end:40px}
.fpt-guide-t b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.4vw,22px);line-height:1.2;margin-bottom:4px}
.fpt-guide-t span{display:block;font-size:14px;line-height:1.6;color:var(--brand-100)}
.fpt-guide-btn{position:relative;align-self:end;padding:8px 14px;font-size:14px;white-space:nowrap}
.fpt-guide:hover .fpt-guide-btn{background:var(--lime-500);border-color:var(--lime-500);color:var(--lime-ink)}
/* stacked papers: peek from the corner; on hover/focus the stack drops into view and fans out with a springy overshoot, back sheet last */
.fpt-doc{--spring:cubic-bezier(.34,1.56,.64,1);position:absolute;z-index:-1;inset-inline-end:-14px;top:-30px;width:60px;height:80px;opacity:.95;
  transition:transform .6s var(--spring);transform-origin:70% 20%}
.fpt-doc i{position:absolute;inset:0;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.28);
  transition:transform .65s var(--spring),box-shadow .4s;transform-origin:50% 100%}
.fpt-doc i:nth-child(1){transform:rotate(-16deg) translate(-16px,8px);background:var(--brand-300);transition-delay:.07s}
.fpt-doc i:nth-child(2){transform:rotate(-8deg) translate(-7px,3px);background:var(--brand-100);transition-delay:.035s}
.fpt-doc i:nth-child(3){background:#fff url(../patterns/emblem.svg) 50% 34%/64% no-repeat}
.fpt-guide:is(:hover,:focus-visible) .fpt-doc{transform:translate(6px,26px) rotate(4deg) scale(1.08)}
.fpt-guide:is(:hover,:focus-visible) .fpt-doc i:nth-child(1){transform:rotate(-34deg) translate(-40px,6px);box-shadow:0 12px 26px rgba(0,0,0,.34)}
.fpt-guide:is(:hover,:focus-visible) .fpt-doc i:nth-child(2){transform:rotate(-17deg) translate(-19px,2px);box-shadow:0 12px 26px rgba(0,0,0,.34)}
@media (prefers-reduced-motion:reduce){.fpt-doc,.fpt-doc i{transition:none}}

/* doctors: calm */
/* doctors · chapter 3: same grid as 1 and 2 (title column on the right, 34%); the left is a flush navy mosaic of doctor tiles */
.fpdoc{display:grid;grid-template-columns:minmax(420px,34%) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head panel" "quick panel" "form panel";
  margin:0;padding:0;border-bottom:3px solid var(--accent-500);background:#fff}
.fpdoc-head{grid-area:head;display:grid;justify-content:start;row-gap:clamp(14px,1.4vw,24px);padding:clamp(34px,3vw,52px) 40px 22px 36px}
.fpdoc-head .fpd-title{margin:0;white-space:nowrap;font-size:clamp(48px,4.4vw,78px)}
.fpdoc-quick{grid-area:quick;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:0;padding:0 0 0 0}
.fpdoc-book,.fpdoc-ask{display:flex;min-height:clamp(70px,5.4vw,92px);padding:12px clamp(16px,1.6vw,26px);text-decoration:none;transition:filter .25s}
.fpdoc-book{align-items:center;gap:12px;background:#E8EEB4;color:var(--brand-950)}
.fpdoc-book .ic{width:26px;height:26px}
.fpdoc-book b{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.4vw,24px)}
.fpdoc-ask{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;background:linear-gradient(135deg,#0C7DC3,#0067AD);color:#fff}
.fpdoc-ask span{font-size:clamp(13px,.9vw,15px);color:#E3F2FC}
.fpdoc-ask b{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.5vw,25px);letter-spacing:.01em}
.fpdoc-book:hover{filter:brightness(.95)}.fpdoc-ask:hover{filter:brightness(1.12)}
.fpdoc-book:focus-visible,.fpdoc-ask:focus-visible{outline:3px solid var(--brand-700);outline-offset:-3px}
.fpdoc-form{grid-area:form;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,34px) clamp(22px,2.2vw,34px) clamp(24px,2.4vw,36px);background:#E4F2FE;color:var(--brand-900)}
.fpdoc-form h3{font-size:clamp(20px,1.6vw,26px);line-height:1.25;margin:0 0 6px}
.fpdoc-form p{font-size:clamp(14px,.95vw,15.5px);line-height:1.7;color:var(--gray-600);margin:0 0 16px}
.fpdoc-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.fpdoc-form label{display:grid;gap:5px;font-size:13.5px;font-weight:600;color:var(--brand-900)}
.fpdoc-form input,.fpdoc-form select{font:inherit;font-weight:400;font-size:15px;padding:10px 12px;border:1px solid #BCD6EE;background:#fff;color:var(--gray-900);border-radius:0;min-width:0}
.fpdoc-form input:focus,.fpdoc-form select:focus{outline:2px solid var(--brand-600);outline-offset:0;border-color:var(--brand-600)}
.fpdoc-act{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:16px;flex-wrap:wrap}
.fpdoc-form .btn{border-radius:var(--r-full);padding:11px 26px}
.fpdoc-ok{font-size:14.5px;font-weight:600;color:var(--success-700)}.fpdoc-ok.is-err{color:var(--error-700)}

/* left: navy field with the brand pattern; 3 x 2 flush tiles, hairlines between, the sixth tile is the way to the full roster */
.fpdoc-panel{grid-area:panel;position:relative;isolation:isolate;display:flex;background:linear-gradient(160deg,#0F2268,#0D1A48)}
.fpdoc-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/main-thin-white.svg) 0 0/380px;opacity:.07}
.fpdoc-list{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
.fpdoc-list>li{display:flex;border-inline-start:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.fpdoc-list>li:nth-child(3n+1){border-inline-start:0}
.fpdoc-list>li:nth-last-child(-n+3){border-bottom:0}
.fpdoc-list a{position:relative;flex:1;display:flex;flex-direction:column;color:#fff;text-decoration:none;transition:background .3s}
.fpdoc-list a:hover{background:rgba(255,255,255,.07)}
.fpdoc-list a:focus-visible{outline:3px solid var(--lime-500);outline-offset:-3px}
.fpdoc-ph{display:block;margin:clamp(18px,1.8vw,28px) clamp(18px,1.8vw,28px) 0;aspect-ratio:1/.8;overflow:hidden;background:#0B1740}
.fpdoc-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .8s var(--ease)}
.fpdoc-list a:hover .fpdoc-ph img{transform:scale(1.04)}
.fpdoc-nm{display:block;padding:14px clamp(18px,1.8vw,28px) clamp(18px,1.8vw,26px);margin-top:auto}
.fpdoc-nm::before{content:"";display:block;width:18px;height:2px;background:var(--accent-500);margin-bottom:10px;transition:width .4s var(--ease)}
.fpdoc-list a:hover .fpdoc-nm::before{width:34px}
.fpdoc-nm b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(16px,1.25vw,19px);line-height:1.3;color:#fff}
.fpdoc-nm span{display:block;margin-top:3px;font-size:clamp(12.5px,.85vw,14px);line-height:1.5;color:#A9D5F0}
.fpdoc-list .fpdoc-all a{justify-content:flex-end;gap:14px;padding:clamp(18px,1.8vw,28px);background:var(--lime-500);color:var(--lime-ink)}
.fpdoc-list .fpdoc-all a:hover{background:#D5DC5E}
.fpdoc-all b{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,1.7vw,28px);line-height:1.2}
.fpdoc-go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand-950);color:#fff;transition:transform .3s var(--ease)}
.fpdoc-go .ic{width:18px;height:18px}
.fpdoc-all a:hover .fpdoc-go{transform:translateX(-5px)}


/* tablet */
@media (max-width:1100px){
  .fpt{grid-template-columns:1fr}
  .fpt-head{padding:28px 28px 20px;grid-template-columns:auto auto 1fr;grid-template-areas:"title num ." "p p p";column-gap:14px;align-items:start}
  .fpt-head .fpd-title{grid-area:title;margin:0}
  .fpt-head .fpd-num{grid-area:num;margin-top:6px;justify-self:start}
  .fpt-body{border-inline-start:0;border-top:1px solid var(--gray-200)}
  .fpdoc{grid-template-columns:1fr;grid-template-areas:"head" "quick" "form" "panel"}
  .fpdoc-head{padding:28px 28px 16px}
}
/* phone: recomposed, not shrunk */
@media (max-width:640px){
  .fpt-head{padding:24px 20px 18px}
  .fpt-body{grid-template-columns:1fr}
  .fpt-t{padding:16px 20px;column-gap:14px}
  .fpt-guide{grid-template-columns:1fr;padding:22px 20px}
  .fpt-guide-btn{justify-self:start}
  .fpdoc-head{padding:24px 20px 14px}
  .fpdoc-quick{grid-template-columns:1fr}
  .fpdoc-fields{grid-template-columns:1fr}
  .fpdoc-list{grid-template-columns:1fr 1fr}
  .fpdoc-list>li:nth-child(3n+1){border-inline-start:1px solid rgba(255,255,255,.12)}
  .fpdoc-list>li:nth-child(2n+1){border-inline-start:0}
  .fpdoc-list>li:nth-last-child(-n+3){border-bottom:1px solid rgba(255,255,255,.12)}
  .fpdoc-list>li:nth-last-child(-n+2){border-bottom:0}
  .fpdoc-list>li.fpdoc-all{grid-column:1/-1;border-inline-start:0;border-top:1px solid rgba(255,255,255,.12)}
  .fpdoc-list>li:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.12)}
  .fpdoc-list .fpdoc-all a{flex-direction:row-reverse;align-items:center;justify-content:space-between}
}
/* fertility diagnosis: responsive (kept separate so it survives cleanup passes) */
@media (max-width:1100px){
  .fpd{grid-template-columns:1fr;grid-template-areas:"head" "copy"}
  .fpd-head{padding:28px 28px 0}
  .fpd-title{margin:12px 0 0}
  .fpd-copy{display:block;padding:20px 28px 32px}
  .fpd-intro{margin-bottom:22px}
}
@media (max-width:640px){
  .fpd-head{padding:24px 20px 0}
  .fpd-copy{padding:20px 20px 28px}
}

/* polish (review pass 3): desktop edge alignment, fold, line breaks */
@media (min-width:1101px){
}
.fpx-lead,.fpd-intro,.fpx-test-t span,.fpx-guide-t span{text-wrap:balance}
.fpx-proof-t span,.fpd-step p{text-wrap:pretty}
/* tablet/phone polish (review pass 3) */
@media (max-width:1100px) and (min-width:900px){
  .fpx-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
  .fpx-intro .crumbs,.fpx-intro h1{grid-column:1/-1}
  .fpx-lead{max-width:none;margin:0}
  .fpx-proof{max-width:none;border-top:0;padding-top:4px;margin-top:0}
}
@media (max-width:1100px){
  .fpd-head{min-height:0}
  .fpd-num{align-self:flex-start}
  .fpd-copy p{max-width:62ch}
}
@media (max-width:640px){
  .fpd-copy{padding-top:20px}
}
@media (max-width:1100px){
  /* [1 التشخيص]: number at the title's upper-left */
  .fpd-head{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"title num .";align-items:start;column-gap:14px}
  .fpd-title{grid-area:title;margin:0}
  .fpd-num{grid-area:num;align-self:start;margin-top:6px}
}
@media (max-width:1100px){.fpd-intro{text-wrap:wrap}}

/* home · medical team: faded pattern, translucent cards, flush brand name plate, clickable doctors */
.docs-pat{opacity:.06!important}
.docs-sec .docs-title{font-family:var(--font-display);font-weight:900;font-size:clamp(46px,5vw,80px);line-height:1;color:#fff;margin:0}
.docs-sec .docs-sub{font-size:clamp(16px,1.3vw,20px);color:var(--brand-100);margin:10px 0 0}
.docs-sec .doc{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:24px;overflow:hidden;box-shadow:none;backdrop-filter:blur(2px)}
.docs-sec .doc:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.docs-sec .doc-media::after{background:linear-gradient(to top,rgba(13,26,72,.55),transparent 40%)}
.docs-sec .doc-body p{color:var(--brand-100)}
.doc-hit{position:absolute;inset:0;z-index:3}
.doc-hit:focus-visible{outline:3px solid var(--lime-500);outline-offset:-3px}
/* name plate: a flush navy strip with a crimson top line, like the hero's blocks */
.docs-sec .doc-plate{inset-inline:0;bottom:0;border-radius:0;border:0;border-top:3px solid var(--accent-500);padding:12px 16px 13px;background:rgba(13,26,72,.92);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.docs-sec .doc-plate h3{font-size:clamp(17px,1.4vw,20px)}
.docs-sec .doc-plate .role{color:#9FD3F2;font-weight:500}

/* chapter 2 scroll opening (department-fertility.html): title first, then the red lines and tiles */
.fpd{will-change:opacity,transform}
.fpt-js .fpt{border-block-color:transparent;transition:border-color .7s}
.fpt-js .fpt.is-open{border-block-color:var(--accent-500)}
.fpt-js .fpt-head{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.fpt-js .fpt.in-title .fpt-head{opacity:1;transform:none}
.fpt-js .fpt-list li,.fpt-js .fpt-guide{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--k,0) * 90ms)}
.fpt-js .fpt.is-open .fpt-list li,.fpt-js .fpt.is-open .fpt-guide{opacity:1;transform:none}

/* home: "ما الذي تبحث عنه؟" gets a full screen of its own on desktop, content centred in it */
@media (min-width:901px){
  .home-help{min-height:100svh;display:flex;align-items:center;padding-block:clamp(140px,17vh,200px)}
  .home-help>.container{width:100%}
  .home-help-grid{align-items:center}
}
/* home: departments title — kashida-stretched on desktop, plain one line on phones */
.b-head .stack .k-flat{display:none}
.b-head .stack i{font-style:normal}
@media (max-width:600px){
  .b-head .stack{font-size:36px;line-height:1.2}
  .b-head .stack span{display:inline}
  .b-head .stack span+span::before{content:" "}
  .b-head .stack .k-long{display:none}
  .b-head .stack .k-flat{display:inline}
}
/* home doctors: name + role sit below the photo instead of over it; no description */
.docs-sec .doc-plate{position:static;flex:1}
.docs-sec .doc-media::after{display:none}
/* phone call bar: icons take the button's text colour (no coral accent on blue) */
.mobile-bar .btn{--ic-a:currentColor}
/* phone header (scrolled): Arabic name + slogan; ribbon slant mirrored for RTL */
@media (max-width:900px){
  .brand-en-text b{font-size:16px}
  .brand-en-text>span{font-size:10.5px}
  .brand-en-text>.brand-ribbon{clip-path:polygon(0 0,100% 0,100% 100%,6px 100%);padding:2px 8px 2px 10px}
}
@media (max-width:900px){
  .header.over.is-scrolled .brand-en-text{max-width:calc(100vw - 160px)}
  .brand-en-text b{font-size:clamp(13.5px,4vw,16px)}
}
/* home: departments bento also gets a full screen on desktop, centred, with room below it */
@media (min-width:901px){
  .brand-soft:has(>.container>.bento){min-height:100svh;display:flex;align-items:center;padding-block:clamp(120px,14vh,180px)}
  .brand-soft:has(>.container>.bento)>.container{width:100%}
}
/* hero band: the rotating subtitle is gone, so the calligraphy sits centred on its own */
.band-ar{gap:0}
@media (max-width:900px){
  .band-ar{padding-block:14px}
  .naskh{height:40px}
}
/* phone: much more air around the help section and the departments heading */
@media (max-width:700px){
  .home-help{padding-block:96px 104px}
  .home-help-grid{gap:88px}
  .home-help-intro p{margin-top:18px}
  .home-help-options{margin-top:48px}
  .home-help-options a{min-height:100px}
  .home-help-read h3{margin-bottom:16px}
  .home-help-story{padding:24px 0 28px}
  .home-help-story p{margin-top:10px}
  .home-help-story>span{margin-top:14px}
  .brand-soft:has(>.container>.bento){padding-top:104px}
  .b-head .eyebrow{margin-bottom:16px}
  .b-head .sub{margin-top:18px}
  .bento .b-head{padding-bottom:28px}
}
/* doctors title: same scale as the departments title, sub-line closer in weight */
.docs-sec .docs-title{font-size:clamp(40px,3.8vw,56px);line-height:1.1}
.docs-sec .docs-sub{font-size:clamp(17px,1.3vw,20px);margin-top:12px}
@media (max-width:600px){
  .docs-sec .docs-title{font-size:36px}
  .docs-sec .docs-sub{font-size:17px;margin-top:8px}
}


/* Doctors page polish: larger portraits, navy name plates and a clear booking CTA. */
.doctors-page .doctors-directory{padding-block:56px 72px}
.doctors-page .doc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;grid-auto-rows:1fr}
.doctors-page .doc-list .doc-full{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;padding:0;align-items:stretch;overflow:hidden;border-radius:var(--r-3xl);border-color:var(--brand-100)}
.doctors-page .doctor-portrait{display:flex;flex-direction:column;background:var(--brand-950)}
.doctors-page .doctor-portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 18%;border-radius:0}
.doctors-page .doctor-portrait h2{flex:1;padding:14px 16px;border-top:3px solid var(--accent-500);font-family:var(--font-display);font-size:24px;line-height:1.3;color:#fff;margin:0}
.doctors-page .doctor-copy{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px}
.doctors-page .doc-full .role{font-size:16px;line-height:1.7;font-weight:600;color:var(--brand-900);margin:0}
.doctors-page .doc-full p{font-size:15px;line-height:1.85;color:var(--gray-600);margin:0}
.doctors-page .doctors-booking{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:32px;border-radius:var(--r-3xl);background:var(--brand-25);border-color:var(--brand-100);border-top:3px solid var(--accent-500)}
.doctors-page .doctors-booking h2{font-size:30px;line-height:1.3;color:var(--brand-900)}
.doctors-page .doctors-booking p{font-size:16px;line-height:1.85;max-width:48ch}
.doctors-page .doctors-booking-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.doctors-page .doctors-booking-actions .btn{min-height:48px;--ic-a:currentColor}
.doctors-page .doctors-booking-actions a:focus-visible{outline:3px solid var(--brand-700);outline-offset:4px}
@media (hover:hover){
  .doctors-page .doc-list .doc-full:hover{transform:translateY(-3px);border-color:var(--brand-200);box-shadow:var(--sh-lg)}
}
@media (max-width:1000px){
  .doctors-page .doc-list{grid-template-columns:1fr;grid-auto-rows:auto}
}
@media (max-width:600px){
  .doctors-page{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .doctors-page .doctors-directory{padding-block:32px 48px}
  .doctors-page .doc-list{gap:24px}
  .doctors-page .doc-list .doc-full{grid-template-columns:minmax(0,1fr)}
  .doctors-page .doctor-portrait img{aspect-ratio:1;max-height:none}
  .doctors-page .doctor-portrait h2{padding:14px 20px;font-size:26px}
  .doctors-page .doctor-copy{padding:22px 20px 26px;gap:12px}
  .doctors-page .doctors-booking{padding:26px 22px;gap:16px}
  .doctors-page .doctors-booking h2{font-size:28px}
  .doctors-page .doctors-booking .doctors-booking-actions .btn{flex:1 1 100%;min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  .doctors-page .doc-list .card,.doctors-page .doctors-booking-actions .btn{transition:none}
  .doctors-page .doc-list .doc-full:hover,.doctors-page .doctors-booking-actions .btn:hover{transform:none}
}
/* Doctors page v2: portrait cards in a grid (like the homepage rail): name + role on the navy plate,
   short bio below, booking as a navy tile in the same grid */
.doctors-page .doctors-hero-sub{color:var(--brand-100);font-size:18px;margin-top:10px}
.doctors-page .doctors-directory{padding-block:72px 96px}
.doctors-page .doc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;grid-auto-rows:auto}
.doctors-page .doc-list .doc-full{display:flex;flex-direction:column;border:0;box-shadow:0 18px 40px -26px rgba(13,26,72,.45);background:#fff}
.doctors-page .doctor-portrait{flex:none}
.doctors-page .doctor-portrait img{aspect-ratio:1/1.05;transition:transform .9s var(--ease)}
.doctors-page .doctor-portrait{overflow:hidden}
.doctors-page .doctor-portrait h2{flex:none;padding:16px 22px 4px;font-size:23px;position:relative;z-index:1;background:var(--brand-950)}
.doctors-page .doctor-portrait .role{padding:0 22px 16px;color:#9FD3F2;font-size:14.5px;font-weight:500;line-height:1.6;background:var(--brand-950);position:relative;z-index:1}
.doctors-page .doctor-copy{flex:1;justify-content:flex-start;padding:20px 22px 24px}
.doctors-page .doc-full p{font-size:15.5px;line-height:1.85}
.doctors-page .doctors-booking{background:var(--brand-900) url(../patterns/main-thin-white.svg) 0 0/420px repeat;background-blend-mode:soft-light;border:0;border-top:3px solid var(--accent-500);color:#fff;justify-content:flex-end;padding:32px 28px;min-height:100%}
.doctors-page .doctors-booking h2{color:#fff}
.doctors-page .doctors-booking p{color:var(--brand-100)}
.doctors-page .doctors-booking .btn-primary{background:#fff;color:var(--brand-900);border-color:#fff}
.doctors-page .doctors-booking .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.doctors-page .doctors-booking .btn-secondary:hover{background:rgba(255,255,255,.1)}
.doctors-page .doctors-booking-actions a:focus-visible{outline-color:#fff}
@media (hover:hover){
  .doctors-page .doc-list .doc-full:hover .doctor-portrait img{transform:scale(1.04)}
}
@media (max-width:1000px){
  .doctors-page .doc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .doctors-page .doctors-hero-sub{font-size:16px;margin-top:6px}
  .doctors-page .doctors-directory{padding-block:48px 64px}
  .doctors-page .doc-list{grid-template-columns:1fr;gap:28px}
  .doctors-page .doctor-portrait img{aspect-ratio:1/.92}
  .doctors-page .doctor-portrait h2{font-size:24px;padding:16px 20px 4px}
  .doctors-page .doctor-portrait .role{padding:0 20px 16px}
  .doctors-page .doctor-copy{padding:18px 20px 22px}
}

/* Articles (articles.html, article-*.html) */
.art-page{background:#fff}
.art-page :where(a,summary):focus-visible{outline:3px solid var(--brand-700);outline-offset:4px;border-radius:var(--r-sm)}
.art-skip{position:fixed;top:12px;inset-inline-start:20px;z-index:200;padding:12px 20px;background:#fff;color:var(--brand-900);border-radius:var(--r-lg);box-shadow:var(--sh-lg);transform:translateY(-160%)}
.art-skip:focus{transform:none}
.art-hero{position:relative;isolation:isolate;background:var(--brand-950);border-top:3px solid var(--accent-500);padding-block:48px 56px;color:#fff}
.art-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pt-white) left center/var(--pt-size);opacity:.035;pointer-events:none}
.art-hero h1{font-family:var(--font-display);font-size:clamp(38px,4vw,58px);line-height:1.2;color:#fff;max-width:24ch;text-wrap:balance;margin:20px 0 16px}
.art-hero p{color:var(--brand-100);font-size:18px;line-height:1.9;max-width:66ch}
.art-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:13px;line-height:1.8;color:var(--brand-200);margin-bottom:28px}
.art-crumbs li{display:flex;align-items:center;gap:12px}
.art-crumbs li+li::before{content:"/";color:var(--brand-200)}
.art-crumbs a:hover{text-decoration:underline;text-underline-offset:4px;color:#fff}
.art-hero :where(a,summary):focus-visible{outline-color:#fff}
.art-kicker{font-size:14px;font-weight:600;color:var(--brand-200)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font-size:13px;color:var(--brand-200)}
.art-topic{display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border:1px solid var(--brand-100);border-radius:var(--r-full);color:var(--brand-700);background:var(--brand-25);font-size:13px;font-weight:600}
.art-hero .art-topic{background:rgba(255,255,255,.08);color:var(--brand-100);border-color:rgba(255,255,255,.25)}
.art-hub{background:var(--brand-25);padding-block:56px 80px}
.art-hub-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.art-hub-head h2{color:var(--brand-900);font-size:32px}
.art-topics{display:flex;flex-wrap:wrap;gap:8px}
.art-topics a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 22px;border-radius:var(--r-full);border:1px solid var(--brand-200);color:var(--brand-900);background:#fff;font-size:14px;font-weight:500}
.art-topics a:hover{background:var(--brand-50)}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.art-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--brand-100);border-radius:var(--r-3xl);box-shadow:var(--sh-sm);scroll-margin-top:108px}
.art-card-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}
.art-card-copy{padding:28px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.art-card h3{font-size:28px;line-height:1.35;color:var(--brand-900);margin:16px 0 12px;text-wrap:balance}
.art-card p{font-size:16px;line-height:1.85;color:var(--gray-600);margin-bottom:24px}
.art-card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;margin-top:auto;padding-top:20px;border-top:1px solid var(--brand-100)}
.art-read-time{color:var(--gray-600);font-size:13px}
.art-read{display:inline-flex;gap:10px;align-items:center;min-height:44px;color:var(--brand-700);font-size:15px;font-weight:600}
.art-read:hover{text-decoration:underline;text-underline-offset:5px}
.art-card:only-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;min-height:370px}
.art-card:only-child .art-card-img{grid-column:2;grid-row:1;height:100%;aspect-ratio:auto;min-height:370px}
.art-card:only-child .art-card-copy{grid-column:1;grid-row:1;padding:40px}
.art-card:only-child h3{font-size:38px;max-width:22ch}
.art-reading{display:grid;grid-template-columns:240px minmax(0,740px);justify-content:center;align-items:start;gap:64px;padding-block:56px 80px}
.art-rail{position:sticky;top:108px}
.art-toc{border:1px solid var(--brand-100);background:var(--brand-25);border-radius:var(--r-2xl);padding:20px}
.art-toc summary{font-family:var(--font-display);font-size:23px;font-weight:800;color:var(--brand-900);cursor:pointer;min-height:36px}
.art-toc nav{margin-top:12px}
.art-toc a{display:block;font-size:14px;line-height:1.7;color:var(--brand-900);padding-block:10px;border-top:1px solid var(--brand-100)}
.art-toc a:hover{color:var(--brand-700);text-decoration:underline;text-underline-offset:4px}
.art-copy{min-width:0;width:100%;max-width:66ch;font-size:18px;line-height:1.9;color:var(--gray-800)}
.art-figure{margin-bottom:40px}
.art-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-2xl)}
.art-copy section{margin-top:40px;scroll-margin-top:108px}
.art-copy h2{font-family:var(--font-display);font-size:32px;line-height:1.35;color:var(--brand-900);margin-bottom:16px;text-wrap:balance}
.art-copy h3{font-size:24px;color:var(--brand-900);margin-bottom:12px}
.art-copy p{color:var(--gray-800);margin-block:16px}
.art-copy :where(ul,ol){padding-inline-start:24px;margin-block:16px}
.art-copy ul{list-style:disc}
.art-copy ol{list-style:decimal}
.art-copy li{padding-inline-start:4px;margin-block:12px}
.art-copy li::marker{color:var(--brand-700)}
.art-copy a:not(.btn):not(.art-doctor){color:var(--brand-700);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.art-quote{padding:28px 32px;margin-block:32px;border-inline-start:3px solid var(--accent-500);border-radius:var(--r-xl);background:var(--brand-25);font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.6;color:var(--brand-900)}
.art-decision{padding:28px 32px;border:1px solid var(--brand-100);border-radius:var(--r-2xl);background:var(--brand-25)}
.art-sources{padding-block:24px;border-block:1px solid var(--brand-100)}
.art-sources p{font-size:14px;color:var(--gray-600);margin:0}
.art-care{padding-top:40px;margin-top:40px;border-top:1px solid var(--brand-100)}
.art-service{padding:28px;border:1px solid var(--brand-100);border-radius:var(--r-2xl);background:var(--brand-25)}
.art-service .art-kicker{color:var(--brand-700);display:block;margin-bottom:10px}
.art-service p{font-size:16px;line-height:1.85}
.art-doctors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.art-doctor{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--brand-100);border-radius:var(--r-xl);background:#fff;color:var(--brand-900)}
.art-doctor img{width:64px;height:72px;object-fit:cover;object-position:50% 15%;border-radius:var(--r-md);flex:none}
.art-doctor b{display:block;font-family:var(--font-display);font-size:21px;font-weight:800;line-height:1.4}
.art-doctor span span{display:block;font-size:12px;line-height:1.8;color:var(--gray-600);margin-top:4px}
.art-doctor:hover{background:var(--brand-25);border-color:var(--brand-200)}
.art-booking{background:var(--brand-950);border-top:3px solid var(--accent-500);padding:32px;border-radius:var(--r-2xl);margin-top:32px}
.art-booking h2{color:#fff}
.art-booking p{font-size:16px;color:var(--brand-100)}
.art-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.art-actions .btn{min-height:48px;--ic-a:currentColor}
.art-booking a:focus-visible{outline-color:#fff}
.art-related[hidden]{display:none}
@media (max-width:1100px){
  .art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-reading{grid-template-columns:210px minmax(0,1fr);gap:32px}
}
@media (max-width:900px){
  .art-reading{grid-template-columns:minmax(0,1fr);gap:32px;max-width:804px}
  .art-rail{position:static}
  .art-toc{padding:18px 22px}
  .art-toc summary{min-height:40px;line-height:40px}
}
@media (max-width:600px){
  .art-page{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .art-hero{padding-block:28px 40px}
  .art-hero h1{font-size:38px;margin-block:20px 16px}
  .art-hero p{font-size:17px;line-height:1.9}
  .art-crumbs{font-size:12px;gap:6px 10px;margin-bottom:24px}
  .art-crumbs li{gap:10px}
  .art-meta{gap:10px 16px;font-size:12px}
  .art-hub{padding-block:40px 56px}
  .art-hub-head{gap:20px;margin-bottom:24px}
  .art-hub-head h2{font-size:28px}
  .art-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .art-card:only-child{display:flex;min-height:0}
  .art-card:only-child .art-card-img,.art-card-img{aspect-ratio:16/11;min-height:0;height:auto}
  .art-card:only-child .art-card-copy,.art-card-copy{padding:26px 22px}
  .art-card:only-child h3,.art-card h3{font-size:30px;margin-top:16px}
  .art-card p{font-size:15px;margin-bottom:20px}
  .art-card-foot{gap:12px;padding-top:16px}
  .art-reading{padding-block:32px 56px;gap:28px}
  .art-copy{font-size:17px;line-height:1.9}
  .art-figure{margin-bottom:32px}
  .art-figure img{aspect-ratio:4/3}
  .art-copy section{margin-top:36px}
  .art-copy h2{font-size:29px;margin-bottom:14px}
  .art-quote{padding:24px;font-size:26px;margin-block:28px}
  .art-decision,.art-service{padding:24px 22px}
  .art-doctors{grid-template-columns:1fr;gap:12px}
  .art-booking{padding:28px 24px}
  .art-actions{gap:12px}
  .art-actions .btn{width:100%;min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  html:has(.art-page){scroll-behavior:auto}
  .art-page .btn{transition:none}
}
/* Doctors page v2, toned down: narrower grid, smaller photos and type; two compact columns on phones */
.doctors-page .doctors-directory>.container{max-width:1080px}
.doctors-page .doc-list{gap:22px}
.doctors-page .doctor-portrait img{aspect-ratio:1/.88}
.doctors-page .doctor-portrait h2{font-size:19px;padding:12px 18px 2px}
.doctors-page .doctor-portrait .role{font-size:13.5px;padding:0 18px 12px}
.doctors-page .doctor-copy{padding:14px 18px 18px}
.doctors-page .doc-full p{font-size:14.5px;line-height:1.75}
.doctors-page .doctors-booking{padding:24px 22px}
.doctors-page .doctors-booking h2{font-size:24px}
.doctors-page .doctors-booking p{font-size:15px}
@media (max-width:600px){
  .doctors-page .doc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .doctors-page .doc-list .doc-full{border-radius:18px}
  .doctors-page .doctor-portrait img{aspect-ratio:1/1}
  .doctors-page .doctor-portrait h2{font-size:15.5px;padding:10px 12px 2px;line-height:1.35}
  .doctors-page .doctor-portrait .role{font-size:12px;padding:0 12px 10px;line-height:1.5}
  .doctors-page .doctor-copy{padding:10px 12px 14px}
  .doctors-page .doc-full p{font-size:13px;line-height:1.7}
  .doctors-page .doctors-booking{grid-column:1/-1;padding:22px 20px}
  .doctors-page .doctors-booking h2{font-size:22px}
}
/* Articles v2 (owner preference): the prototype's reading layout. Warm page, title and lead inside a white
   paper column, plain contents list beside it, no navy banner */
.art-page{background:#FAF9F6}
.art-crumbs-wrap{padding-top:36px}
.art-crumbs-wrap .art-crumbs{color:var(--brand-700);margin:0;font-size:14px}
.art-crumbs-wrap .art-crumbs li+li::before{color:var(--gray-400)}
.art-crumbs-wrap .art-crumbs li[aria-current]{color:var(--gray-600)}
.art-crumbs-wrap .art-crumbs a:hover{color:var(--brand-900)}
.art-page .art-reading{grid-template-columns:240px minmax(0,880px);gap:64px;padding-block:28px 96px}
.art-page .art-copy{max-width:none;background:#fff;border:1px solid #E6E3DC;padding:64px 72px 72px}
.art-head{padding-bottom:0;margin-bottom:40px}
.art-kicker-line{display:block;width:104px;height:22px;margin-bottom:16px;background:url(../patterns/fp-bar-light-2.svg) right center/auto 22px no-repeat}
.art-head h1{font-family:var(--font-display);font-size:clamp(36px,3.6vw,54px);line-height:1.25;color:var(--brand-950);text-wrap:balance;margin:0}
.art-head .art-lead{font-size:20px;line-height:1.8;color:var(--gray-700);margin:18px 0 0}
.art-byline{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:32px;padding-block:18px;border-block:1px solid #E6E3DC;font-size:14px;color:var(--gray-600)}
.art-byline span+span::before{content:"·";margin-inline-end:18px}
.art-page .art-figure img{border-radius:0}
.art-page .art-rail{top:112px;padding-top:12px}
.art-page .art-toc{border:0;background:none;border-radius:0;padding:0}
.art-page .art-toc summary{font-size:19px;color:var(--brand-950);padding-bottom:14px;border-bottom:1px solid #E6E3DC;list-style:none}
.art-page .art-toc summary::-webkit-details-marker{display:none}
.art-page .art-toc nav{margin-top:0}
.art-page .art-toc a{font-size:16px;color:var(--gray-700);padding-block:16px;border-top:0;border-bottom:1px solid #E6E3DC}
.art-page .art-toc a:hover{color:var(--brand-700);text-decoration:none}
@media (max-width:1100px){
  .art-page .art-reading{grid-template-columns:200px minmax(0,1fr);gap:36px}
  .art-page .art-copy{padding:48px 44px 56px}
}
@media (max-width:900px){
  .art-page .art-reading{grid-template-columns:minmax(0,1fr);gap:20px;max-width:none}
  .art-page .art-toc{background:#fff;border:1px solid #E6E3DC;padding:16px 20px}
  .art-page .art-toc summary{border:0;padding:0;display:flex;justify-content:space-between;align-items:center}
  .art-page .art-toc summary::after{content:"+";font-size:22px;color:var(--brand-700)}
  .art-page .art-toc[open] summary::after{content:"−"}
  .art-page .art-toc[open] nav{margin-top:8px}
  .art-page .art-toc a:last-child{border-bottom:0}
}
@media (max-width:600px){
  .art-crumbs-wrap{padding-top:24px}
  .art-page .art-reading{padding-block:20px 72px}
  .art-page .art-copy{padding:32px 22px 40px;margin-inline:-6px}
  .art-head h1{font-size:34px}
  .art-head .art-lead{font-size:17.5px}
  .art-byline{margin-top:24px}
}
/* Articles hub v2 (owner preference): the prototype's simplicity. Small title, search, topic chips;
   newest article as a featured navy card, the rest as quiet rows */
.art-page .art-hub{background:#FAF9F6;padding-block:40px 96px}
.art-hub .art-crumbs{color:var(--brand-700);margin:0 0 28px;font-size:14px}
.art-hub .art-crumbs li+li::before{color:var(--gray-400)}
.art-hub .art-crumbs li[aria-current]{color:var(--gray-600)}
.art-hub>.container>h1{font-family:var(--font-display);font-size:clamp(32px,3vw,42px);color:var(--brand-950);margin:0 0 24px}
.art-search{display:flex;align-items:center;gap:8px;max-width:720px;background:#fff;border:1.5px solid var(--brand-900);padding:6px;padding-inline-start:20px}
.art-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;color:var(--brand-950);min-height:48px}
.art-search input::placeholder{color:var(--gray-500)}
.art-search .btn{min-height:48px;padding-inline:30px;border-radius:var(--r-full)}
.art-search:focus-within{box-shadow:0 0 0 4px rgba(0,113,184,.15)}
.art-hub .art-topics{margin:16px 0 48px}
.art-topics button{min-height:40px;padding:6px 18px;border-radius:var(--r-full);border:1px solid #D9D6CE;background:#fff;color:var(--brand-900);font:inherit;font-size:14px;cursor:pointer}
.art-topics button:hover{border-color:var(--brand-300)}
.art-topics button.is-on{background:var(--brand-900);border-color:var(--brand-900);color:#fff}
.art-hub .art-grid{display:block;border-top:1px solid #E1DED6}
.art-hub .art-card{position:relative;display:block;background:none;border:0;border-bottom:1px solid #E1DED6;border-radius:0;box-shadow:none;overflow:visible}
.art-hub .art-card-img{display:none}
.art-hub .art-card-copy{padding:26px 0}
.art-hub .art-card .art-topic{border:0;background:none;padding:0;min-height:0;color:var(--brand-600);font-size:13.5px}
.art-hub .art-card h2{font-family:var(--font-display);font-size:26px;line-height:1.35;color:var(--brand-950);margin:6px 0 6px}
.art-hub .art-card h2 a::after{content:"";position:absolute;inset:0}
.art-hub .art-card:hover h2{color:var(--brand-700)}
.art-hub .art-card p{font-size:16px;color:var(--gray-600);margin:0}
.art-hub .art-card-foot{border:0;padding-top:10px;margin:0}
.art-hub .art-card .art-read{display:none}
/* featured = newest (first) card, only when the list isn't filtered */
.art-hub .art-grid:not(.is-filtered) .art-card:first-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--brand-900) url(../patterns/main-thin-white.svg) 0 0/360px repeat;background-blend-mode:soft-light;border:0;margin-bottom:28px;color:#fff;min-height:0}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-img{display:block;grid-column:2;grid-row:1;height:100%;min-height:320px;aspect-ratio:auto;border-radius:0}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-topic{color:var(--brand-200)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child h2{color:#fff;font-size:clamp(30px,2.8vw,42px)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child p{color:var(--brand-100);font-size:17px}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-read-time{color:var(--brand-200)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-read{display:inline-flex;align-self:flex-start;margin-top:22px;background:#fff;color:var(--brand-900);padding:0 22px;border-radius:var(--r-full);text-decoration:none}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-foot{display:flex;flex-direction:column;align-items:flex-start}
.art-hub .art-grid:not(.is-filtered){border-top:0}
.art-empty{padding:32px 0;color:var(--gray-600);font-size:16px}
.art-ask{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:64px;padding:32px 36px;background:#F2EFE9;border-inline-start:3px solid var(--accent-500)}
.art-ask h2{font-family:var(--font-display);font-size:26px;color:var(--brand-950);margin:0 0 6px}
.art-ask p{font-size:15.5px;color:var(--gray-700);margin:0}
.art-ask .art-actions{margin:0}
@media (max-width:700px){
  .art-page .art-hub{padding-block:24px 72px}
  .art-hub>.container>h1{font-size:30px;margin-bottom:18px}
  .art-search{padding-inline-start:14px}
  .art-search .btn{padding-inline:20px}
  .art-hub .art-topics{margin-bottom:32px}
  .art-hub .art-grid:not(.is-filtered) .art-card:first-child{grid-template-columns:1fr}
  .art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-img{grid-column:1;grid-row:1;min-height:0;aspect-ratio:16/10}
  .art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy{padding:26px 22px 28px}
  .art-hub .art-card h2{font-size:22px}
  .art-ask{padding:26px 22px}
  .art-ask .art-actions .btn{flex:1}
}
/* Navy tiles (doctors booking, featured article): pattern as a faint overlay, fading out behind the text */
.doctors-page .doctors-booking,.art-hub .art-grid:not(.is-filtered) .art-card:first-child{background:var(--brand-900);position:relative;isolation:isolate}
.doctors-page .doctors-booking::before,.art-hub .art-grid:not(.is-filtered) .art-card:first-child::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../patterns/main-thin-white.svg) 0 0/360px repeat;opacity:.07;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.doctors-page .doctors-booking{overflow:hidden}
/* Article guide additions: native FAQ, readable visit facts, and compact related cards. */
.art-hub .art-grid .art-card[hidden]{display:none}
.art-faq details{border-bottom:1px solid #E6E3DC}
.art-faq details:first-child{border-top:1px solid #E6E3DC}
.art-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding-block:18px;font-weight:600;color:var(--brand-900)}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"+";flex:none;color:var(--brand-700);font-size:22px}
.art-faq details[open] summary::after{content:"−"}
.art-faq details p{margin-top:0;padding-bottom:18px}
.art-facts{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--brand-900)}
.art-facts>span{display:block}
.art-related .art-grid{display:block}
.art-related .art-card{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:0;border-radius:0;box-shadow:none;border:0;border-block:1px solid #E6E3DC}
.art-related .art-card .art-card-img{grid-column:1;grid-row:1;align-self:center;min-height:0;height:auto;aspect-ratio:3/2}
.art-related .art-card .art-card-copy{grid-column:2;grid-row:1;padding:24px}
.art-related .art-card h2{font-size:26px;margin-block:8px}
.art-related .art-card h2 a{color:inherit;text-decoration:none}
.art-related .art-card p{font-size:15px;line-height:1.8;margin:0 0 12px}
.art-related .art-card-foot{padding-top:8px;border:0}
.art-related .art-card .art-read{display:none}
@media (max-width:600px){
  .art-related .art-card{grid-template-columns:minmax(0,1fr)}
  .art-related .art-card .art-card-img{grid-column:1;grid-row:1;width:100%;aspect-ratio:3/2}
  .art-related .art-card .art-card-copy{grid-column:1;grid-row:2;padding:20px 0}
}

/* Articles SEO: preserve image slots with picture sources and semantic captions/headings. */
.art-figure picture{display:block}
.art-copy h2[id],.art-copy h3[id]{scroll-margin-top:108px}
.art-figure figcaption{font-size:13px;line-height:1.7;color:var(--gray-600);padding-top:8px}
.art-hub figure.art-card-img{margin:0;overflow:hidden}
.art-hub figure.art-card-img>picture{display:block;width:100%;height:100%}
.art-hub figure.art-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.art-related .art-card h3{font-family:var(--font-display);font-size:26px;line-height:1.35;margin-block:8px}
.art-related .art-card h3 a{color:inherit;text-decoration:none}
@media (max-width:600px){.art-byline span+span::before{display:none}}
/* Fertility · stages band (owner sketch): band title | 1 diagnosis | 2 treatments + summary, then all treatments full width */
.fps{margin-top:clamp(40px,4vw,72px);border-block:3px solid var(--accent-500)}
.fps-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.fps-lead{position:relative;isolation:isolate;display:flex;align-items:flex-end;padding:clamp(32px,3vw,56px) clamp(28px,5vw,96px) clamp(32px,3vw,56px) clamp(24px,2.4vw,44px);background:var(--brand-25)}
.fps-lead::after{content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/main-thin-ink.svg) 100% 0/300px;opacity:.05}
.fps-lead h2{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3.2vw,56px);line-height:1.15;color:var(--brand-900);margin:0;text-wrap:balance}
.fps-col{display:flex;flex-direction:column;gap:14px;padding:clamp(32px,3vw,56px) clamp(24px,2.6vw,48px);border-inline-start:1px solid var(--gray-200)}
.fps-col.fpd{display:flex;padding-bottom:clamp(32px,3vw,56px)}
.fps-h{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.fps-h .fpd-num{justify-self:auto;width:36px;height:36px;font-size:18px;flex:none}
.fps-h h3{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,2.4vw,42px);line-height:1.1;color:var(--brand-900);margin:0}
.fps-col .fpd-intro{border:0;padding:0;font-size:16px;line-height:1.85}
.fps-col .fpd-step{padding:0}
.fps-col .fpd-step h3{font-size:19px;margin-bottom:4px}
.fps-col .fpd-step p{font-size:15.5px;line-height:1.8}
.fps-sum{margin:0;padding:18px 20px;background:var(--brand-50);border-inline-start:3px solid var(--brand-600);font-size:16px;line-height:1.85;color:var(--brand-950)}
.fps-grid{grid-template-columns:repeat(4,minmax(0,1fr));border-inline-start:0;border-top:1px solid var(--gray-200)}
.fpt-t h4{grid-area:t;margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.25vw,20px);line-height:1.35;color:inherit}
@media (max-width:1200px){
  .fps-band{grid-template-columns:1fr 1fr}
  .fps-lead{grid-column:1/-1;padding-block:28px}
  .fps-col:nth-child(2){border-inline-start:0}
  .fps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .fps-band{grid-template-columns:1fr}
  .fps-lead{padding:28px 20px}
  .fps-lead h2{font-size:32px}
  .fps-col{padding:28px 20px;border-inline-start:0;border-top:1px solid var(--gray-200)}
  .fps-h h3{font-size:30px}
  .fps-grid{grid-template-columns:1fr}
}
.fps-grid .fpt-guide{grid-template-columns:1fr;align-content:space-between;gap:18px;padding:26px 28px}
.fps-grid .fpt-guide-t{padding-inline-end:56px}
.fps-grid .fpt-guide-btn{justify-self:start}
/* Fertility stages v2: compact band (seen whole), plain title and summary (no panels), then space, then the cards */
.fps{border:0}
.fps-band{padding-inline:clamp(24px,5vw,96px);gap:0;align-items:start}
.fps-lead{background:none;padding:6px 0 0;align-items:flex-start}
.fps-lead::after{display:none}
.fps-lead h2{font-size:clamp(30px,2.6vw,44px)}
.fps-col{gap:10px;padding:0 clamp(24px,2.4vw,44px)}
.fps-col.fpd{padding-bottom:0}
.fps-h{gap:12px;margin-bottom:2px}
.fps-h .fpd-num{width:32px;height:32px;font-size:16px}
.fps-h h3{font-size:clamp(26px,2vw,34px)}
.fps-col .fpd-intro,.fps-col .fpd-step p{font-size:15.5px;line-height:1.8}
.fps-col .fpd-step h3{font-size:18px}
.fps-sum{background:none;border:0;padding:0;font-size:15.5px;line-height:1.8;color:var(--gray-600)}
.fps-grid{margin-top:clamp(56px,6vw,104px);border-block:3px solid var(--accent-500)}
@media (max-width:1200px){
  .fps-band{row-gap:28px}
  .fps-lead{padding:0}
  .fps-col{padding-inline:0 32px}
  .fps-col+.fps-col{padding-inline:32px 0}
}
@media (max-width:700px){
  .fps-band{padding-inline:20px;row-gap:28px}
  .fps-lead{padding:0}
  .fps-lead h2{font-size:30px}
  .fps-col,.fps-col+.fps-col{padding:24px 0 0;border-top:1px solid var(--gray-200)}
  .fps-h h3{font-size:26px}
  .fps-grid{margin-top:48px}
}
/* Fertility v3: no dividers in the stages band or around the cards; bigger, boxier treatment tiles with stacked text */
.fps-col,.fps-col+.fps-col{border:0}
.fps-grid{border:0;border-top:0}
@media (min-width:901px){
  .fps-grid .fpt-t{grid-template-columns:1fr;grid-template-areas:"n" "t" "p";align-content:start;row-gap:10px;min-height:clamp(220px,17vw,280px);padding:clamp(28px,2.4vw,40px) clamp(26px,2.2vw,38px)}
  .fps-grid .fpt-n{text-align:start;font-size:22px;margin-bottom:6px}
  .fps-grid .fpt-n::after{margin-top:10px}
  .fps-grid .fpt-t h4{font-size:clamp(19px,1.45vw,23px)}
  .fps-grid .fpt-t p{font-size:clamp(14.5px,1vw,16px);line-height:1.75}
  .fps-grid .fpt-guide{min-height:clamp(220px,17vw,280px);padding:clamp(28px,2.4vw,40px) clamp(26px,2.2vw,38px)}
}
/* Fertility doctors v2: white section, small round portraits, no form */
.fpdoc{grid-template-areas:"head panel" "quick panel";grid-template-rows:auto 1fr;background:#fff;align-items:start}
.fpdoc-quick{align-self:start}
.fpdoc-panel{background:#fff;padding:clamp(32px,3vw,52px) clamp(24px,3vw,56px)}
.fpdoc-panel::before{display:none}
.fpdoc-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:28px 20px}
.fpdoc-list>li,.fpdoc-list>li:nth-child(3n+1),.fpdoc-list>li:nth-last-child(-n+3){border:0}
.fpdoc-list a{flex-direction:row;align-items:center;gap:16px;color:var(--brand-900)}
.fpdoc-list a:hover{background:none}
.fpdoc-list a:focus-visible{outline-color:var(--brand-700);outline-offset:4px}
.fpdoc-ph{flex:none;width:84px;height:84px;margin:0;aspect-ratio:1;border-radius:50%;background:var(--brand-50);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--brand-100)}
.fpdoc-ph img{object-position:50% 20%}
.fpdoc-list a:hover .fpdoc-ph{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--brand-500)}
.fpdoc-nm{padding:0;margin:0}
.fpdoc-nm::before{display:none}
.fpdoc-nm b{color:var(--brand-950);font-size:17px}
.fpdoc-nm span{color:var(--gray-600);font-size:13.5px}
.fpdoc-list a:hover .fpdoc-nm b{color:var(--brand-700)}
.fpdoc-list .fpdoc-all a{flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;padding:0;background:none;color:var(--brand-900)}
.fpdoc-list .fpdoc-all a:hover{background:none}
.fpdoc-all b{font-size:18px}
.fpdoc-go{width:48px;height:48px;order:-1}
@media (max-width:1100px){
  .fpdoc{grid-template-areas:"head" "quick" "panel";grid-template-rows:auto}
  .fpdoc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .fpdoc-panel{padding:28px 20px 40px}
  .fpdoc-list{grid-template-columns:1fr;gap:18px}
  .fpdoc-list>li,.fpdoc-list>li:nth-child(3n+1),.fpdoc-list>li:nth-last-child(-n+3),.fpdoc-list>li:nth-last-child(2),.fpdoc-list>li.fpdoc-all{border:0}
  .fpdoc-ph{width:68px;height:68px}
  .fpdoc-list .fpdoc-all a{flex-direction:row;justify-content:flex-start}
}
.fpdoc{grid-template-areas:"head panel";grid-template-rows:auto}
@media (max-width:1100px){.fpdoc{grid-template-areas:"head" "panel"}}
@media (min-width:901px){.fps-grid .fpt-guide{align-content:start}.fps-grid .fpt-guide-t{margin-top:48px}.fps-grid .fpt-guide-btn{align-self:end;margin-top:auto}.fps-grid .fpt-guide{display:flex;flex-direction:column;align-items:flex-start}}
@media (max-width:1100px){.fpdoc-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.fpdoc-head .fpd-num{justify-self:auto}.fpdoc-head .fpd-title{white-space:normal}}
/* Fertility: breathing room between chapters and before the footer */
.fps{margin-top:clamp(80px,8vw,144px)}
.fpdoc{margin-block:clamp(80px,8vw,144px) clamp(88px,9vw,160px)}
@media (max-width:700px){.fps{margin-top:72px}.fpdoc{margin-block:72px 80px}}
.fpdoc{border:0}
/* the opening block and the stages band stay close (owner) */
.fps{margin-top:clamp(40px,4vw,72px)}
@media (max-width:700px){.fps{margin-top:40px}}
.fpx-test:hover::before{transform:none}
/* Fertility opening (phone, owner sketch): frieze · crumbs · title · lead · ONE row of 3 compact tiles · doctors line */
@media (max-width:700px){
  .fpx{display:flex;flex-direction:column}
  .fpx::before{order:0;height:var(--bar);flex:none}
  .fpx-intro{display:contents}
  .fpx-intro>*{margin-inline:20px}
  .fpx-intro .crumbs{order:1;margin-top:16px;margin-bottom:14px}
  .fpx-intro h1{order:2;font-size:32px;margin-bottom:8px}
  .fpx-lead{order:3;margin-bottom:20px;font-size:15.5px}
  .fpx-acts{order:4;display:grid;grid-template-columns:1.15fr .9fr 1fr;grid-template-rows:auto;grid-template-areas:"test guide book";min-height:0;margin:0}
  .fpx-acts>*{min-height:112px}
  .fpx-test{padding:12px 12px;padding-inline-end:12px;justify-content:center}
  .fpx-test::before{background-position:0 50%}
  .fpx-test-t b{display:none}
  .fpx-test-t span{font-size:12.5px;line-height:1.55;color:#fff;text-shadow:0 1px 6px rgba(13,26,72,.45)}
  .fpx-test-t span br{display:none}
  .fpx-guide{padding:12px;justify-content:center;gap:0}
  .fpx-guide::before{background-position:-40px 0}
  .fpx-guide-t b{font-size:21px;margin:0;line-height:1.15}
  .fpx-guide-t span,.fpx-guide-btn{display:none}
  .fpx-book{flex-direction:row-reverse;justify-content:center;gap:8px;padding:10px}
  .fpx-book-ic{width:40px;height:40px}
  .fpx-book-ic .ic{width:18px;height:18px}
  .fpx-book-t b{font-size:18px}
  .fpx-book-t span{display:block;font-size:10.5px;line-height:1.4}
  .fpx-proof{order:5;margin-top:20px;margin-bottom:8px;padding-top:0;border-top:0}
}
@media (max-width:700px){
  .fpx-test::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,rgba(13,26,72,.78),rgba(13,26,72,.35) 70%,rgba(13,26,72,.15))}
  .fpx-test-t span{font-size:12.5px;font-weight:600}
  .fpx-book{flex-direction:column;gap:6px;padding:10px 8px}
  .fpx-book-t{text-align:center}
  .fpx-book-t b{font-size:17px;white-space:nowrap}
  .fpx-book-t span{display:none}
  .fpx-guide-t b{font-size:19px}
}
/* Fertility opening (phone) v2: light frieze (a few shapes, no navy bar), full-width lead, cleaner tiles */
@media (max-width:700px){
  .fpx{--bar:44px}
  .fpx::before{background:#fff url(../patterns/fp-bar-light.svg) right 20px center/auto 30px no-repeat;margin-top:14px}
  .fpx-lead{text-wrap:wrap;text-align:justify;text-align-last:right}
  .fpx-intro .crumbs{margin-top:6px}
  .fpx-test{align-items:center;justify-content:center;text-align:center;padding:12px}
  .fpx-test-t b{display:block;font-size:19px;line-height:1.2;margin:0;color:#fff;text-shadow:0 1px 8px rgba(13,26,72,.5)}
  .fpx-test-t span{display:none}
  .fpx-guide{align-items:center;text-align:center}
  .fpx-guide-t b{max-width:none}
  .fpx-guide::before{display:none}
  .fpx-book{align-items:center;justify-content:center}
  .fpx-book-ic{display:none}
  .fpx-book-t b{font-size:19px}
}
/* Fertility: band title hidden visually (kept for screen readers / outline); no red strip under the opening */
.fps-lead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
.fps-band{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.fpx{border-bottom:0}
@media (max-width:1200px){.fps-band{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.fps-band{grid-template-columns:1fr}.fps-col:first-of-type{border-top:0;padding-top:0}}
.fps-col .fpd-intro{margin:0}.fps-col .fpd-intro+.fpd-intro{margin-top:2px}
/* Fertility opening (phone): shapes share the breadcrumb row (crumbs right, shapes left) */
@media (max-width:700px){
  .fpx::before{display:none}
  .fpx-intro .crumbs{margin-top:18px;min-height:26px;align-items:center;background:url(../patterns/fp-bar-light-2.svg) left center/auto 22px no-repeat}
}
@media (max-width:380px){.fpx-intro .crumbs{background-size:auto 15px}}
/* Fertility opening (phone) v3: more air; tile titles regular weight except booking */
@media (max-width:700px){
  .fpx-intro .crumbs{margin-top:28px;margin-bottom:22px}
  .fpx-intro h1{margin-bottom:16px}
  .fpx-lead{margin-bottom:36px;line-height:1.95}
  .fpx-acts>*{min-height:128px}
  .fpx-test-t b,.fpx-guide-t b{font-weight:500;font-family:var(--font-body)}
  .fpx-test-t b{font-size:17px}
  .fpx-guide-t b{font-size:17px;line-height:1.35}
  .fpx-book-t b{font-weight:800}
  .fpx-proof{margin-top:32px;margin-bottom:20px}
}
/* Fertility doctors heading: number beside the title (same as 1 · التشخيص / 2 · العلاجات) */
@media (max-width:1100px){
  .fpdoc-head{flex-direction:row;align-items:center;gap:12px}
  .fpdoc-head .fpd-num{width:32px;height:32px;font-size:16px;flex:none;margin:0}
  .fpdoc-head .fpd-title{font-size:clamp(28px,6vw,40px);line-height:1.15}
}
@media (min-width:701px){.fpx{border-bottom:3px solid var(--accent-500)}}
/* Treatment tiles (desktop 4-col): subtle shade fading in from the outer edge (top row from the top, bottom row from the bottom) */
@media (min-width:1201px){
  .fps-grid .fpt-list li:nth-child(-n+4) .fpt-t{background:linear-gradient(to bottom,rgba(13,26,72,.09),rgba(13,26,72,0) 55%),var(--bg)}
  .fps-grid .fpt-list li:nth-child(n+5) .fpt-t{background:linear-gradient(to top,rgba(13,26,72,.09),rgba(13,26,72,0) 55%),var(--bg)}
}
/* Treatment tiles (phone, one column): taller, airy text, shade fading in from top AND bottom; stronger first tile */
@media (max-width:700px){
  .fps-grid .fpt-t{min-height:168px;padding:28px 24px;row-gap:10px;column-gap:16px;align-content:center;
    background:linear-gradient(to bottom,rgba(13,26,72,.09),rgba(13,26,72,0) 35%,rgba(13,26,72,0) 65%,rgba(13,26,72,.09)),var(--bg)}
  .fps-grid .fpt-t h4{font-size:20px;line-height:1.4}
  .fps-grid .fpt-t p{font-size:15px;line-height:1.85}
  .fps-grid .fpt-t1{--bg:#9FD3F4}
  .fps-grid .fpt-guide{min-height:180px;padding:30px 24px}
}
/* Opening tiles (phone): same top/bottom edge shade as the treatment cards */
@media (max-width:700px){
  .fpx-guide,.fpx-book{background-image:linear-gradient(to bottom,rgba(13,26,72,.10),rgba(13,26,72,0) 35%,rgba(13,26,72,0) 65%,rgba(13,26,72,.10))}
  .fpx-guide{background-image:linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.22))}
  .fpx-test::after{background:linear-gradient(to bottom,rgba(13,26,72,.22),rgba(13,26,72,0) 35%,rgba(13,26,72,0) 65%,rgba(13,26,72,.22)),linear-gradient(to left,rgba(13,26,72,.78),rgba(13,26,72,.35) 70%,rgba(13,26,72,.15))}
}
@media (max-width:700px){
  .fpx-book{background-image:linear-gradient(to bottom,rgba(13,26,72,.05),rgba(13,26,72,0) 30%,rgba(13,26,72,0) 70%,rgba(13,26,72,.05))}
  .fpx-guide{background-image:linear-gradient(to bottom,rgba(0,0,0,.10),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.10))}
  .fpx-test::after{background:linear-gradient(to bottom,rgba(13,26,72,.10),rgba(13,26,72,0) 30%,rgba(13,26,72,0) 70%,rgba(13,26,72,.10)),linear-gradient(to left,rgba(13,26,72,.78),rgba(13,26,72,.35) 70%,rgba(13,26,72,.15))}
}
/* Guide tile (phone): one faint brand star behind the title */
@media (max-width:700px){
  .fpx-guide::before{display:block;content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/fp-star.svg) center/auto 78% no-repeat;opacity:.10}
}
/* Booking tile (phone): the brand arrow, faint, behind the label */
@media (max-width:700px){
  .fpx-book::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../patterns/fp-arrow.svg) center/auto 46% no-repeat;opacity:.09}
}
@media (max-width:700px){.fpx-book::before{background-size:auto 74%;background-position:42% 50%;opacity:.08}}
@media (max-width:700px){.fpx-book::before{background-size:78% auto;background-position:center}}
@media (max-width:700px){.fpx-book::before{background-size:70% auto;background-position:center;opacity:.08}}
@media (max-width:700px){.fpx-book::before{background-size:auto 70%;background-position:center;opacity:.08}}
@media (max-width:700px){.fpx-book::before{background-size:auto 96%}}
@media (max-width:700px){.fpx-book::before{background-size:96% 74%;background-position:center}}
@media (max-width:700px){.fpx-book::before{background-size:auto 78%;background-position:center;opacity:.09}}
@media (max-width:700px){.fpx-acts{grid-template-columns:.95fr 1fr 1.05fr;grid-template-areas:"guide book test"}.fpx-test-t{display:none}.fpx-test::after{opacity:.35}}
/* phone header: logo only on inner pages */
@media (max-width:700px){.header:not(.over) .brand-text{display:none}}
/* fertility proof line (phone): smaller avatars, text gets the width */
@media (max-width:700px){
  .fpx-proof{gap:12px;align-items:center}
  .fpx-avatars li{width:36px;height:36px;margin-inline-start:-10px}
  .fpx-proof-t{max-width:none;flex:1}
  .fpx-proof-t b{font-size:16px}
  .fpx-proof-t span{font-size:13px}
}
/* fertility doctors (desktop): "all doctors" circle same size/column as the portraits */
@media (min-width:701px){.fpdoc-go{width:84px;height:84px;flex:none}.fpdoc-go .ic{width:24px;height:24px}.fpdoc-list .fpdoc-all a{gap:16px}}
/* Article: phone TOC sits under the title; callouts span the article box edge to edge */
.art-page .art-copy{--art-pad:72px}
.art-toc-m{display:none}
.art-page .art-copy .art-quote,.art-page .art-copy .art-decision{margin-inline:calc(-1 * var(--art-pad));padding-inline:var(--art-pad);border:0;border-radius:0}
.art-page .art-copy .art-quote{background:var(--brand-25);border-inline-start:4px solid var(--accent-500)}
.art-page .art-copy .art-decision{background:#F3F6FC}
@media (max-width:1100px){.art-page .art-copy{--art-pad:44px}}
@media (max-width:900px){
  .art-page .art-rail{display:none}
  .art-page .art-copy .art-toc-m{display:block;margin:-12px 0 32px}
}
@media (max-width:600px){.art-page .art-copy{--art-pad:22px}}
/* Home help: arrows visible at rest so rows read as links without hover */
.home-help-options .ic{opacity:.35;transform:none}
/* Fertility page polish: calmer rhythm, one heading scale, papers fully inside the card, end CTA */
.fpdoc{margin-top:clamp(48px,5vw,72px);margin-bottom:0}
.fpdoc-head{display:flex;align-items:center;gap:14px;align-self:start}
.fpdoc-head .fpd-num{width:36px;height:36px;font-size:18px;flex:none}
.fpdoc-head .fpd-title{font-size:clamp(34px,3.2vw,56px);line-height:1.15}
.fp-cta{padding-top:clamp(48px,5vw,72px)}
.fpt-ask .fpt-guide-btn .ic{--ic-a:currentColor}
/* Articles hub: compact top so the featured card is fully visible on first screen; row topics in quiet gray */
.art-page .art-hub{padding-top:24px}
.art-hub .art-crumbs{margin-bottom:16px}
.art-hub>.container>h1{font-size:clamp(30px,2.6vw,38px);margin-bottom:16px}
.art-search{max-width:640px;padding:4px;padding-inline-start:18px}
.art-search input{min-height:42px;font-size:16px}
.art-search .btn{min-height:42px;padding-inline:26px}
.art-hub .art-topics{margin:12px 0 28px}
.art-topics button{min-height:36px}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy{padding:32px 40px}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-img{min-height:0;max-height:300px;object-fit:cover}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-img img{width:100%;height:100%;object-fit:cover}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child h2{font-size:clamp(28px,2.4vw,36px)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-read{margin-top:16px}
.art-hub .art-card .art-topic{color:var(--gray-500)}
/* Featured hub card: white text box with the brand pattern as a faint blue outline */
.art-hub .art-grid:not(.is-filtered) .art-card:first-child{background:#fff;color:var(--brand-950);border:1px solid #E1DED6}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy{position:relative;isolation:isolate}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../patterns/main-thin-line.svg) 0 0/360px repeat;opacity:.08}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-topic{color:var(--brand-600)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child h2,.art-hub .art-grid:not(.is-filtered) .art-card:first-child h2 a{color:var(--brand-950)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child p{color:var(--gray-700)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-read{background:var(--brand-900);color:#fff}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child:hover .art-read{background:var(--brand-700)}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy::before{background:var(--brand-400,#5B8FD6);-webkit-mask:url(../patterns/main-thin-line.svg) 0 0/360px repeat;mask:url(../patterns/main-thin-line.svg) 0 0/360px repeat;opacity:.22}
.art-hub .art-grid:not(.is-filtered) .art-card:first-child .art-card-copy::before{background:var(--gray-400,#9CA3AF);opacity:.12}

/* doctor "read more": chevron button + link on the doctors list, and the profile page */
.doctors-page .doctor-portrait{position:relative}
.doctors-page .doc-photo{display:block}
.doctors-page .doc-more-btn{position:absolute;inset-inline-end:auto;left:12px;bottom:14px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);transition:.25s var(--ease)}
.doctors-page .doc-more-btn .ic{width:18px;height:18px}
.doctors-page .doc-more-btn:hover,.doctors-page .doc-more-btn:focus-visible{background:#fff;color:var(--brand-900);transform:translateX(-3px)}
.doctors-page .doc-full.has-more{cursor:pointer}
.doc-profile{padding-block:40px 72px}
.doc-profile-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
.doc-profile-photo{border-radius:var(--r-4xl);overflow:hidden;box-shadow:0 24px 50px -30px rgba(13,26,72,.5);position:sticky;top:96px}
.doc-profile-photo img{display:block;width:100%;height:auto;aspect-ratio:1}
.doc-profile h1{font-size:40px;margin:0 0 6px}
.doc-profile-role{font-size:19px;font-weight:600;color:var(--brand-800);margin:0 0 4px}
.doc-profile-deg{font-size:15px;color:var(--text-3);margin:0 0 26px;letter-spacing:.04em}
.doc-profile-copy p{font-size:17px;line-height:1.95;color:var(--gray-700);margin:0 0 14px}
.doc-profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media (max-width:860px){
  .doc-profile{padding-block:24px 56px}
  .doc-profile-grid{grid-template-columns:1fr;gap:22px}
  .doc-profile-photo{position:static}
  .doc-profile h1{font-size:30px}
    .doc-profile-copy p{font-size:16px}
}

/* language switch: the last menu item (inherits the menu colours in every header state) */
.nav a.nav-lang{display:inline-flex;align-items:center;gap:6px;margin-inline-start:6px;padding-inline:12px;font-size:14px;font-weight:600;letter-spacing:.02em;position:relative}
.nav a.nav-lang::before{content:"";position:absolute;inset-inline-start:-4px;top:28%;bottom:28%;width:1px;background:currentColor;opacity:.25}
.nav a.nav-lang .ic{width:17px;height:17px;stroke-width:1.6;opacity:.8}
.nav a.nav-lang[lang="ar"] span{font-family:var(--font-display);font-size:16px}
.nav a.nav-lang .nl-f{display:none}
.nav a.nav-lang[lang="ar"] span{font-family:var(--font-display);font-size:16px}
/* phone menu: a separate row under the links, with the full language name */
@media (max-width:900px){
  .nav a.nav-lang{margin:6px 0 0;padding-top:14px;border-top:1px solid var(--gray-200);border-radius:0;gap:10px;color:var(--brand-700)}
  .nav a.nav-lang::before{display:none}
  .nav a.nav-lang .nl-s{display:none}
  .nav a.nav-lang .nl-f{display:inline}
  .nav a.nav-lang .ic{width:18px;height:18px;opacity:1}
}

/* hero videos: on photos the line pattern and its navy reading fade sit between the photo and its
   colour cut-out; a clip is a different scene, so while it plays only the fade stays, on top of it (no pattern) */
.hero-bg{isolation:isolate}  /* keeps every slide layer (video included) under the scrim and the copy */
.hero[data-hero-mode="video"] .hero-slide.has-video::before{z-index:4;background:linear-gradient(to left,rgba(19,45,105,.48),rgba(19,45,105,.12) 46%,transparent 72%)}

/* phones: the homepage "read more" column is hidden (the options above already lead to the same pages) */
@media (max-width:600px){.home-help-read{display:none}}
/* doctors page: short qualification list under a doctor's summary */
.doctors-page .doc-quals{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.doctors-page .doc-quals li{position:relative;padding-inline-start:16px;font-size:14px;line-height:1.6;color:var(--gray-600)}
.doctors-page .doc-quals li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand-300)}
@media (max-width:600px){.doctors-page .doc-quals li{font-size:12.5px;line-height:1.55}}
/* doctors page: keep the name and role clear of the "read more" chevron */
.doctors-page .has-more .doctor-portrait h2,.doctors-page .has-more .doctor-portrait .role{padding-inline-end:58px}
@media (max-width:600px){.doctors-page .has-more .doctor-portrait h2,.doctors-page .has-more .doctor-portrait .role{padding-inline-end:44px}.doctors-page .doc-more-btn{width:30px;height:30px;bottom:10px}}
/* doctors page booking card (desktop): the heading fills the card's upper space, large display type */
@media (min-width:601px){
  .doctors-page .doctors-booking{justify-content:flex-start}
  .doctors-page .doctors-booking h2{margin-block:auto!important}
  .doctors-page .doctors-booking h2{font-size:clamp(40px,3.4vw,58px);line-height:1.12;font-weight:800}
  html[lang="en"] .doctors-page .doctors-booking h2{font-size:clamp(36px,3vw,50px);line-height:1.08}
  .doctors-page .doctors-booking h2 span{display:block}
  html[lang="en"] .doctors-page .doctors-booking h2{font-size:clamp(56px,5.2vw,88px);line-height:.98;letter-spacing:-.01em}
}