/* ==========================================================================
   Growth Path («مسیر رشد») — shared design system for fa/ (rtl) and en/ (ltr)
   Plain CSS, no build step, no libraries. Approved concept:
   design/concepts/08-growth-path/index.html. Brief: docs/implementation-08.md.

   Direction: everything uses logical properties (inline/block). The few
   rules that must know the direction (clip-path wipes, transform origins,
   mirrored icons) live together in section 18 "Direction".

   Motion: js/main.js writes --p (0..1) on each [data-scrub] element and
   adds .is-done when it has fully unfolded; it adds .seen to .reveal
   elements once (IntersectionObserver). Every hidden/folded start state is
   scoped to .is-enhanced (set by main.js), so with JS off — or if it fails —
   all content is visible in its final state.

   Sections
    1 Fonts            8 Hero + page hero       15 Inner-page parts
    2 Tokens           9 Stops (sections)       16 Footer + sticky bar
    3 Base            10 Cards that unfold      17 Breakpoints
    4 Buttons, chips  11 Stickers (photos,      18 Direction
    5 Header             doctor's ID card)      19 Hover, reduced motion
    6 Phone menu      12 Hours, map, contact    20 English pages
    7 Path, kite,     13 FAQ accordion
      ruler           14 Article cards, CTA,
                         prose
   ========================================================================== */

/* 1. Fonts — self-hosted (assets/fonts, OFL licences alongside). No CDN. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lalezar";
  src: url("../assets/fonts/Lalezar-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Lalezar";
  src: url("../assets/fonts/Lalezar-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* English display face (used by en/ pages only; never downloaded on fa/). */
@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/Baloo2-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/Baloo2-latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/Baloo2-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/Baloo2-latin-ext-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* palette (AA-checked: ink 11:1, ink-soft 5.8:1, orange-text 5.3:1 on paper) */
  --paper: #FBF6EC;
  --sheet: #FFFAF1;
  --ink: #1F3D2B;
  --ink-soft: #4F6655;
  --line: rgba(31, 61, 43, .14);
  --line-strong: rgba(31, 61, 43, .28);
  --orange: #FF8A3D;          /* fills only — never text on paper */
  --orange-text: #A84A0C;     /* tangerine for small text on paper */
  --on-orange: #24160C;
  --orange-wash: rgba(255, 138, 61, .14);
  --sky: #9AD1F5;
  --sky-ink: #143047;
  --clay: #E9D8C4;
  --open: #2F8F5B;
  --error: #A3221A;

  /* shape + depth: one radius family, one shadow family */
  --r: 24px;
  --r-sm: 16px;
  --r-lg: 30px;
  --pill: 999px;
  --shadow: 0 22px 60px rgba(31, 61, 43, .14);
  --shadow-sm: 0 12px 32px rgba(31, 61, 43, .10);

  /* motion tokens (BRIEF-ROUND2) */
  --ease: cubic-bezier(.2, 0, 0, 1);            /* standard */
  --ease-enter: cubic-bezier(.05, .7, .1, 1);   /* entrances */
  --ease-exit: cubic-bezier(.3, 0, .8, .15);    /* exits */
  --spring: linear(0, .167, .47, .74, .918, 1.01, 1.04, 1.04, 1.03, 1.02, 1.01, 1, .998, .998, 1);
  --t-press: 90ms;
  --t-ui: 260ms;
  --t-enter: 420ms;
  --t-exit: 280ms;
  --stagger: 50ms;
  --travel: 18px;

  /* type */
  --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Lalezar", "Vazirmatn", system-ui, sans-serif;
  --display-weight: 400;
  --display-lh: 1.25;
  --fs-xs: 13px;
  --fs-sm: 16px;         /* card copy: 16px on phones, 15px from 760px */
  --fs-md: 17px;

  /* geometry (phone first). Content box = wrap minus rail (start) and ruler-safe (end). */
  --gutter: 16px;
  --wrap: min(1180px, calc(100% - 2 * var(--gutter)));
  --rail: 44px;          /* the path's lane at the inline-start edge of every .wrap */
  --rail-gap: 6px;       /* clear space between the lane and text */
  --ruler-w: 20px;
  --ruler-edge: 6px;
  --ruler-safe: 18px;    /* inline-end padding so the fixed ruler never covers text */
  --head-h: 68px;
  --dot-y: 44px;         /* stop dot offset from the top of each .stop (read by main.js) */
  --kite: 36px;
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--head-h) + 20px);
}
/* phones: focused elements and #anchors stop above the sticky bottom bar */
@media (max-width: 759.98px) {
  html { scroll-padding-block-end: calc(96px + env(safe-area-inset-bottom)); }
}

body {
  margin: 0;
  min-inline-size: 320px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0;
  overflow-wrap: break-word;
  background:
    radial-gradient(circle at 18% 4%, rgba(154, 209, 245, .30), transparent 26rem),
    linear-gradient(90deg, rgba(31, 61, 43, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31, 61, 43, .028) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 28px 28px, 28px 28px, auto;
  padding-block-end: calc(92px + env(safe-area-inset-bottom)); /* room for the sticky phone bar */
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: 0;
  text-wrap: balance;
}
h3 { font-size: 18px; line-height: 1.55; font-weight: 900; text-wrap: balance; }
/* no single-word last lines in running text */
p, li, dd, figcaption { text-wrap: pretty; }
.nw { white-space: nowrap; }
img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; text-decoration: none; }
p a, li a, dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, label, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(255, 138, 61, .85); outline-offset: 4px; border-radius: 12px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.skip {
  position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 100;
  padding: 10px 16px; border-radius: var(--pill); background: var(--ink); color: var(--paper);
  font-weight: 800; transform: translateY(-160%); transition: transform var(--t-ui) var(--ease);
}
.skip:focus { transform: none; }

/* The content column. Every section that holds text is a .wrap, so the path
   lane (inline-start) and the ruler (inline-end) never sit under text. */
.wrap {
  position: relative;
  z-index: 1;
  inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline-start: calc(var(--rail) + var(--rail-gap));
  padding-inline-end: var(--ruler-safe);
}

.kicker {
  color: var(--orange-text);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.6;
}
.lead { max-inline-size: 58ch; color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.95; }
.muted { color: var(--ink-soft); }

/* Words that rise one by one (main.js wraps the words of [data-words]
   headings; Persian is split by words only, never letters). The padding +
   negative margin on all four sides gives tall Lalezar glyphs and the tails
   of «ر ی ن» room inside the clip; once the last word has risen main.js adds
   .is-risen and the clip is dropped, so nothing can stay cut. */
.wm {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  vertical-align: bottom;
  padding: .3em .26em .42em;
  margin: -.3em -.26em -.42em;
}
.wm > span { display: inline-block; }
.is-risen .wm { overflow: visible; }

/* A heading that lists items with dots between them («نوزاد · نوپا · …»):
   every item carries its dot in front; the heading is pulled out by one dot
   width at the inline-start and clipped there, so a dot that would start a
   line is cut away and none is left dangling at a line end. */
.title--seq { margin-inline-start: -.36em; }
.seq { display: inline-block; } /* a dot never parts from its item, with or without JS */
.seq::before { content: "·"; display: inline-block; inline-size: .62em; margin-inline-start: -.26em; text-align: center; color: var(--orange); }
html[dir="rtl"] .title--seq { clip-path: inset(-1em .36em -1em -1em); }
html[dir="ltr"] .title--seq { clip-path: inset(-1em -1em -1em .36em); }

