/* Shebl website. Every value comes from Brand Book v1.15 (section numbers in comments). */

/* ---------- fonts (7.4). Thmanyah files are embedded in the built site only. ---------- */
@font-face { font-family: "TS"; src: url(../fonts/ts-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TS"; src: url(../fonts/ts-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "TS"; src: url(../fonts/ts-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "TS"; src: url(../fonts/ts-900.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "TSD"; src: url(../fonts/tsd-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jali"; src: url(../fonts/jali-800.woff) format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: "HN"; src: url(../fonts/hn-400.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HN"; src: url(../fonts/hn-500.woff) format("woff"); font-weight: 500; font-display: swap; }
/* Helvetica Now Display Bold is still missing (open question 6); Text Bold stands in for big numbers. */
@font-face { font-family: "HN"; src: url(../fonts/hn-700.woff) format("woff"); font-weight: 700 900; font-display: swap; }

/* ---------- tokens (7.3, 7.6, 7.7, 7.13) ---------- */
:root {
  --night: #0B0B0C; --coal: #1A1C1C; --chalk: #F5F5F2; --ash: #B9C0C0;
  --teal: #00A6A6; --lteal: #91D4D3;
  --paper: #F0EFEC; --white: #FFFFFF; --ink: #111111; --lead: #5E5E5E; --dteal: #00777A;
  --line: rgba(245, 245, 242, .10); --pline: rgba(17, 17, 17, .10);
  --focus: #7CC4FF; --focus-paper: #2563EB;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --body: "TS", Tahoma, sans-serif; --title: "TSD", "TS", serif; --num: "TS", sans-serif;
  --gutter: 20px; --sec: 64px; --cardpad: 24px;
  --hh: 136px; --hh-slim: 64px;
}
:lang(en) { --body: "HN", "Helvetica Neue", Arial, "TS", sans-serif; --title: "Jali", "HN", sans-serif; --num: "HN", "Helvetica Neue", Arial, sans-serif; }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 80px; --sec: 96px; --cardpad: 32px; --hh: 152px; --hh-slim: 72px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh-slim) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--night); color: var(--chalk); font-family: var(--body); font-size: 1rem; line-height: 1.8; letter-spacing: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (min-width: 1200px) { body { font-size: 1.125rem; } }
:lang(en) body, body:lang(en) { line-height: 1.6; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
bdi[dir="ltr"] { unicode-bidi: isolate; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { flex: none; }
[dir="ltr"] .fwd { transform: scaleX(-1); }

/* focus (12.2): 2px ring, 2px away, never hidden */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.paper :focus-visible, .island :focus-visible { outline-color: var(--focus-paper); }

.skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; background: var(--chalk); color: var(--night); padding: 12px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 16px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { padding-block: var(--sec) 0; }
.sec-b { padding-bottom: var(--sec); }
main { padding-top: var(--hh); }
.measure { max-width: 680px; }

/* type (7.4). Arabic sizes; English overrides below. */
.h1 { font-family: var(--title); font-weight: 700; font-size: 2.125rem; line-height: 1.3; }
.h2 { font-family: var(--title); font-weight: 700; font-size: 1.625rem; line-height: 1.35; margin-bottom: 12px; }
.h3 { font-family: var(--body); font-weight: 700; font-size: 1.25rem; line-height: 1.5; display: block; }
@media (min-width: 1200px) { .h1 { font-size: 3rem; } .h2 { font-size: 2rem; } .h3 { font-size: 1.375rem; } }
:lang(en) .h1 { font-family: "Jali", "HN", sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.15; }
:lang(en) .h2 { font-family: "Jali", "HN", sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
:lang(en) .h3 { font-size: 1.25rem; line-height: 1.35; }
@media (min-width: 1200px) { :lang(en) .h1 { font-size: 2.75rem; } :lang(en) .h2 { font-size: 1.875rem; } }
.lbl, .src { font-weight: 500; font-size: .875rem; line-height: 1.6; color: var(--ash); }
:lang(en) .lbl, :lang(en) .src { font-size: .8125rem; line-height: 1.5; }
.muted { color: var(--ash); }
.lead { color: var(--lead); }
.big { font-family: var(--num); font-weight: 900; font-size: 2.5rem; line-height: 1.1; color: var(--teal); }
@media (min-width: 1200px) { .big { font-size: 3.5rem; } }
:lang(en) .big { font-weight: 700; }

/* ---------- buttons (9.1) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 12px; font-weight: 700; font-size: 1.125rem; line-height: 1; white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease); }
:lang(en) .btn { font-size: 1rem; }
.btn-primary { background: var(--teal); color: var(--night); }
.btn-primary:hover { background: #00B8B8; }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { border: 1px solid var(--chalk); color: var(--chalk); }
.btn-secondary:hover { background: rgba(245, 245, 242, .08); }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 700; font-size: 1.125rem; }
:lang(en) .link { font-size: 1rem; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-paper { color: var(--dteal); }
.icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; flex: none; transition: background-color 150ms var(--ease); }
.icon-btn:hover { background: rgba(245, 245, 242, .06); }
.icon-btn-line { border: 1px solid var(--line); }

/* «تواصل معنا» with its reply tab (9.1, T1): a quiet tab peeking from behind the top-left corner */
.cta { position: relative; display: inline-block; isolation: isolate; margin-top: 24px; }
.cta .btn { position: relative; z-index: 1; min-width: 200px; }
.t1 { position: absolute; z-index: 0; left: 10px; top: -24px; height: 40px; padding: 6px 14px 0; border-radius: 12px 12px 0 0; background: rgba(245, 245, 242, .07); font-family: "TS", sans-serif; font-weight: 500; font-size: 13px; line-height: 1; color: var(--ash); white-space: nowrap; pointer-events: none; }
:lang(en) .t1 { font-family: "HN", sans-serif; font-size: 12px; }
.cta-full { display: block; }
.cta-full .btn { width: 100%; }

/* ---------- header (8, 7.13): main logo at the top, round logo when slim ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hh); background: rgba(11, 11, 12, .96); border-bottom: 1px solid var(--line); transition: height 250ms var(--ease); }
@supports (backdrop-filter: blur(8px)) { .hdr { background: rgba(11, 11, 12, .9); backdrop-filter: blur(8px); } }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 40px; }
.logo { position: relative; display: block; width: 96px; height: 112px; flex: none; transition: width 250ms var(--ease), height 250ms var(--ease); }
.logo-main { position: absolute; inset-inline-start: 0; top: 0; width: 96px; height: 112px; transform-origin: top; transition: opacity 200ms ease-out, transform 250ms var(--ease); }
[dir="rtl"] .logo-main { transform-origin: right top; }
[dir="ltr"] .logo-main { transform-origin: left top; }
.logo-mark { position: absolute; inset-inline-start: 0; top: 0; width: 48px; height: 48px; opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity 250ms ease-out 80ms, transform 300ms var(--ease) 80ms; }
.hdr.slim { height: var(--hh-slim); }
.hdr.slim .logo { width: 48px; height: 48px; }
.hdr.slim .logo-main { opacity: 0; transform: scale(.5); }
.hdr.slim .logo-mark { opacity: 1; transform: none; }
@media (max-width: 1199px) {
  .hdr.slim .logo { width: 40px; height: 40px; }
  .logo-mark { width: 40px; height: 40px; }
}
.nav { display: none; flex: 1; gap: 32px; font-weight: 500; font-size: 1rem; }
.nav a { position: relative; padding-block: 12px; transition: color 150ms var(--ease); }
.nav a:hover { color: var(--teal); }
.nav a[aria-current="page"] { color: var(--teal); }
.hdr-cta { display: none; }
.hdr-cta .cta { margin-top: 0; }
.hdr .lang { display: none; font-weight: 500; font-size: 1rem; padding: 12px 4px; }
.hdr .lang:hover { color: var(--teal); }
.menu-btn { margin-inline-start: auto; }
@media (min-width: 1200px) {
  .nav, .hdr-cta { display: flex; }
  .hdr .lang { display: block; }
  .menu-btn { display: none; }
}

/* drawer (8): opens from the reading-start side */
.drawer { position: fixed; inset: 0 auto 0 0; inset-inline-start: 0; inset-inline-end: auto; margin: 0; width: min(360px, 88vw); max-width: none; height: 100%; max-height: none; background: var(--coal); color: var(--chalk); border: 0; border-inline-end: 1px solid var(--line); padding: 16px 20px 32px; display: none; flex-direction: column; gap: 24px; transform: translateX(var(--from, 100%)); transition: transform 250ms var(--ease); }
[dir="rtl"] .drawer { inset: 0 0 0 auto; --from: 100%; }
[dir="ltr"] .drawer { --from: -100%; }
.drawer[open] { display: flex; }
.drawer.in { transform: none; }
.drawer::backdrop { background: rgba(0, 0, 0, .6); }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a { padding: 12px 0; font-weight: 700; font-size: 1.25rem; border-bottom: 1px solid var(--line); }
.drawer-nav a[aria-current="page"] { color: var(--teal); }
.drawer-cta .cta { margin-top: 24px; }
.drawer-lang .lang { display: inline-block; padding: 12px 0; font-weight: 500; }

/* ---------- contact sheet (10, contact-v2) ---------- */
.sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 90vh; background: var(--coal); color: var(--chalk); border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: 12px 20px calc(32px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 250ms var(--ease); }
.sheet.in { transform: none; }
.sheet.out { transition: transform 150ms ease-in; }
.sheet::backdrop { background: rgba(0, 0, 0, .6); }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(245, 245, 242, .3); margin: 0 auto 12px; }
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.sheet-title { font-family: var(--body); font-weight: 700; font-size: 1.375rem; line-height: 1.5; }
.sheet-sub { font-weight: 500; font-size: .875rem; color: var(--ash); }
.choice { display: flex; align-items: center; gap: 12px; background: var(--night); border-radius: 12px; padding: 12px 12px 12px 16px; min-height: 72px; margin-bottom: 12px; }
[dir="rtl"] .choice { padding: 12px 16px 12px 12px; }
.choice-main { flex: 1; display: flex; align-items: center; gap: 16px; min-height: 48px; border-radius: 8px; }
.choice-main:hover .choice-lbl { color: var(--teal); }
.choice-txt { flex: 1; display: flex; flex-direction: column; }
.choice-lbl { font-weight: 700; font-size: 1.125rem; line-height: 1.5; transition: color 150ms var(--ease); }
.choice-val { font-weight: 500; font-size: .875rem; line-height: 1.6; color: var(--ash); text-align: start; }
[dir="rtl"] .choice-val { text-align: right; }
.copy .ic-done { display: none; color: #3DD68C; }
.copy.done .ic-copy { display: none; }
.copy.done .ic-done { display: block; }
.toast { min-height: 24px; text-align: center; font-weight: 500; font-size: .875rem; color: var(--chalk); }
@media (min-width: 768px) {
  /* desktop and tablet: the same sheet as a centred panel (Claude's call, waiting for the owner's look) */
  .sheet { inset: 0; margin: auto; width: 440px; height: fit-content; border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 20px; transform: translateY(16px); opacity: 0; transition: transform 250ms var(--ease), opacity 200ms ease-out; }
  .sheet.in { transform: none; opacity: 1; }
  .sheet.out { transition: transform 150ms ease-in, opacity 150ms ease-in; }
  .sheet-handle { display: none; }
}

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); margin-top: var(--sec); padding: 32px 0 48px; }
.ftr-bar { padding-bottom: 136px; }
.ftr-in { display: flex; flex-direction: column; gap: 24px; }
.ftr-logo { width: 96px; height: 112px; }
.ftr-col { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: .9375rem; color: var(--ash); }
.ftr-col a { padding-block: 8px; min-height: 40px; }
.ftr-col a:hover { color: var(--chalk); }
@media (min-width: 1200px) {
  .ftr { padding: 48px 0; }
  .ftr-bar { padding-bottom: 48px; }
  .ftr-in { flex-direction: row; align-items: center; gap: 48px; }
  .ftr-end { margin-inline-start: auto; }
  .ftr-col { font-size: 1rem; }
}

/* fixed bottom bar on phones and tablets (8) */
.bar { position: fixed; inset: auto 0 0 0; z-index: 40; padding: 28px var(--gutter) calc(16px + env(safe-area-inset-bottom)); background: var(--night); border-top: 1px solid var(--line); }
.bar .cta { margin-top: 0; }
@media (min-width: 1200px) { .bar { display: none; } }

/* ---------- cards (9.2) ---------- */
.card { background: var(--coal); border-radius: 16px; padding: var(--cardpad); }
.wcard { background: var(--white); border-radius: 16px; color: var(--ink); }
.ico { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: rgba(245, 245, 242, .06); }
.ico .i { width: 26px; height: 26px; }
@media (min-width: 1200px) { .ico { width: 56px; height: 56px; } .ico .i { width: 30px; height: 30px; } }
.ico-paper { background: var(--white); color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: var(--lteal); color: var(--night); font-weight: 700; font-size: .8125rem; line-height: 1; padding: 7px 12px; border-radius: 999px; }
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.blk { position: absolute; background: var(--teal); border-radius: 16px 16px 0 0; }

/* ---------- Home: hero (H-1 to H-3) ---------- */
.hero { padding-top: 40px; display: flex; flex-direction: column; gap: 48px; }
.campaign span { display: block; }
.campaign { font-size: min(2.125rem, 9.4vw); }
:lang(en) .campaign { font-size: min(2rem, 7.4vw); }
@media (min-width: 1200px) { .campaign { font-size: 3rem; } :lang(en) .campaign { font-size: 2.75rem; } }
.hero-body { margin: 16px 0 16px; text-wrap: pretty; }
.hero-actions { display: flex; flex-direction: column; gap: 16px; }
.hero-actions .cta { display: block; margin-top: 24px; }
.hero-actions .btn { width: 100%; }
.hero-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (min-width: 768px) {
  .hero-actions { flex-direction: row; align-items: flex-end; }
  .hero-actions .cta, .hero-actions .btn { width: auto; }
  .hero-actions .btn { min-width: 220px; }
  .hero-vids { gap: 32px; width: 100%; max-width: 600px; margin-inline: auto; }
}
@media (min-width: 1200px) {
  .hero { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; padding-top: 64px; }
  .hero-txt { width: 520px; flex: none; }
  .hero-body { margin: 24px 0 32px; }
  .hero-vids { gap: 40px; width: 560px; flex: none; }
}

/* showcase video (9.6) */
.vid { min-width: 0; }
.vframe { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--coal); }
.vframe video { width: 100%; height: 100%; object-fit: cover; }
/* the mute button sits bottom right in both languages: video controls never mirror (12.3) */
.vmute { position: absolute; right: 8px; bottom: 8px; width: 48px; height: 48px; border-radius: 999px; background: rgba(11, 11, 12, .6); color: var(--chalk); display: flex; align-items: center; justify-content: center; transition: background-color 150ms var(--ease); }
.vmute:hover { background: rgba(11, 11, 12, .8); }
.vmute .ic-sound { display: none; }
.vmute[aria-pressed="true"] .ic-sound { display: block; }
.vmute[aria-pressed="true"] .ic-muted { display: none; }
.vplay { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 999px; background: rgba(11, 11, 12, .6); color: var(--chalk); display: flex; align-items: center; justify-content: center; }
.vplay[hidden] { display: none; }
.vid figcaption { display: flex; flex-direction: column; }
.vname { font-weight: 700; font-size: 1rem; line-height: 1.5; margin-top: 12px; }
.vstats { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.vstats > span { display: flex; align-items: center; gap: 6px; }
.vid .src { margin-top: 6px; font-size: .8125rem; }
@media (min-width: 768px) {
  .vstats { flex-direction: row; gap: 12px; }
  .vname { font-size: 1.125rem; margin-top: 16px; }
}
@media (min-width: 1200px) { .vmute { right: 12px; bottom: 12px; } }

/* ---------- Home: doctor cards (H-4, M1 on phones) ---------- */
.dcards { display: grid; gap: 16px; margin-top: 24px; }
.dcard { position: relative; overflow: hidden; padding: 0; }
.dcard-pic { position: relative; height: 230px; }
.dcard-pic .blk { left: 24px; right: 24px; bottom: 0; height: 150px; }
.dcard-pic .cut { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 214px; height: auto; }
.dcard-txt { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 2px; }
.dcard .big { margin-top: 8px; }
.dcard .unit { font-size: 1rem; }
.dcard .link { margin-top: 8px; }
@media (min-width: 768px) { .dcards { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1200px) {
  .dcards { margin-top: 40px; }
  .dcard { height: 360px; }
  .dcard-pic { position: absolute; inset: 0; height: auto; }
  .dcard-pic .blk { left: auto; right: auto; inset-inline-end: 32px; width: 220px; height: 170px; }
  .dcard-pic .cut { left: auto; transform: none; inset-inline-end: 32px; width: 220px; }
  .dcard-txt { position: relative; padding: 40px 32px; width: 320px; }
  .dcard .unit { font-size: 1.125rem; }
  .dcard .link { margin-top: 16px; }
}

/* results band (H-5) */
.band { margin-top: var(--sec); padding-block: 64px; border-block: 1px solid var(--line); text-align: center; }
.band-n { font-family: var(--num); font-weight: 900; font-size: 4rem; line-height: 1; color: var(--teal); }
:lang(en) .band-n { font-weight: 700; }
.band-lbl { font-weight: 700; font-size: 1.125rem; line-height: 1.5; margin-top: 12px; }
.band .src { margin-top: 6px; }
@media (min-width: 1200px) { .band { padding-block: 96px; } .band-n { font-size: 6rem; } .band-lbl { font-size: 1.375rem; margin-top: 16px; } }

/* Paper island (7.3) */
.island { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 24px; }
.island .lead, .island p { color: var(--lead); }
.island .h2, .island .h3 { color: var(--ink); }
@media (min-width: 1200px) { .island { padding: 64px; } }

/* «كيف نعمل» month strip (H-6) */
.month { margin: 24px 0 0; }
.mstrip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; direction: inherit; }
.day { height: 36px; border-radius: 3px; background: var(--white); transition: opacity 260ms var(--ease), transform 260ms var(--ease), background-color 400ms ease-out, box-shadow 400ms ease-out; }
.day.on { background: var(--teal); }
.mlabels { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; margin-top: 8px; font-weight: 500; font-size: .875rem; line-height: 1.6; color: var(--lead); }
.m-start, .m-end { display: none; }
.m-shoot { grid-column: 1 / -1; color: var(--dteal); font-weight: 700; }
.steps { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step-t { color: var(--ink); font-size: 1.125rem; }
.step-d { display: block; color: var(--lead); font-size: 1rem; line-height: 1.6; margin-top: 2px; }
@media (min-width: 768px) {
  .mstrip, .mlabels { gap: 6px; }
  .day { height: 48px; border-radius: 8px; }
  .m-start { display: block; grid-column: 1 / span 8; justify-self: start; white-space: nowrap; grid-row: 1; }
  .m-end { display: block; grid-column: 23 / -1; justify-self: end; white-space: nowrap; grid-row: 1; }
  .m-shoot { grid-column: 11 / span 1; grid-row: 1; justify-self: center; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 48px; }
  .step-t { font-size: 1.375rem; }
  .step-d { font-size: 1.125rem; }
}
@media (min-width: 1200px) { .month { margin-top: 40px; } }

/* services and who (H-7, H-8) */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.svc-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.svc-card .h3 { font-size: 1rem; }
.svc-card:last-child:nth-child(odd) { grid-column: span 2; justify-self: center; width: calc(50% - 6px); }
.who { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.who-card { display: flex; gap: 16px; align-items: flex-start; }
.who-card p { margin-top: 4px; font-size: 1rem; line-height: 1.6; }
@media (min-width: 768px) {
  .svc { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .svc-card { width: calc((100% - 48px) / 3); padding: var(--cardpad); gap: 20px; }
  .svc-card:last-child:nth-child(odd) { width: calc((100% - 48px) / 3); }
  .svc-card .h3 { font-size: 1.25rem; }
  .who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .who-card { flex-direction: column; gap: 20px; }
}
@media (min-width: 1200px) {
  .svc, .who { margin-top: 40px; }
  .svc-card, .svc-card:last-child:nth-child(odd) { width: calc((100% - 72px) / 4); }
  .svc-card .h3 { font-size: 1.375rem; }
  .who-card p { font-size: 1.125rem; line-height: 1.8; }
}

/* journal cards */
.arts { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.acard { position: relative; overflow: hidden; }
.acover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #E2E1DD; }
.acard-txt { padding: 16px 20px 20px; }
.ameta { font-weight: 500; font-size: .8125rem; line-height: 1.6; color: var(--lead); }
.acard .h3 { color: var(--ink); font-size: 1.125rem; margin-top: 4px; }
.acard:hover .h3 { color: var(--dteal); }
.acard-compact { display: flex; align-items: center; gap: 16px; padding: 12px; }
.acard-compact .acover { width: 96px; height: 72px; border-radius: 12px; aspect-ratio: auto; }
.acard-compact .acard-txt { padding: 0; }
.acard-compact .h3 { font-size: 1rem; }
.all-arts { margin-top: 20px; }
@media (min-width: 768px) {
  .arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .acard-compact { display: block; padding: 0; }
  .acard-compact .acover { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
  .acard-compact .acard-txt { padding: 20px 24px 24px; }
  .acard-compact .h3 { font-size: 1.25rem; }
  .all-arts { margin-top: 32px; }
}
@media (min-width: 1200px) { .arts { margin-top: 40px; } .acard .h3 { font-size: 1.375rem; } }

/* closing (H-11) */
.closing { text-align: center; }
.closing-p { color: var(--ash); max-width: 680px; margin: 8px auto 16px; }
.closing .cta .btn { min-width: 240px; }
@media (max-width: 767px) { .closing .cta { display: block; } .closing .cta .btn { width: 100%; } }

/* ---------- Our work (W-4 to W-6) ---------- */
.page-top { padding-top: 48px; }
.page-top .muted { margin-top: 12px; }
@media (min-width: 1200px) { .page-top { padding-top: 96px; } .page-top .muted { margin-top: 16px; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.filter { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); font-weight: 500; font-size: 1rem; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.filter:hover { border-color: var(--ash); }
.filter[aria-pressed="true"] { background: var(--chalk); color: var(--night); border-color: var(--chalk); }
.cgrid { display: grid; gap: 16px; }
.ccard { position: relative; overflow: hidden; padding: 0; }
.ccard[hidden] { display: none; }
.ccard-pic { position: relative; height: 230px; }
.ccard-pic .blk { left: 24px; right: 24px; bottom: 0; height: 150px; }
.ccard-pic .cut { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 214px; height: auto; }
.ccard-txt { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 4px; }
.ccard .pills { margin-bottom: 8px; }
.ccard .big { margin-top: 8px; }
.story-line { color: var(--ash); font-size: 1rem; line-height: 1.6; }
.ccard .link { margin-top: 8px; }
.empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty[hidden] { display: none; }
.deck { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.deck .link .lbl { font-weight: 500; }
@media (min-width: 768px) { .cgrid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1200px) {
  .ccard { height: 420px; }
  .ccard-pic { position: absolute; inset: 0; height: auto; }
  .ccard-pic .blk { left: auto; right: auto; inset-inline-end: 32px; width: 230px; height: 180px; }
  .ccard-pic .cut { left: auto; transform: none; inset-inline-end: 32px; width: 230px; }
  .ccard-txt { position: relative; padding: 32px; width: 340px; gap: 6px; }
  .ccard .link { margin-top: 12px; }
  .deck { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 64px; padding: 32px 0 0; }
}

/* ---------- doctor page (W-7 to W-13) ---------- */
.dhero { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; }
.crumb { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: .875rem; color: var(--ash); margin-bottom: 16px; }
.crumb a { padding-block: 12px; }
.crumb a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 4px; }
.dspec { color: var(--ash); margin-top: 8px; }
.socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.soc { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line); font-weight: 500; font-size: 1rem; transition: border-color 150ms var(--ease); }
.soc:hover { border-color: var(--ash); }
.portrait { position: relative; width: min(100%, 420px); aspect-ratio: 420 / 470; margin-inline: auto; }
.portrait .blk { left: 0; right: 0; bottom: 0; height: 68%; }
.portrait .cut { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.rule { border-top: 1px solid var(--line); }
.bento { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.bento .card { display: flex; flex-direction: column; justify-content: center; }
.bento-main { grid-column: auto; }
.bento-n { font-family: var(--num); font-weight: 900; font-size: 3.5rem; line-height: 1; color: var(--teal); padding-inline-start: 4px; }
.bento-n2 { font-family: var(--num); font-weight: 900; font-size: 2.5rem; line-height: 1; color: var(--teal); padding-inline-start: 2px; }
:lang(en) .bento-n, :lang(en) .bento-n2 { font-weight: 700; }
.bento-u { font-weight: 700; font-size: 1rem; line-height: 1.5; margin-top: 8px; }
.bento + .src { margin-top: 16px; text-wrap: pretty; }
.src, .muted, .closing-p, .hero-body, .prose p { text-wrap: pretty; }
.story { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.story-card { padding: 24px; }
.kicker { font-weight: 700; font-size: .875rem; line-height: 1; color: var(--dteal) !important; margin-bottom: 12px; }
.story-card p:last-child { margin-top: 8px; font-size: 1rem; line-height: 1.7; }
.vrow { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.vrow .vid { width: min(300px, 80vw); }
.vrow-txt { text-align: center; order: -1; }
.quote blockquote { font-family: var(--title); font-size: 1.5rem; line-height: 1.5; }
.patient { display: flex; flex-direction: column; gap: 16px; margin-top: var(--sec); }
.socials-tight { margin-top: 0; }
@media (min-width: 768px) {
  .story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .bento { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; min-height: 320px; }
  .bento-main { grid-column: auto; grid-row: span 2; }
}
@media (min-width: 1200px) {
  .dhero { flex-direction: row; justify-content: space-between; align-items: flex-end; padding-top: 72px; min-height: 520px; }
  .dhero-txt { width: 560px; padding-bottom: 72px; }
  .dspec { font-size: 1.125rem; }
  .crumb { margin-bottom: 24px; }
  .portrait { width: 420px; margin: 0; }
  .socials { margin-top: 32px; }
  .bento { min-height: 400px; margin-top: 32px; }
  .bento .card { padding: 32px; }
  .bento-n { font-size: 6rem; }
  .bento-n2 { font-size: 3.5rem; }
  .bento-u { font-size: 1.375rem; }
  .story { margin-top: 40px; }
  .story-card { padding: 32px; }
  .story-card p:last-child { font-size: 1.125rem; line-height: 1.8; }
  .vrow { flex-direction: row; justify-content: center; gap: 64px; }
  .vrow .vid { width: 300px; }
  .vrow-txt { text-align: start; order: 0; }
  .patient { flex-direction: row; justify-content: space-between; align-items: center; padding: 32px; }
}

/* ---------- article and text pages on Paper (J-2) ---------- */
.paper { background: var(--paper); color: var(--ink); padding: 32px 0 64px; }
.prose-wrap { max-width: 680px; }
.crumb-paper { color: var(--lead); margin-bottom: 8px; }
.crumb-paper a:hover { color: var(--ink); }
.draft { display: inline-block; background: #CDEDEC; color: #00474A; font-weight: 500; font-size: .8125rem; line-height: 1; padding: 8px 12px; border-radius: 999px; margin-bottom: 16px; }
.art-h1 { color: var(--ink); }
.art-by { font-weight: 700; font-size: .9375rem; margin-top: 16px; }
.paper .ameta { margin-top: 2px; }
.art-cover { width: 100%; height: auto; border-radius: 16px; margin: 24px 0 8px; aspect-ratio: 16 / 9; object-fit: cover; }
.prose { font-size: 1.0625rem; line-height: 1.9; }
.prose p { margin-top: 16px; color: var(--ink); }
.prose h2 { font-family: var(--title); font-weight: 700; font-size: 1.375rem; line-height: 1.4; margin-top: 40px; color: var(--ink); }
:lang(en) .prose h2 { font-family: "Jali", "HN", sans-serif; font-weight: 800; line-height: 1.25; }
.prose a { color: var(--dteal); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-inline-start: 24px; margin-top: 16px; }
.prose li { margin-top: 6px; }
:lang(en) .prose { font-size: 1rem; line-height: 1.7; }
@media (min-width: 1200px) {
  .paper { padding: 64px 0 96px; }
  .prose { font-size: 1.125rem; line-height: 1.9; }
  .prose h2 { font-size: 1.625rem; margin-top: 48px; }
  .art-cover { margin: 32px 0 16px; }
}
.has-paper .ftr { margin-top: 0; }

/* journal list */
.arts-list { margin-top: 0; }
.arts-list .acard-txt { padding: 20px 24px 24px; }
@media (min-width: 768px) and (max-width: 1199px) { .arts-list { grid-template-columns: 1fr 1fr; } }

/* 404 */
.nf { text-align: center; padding-block: 64px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.nf-code { font-family: var(--num); font-weight: 900; font-size: 5rem; line-height: 1; color: var(--teal); }
.nf .btn { margin-top: 16px; }
@media (min-width: 1200px) { .nf { padding-top: 128px; } .nf-code { font-size: 8rem; } }

/* ---------- motion (7.13). Hidden states apply only when the script runs. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv, .js .rv-v { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .js .rv-v { transform: none; transition: opacity 500ms ease-out; }
  .js .rv.in, .js .rv-v.in { opacity: 1; transform: none; }
  .js .slide { opacity: 0; transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .slide.from-r { transform: translateX(48px); }
  .js .slide.from-l { transform: translateX(-48px); }
  .js .slide.in { opacity: 1; transform: none; }
  .js .stagger > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .js .stagger.in > * { opacity: 1; transform: none; }
  .js .stagger.in > *:nth-child(2) { transition-delay: 80ms; }
  .js .stagger.in > *:nth-child(3) { transition-delay: 160ms; }
  .js .stagger.in > *:nth-child(4) { transition-delay: 240ms; }
  .js .stagger.in > *:nth-child(5) { transition-delay: 320ms; }
  .js .stagger.in > *:nth-child(6) { transition-delay: 400ms; }
  .js .stagger.in > *:nth-child(7) { transition-delay: 480ms; }
  .js .mstrip .day { opacity: 0; transform: scale(.6); }
  .js .mstrip.in .day { opacity: 1; transform: none; }
  .js .m-shoot { opacity: 0; transition: opacity 300ms ease-out 200ms; }
  .js .month.lit .m-shoot { opacity: 1; }
  .js .month.lit .day.on { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(0, 166, 166, .18); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 100ms !important; transition-delay: 0ms !important; animation: none !important; }
  .js .rv, .js .rv-v, .js .slide, .js .stagger > * { transform: none !important; }
  .logo-mark { transform: none !important; }
}
.sec-list { padding-top: 32px; }
@media (min-width: 1200px) { .sec-list { padding-top: 48px; } }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; overflow-x: clip; }