/* Theme «ندى» / Nada (store theme, app «theme-nada»). Fresh and light: the first screen is a grid of tiles (the name and
   the booking button, a large photograph, a close-up, and today's facts in one tile), soft corners, a pale step of the
   clinic's colour behind the tiles that matter, and small movements under the finger. Cairo for headings and text. No
   icons, no shadows at rest. Loaded after site.css (and after lab.css on a lab's page), with site/themes/premium.js,
   which gathers the hero's facts into .pm-facts. */
:root {
  --bg: #f6f7f4;
  --card: #ffffff;
  --step: #eceee9;
  --ink: #17201c;
  --ink-2: #44504a;
  --muted: #69736e;
  --line: #e1e4de;
  --r-sm: 14px; --r: 22px; --r-lg: 30px;
  --shadow-sm: none; --shadow: none; --shadow-lg: none;
  --font: 'Cairo', system-ui, sans-serif;
  --display: 'Cairo', system-ui, sans-serif;
  --soft: cubic-bezier(.3, .7, .2, 1);
}
body { font-size: 17px; line-height: 1.75; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.blob, .grid-dots, .book-bg, .cta-art, .eyebrow, .t-ico, .step-ico, .step-n, .ch-ico, .f-ico, .d-badge, .p-ico, .c-ico, .avatars,
.hero-points svg, .pillars li > span:first-child, .slot-group h4 svg, .art, .about-art > svg, .clist .go { display: none !important; }
.muted { color: var(--muted); }

/* buttons: fully round, a small press */
.btn { border-radius: 999px; box-shadow: none; font-weight: 700; transition: transform .35s var(--soft), background-color .3s; }
.btn-brand { box-shadow: none; }
.btn-brand:hover { transform: translateY(-2px); box-shadow: none; background: var(--brand-600); }
.btn-ghost { background: var(--card); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { transform: translateY(-2px); background: #fff; }
.btn:active { transform: scale(.97); }

/* header */
.top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
.top.scrolled { border: 0; box-shadow: none; }
.brand-logo { border-radius: 14px; border: 0; box-shadow: none; }
.nav a:hover { background: var(--card); color: var(--ink); }
.lang-switch { border: 0; background: var(--card); }

/* hero: one grid of tiles */
.hero { padding: 20px 0 56px; }
.hero-bg { display: none; }
.hero .hero-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px; align-items: stretch; max-width: 1280px; }
.hero-copy { grid-column: 1 / span 7; grid-row: 1 / span 2; background: var(--brand-100); border-radius: var(--r-lg); padding: clamp(32px, 4.6vw, 64px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; }
.hero-art { display: contents; }
.hero-photo { position: relative; inset: auto; grid-column: 8 / span 5; grid-row: 1; border-radius: var(--r-lg); box-shadow: none; min-height: 340px; overflow: hidden; }
.hero-photo::after { display: none; }
.hero-photo img { position: absolute; inset: 0; transition: transform 1.4s var(--soft); }
.hero-photo:hover img { transform: scale(1.04); }
.pm-detail { grid-column: 8 / span 2; grid-row: 2; margin: 0; border-radius: var(--r-lg); overflow: hidden; min-height: 220px; position: relative; background: var(--step); }
.pm-detail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--soft); }
.pm-detail:hover img { transform: scale(1.05); }
.pm-facts { grid-column: 10 / span 3; grid-row: 2; display: grid; gap: 4px; align-content: stretch; background: var(--card); border-radius: var(--r-lg); padding: 10px; }
.pm-facts:not(:has(.float:not([hidden]))) { display: none; }
.float { position: static; animation: none; display: block; max-width: none; background: transparent; border: 0; border-radius: var(--r); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px 16px; transition: background-color .3s; }
.float:hover { background: var(--bg); }
.float small { color: var(--muted); font-size: .82rem; }
.float b { font-size: 1.08rem; font-weight: 700; }
.status-pill { align-self: flex-start; background: var(--card); border: 0; box-shadow: none; margin-bottom: auto; }
.status-pill.open .dot { box-shadow: 0 0 0 4px rgb(31 179 107 / .16); }
.hero-title { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin-top: 48px; }
.hero-title span { background: none; color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box; }
.hero-tag { color: var(--ink-2); font-weight: 400; font-size: clamp(1.08rem, 1.4vw, 1.3rem); margin-top: 16px; }
.hero-points { color: var(--ink-2); }
@media (max-width: 960px) {
  .hero-copy { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .hero-photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .pm-detail { grid-column: 1 / span 5; grid-row: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .pm-facts { grid-column: 6 / -1; grid-row: auto; }
  .hero-photo { order: 1; } .pm-detail { order: 2; } .pm-facts { order: 3; }
  .hero-in:not(:has(.pm-facts .float:not([hidden]))) .pm-detail { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
/* no facts to show (no hours, no team): the close-up takes their place */
@media (min-width: 961px) { .hero-in:not(:has(.pm-facts .float:not([hidden]))) .pm-detail { grid-column: 8 / span 5; } }
@media (max-width: 520px) {
  .hero .hero-in { gap: 10px; }
  .hero-copy { padding: 26px 22px 28px; }
  .hero-title { margin-top: 28px; font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .float { padding: 10px 12px; } .float b { font-size: .98rem; }
}

/* sections */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec-tint { background: transparent; border: 0; }
.sec-head { margin-bottom: 40px; }
.sec h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 800; }
.sec-lead { color: var(--ink-2); font-weight: 400; }
.wrap { max-width: 1280px; }

/* services: soft tiles, the first one wider */
.tgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.tcard { background: var(--card); border: 0; border-radius: var(--r-lg); padding: 30px 28px 26px; transition: transform .45s var(--soft), background-color .3s; }
.tcard::after { display: none; }
.tcard:hover { transform: translateY(-4px); box-shadow: none; background: var(--brand-50); }
.tcard h3 { font-size: 1.3rem; margin: 0; }
.tcard p { color: var(--ink-2); }
.t-go { color: var(--brand-text); }

/* steps as three tinted tiles */
.how .wrap { background: var(--card); border-radius: var(--r-lg); padding-block: clamp(36px, 5vw, 64px); }
.steps { gap: 14px; }
.steps li { background: var(--bg); border: 0; border-radius: var(--r); box-shadow: none; padding: 30px 28px; }
.steps h3 { font-size: 1.3rem; margin-bottom: 8px; }
.steps p { color: var(--ink-2); }
@media (max-width: 760px) { .steps li { display: block; } }

/* the wide picture, framed like the tiles */
.pm-space { padding: 0 20px; }
.pm-space figure { margin: 0 auto; max-width: 1240px; aspect-ratio: 5 / 2; border-radius: var(--r-lg); overflow: hidden; background: var(--step); }
.pm-space img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--space-p, .5) * .08)); will-change: transform; }
@media (max-width: 640px) { .pm-space { padding: 0 16px; } .pm-space figure { aspect-ratio: 4 / 3; } }

/* team */
.dgrid { gap: 14px; }
.dcard { border: 0; border-radius: var(--r-lg); padding: 10px 10px 22px; text-align: start; transition: transform .45s var(--soft); }
.dcard:hover { transform: translateY(-4px); box-shadow: none; }
.d-photo { border-radius: var(--r); background: var(--brand-50); }
.dcard.has-photo .d-photo { aspect-ratio: 4 / 5; }
.d-photo svg { display: none; }
.d-photo .ini { background: var(--card); box-shadow: none; color: var(--brand-text); }
.d-photo .ini::after { display: none; }
.dcard h3, .dcard p { padding-inline: 12px; }

/* about: the close-up beside the words on a tinted tile */
.about { background: var(--brand-50); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 56px); gap: clamp(28px, 4vw, 64px); }
.about-photo { aspect-ratio: 4 / 5; max-width: none; border-radius: var(--r); box-shadow: none; }
.about-copy h2 span { color: var(--brand-text); }
.pillars li { background: var(--card); border: 0; }