/* 4. Buttons, chips, badges ------------------------------------------------ */
.btn {
  min-block-size: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--sheet);
  color: var(--ink);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease);
}
/* every inline line icon carries .i (24×24 viewBox, stroked) */
.i { inline-size: 20px; block-size: 20px; flex: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.btn svg, .icon svg, .menu-btn svg, .chip svg {
  inline-size: 20px; block-size: 20px; flex: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.btn-primary { border-color: transparent; background: var(--orange); color: var(--on-orange); }
.btn-ink { border-color: transparent; background: var(--ink); color: var(--paper); }
.btn-quiet { box-shadow: none; background: transparent; border-color: var(--line-strong); }
.btn:active, .menu-btn:active, .close:active, .chip:active, .lang:active, .mobile-actions a:active {
  transform: scale(.97);
  transition-duration: 70ms;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* the office number inside a «call» button: phones dial on tap, so it shows
   only from 480px (see Breakpoints) */
.tel-num { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: rgba(255, 250, 241, .8);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.5;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
}
a.chip { color: var(--ink); }
.chip svg { inline-size: 16px; block-size: 16px; }
ul.chips { list-style: none; padding: 0; margin: 0; }
/* tappable chips (call, directions) sit in an even 2-column grid;
   an odd last one takes the whole row */
div.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
div.chips > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* narrow phones: «call» and «Google Maps» take a whole row each, so no label wraps */
@media (max-width: 479.98px) { div.chips > .chip--wide { grid-column: 1 / -1; } }
/* plain labels (insurers) are flat clay tags, so they never look tappable */
li.chip, span.chip {
  min-block-size: 32px; padding: 3px 12px;
  border: 0; border-radius: 10px;
  background: rgba(233, 216, 196, .62); color: #3E5546;
}
.chips-label { margin-block: 18px 8px; font-size: var(--fs-xs); font-weight: 900; color: var(--ink-soft); }
.hours > .chips-label:first-child { margin-block-start: 0; } /* no empty band at the top of a card */

/* Live open/closed badge (text filled by main.js; the HTML holds the hours as fallback). */
.status {
  display: inline-flex; align-items: center; gap: 10px;
  inline-size: fit-content; max-inline-size: 100%;
  padding: 7px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--pill);
  background: rgba(255, 250, 241, .76);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1.6;
}
.dot {
  flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 5px rgba(255, 138, 61, .16);
}
.status.is-open .dot { background: var(--open); box-shadow: 0 0 0 5px rgba(47, 143, 91, .16); animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 9px rgba(47, 143, 91, .06); } }
.status-text { text-wrap: balance; }
/* the hero badge is a link down to the hours and address */
a.status { min-block-size: 44px; text-decoration: none; transition: background-color 180ms var(--ease), border-color 180ms var(--ease); }
a.status .i { inline-size: 16px; block-size: 16px; margin-inline-start: -2px; }

/* Paper notes (hero stats, facts) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.note {
  min-block-size: 100px;
  padding: 14px 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
  display: grid; align-content: start; gap: 4px; /* numbers line up across notes */
  rotate: var(--tilt, 0deg);
  position: relative;
}
.note strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(21px, 6.4vw, 28px); line-height: 1.2; white-space: nowrap; }
/* Lalezar's «٫ ٬» look like Latin commas and its alef like «۱»: separators
   and the «از ۵» part are set in Vazirmatn so «۴٫۹ از ۵» cannot be misread */
.note .num-sep, .note strong small { font-family: var(--font-body); font-weight: 900; }
.note strong small { margin-inline-start: .3em; font-size: .52em; color: var(--ink-soft); }
.note span { color: var(--ink-soft); font-size: 12px; font-weight: 900; line-height: 1.6; }
/* the sample rating carries its «نمونه» flag pinned to the note's top edge */
.note .sample-flag { position: absolute; inset-block-start: -11px; inset-inline-end: 6px; padding: 0 8px; font-size: 11px; line-height: 1.9; rotate: 3deg; box-shadow: 0 3px 8px rgba(31, 61, 43, .12); }

/* 5. Header ---------------------------------------------------------------- */
.head {
  position: sticky; inset-block-start: 0; z-index: 60;
  border-block-end: 1px solid var(--line);
  background: rgba(251, 246, 236, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* the header is sticky and sits inside html's scroll-padding band: without
   this, focusing a header link or button while scrolled makes the browser
   scroll the page up to "reveal" it */
.head :is(a, button) { scroll-margin-block-start: -200px; }
.head-in {
  inline-size: var(--wrap);
  min-block-size: var(--head-h);
  margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-inline-end: auto;
  min-inline-size: 0;
  font-size: 15px; font-weight: 900; line-height: 1.45;
}
.brand small { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.mark {
  flex: none; inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--sheet); box-shadow: var(--shadow-sm);
}
.mark svg { inline-size: 30px; block-size: 30px; }
.nav { display: none; }
.nav a {
  padding: 8px 12px; border-radius: var(--pill);
  color: var(--ink-soft); font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.nav a[aria-current="page"] { color: var(--ink); background: rgba(154, 209, 245, .32); }
.head-actions { display: flex; align-items: center; gap: 8px; }
.head-book { display: none; }
.lang {
  min-inline-size: 44px; min-block-size: 44px;
  display: inline-grid; place-items: center;
  padding-inline: 10px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--sheet);
  font-size: 13px; font-weight: 900; letter-spacing: 0;
  transition: transform var(--t-press) var(--ease);
}
.menu-btn, .close {
  inline-size: 48px; block-size: 48px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--sheet); box-shadow: var(--shadow-sm);
  cursor: pointer; padding: 0;
  transition: transform var(--t-press) var(--ease);
}
.close svg { inline-size: 22px; block-size: 22px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* 6. Phone menu: an opaque paper sheet that unrolls from the top ------------ */
.sheet-menu {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
  block-size: 100svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--sheet);
  box-shadow: 0 28px 80px rgba(31, 61, 43, .2);
  transform-origin: 50% 0;
}
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: var(--head-h); margin-block-end: 26px; }
.mnav { display: grid; gap: 6px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(30px, 10vw, 50px); line-height: 1.25; }
.mnav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 8px;
  border-block-end: 1px dashed rgba(31, 61, 43, .2);
  transform-origin: 50% 0;
}
.mnav a[aria-current="page"] { color: var(--orange-text); }
.mnav a[aria-current="page"]::after { content: ""; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--orange); }
.menu-extra { display: grid; gap: 10px; margin-block-start: 18px; }
.menu-extra .lang { justify-self: start; padding-inline: 16px; }
.is-enhanced .sheet-menu { opacity: 0; transform: scaleY(.04); transition: transform var(--t-exit) var(--ease-exit), opacity 180ms var(--ease); }
.is-enhanced .sheet-menu.open { opacity: 1; transform: none; transition: transform 300ms var(--ease-enter), opacity 160ms var(--ease); }
.is-enhanced .sheet-menu :is(.mnav a, .menu-extra) { opacity: 0; transform: translateY(16px) rotateX(-35deg); }
.is-enhanced .sheet-menu.open :is(.mnav a, .menu-extra) {
  opacity: 1; transform: none;
  transition: opacity 220ms var(--ease), transform 300ms var(--ease-enter);
  /* the last link lands by ~560ms; links 6–7 share the 5th step */
  transition-delay: calc(60ms + min(var(--i, 0), 5) * 40ms);
}
html.is-locked, html.is-locked body { overflow: hidden; }

/* 7. Growth path, kite and height ruler ------------------------------------ */
.journey { position: relative; isolation: isolate; overflow-x: clip; }
.path-stage {
  position: absolute; inset-block: 0; inset-inline: 0; z-index: 0;
  inline-size: var(--wrap); margin-inline: auto;
  pointer-events: none;
}
.path-layer {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: var(--rail);
  /* clipped to the lane, plus 6px each side so the kite (and its shadow)
     can ride the path's widest swings instead of being cut straight */
  clip-path: inset(0 -6px);
}
.path-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
/* The generated path (main.js) ends a kite's length above the bottom of the
   lane with a round cap; the static no-JS path fades out instead of being cut. */
.journey:not(.is-pathed) .path-svg {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
/* Without JS the static wiggle in the HTML is shown fully drawn (stretched
   with vector-effect: non-scaling-stroke); main.js replaces it with a path
   generated for this page's content and draws it with the scroll. */
.path-shadow { stroke: rgba(255, 138, 61, .24); stroke-width: 12; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.growth-path { stroke: var(--ink); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kite {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: var(--kite); block-size: var(--kite);
  transform: translateY(14px);
  filter: drop-shadow(0 8px 10px rgba(31, 61, 43, .18));
}
.is-pathed .kite { will-change: transform; }
.kite svg { inline-size: 100%; block-size: 100%; overflow: visible; transform-origin: 50% 30%; }
.is-enhanced .kite svg { animation: flutter 2.6s ease-in-out infinite alternate; }
@keyframes flutter { from { rotate: -4deg; } to { rotate: 4deg; } }

.ruler {
  position: fixed; z-index: 20;
  inset-block: calc(var(--head-h) + 20px) calc(96px + env(safe-area-inset-bottom));
  inset-inline-end: var(--ruler-edge);
  inline-size: var(--ruler-w);
  border: 1px solid var(--line); border-radius: var(--pill);
  background: rgba(255, 250, 241, .84);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  pointer-events: none;
}
/* 4 major steps (5 major ticks, top and bottom included) and 10 minor ticks
   per step, scaled to the ruler's height so the labels (۱۸۰ ۱۵۰ ۱۲۰ ۹۰ ۶۰,
   30 cm apart) sit exactly on the major ticks */
.ruler::before {
  content: ""; position: absolute; inset: 12px 4px;
  background:
    repeating-linear-gradient(to top, rgba(31, 61, 43, .6) 0 1px, transparent 1px calc((100% - 1px) / 4)) 50% 100% / 100% 100% no-repeat,
    repeating-linear-gradient(to top, rgba(31, 61, 43, .38) 0 1px, transparent 1px calc((100% - 1px) / 40)) 50% 100% / 55% 100% no-repeat;
}
.ruler-fill {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255, 138, 61, .3), rgba(255, 138, 61, .06));
  transform-origin: 50% 100%;
  transform: scaleY(var(--rp, 0));
}
.ruler-track { position: absolute; inset: 3px 2px; transform: translateY(calc(var(--rp, 0) * -1 * (100% - 24px))); }
.ruler-mark {
  position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 24px;
  display: grid; place-items: center;
  border-radius: var(--pill); background: var(--orange); color: var(--on-orange);
  box-shadow: 0 6px 16px rgba(255, 138, 61, .4);
  font-size: 10px; font-weight: 900; line-height: 1;
}
.ruler-scale { display: none; }

/* 8. Hero (home) and page hero (inner pages) ------------------------------- */
.hero { min-block-size: calc(100svh - var(--head-h)); display: grid; align-items: center; padding-block: 26px 64px; }
.page-hero { padding-block: 26px 36px; }
.hero-grid, .page-hero-grid { display: grid; gap: 30px; }
.hero-copy { display: grid; justify-items: start; gap: 16px; }
.hero-copy > :nth-child(2) { --i: 1; } .hero-copy > :nth-child(3) { --i: 2; } .hero-copy > :nth-child(4) { --i: 3; }
.hero-copy > :nth-child(5) { --i: 4; } .hero-copy > :nth-child(n+6) { --i: 5; }
.hero h1 { font-size: clamp(52px, 17vw, 108px); max-inline-size: 10ch; }
.page-hero h1 { font-size: clamp(40px, 12vw, 80px); max-inline-size: 13ch; }
.page-hero.is-article h1 { font-size: clamp(30px, 8.6vw, 48px); max-inline-size: 20ch; line-height: 1.4; }
.doctor-line { display: grid; gap: 2px; color: var(--ink-soft); font-weight: 800; line-height: 1.75; }
.doctor-line strong { color: var(--ink); font-size: 18px; }
.doctor-line .reg { font-size: var(--fs-xs); font-weight: 900; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 800; }
.crumbs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: 10px; margin: -10px -10px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.crumbs [aria-current] { color: var(--ink); }
.crumbs .sep { opacity: .5; }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 900; }
.meta-line > * + *::before, .meta > * + *::before { content: "·"; margin-inline-end: 14px; opacity: .6; }
.meta > * + *::before { margin-inline-end: 10px; }

.hero-art { position: relative; min-block-size: 350px; }
.hero-photo { inline-size: 78%; margin-inline-start: auto; --tilt: -3deg; }
.hero-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.sticker.mini { position: absolute; inline-size: 38%; border-width: 8px; border-radius: 24px; }
.mini img { aspect-ratio: 1; object-fit: cover; }
.mini-a { inset-block-start: 26px; inset-inline-start: 0; --tilt: 6deg; }
.mini-b { inset-block-end: 22px; inset-inline-start: 12px; --tilt: -8deg; }
.kite-note {
  position: absolute; inset-block-end: 0; inset-inline-end: 8px; z-index: 2;
  max-inline-size: 200px;
  padding: 13px 16px;
  border-radius: 20px;
  background: var(--sky); color: var(--sky-ink);
  font-size: var(--fs-xs); font-weight: 900; line-height: 1.75;
  rotate: 3deg;
  box-shadow: var(--shadow-sm);
}
/* inner-page art: one landscape sticker, and on some pages a mini */
.page-art { position: relative; padding-block-end: 34px; }
.page-art .sticker:first-child { inline-size: 88%; margin-inline-start: auto; --tilt: -2.5deg; }
.page-art .sticker:first-child img { aspect-ratio: 4 / 3; object-fit: cover; }
.page-art .mini { inset-block-end: 0; inset-inline-start: 0; inline-size: 34%; --tilt: 7deg; }
.page-art .kite-note { inset-block-end: auto; inset-block-start: -10px; inset-inline-end: 0; }
/* about: the doctor's ID card (4/5) with a small photo tucked behind its
   top corner */
.page-art--card { padding-block-start: 26px; }
.page-art--card .sticker:first-child { z-index: 1; inline-size: min(80%, 340px); }
.page-art--card .mini { inset-block: 0 auto; z-index: 0; --tilt: -7deg; }
@media (max-width: 759.98px) {
  /* phones: the note moves to the bottom corner, off the faces in the photo */
  .page-art .kite-note { inset-block: auto 0; inset-inline-end: 6px; max-inline-size: 56%; padding: 10px 13px; }
  /* FAQ: the questions come first on phones; the collage is desktop-only */
  .page-art--desk { display: none; }
}
@media (max-width: 600px) {
  /* blog, contact: one short photo strip, so the content starts sooner */
  .page-art--compact { padding-block-end: 0; }
  .page-art--compact :is(.mini, .kite-note) { display: none; }
  .page-art--compact .sticker:first-child img { aspect-ratio: 2 / 1; }
}