/* articles and before/after */
.arcard, .case { border: 0; border-radius: var(--r-lg); }
.arcard:hover { box-shadow: none; }

/* booking on a pale tile */
.book-sec { background: transparent; color: var(--ink); }
.book-sec .wrap { background: var(--brand-50); border-radius: var(--r-lg); padding-block: clamp(32px, 5vw, 64px); }
.sec-head-light .sec-lead { color: var(--ink-2); }
.book { box-shadow: none; border-radius: var(--r-lg); }
.book-side { background: var(--bg); border: 0; }
.sum div, .chip-link { border: 0; background: var(--card); }
.pick { border-color: transparent; background: var(--bg); }
.pick:hover { background: var(--brand-50); border-color: transparent; }
.pick[aria-pressed="true"] { border-color: var(--brand); box-shadow: none; }
.field input, .field textarea { border-color: var(--line); }

/* hours and contact */
.hours-card, .contact-card { border: 0; box-shadow: none; border-radius: var(--r-lg); }
.hours tr > * { background: var(--bg); }
.hours tr.today > * { box-shadow: none; }
.clist a, .clist .citem { background: var(--bg); }
.socials a { border: 0; background: var(--bg); }
.map { border: 0; }
.map-open { box-shadow: none; }

/* closing tile and footer */
.cta-in { background: var(--brand); box-shadow: none; padding: clamp(36px, 5vw, 64px); }
.foot { background: var(--card); color: var(--ink-2); padding: 72px 0 32px; }
.foot-brand { flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-brand .brand-logo { border: 0; box-shadow: none; }
.foot-brand b { color: var(--ink); font-weight: 800; font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.1; }
.foot-brand small { color: var(--muted); }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }
.foot-links { align-self: end; }
.copy { border-top: 0; color: var(--muted); }
.mbar { box-shadow: none; border-radius: 999px; }

@media (max-width: 860px) { .about-art { order: 0; } }
@media (max-width: 640px) {
  .how .wrap, .book-sec .wrap { border-radius: 0; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dcard h3 { font-size: 1.05rem; } .d-photo { aspect-ratio: 1 / 1; } .d-photo .ini { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 1.6rem; }
}

/* motion (site/themes/premium.js): tiles rise gently, one after another */
.pm-motion .reveal { opacity: 1; transform: none; transition: none; }
.pm-motion .pm-r { opacity: 0; transform: translateY(20px) scale(.985); transition: opacity .8s var(--soft), transform .8s var(--soft); transition-delay: calc(var(--i, 0) * 60ms); }
.pm-motion .pm-on .pm-r { opacity: 1; transform: none; }
.pm-motion .hero-copy, .pm-motion .hero-photo, .pm-motion .pm-detail, .pm-motion .pm-facts { animation: nd-in .9s var(--soft) both; }
.pm-motion .hero-photo { animation-delay: .12s; } .pm-motion .pm-detail { animation-delay: .24s; } .pm-motion .pm-facts { animation-delay: .32s; }
@keyframes nd-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pm-space img { transform: none !important; } }

/* a lab's page (site/lab.html): the same light ground, face and soft corners */
html[data-theme="nada"] { --lb-r: 14px; }
html[data-theme="nada"] h1, html[data-theme="nada"] h2, html[data-theme="nada"] .lb-title { font-weight: 800; }