/* hero choreography: readable at once (only transform moves, opacity stays 1) */
.is-enhanced :is(.hero, .page-hero) .wm > span { animation: rise 420ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 40ms + 40ms); }
@keyframes rise { from { transform: translateY(18px) rotateX(-18deg); } }
.is-enhanced :is(.hero, .page-hero) .hero-copy > :not(h1) { animation: lift 420ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes lift { from { transform: translateY(12px); } }
.is-enhanced :is(.hero-art, .page-art) { animation: art 480ms var(--ease-enter) 220ms both; }
@keyframes art { from { transform: translateY(18px) scale(.97); } }

/* 9. Stops: every section docks beside the path like a stop on the road ------ */
.stop {
  position: relative;
  display: grid;
  gap: 18px;
  padding-block: 28px;   /* phones: ~80px between two stops' content */
  margin-block: 24px;
}
.stop::before { /* the stop's dot sits on the path lane */
  content: "";
  position: absolute; z-index: 2;
  inset-block-start: var(--dot-y);
  inset-inline-start: calc((var(--rail) - 18px) / 2);
  inline-size: 18px; block-size: 18px;
  border-radius: 50%;
  border: 4px solid var(--paper);
  background: var(--orange);
  box-shadow: 0 0 0 1px rgba(31, 61, 43, .2), 0 8px 20px rgba(255, 138, 61, .32);
}
.is-enhanced .stop::before { transform: scale(.6); opacity: .5; transition: transform 450ms var(--spring), opacity 200ms var(--ease); }
.is-enhanced .stop.is-reached::before { transform: none; opacity: 1; }
.stop-head { display: grid; justify-items: start; gap: 10px; align-content: start; }
.title { font-size: clamp(38px, 12vw, 66px); max-inline-size: 11ch; }
.title.is-long { max-inline-size: 15ch; font-size: clamp(34px, 10vw, 56px); }
/* FAQ group heads: a short label over one to four questions */
.title--sm { max-inline-size: 16ch; font-size: clamp(28px, 7.6vw, 42px); }
.intro { max-inline-size: 60ch; color: var(--ink-soft); line-height: 1.95; }
.stop-body { display: grid; gap: 14px; align-content: start; min-inline-size: 0; }
.stop-side { display: grid; gap: 14px; align-content: start; }
.stop-more { justify-self: start; margin-block-start: 6px; }
/* blog list on phones: the hero already introduced it, so the list's head is
   just its title and the first article comes up within the first screen */
@media (max-width: 759.98px) {
  .stop--list { margin-block-start: 0; padding-block-start: 12px; }
  .stop--list > .stop-head > :is(.kicker, .intro) { display: none; }
  .stop--list .title { font-size: clamp(28px, 7.6vw, 42px); }
}

/* one-shot reveals (IntersectionObserver adds .seen once) */
.is-enhanced .reveal { opacity: 0; transform: translateY(var(--travel)); }
.is-enhanced .reveal.seen {
  opacity: 1; transform: none;
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.is-enhanced .stop-head.reveal .wm > span { transform: translateY(110%); }
.is-enhanced .stop-head.reveal.seen .wm > span {
  transform: none;
  transition: transform var(--t-enter) var(--ease-enter);
  transition-delay: calc(60ms + var(--i, 0) * var(--stagger));
}
.is-enhanced .chips.reveal { opacity: 1; transform: none; }
.is-enhanced .chips.reveal > * { opacity: 0; transform: scale(.9); }
.is-enhanced .chips.reveal.seen > * {
  opacity: 1; transform: none;
  transition: opacity 240ms var(--ease), transform 450ms var(--spring);
  transition-delay: calc(var(--n, 0) * 45ms);
}
.chips > :nth-child(2) { --n: 1; } .chips > :nth-child(3) { --n: 2; } .chips > :nth-child(4) { --n: 3; }
.chips > :nth-child(5) { --n: 4; } .chips > :nth-child(n+6) { --n: 5; }

/* 10. Cards that unfold like folded paper ------------------------------------
   [data-scrub] elements get --p from main.js (0 folded → 1 flat). Each card
   group has its own choreography; .is-done (fully open) drops the transform. */
[data-scrub] { --p: 1; }
.is-enhanced .is-live { will-change: transform, opacity; }

.fold {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 250, 241, .92);
  box-shadow: var(--shadow-sm);
  transform-origin: 50% 0;
  transition: box-shadow 180ms var(--ease);
}
.is-enhanced .fold[data-scrub]:not(.is-done) {
  transform: perspective(1100px) rotateX(calc((1 - var(--p)) * -18deg)) translateY(calc((1 - var(--p)) * 22px));
  opacity: calc(.55 + var(--p) * .45);
}
.pad { padding: 20px; }

/* milestones: marks on a dashed road (labels, not buttons) */
.milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; padding-block-start: 8px; }
.mile {
  position: relative;
  display: grid; justify-items: center; gap: 0;
  padding: 16px 6px 0;
  border-block-start: 2px dashed var(--line-strong);
  font-weight: 900; text-align: center; line-height: 1.6;
  transform-origin: 50% 0;
}
.mile::before {
  content: ""; position: absolute; inset-block-start: -7px; inset-inline-start: calc(50% - 6px);
  inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px var(--paper);
}
.mile small { color: #3E5546; font-size: 12px; font-weight: 800; }
.is-enhanced .mile[data-scrub]:not(.is-done) {
  transform: perspective(700px) rotateX(calc((1 - var(--p)) * -80deg)) translateY(calc((1 - var(--p)) * 16px));
  opacity: calc(.4 + var(--p) * .6);
}

/* services: unfold + fan */
.services { display: grid; gap: 12px; }
.service {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start;
  padding: 18px 16px;
  rotate: calc(var(--fan, 0) * var(--p) * .4deg); /* ≤ 0.5° at rest: lines of text stay level */
}
.service .icon { grid-row: span 3; }
.service h3 a { text-decoration: none; }
.service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the link */
.service { position: relative; }
.is-enhanced .service[data-scrub]:not(.is-done) {
  transform: perspective(900px) rotateX(calc((1 - var(--p)) * -70deg)) translateY(calc((1 - var(--p)) * 18px));
  opacity: calc(.45 + var(--p) * .55);
}
.icon {
  inline-size: 44px; block-size: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px; background: rgba(154, 209, 245, .55);
}
.icon svg { inline-size: 22px; block-size: 22px; }
.card-text, .service p, .post p, .quote footer, .stage p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.85; }
/* services page: cards in a row share their height; the fan tilt only plays
   while a card unfolds */
.services--full .service { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; rotate: calc(var(--fan, 0) * (1 - var(--p)) * 2deg); }
.services--full .service .icon { grid-row: auto; margin-block-end: 6px; }
/* the longer descriptions keep one sentence in view; the rest folds into
   «جزئیات بیشتر» on phones (main.js opens it from 760px, where the cards
   have room, and the toggle is hidden there) */
.svc-text { display: grid; gap: 2px; align-content: start; }
.svc-more > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 44px; inline-size: fit-content;
  list-style: none; cursor: pointer;
  color: var(--orange-text); font-size: var(--fs-xs); font-weight: 900;
}
.svc-more > summary::-webkit-details-marker { display: none; }
.svc-more > summary::after {
  content: "+"; inline-size: 26px; block-size: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 138, 61, .2); color: #5C2C0F;
  font-size: 19px; font-weight: 700; line-height: 1;
  transition: transform var(--t-ui) var(--ease);
}
.svc-more[open] > summary::after { transform: rotate(45deg); }
.svc-more > summary:focus-visible { outline-offset: 2px; }
.svc-more > p { padding-block-end: 2px; }
@media (min-width: 760px) { .is-enhanced .svc-more > summary { display: none; } }
/* narrow phones: the icon sits beside the title, so each card is shorter */
@media (max-width: 479.98px) {
  .services--full .service { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; column-gap: 12px; }
  .services--full .service .icon { margin: 0; }
  .services--full .service > :not(.icon, h3) { grid-column: 1 / -1; }
  .svc-more > summary { margin-block: -4px -2px; } /* the 44px target overlaps the gaps */
}
.trio h3 a { text-decoration: none; }
.trio h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.trio .fold { position: relative; }

/* testimonials: diagonal cut that closes + settle into a tilt */
.quotes { display: grid; gap: 14px; }
.quote { padding: 20px; background: var(--sheet); rotate: calc(var(--lean, 0) * var(--p) * .25deg); /* ≤ 0.5° at rest */ display: grid; gap: 12px; align-content: space-between; }
.quote p { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.9; }
.quote footer { font-size: var(--fs-xs); font-weight: 900; }
.is-enhanced .quote[data-scrub]:not(.is-done) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - (1 - var(--p)) * 55%), 0 100%);
  transform: translateY(calc((1 - var(--p)) * 24px));
}
.sample-flag { display: inline-flex; padding: 2px 10px; border-radius: var(--pill); background: var(--clay); color: #3E5546; font-size: 12px; font-weight: 900; }

/* stage cards (services): a door that swings open from the lane side */
.stages { display: grid; gap: 12px; }
.stage { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; align-content: start; padding: 12px; transform-origin: 100% 50%; }
.stage .sticker { border-width: 6px; border-radius: 18px; --tilt: -3deg; }
.stage:nth-child(even) .sticker { --tilt: 3deg; }
.stage .sticker img, .stage .sticker svg { aspect-ratio: 1; object-fit: cover; }
.stage .sticker svg { inline-size: 100%; block-size: auto; }
.stage h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; line-height: 1.3; }
.stage .chips { margin-block-start: 6px; gap: 6px; }
.stage .chip { min-block-size: 44px; padding: 4px 12px; font-size: 12px; }
.is-enhanced .stage[data-scrub]:not(.is-done) {
  transform: perspective(900px) rotateY(calc((1 - var(--p)) * 28deg));
  opacity: calc(.45 + var(--p) * .55);
}
/* narrow phones: a small photo beside the title, the text across the card */
@media (max-width: 559.98px) {
  .stage { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; padding: 14px; }
  .stage > div { display: contents; }
  .stage .sticker { grid-area: 1 / 1; border-width: 5px; border-radius: 16px; }
  .stage h3 { grid-area: 1 / 2; }
  .stage > div > p { grid-column: 1 / -1; }
  .stage .chips { margin-block-start: 0; }
}

/* credential rungs (about): climb like marks on a height chart */
.rungs { display: grid; gap: 10px; list-style: none; padding: 0; }
.rung { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: start; padding: 16px 18px; }
.rung::before { content: ""; grid-row: span 2; inline-size: 14px; block-size: 14px; margin-block-start: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--orange-wash); }
/* the marks of a height chart: a dashed line joins the dots from rung to rung */
.rung::after {
  content: ""; position: absolute; z-index: -1;
  inset-block: -12px 0; inset-inline-start: 24px;
  border-inline-start: 2px dashed rgba(255, 138, 61, .6);
}
.rung:first-child::after { inset-block-start: 31px; }
.rung:last-child::after { inset-block-end: calc(100% - 31px); }
.rung strong { font-weight: 900; line-height: 1.7; }
.rung span { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.is-enhanced .rung[data-scrub]:not(.is-done) {
  transform: translateY(calc((1 - var(--p)) * 36px)) scale(calc(.94 + var(--p) * .06));
  opacity: calc(.35 + var(--p) * .65);
}

/* 11. Photo stickers (thick cream border) ---------------------------------- */
.sticker {
  position: relative;
  border: 10px solid var(--sheet);
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow);
  overflow: hidden;
  rotate: var(--tilt, 0deg);
}
.sticker::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(31, 61, 43, .08); border-radius: inherit; pointer-events: none; }
.sticker img { inline-size: 100%; block-size: 100%; }
.is-enhanced .sticker.reveal { opacity: 0; transform: rotate(-7deg) scale(.92); }
.is-enhanced .sticker.reveal.seen { opacity: 1; transform: none; transition: opacity 220ms var(--ease), transform 500ms var(--spring); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: 8px; }
.photo-pair .sticker { border-width: 8px; border-radius: 24px; }
.photo-pair img { aspect-ratio: 1; object-fit: cover; }
/* home: the doctor's ID card beside his bio */
.doctor-card { --tilt: 2.5deg; justify-self: center; inline-size: min(100%, 360px); }
/* the doctor's portrait (home doctor section, about hero) */
.sticker.portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* The doctor's ID card: a paper card that stands where his portrait will go
   until a real photo arrives. Same size, tilt and cream border as the photo
   sticker; cream paper with the faint grid, forest text, a tangerine band
   with a clip slot, the drop logo, a height-ruler edge and a tangerine
   «30 years» stamp. Sizes follow the card's width (cqi = 1% of it), with
   fixed fallbacks for browsers without container units. */
.idcard { container-type: inline-size; }
.idcard::after { border-color: rgba(31, 61, 43, .16); }
.idcard-in {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 5;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  padding: 60px 40px 22px 24px;
  padding-block: 19cqi 7cqi; padding-inline: 8cqi 14cqi;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(31, 61, 43, .045) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(31, 61, 43, .035) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--paper);
  color: var(--ink);
}
.idcard-in::before { /* the tangerine band */
  content: ""; position: absolute; z-index: -1; inset-block-start: 0; inset-inline: 0;
  block-size: 38px; block-size: 12cqi;
  background: var(--orange);
}
.idcard-in::after { /* the clip slot */
  content: ""; position: absolute; inset-block-start: 4cqi; inset-inline: 0; margin-inline: auto;
  inline-size: 20cqi; block-size: 4cqi; border-radius: var(--pill);
  background: var(--sheet); box-shadow: inset 0 1.5px 2px rgba(36, 22, 12, .4);
}
.idcard-ruler { /* a short height ruler along the inline-end edge, beside the name */
  position: absolute; inset-block: 19cqi 44cqi; inset-inline-end: 4.5cqi; inline-size: 4.5cqi;
  background:
    repeating-linear-gradient(to top, rgba(31, 61, 43, .5) 0 1px, transparent 1px 6cqi) 50% 100% / 100% 100% no-repeat,
    repeating-linear-gradient(to top, rgba(31, 61, 43, .3) 0 1px, transparent 1px 1.5cqi) 50% 100% / 50% 100% no-repeat;
}
.idcard-top { display: flex; align-items: center; gap: 3cqi; color: var(--ink-soft); font-size: 12px; font-size: max(11px, 4.2cqi); font-weight: 800; line-height: 1.4; }
.idcard-mark {
  flex: none; display: grid; place-items: center;
  inline-size: 40px; block-size: 40px; inline-size: 13cqi; block-size: 13cqi;
  border: 1px solid var(--line); border-radius: 12px; border-radius: 4cqi;
  background: var(--sheet); box-shadow: var(--shadow-sm);
}
.idcard-mark svg { inline-size: 70%; block-size: 70%; }
.idcard-name {
  margin-block-start: 6cqi;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 36px; font-size: 13cqi; line-height: 1.22;
}
.idcard-role { display: flex; align-items: center; gap: 2.5cqi; margin-block-start: 2cqi; font-size: 15px; font-size: max(13px, 5.6cqi); font-weight: 900; line-height: 1.5; }
.idcard-role::before { content: ""; flex: none; inline-size: 7cqi; block-size: 1.6cqi; min-block-size: 3px; border-radius: var(--pill); background: var(--orange); }
.idcard-foot {
  grid-row: 5;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi;
  padding-block-start: 3.5cqi;
  border-block-start: 2px dashed var(--line-strong);
}
.idcard-field { display: grid; gap: 1cqi; line-height: 1.3; }
.idcard-field span { color: var(--ink-soft); font-size: 12px; font-size: max(11px, 3.9cqi); font-weight: 800; }
.idcard-field strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; font-size: 9.5cqi; line-height: 1.15; }
.idcard-stamp {
  position: relative; z-index: 1; flex: none;
  inline-size: 104px; inline-size: 38cqi; aspect-ratio: 5 / 4;
  margin-block-start: -12cqi;
  display: grid; place-content: center; justify-items: center; gap: .5cqi;
  padding: 3cqi;
  border-radius: 50%;
  background: var(--orange); color: var(--on-orange);
  outline: 1.5px dashed rgba(36, 22, 12, .45); outline-offset: -2.4cqi;
  box-shadow: 0 8px 18px rgba(255, 138, 61, .35);
  text-align: center; rotate: -10deg;
}
.idcard-stamp strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 32px; font-size: 11.5cqi; line-height: 1; }
.idcard-stamp span { max-inline-size: 29cqi; font-size: 10px; font-size: max(9.5px, 3.3cqi); font-weight: 900; line-height: 1.25; text-wrap: balance; }
.wide-photo img { aspect-ratio: 16 / 10; object-fit: cover; }
/* beside the hours list: square on phones, as tall as the list from 760px */
.wide-photo--tall img { aspect-ratio: 1; }
@media (min-width: 760px) { .wide-photo--tall img { aspect-ratio: 4 / 5; } }

/* 12. Bio, hours, contact, map --------------------------------------------- */
.duo { display: grid; gap: 16px; align-items: start; }
.bio { padding: 20px; display: grid; gap: 12px; }
.bio p { line-height: 1.95; }
/* about: the long bio keeps a wider text column on phones */
@media (max-width: 759.98px) { .bio--long { padding: 16px 14px; } }

.hours { padding: 20px; display: grid; gap: 4px; align-content: start; }
.hours .status { inline-size: 100%; border-radius: var(--r-sm); }
.hours-main, .hours-side { display: grid; gap: 4px; align-content: start; min-inline-size: 0; }
.hours-list { display: grid; margin-block: 10px; }
.hours-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-block-size: 46px; padding-block: 8px;
  border-block-end: 1px dashed rgba(31, 61, 43, .18);
  color: var(--ink-soft); font-weight: 800;
}
.hours-row strong { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.hours-row > span { white-space: nowrap; text-align: end; }
.hours-row.is-closed > span { color: var(--orange-text); }
.today-tag { display: none; padding: 0 9px; border-radius: var(--pill); background: var(--ink); color: var(--paper); font-size: 11px; line-height: 1.9; }
.hours-row.is-today { color: var(--ink); }
.hours-row.is-today .today-tag { display: inline-block; }
.contact { display: grid; gap: 6px; color: var(--ink-soft); font-weight: 800; }
/* gap: the space between «تلفن:» and the number collapses inside a flex link */
.contact a { color: var(--ink); display: inline-flex; align-items: center; gap: .35em; min-block-size: 44px; inline-size: fit-content; }
.urgent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-block-start: 14px; padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--orange-wash); color: #5C2C0F;
  font-size: 14px; font-weight: 900; line-height: 1.8;
}
.urgent svg { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* two short lines (emergency, poison advice): no «·» left dangling */
.urgent-text { display: grid; gap: 4px; }
/* 115 / 190 are 44px pills */
.urgent a {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 44px; min-block-size: 44px; padding-inline: 10px;
  border-radius: var(--pill); background: rgba(255, 138, 61, .28);
  text-decoration: none; vertical-align: middle;
}

.map {
  min-block-size: 260px; padding: 16px;
  display: grid; overflow: hidden;
  background: linear-gradient(135deg, rgba(154, 209, 245, .34), transparent 48%), var(--sheet);
}
.map svg { inline-size: 100%; block-size: auto; }
.map-route { stroke-dasharray: 320; stroke-dashoffset: calc(320 * (1 - var(--p, 1))); }
.map figcaption { margin-block-start: 8px; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 800; }
/* .map--wide: the illustrated map drawn wider than it is shown
   (preserveAspectRatio slice), edge to edge: phones see the middle, the
   desktop banner the whole width. Its route has pathLength="1", so it ends
   exactly at the pin. */
.map--wide { min-block-size: 0; padding: 0; background: var(--sheet); }
.map--wide svg { aspect-ratio: 3 / 2; }
.map--wide .map-route { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
.map--wide figcaption { margin: 0; padding: 10px 16px 14px; border-block-start: 1px dashed rgba(31, 61, 43, .14); }
.map-label { paint-order: stroke; stroke: #FBF6EC; stroke-width: 7px; stroke-linejoin: round; }
/* the illustrated map opens the Google Maps search; the card clips
   its overflow, so the focus ring is drawn inside */
.map-link { display: block; }
.map-link:focus-visible { outline-offset: -6px; border-radius: calc(var(--r) - 4px); }

/* 13. FAQ accordion (open without JS; main.js closes all but [data-open]) --- */
.faq-list { display: grid; gap: 10px; }
.faq { overflow: hidden; }
.faq h3 { font-size: inherit; line-height: inherit; }
/* .faq clips its overflow (rounded card), so the ring is drawn inside */
.faq-q:focus-visible { outline-offset: -4px; border-radius: calc(var(--r) - 2px); }
.faq-q {
  inline-size: 100%; min-block-size: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  border: 0; background: transparent;
  text-align: start; font-weight: 900; line-height: 1.75; cursor: pointer;
}
.faq-q::after {
  content: "+"; flex: none;
  inline-size: 32px; block-size: 32px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 138, 61, .2); color: #5C2C0F;
  font-size: 22px; font-weight: 700; line-height: 1;
  transition: transform var(--t-ui) var(--ease);
}
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-ui) var(--ease); }
.faq-a > div { overflow: hidden; padding-inline: 16px; }
.faq-a p { padding-block-end: 18px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.9; }
.faq.is-closed .faq-a { grid-template-rows: 0fr; }
.faq.is-closed .faq-a > div { visibility: hidden; transition: visibility 0s var(--t-ui); }

/* 14. Article cards, CTA band, long-form prose ------------------------------ */
.articles, .posts { display: grid; gap: 12px; }
/* a column whose «read» link sits on the card's bottom edge, so the links of
   cards in one row line up */
.post { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.post .sticker { border-width: 7px; border-radius: 22px; margin-block-end: 10px; --tilt: -1.5deg; box-shadow: var(--shadow-sm); }
.post:nth-child(even) .sticker { --tilt: 1.5deg; }
.post .sticker img { aspect-ratio: 16 / 10; object-fit: cover; }
.post h3 a, .post h2 a { text-decoration: none; }
.post h3 a::after, .post h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post h2 { font-family: var(--font-body); font-size: 19px; font-weight: 900; line-height: 1.6; }
.post .more { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; margin-block-start: auto; padding-block-start: 6px; color: var(--orange-text); font-size: var(--fs-xs); font-weight: 900; }
.post .more svg { inline-size: 16px; block-size: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.meta, .post .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--orange-text); font-size: 12px; font-weight: 900; line-height: 1.8; }
.meta time { color: var(--ink-soft); }
.is-enhanced .post[data-scrub]:not(.is-done) {
  clip-path: inset(0 calc((1 - var(--p)) * 30%) 0 0 round var(--r));
  transform: translateY(calc((1 - var(--p)) * 20px));
}

.cta {
  margin-block-start: 22px; padding: 28px 22px;
  display: grid; justify-items: start; gap: 10px;
  border-radius: var(--r-lg);
  background: var(--orange); color: var(--on-orange);
  box-shadow: var(--shadow);
  transform-origin: 50% 0;
}
.cta h2 { font-size: clamp(36px, 11vw, 66px); max-inline-size: 13ch; }
.cta p { font-weight: 800; max-inline-size: 56ch; line-height: 1.9; }
.cta .actions { margin-block-start: 8px; }
.cta .btn { border-color: transparent; box-shadow: none; }
.cta .btn-ink { background: var(--ink); color: var(--paper); }
.cta .btn:not(.btn-ink) { background: rgba(255, 250, 241, .9); }
.is-enhanced .cta[data-scrub]:not(.is-done) {
  transform: perspective(1200px) rotateX(calc((1 - var(--p)) * -14deg)) scale(calc(.96 + var(--p) * .04));
}

.paper { padding: 22px 20px; }
.prose { font-size: 17px; line-height: 1.95; max-inline-size: 70ch; }
.prose > * + * { margin-block-start: 1.15em; }
.prose h2 { font-size: clamp(26px, 6vw, 34px); margin-block-start: 1.4em; }
.prose ul { padding-inline-start: 1.2em; }
.prose li + li { margin-block-start: .35em; }
.prose li::marker { color: var(--orange-text); }
/* fever guide: the warning signs, near the top, in a tinted box */
.flags { padding: 16px 18px; border: 1.5px solid rgba(255, 138, 61, .45); border-radius: var(--r-sm); background: rgba(255, 138, 61, .09); }
.prose .flags h2 { margin-block-start: 0; font-size: clamp(22px, 5.8vw, 28px); }
.flags ul { margin-block-start: .6em; }
.flags .urgent { margin-block-start: 14px; background: rgba(255, 250, 241, .85); }
/* vaccination table: scrolls sideways inside its frame if it ever must */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.75; }
.prose caption { padding: 12px 14px 8px; text-align: start; font-weight: 900; line-height: 1.7; }
.prose caption .sample-flag { margin-inline-start: 6px; vertical-align: middle; }
.prose :is(th, td) { padding: 10px 14px; text-align: start; vertical-align: top; border-block-start: 1px dashed rgba(31, 61, 43, .18); }
.prose thead th { border-block-start: 1px solid var(--line); background: rgba(233, 216, 196, .45); color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 900; }
.prose tbody th { inline-size: 36%; font-weight: 900; }
.table-note { color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 700; line-height: 1.8; }
.disclaimer {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(154, 209, 245, .3); color: var(--sky-ink);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.9;
}
/* phones: the article text runs on the paper itself, a wider column (~36
   characters a line instead of ~30) */
@media (max-width: 600px) {
  .prose.paper { padding: 4px 8px; border: 0; background: none; box-shadow: none; }
  .disclaimer { padding: 12px; }
  .flags { padding: 14px 12px; }
  .prose :is(th, td) { padding-inline: 12px; }
}
.disclaimer em { font-style: normal; }
.disclaimer svg { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 5px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 15. Inner-page parts ----------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; inline-size: 100%; max-inline-size: 400px; }
.trio { display: grid; gap: 12px; }
.trio .fold { padding: 18px; display: grid; gap: 6px; align-content: start; }
.trio h3 { display: flex; align-items: center; gap: 10px; }
.toc { display: grid; gap: 8px; }
.side-card { padding: 20px; display: grid; gap: 10px; }
.side-card h2, .side-card h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; line-height: 1.35; }
.side-card .actions .btn { flex: 1 1 auto; }
.not-found { text-align: start; }
.big-num {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(110px, 38vw, 220px); line-height: 1; color: var(--orange);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.lost-kite { position: relative; inline-size: min(100%, 320px); margin-inline: auto; }
/* 404: the lost kite is the picture, so the path's own kite stays parked out of sight */
.journey--lost .path-layer .kite { visibility: hidden; }
/* route cards: the title carries a forward arrow, so the card reads as a link */
.trio--links h3 a { display: inline-flex; align-items: center; gap: 6px; }
.trio--links h3 .i-fwd { inline-size: 18px; block-size: 18px; color: var(--orange-text); }
.not-found .hero-copy { gap: 12px; }
.page-hero.not-found h1 { font-size: clamp(34px, 9vw, 60px); max-inline-size: 16ch; line-height: 1.35; }
.lost-kite svg { inline-size: 100%; block-size: auto; overflow: visible; }
.lost-kite .string { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 4 9; }
.is-enhanced .lost-kite .kite-fly { animation: drift 3.2s ease-in-out infinite alternate; transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes drift { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(-10px, -12px) rotate(8deg); } }

/* Root language chooser (index.html at the repo root) */
.chooser { min-block-size: 100svh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.chooser h1 { font-size: clamp(40px, 11vw, 72px); }
.chooser .actions { justify-content: center; }
.chooser .btn { min-inline-size: 150px; }
body.chooser-page { padding-block-end: 0; }

/* 16. Footer and sticky phone bar ------------------------------------------- */
.foot {
  position: relative; z-index: 1;
  inline-size: var(--wrap); margin-inline: auto;
  padding-block: 30px 28px;
  padding-inline-end: var(--ruler-safe);
  color: var(--ink-soft); font-size: 14px; line-height: 1.9;
}
.foot-grid { display: grid; gap: 22px; padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.foot-h { margin-block-end: 6px; color: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 900; line-height: 1.6; }
.foot a { color: var(--ink); }
.foot p a { display: inline-flex; align-items: center; gap: .35em; min-block-size: 44px; }
/* every row starts flush with the column: the links' own 6px padding hangs
   outside it */
.foot-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; margin-inline-start: -6px; padding: 0; list-style: none; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding-inline: 6px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.foot-note { margin-block-start: 20px; padding: 10px 14px; border-radius: 14px; background: rgba(233, 216, 196, .45); font-size: var(--fs-xs); font-weight: 700; line-height: 1.8; }
.foot-legal { margin-block-start: 14px; font-size: var(--fs-xs); }

.mobile-actions {
  position: fixed; z-index: 70;
  inset-inline: 12px; inset-block-end: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px;
  border: 1px solid var(--line); border-radius: 22px;
  background: rgba(255, 250, 241, .94);
  box-shadow: 0 18px 48px rgba(31, 61, 43, .22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.mobile-actions a {
  min-block-size: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 15px; background: var(--ink); color: var(--paper); font-weight: 900;
  transition: transform var(--t-press) var(--ease);
}
/* call (the first link) is the orange primary, as everywhere else; directions is ink */
.mobile-actions a:first-child { background: var(--orange); color: var(--on-orange); }
.mobile-actions svg { inline-size: 18px; block-size: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.is-enhanced .mobile-actions { transform: translateY(150%); visibility: hidden; transition: transform var(--t-exit) var(--ease-exit), visibility 0s linear var(--t-exit); }
.is-enhanced .mobile-actions.show { transform: none; visibility: visible; transition: transform 300ms var(--ease-enter), visibility 0s; }

/* 17. Breakpoints ------------------------------------------------------------ */
@media (min-width: 480px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service { grid-template-columns: minmax(0, 1fr); }
  .service .icon { grid-row: auto; margin-block-end: 8px; }
  .milestones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* five service cards: the first (checkups) spans two columns, so with two
     or three columns no row ends with a lone card */
  .services--five > :first-child { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 16px; }
  .services--five > :first-child .icon { grid-row: 1 / span 2; margin-block-end: 0; }
  .services--five > :first-child { min-block-size: 0; align-content: center; } /* alone in a row: as tall as its text; beside a taller card: centred */
  /* the office number shows inside «call» buttons (phones dial on tap) */
  .tel-num { display: inline; }
}

/* tablet: wider lane, ruler with labels, header call button; still one column */
@media (min-width: 760px) {
  :root {
    --gutter: 64px;
    --rail: 84px;
    --rail-gap: 16px;
    --ruler-w: 34px;
    --ruler-edge: 14px;
    --ruler-safe: 0px;
    --head-h: 74px;
    --dot-y: 60px;
    --kite: 42px;
    --travel: 32px;
    --stagger: 70ms;
    --fs-sm: 15px;
  }
  body { padding-block-end: 0; }
  .mobile-actions { display: none; }
  .head-book { display: inline-flex; }
  .ruler { inset-block: calc(var(--head-h) + 28px) 44px; }
  .ruler-scale {
    position: absolute; inset-block: 12px; inset-inline: 0; display: block;
    color: rgba(31, 61, 43, .6); font-size: 10px; font-weight: 900; line-height: 1;
  }
  .ruler-scale span {
    position: absolute; inset-inline: 0; inline-size: fit-content; margin-inline: auto;
    padding: 1px 2px; border-radius: 4px; background: rgba(255, 250, 241, .9);
    transform: translateY(-50%);
  }
  .ruler-scale span:nth-child(1) { inset-block-start: .5px; }
  .ruler-scale span:nth-child(2) { inset-block-start: calc((100% - 1px) * .25 + .5px); }
  .ruler-scale span:nth-child(3) { inset-block-start: calc((100% - 1px) * .5 + .5px); }
  .ruler-scale span:nth-child(4) { inset-block-start: calc((100% - 1px) * .75 + .5px); }
  .ruler-scale span:nth-child(5) { inset-block-start: calc(100% - .5px); }
  .ruler-mark { font-size: 11px; }
  .growth-path { stroke-width: 4.5; }
  .path-shadow { stroke-width: 14; }
  .stop { margin-block: 72px; padding-block: 44px; }
  .hero-art { max-inline-size: 560px; min-block-size: 440px; }
  .page-art { max-inline-size: 560px; }
  .stats { max-inline-size: 620px; gap: 12px; }
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .service { min-block-size: 210px; padding: 20px; }
  .services--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper { padding: 34px 38px; }
  .prose { font-size: 18px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta { padding: 40px 36px; }
  .cta h2 { max-inline-size: none; }
  /* location: the map is a full-width banner on top, the hours card below */
  .duo--loc { grid-template-columns: minmax(0, 1fr); }
  .duo--loc > .map { order: -1; }
  .duo--loc .map svg { aspect-ratio: 2.3 / 1; }
}

@media (min-width: 900px) {
  .hours--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .hours--split .hours-side > .chips-label:first-child { margin-block-start: 0; }
  /* home: the two columns end level; the urgent note runs under both */
  .hours--split > .hours-main { grid-column: 1; grid-row: 1; }
  .hours--split > .hours-side { grid-column: 2; grid-row: 1; }
  .hours--split > .hours-urgent { grid-column: 1 / -1; grid-row: 2; align-items: center; }
  .hours-urgent .urgent-text { grid-auto-flow: column; justify-content: start; column-gap: 28px; }
  .hours-urgent svg { margin-block-start: 0; }
}

/* small laptops / landscape tablets: the hero is already two columns */
@media (min-width: 960px) and (max-width: 1079.98px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); align-items: center; gap: 40px; }
  .hero h1 { font-size: 88px; }
  .hero-art { max-inline-size: none; min-block-size: 420px; }
}

/* desktop: header nav, two-column hero, stops alternate beside the path */
@media (min-width: 1080px) {
  :root { --gutter: 72px; --rail: 118px; --rail-gap: 0px; --kite: 44px; }
  .menu-btn { display: none; }
  .nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .brand { margin-inline-end: 0; }
  .hero-grid, .page-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(340px, .78fr); align-items: center; gap: 48px; }
  .hero h1 { font-size: 104px; }
  .hero { padding-block: 48px 104px; }
  .hero-art, .page-art { max-inline-size: none; }
  .page-hero { padding-block: 56px 40px; }
  .page-hero-grid { gap: 56px; }

  .stop {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px; row-gap: 22px;
    align-items: start;
    margin-block: 92px; padding-block: 48px;
  }
  .stop > .stop-head { grid-column: 1 / span 4; grid-row: 1; position: sticky; inset-block-start: calc(var(--head-h) + 40px); }
  .stop > .stop-body { grid-column: 5 / span 8; grid-row: 1; }
  .stop:nth-of-type(even) > .stop-head { grid-column: 8 / span 5; }
  .stop:nth-of-type(even) > .stop-body { grid-column: 1 / span 7; }
  .stop--wide > .stop-head, .stop--wide:nth-of-type(even) > .stop-head { grid-column: 1 / -1; grid-row: 1; position: static; }
  .stop--wide > .stop-body, .stop--wide:nth-of-type(even) > .stop-body { grid-column: 1 / -1; grid-row: 2; }
  .stop--wide .title { max-inline-size: 18ch; }
  .stop--side > .stop-body, .stop--side:nth-of-type(even) > .stop-body { grid-column: 1 / span 8; grid-row: 1; }
  .stop--side > .stop-side { grid-column: 9 / span 4; grid-row: 1; position: sticky; inset-block-start: calc(var(--head-h) + 40px); }
  .stop--cta > .stop-body, .stop--cta:nth-of-type(even) > .stop-body { grid-column: 1 / -1; }
  /* FAQ: every group keeps its head on the same side, so the questions stay
     in one column instead of jumping from side to side */
  .stop--same:nth-of-type(even) > .stop-head { grid-column: 1 / span 4; }
  .stop--same:nth-of-type(even) > .stop-body { grid-column: 5 / span 8; }
  .quotes, .articles, .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* beside a stop head the body is 8/12 wide: two service cards per row keep
     their lines ~40 characters long (three gave 18–24) */
  .services:not(.services--full) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doctor-card { position: sticky; inset-block-start: calc(var(--head-h) + 40px); }
  .services--full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 14px; }
  .stage .sticker :is(img, svg) { aspect-ratio: 4 / 3; }
  .cta { padding: 48px 44px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}
@media (min-width: 1160px) {
  .hero h1 { font-size: 108px; }
  .hero-photo { inline-size: 72%; }
  .mini-a { inset-inline-start: 18px; }
  .mini-b { inset-inline-start: 44px; }
}

/* 18. Direction: the only rules that name a physical side --------------------
   (clip-path and transform-origin have no logical keywords) */
html[dir="rtl"].is-enhanced .post[data-scrub]:not(.is-done) { clip-path: inset(0 0 0 calc((1 - var(--p)) * 30%) round var(--r)); }
html[dir="ltr"].is-enhanced .quote[data-scrub]:not(.is-done) { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - (1 - var(--p)) * 55%)); }
html[dir="ltr"] .stage { transform-origin: 0 50%; }
html[dir="ltr"].is-enhanced .stage[data-scrub]:not(.is-done) { transform: perspective(900px) rotateY(calc((1 - var(--p)) * -28deg)); }
/* forward arrows are drawn pointing left (rtl); mirror them on ltr pages */
html[dir="ltr"] :is(.i-fwd, .i-back) { scale: -1 1; }
/* the kite's tail curls to the inline-end side */
html[dir="ltr"] .kite svg { scale: -1 1; }

/* 19. Hover (fine pointers only) and reduced motion ------------------------- */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover, a.chip:hover { background: rgba(154, 209, 245, .3); color: var(--ink); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(31, 61, 43, .16); }
  .btn:active { transform: scale(.97); }
  .fold:hover { box-shadow: var(--shadow); }
  .service:hover .icon svg, .trio .fold:hover .icon svg { transform: translateY(-2px) rotate(-6deg); transition: transform 300ms var(--spring); }
  .post:hover .more { text-decoration: underline; text-underline-offset: 4px; }
  .lang:hover, .menu-btn:hover, a.status:hover { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0s !important;
  }
  /* everything visible, in its final state */
  .is-enhanced .reveal, .is-enhanced .reveal.seen, .is-enhanced .sticker.reveal,
  .is-enhanced .chips.reveal > *, .is-enhanced .wm > span,
  .is-enhanced [data-scrub], .is-enhanced :is(.hero-art, .page-art) {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .is-enhanced .stop::before { transform: none; opacity: 1; }
  .wm { overflow: visible; }
  .map-route { stroke-dashoffset: 0; }
  .ruler-fill { transform: none; }
  .ruler-track { transform: none; }
  .kite svg { animation: none !important; }
  .status.is-open .dot { animation: none; }
  /* state changes become short crossfades instead of movement */
  .is-enhanced .sheet-menu, .is-enhanced .sheet-menu.open { transform: none; transition: opacity 150ms linear !important; }
  .is-enhanced .sheet-menu :is(.mnav a, .menu-extra) { opacity: 1; transform: none; }
  .is-enhanced .mobile-actions { transform: none; opacity: 0; visibility: hidden; transition: opacity 150ms linear, visibility 0s linear 150ms !important; }
  .is-enhanced .mobile-actions.show { opacity: 1; visibility: visible; transition: opacity 150ms linear !important; }
  .faq-a { transition: none; }
}

/* 20. English pages (html[lang="en"]) -----------------------------------------
   Every rule that only the English pages need lives here, so the Persian
   pages never change with them. Baloo 2 is much wider than Lalezar and Latin
   text reads best tighter than Persian: line-heights ~1.6 for body and cards,
   ~1.65 for long reading, ~1.1 for display; headings sized and widened so
   none runs over three lines or leaves a lone first or last word. */
html[lang="en"] {
  --font-display: "Baloo 2", "Vazirmatn", system-ui, sans-serif;
  --display-weight: 800;
  --display-lh: 1.08;
}
html[lang="en"] body { line-height: 1.6; }
html[lang="en"] :is(.lead, .intro, .bio p, .prose, .disclaimer) { line-height: 1.65; }
html[lang="en"] :is(.card-text, .service p, .post p, .quote footer, .stage p, .rung span,
  .faq-a p, .cta p, .table-note, .foot, .kite-note, .urgent) { line-height: 1.6; }
html[lang="en"] .quote p { line-height: 1.6; }
html[lang="en"] :is(.faq-q, .rung strong, .post h2, .mile) { line-height: 1.45; }
html[lang="en"] .doctor-line { line-height: 1.45; gap: 4px; }
html[lang="en"] .prose li + li { margin-block-start: .25em; }
html[lang="en"] .prose > * + * { margin-block-start: 1em; }
html[lang="en"] .kite-note { text-wrap: balance; }

/* headings */
html[lang="en"] .hero h1 { font-size: clamp(46px, 13.6vw, 92px); max-inline-size: 14ch; }
html[lang="en"] .page-hero h1 { font-size: clamp(38px, 10.5vw, 72px); max-inline-size: 18ch; }
html[lang="en"] .page-hero.is-article h1 { font-size: clamp(26px, 7.3vw, 48px); max-inline-size: 22ch; line-height: 1.12; }
html[lang="en"] .page-hero.not-found h1 { font-size: clamp(30px, 8.4vw, 54px); max-inline-size: 20ch; line-height: 1.1; }
html[lang="en"] .title { font-size: clamp(34px, 9.6vw, 58px); max-inline-size: 16ch; }
html[lang="en"] .title.is-long { font-size: clamp(30px, 8.6vw, 50px); max-inline-size: 18ch; }
html[lang="en"] .title--sm { font-size: clamp(28px, 7.6vw, 40px); max-inline-size: 18ch; }
html[lang="en"] .cta h2 { font-size: clamp(30px, 8.6vw, 60px); max-inline-size: 16ch; }
html[lang="en"] :is(.stage h3, .side-card h2, .side-card h3) { line-height: 1.12; }
/* ID card: Baloo is wider and sits tighter than Lalezar */
html[lang="en"] .idcard-name { font-size: 11.5cqi; line-height: 1.02; margin-block-start: 7cqi; }
html[lang="en"] :is(.idcard-field strong, .idcard-stamp strong) { line-height: 1; }
/* more-articles cards: titles in the display face, like every other English heading */
html[lang="en"] .post :is(h2, h3) { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.15; }
/* «Newborn · Toddler / Child · Teen»: two items a line on phones */
html[lang="en"] .title--seq { font-size: clamp(30px, 8.4vw, 52px); max-inline-size: none; }

/* small parts */
html[lang="en"] .prose caption { line-height: 1.45; }
html[lang="en"] .prose caption .sample-flag { display: flex; inline-size: fit-content; margin: 6px 0 0; } /* its own line, flush with the caption */
/* Vazirmatn's Latin digits sit high in its tall line box: centre them in the 115/190 pills */
html[lang="en"] .urgent a { line-height: 1; padding-block-start: 3px; }
@media (max-width: 479.98px) {
  /* articles: «2-minute read» takes its own line, never one starting with «·» */
  html[lang="en"] .meta-line > :last-child { flex-basis: 100%; }
  html[lang="en"] .meta-line > :last-child::before { content: none; }
}
@media (max-width: 389.98px) {
  /* the doctor's name stays on one line in the header */
  html[lang="en"] .brand { font-size: 13px; }
  html[lang="en"] .brand small { font-size: 11px; }
}
@media (min-width: 960px) and (max-width: 1079.98px) {
  html[lang="en"] .hero h1 { font-size: 76px; }
}
@media (min-width: 1080px) {
  html[lang="en"] .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .68fr); }
  html[lang="en"] .hero h1 { font-size: 88px; }
  /* beside a 4-column stop head Baloo needs a smaller size to stay at 2–3 lines */
  html[lang="en"] .stop:not(.stop--wide) > .stop-head .title { font-size: 50px; }
  html[lang="en"] .stop:not(.stop--wide) > .stop-head .title.is-long { font-size: 44px; }
  html[lang="en"] .stop:not(.stop--wide) > .stop-head .title--sm { font-size: 38px; }
  /* footer: «فارسی» fits on the Pages column's second row */
  html[lang="en"] .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1.4fr; }
}