/* DoctorRa'no Clinic — site stylesheet.
 *
 * Ported from clinic-landing.dc.html. That export carried its layout as inline
 * `style="…"` on every element, its hover states as a non-standard
 * `style-hover="…"` attribute, and its animation state as CSS custom
 * properties that a React class rewrote on every render. The layout stays
 * inline (it is the design, verbatim); this file supplies what an attribute
 * could not express: the tokens, the reset, real :hover rules, and the
 * components that used to be component state. */

/* ---------------------------------------------------------------- tokens */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans-alt: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The display face for every section heading. */
  --font-display: "Montserrat Alternates", var(--rano-font), sans-serif;

  --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
  --transition-base: 200ms cubic-bezier(.4, 0, .2, 1);

  --ui-primary: rgb(0, 6, 180);
  --ui-bg: rgb(255, 255, 255);
  --ui-bg-muted: rgb(246, 247, 253);
  --ui-bg-elevated: rgb(237, 239, 249);
  --ui-bg-accented: rgb(222, 226, 244);
  --ui-bg-inverted: rgb(9, 12, 46);
  --ui-border: rgb(226, 230, 245);
  --ui-border-muted: rgb(236, 239, 250);
  --ui-border-accented: rgb(205, 212, 236);
  --ui-text-dimmed: rgb(145, 152, 178);
  --ui-text-muted: rgb(97, 105, 134);
  --ui-text-toned: rgb(70, 78, 105);
  --ui-text: rgb(48, 55, 79);
  --ui-text-highlighted: rgb(9, 12, 46);
  --ui-text-inverted: rgb(255, 255, 255);

  /* Ink values the export wrote literally rather than through a token. */
  --rano-ink: #0b0d1a;
  --rano-ink-soft: #6d7280;
  --rano-ink-grey: rgb(138, 147, 168);

  /* The export computed these in JS from editable design props. The props were
   * never exposed to an end user, so their defaults are frozen here. */
  --rano-font: "Inter", system-ui, sans-serif;
  --rano-heading-weight: 700;
  --rano-tracking: -0.02em;
  --rano-body-size: 16px;
  --rano-radius-card: 24px;
  --rano-radius-control: 16px;
  --rano-radius-pill: 999px;
  --rano-accent: #0006B4;
  --rano-accent-rgb: 0, 6, 180;
  --rano-section-gap: 88px;
  --rano-container: 1512px;
  --rano-glass: 0.58;
  --rano-tint: 1;
  --rano-primary: var(--rano-accent);
}

/* ----------------------------------------------------------------- reset */

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The header follows the page, so an anchor must stop below it
   * rather than under it. */
  scroll-padding-top: clamp(100px, 11vw, 124px);
}
body {
  margin: 0;
  font-size: var(--rano-body-size, 16px);
  font-family: var(--rano-font);
  color: var(--ui-text);
  background: var(--ui-bg);
}
img { max-width: 100%; }
a { color: var(--rano-accent); text-decoration: none; }

@keyframes rano-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* The three drift cycles the direction illustrations use. */
@keyframes rano-float0 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.4deg); }
}
@keyframes rano-float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-11px) rotate(1.6deg); }
}
@keyframes rano-float2 {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-16px) rotate(0.8deg); }
}

input[type=date]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input[type=date]::-webkit-inner-spin-button { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------- headings */

.h-section {
  font-family: var(--font-display);
  margin: 12px 0 0;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--rano-ink);
  text-wrap: balance;
}
/* Every heading is set in two tones: dark, then grey. */
.h-section .accent { color: var(--rano-ink-grey); }

/* Inner-page H1: same two-tone treatment, slightly tighter than a landing H2. */
.h-page {
  font-family: var(--font-display);
  margin: 14px 0 0;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--rano-ink);
  text-wrap: balance;
}
.h-page .accent { color: var(--rano-ink-grey); }

/* Headings inside the "О нас" page run lighter and larger. */
.h-about {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--rano-ink);
  text-wrap: balance;
}
.h-about .accent { color: rgb(150, 157, 180); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rano-accent);
}

.lede {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ui-text-muted);
  text-wrap: pretty;
}

/* ------------------------------------------------- hover (was style-hover) */

.hv-link:hover { color: var(--rano-accent); }
.hv-accent:hover { color: var(--rano-accent); }
.hv-bright:hover { filter: brightness(1.12); }
.hv-white:hover { background: #fff; }

.hv-card:hover {
  box-shadow: 0 18px 44px rgba(3, 5, 44, 0.1);
  transform: translateY(-3px);
}
.hv-cta:hover {
  background: rgba(var(--rano-accent-rgb), 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
              inset 0 0 0 1px rgba(255, 255, 255, 0.24),
              0 12px 28px rgba(var(--rano-accent-rgb), 0.34);
}

.hv-tint-14:hover { background: rgba(var(--rano-accent-rgb), 0.14); }
.hv-tint-13:hover { background: rgba(var(--rano-accent-rgb), 0.13); }
.hv-tint-12:hover { background: rgba(var(--rano-accent-rgb), 0.12); }
.hv-bg-50:hover { background: rgb(240, 243, 255); }
.hv-ink-09:hover { background: rgba(3, 5, 44, 0.09); }

/* --------------------------------------------------------- hero carousel */

.hero-slides { position: relative; }

/* The banner backdrop. Deliberately NO z-index: the export left the video in
 * the auto layer. Giving it one would lift it above every sibling that has no
 * z-index of its own — which silently buried the slide dots. */
.hero-bg {
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
}
.hero-bg.is-active { opacity: 1; }
.no-js .hero-bg:first-of-type { opacity: 1; }

/* The text slides do stack, so that the active one covers the others. */
.hero-slide {
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; z-index: 2; pointer-events: auto; }
.no-js .hero-slide:first-child { opacity: 1; z-index: 2; pointer-events: auto; }

.hero-headline {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgb(3, 5, 44);
  text-wrap: balance;
}
.hero-headline .accent { color: var(--rano-accent); }

.hero-lede {
  margin: 20px 0 0;
  max-width: 27rem;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgb(70, 78, 105);
  text-wrap: pretty;
}

.hero-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 206px;
  height: 42px;
  border: 0;
  border-radius: var(--rano-radius-pill);
  background: rgba(var(--rano-accent-rgb), 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 10px 24px rgba(var(--rano-accent-rgb), 0.28);
  font-family: var(--rano-font);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 180ms cubic-bezier(.4, 0, .2, 1);
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(3, 5, 44, 0.22);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1),
              background-color 260ms cubic-bezier(.4, 0, .2, 1);
}
.hero-dot:hover { background: rgba(var(--rano-accent-rgb), 0.45); }
.hero-dot[aria-selected="true"] { width: 34px; background: var(--rano-accent); }

/* ------------------------------------------------------------- directions */
/* Wide white cards: copy on the left, a slowly drifting illustration on the
 * right. The export revealed them in sequence once the section scrolled into
 * view; `.is-revealed` is set by the IntersectionObserver in site.js. */

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: 36px;
}

.dir-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  min-height: clamp(200px, 16vw, 240px);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.06);
  text-decoration: none;
  color: #14161f;
  transition: box-shadow 220ms cubic-bezier(.4, 0, .2, 1),
              transform 220ms cubic-bezier(.4, 0, .2, 1),
              opacity 520ms cubic-bezier(.4, 0, .2, 1);
}
/* Staged entrance. The cards are visible by default and are hidden only once
 * JS has confirmed it can reveal them again (`.reveal-armed`). Hiding them up
 * front would leave them invisible for good if the observer never fired. */
.dir-grid.reveal-armed:not(.is-revealed) .dir-card { opacity: 0; transform: translateY(18px); }
.dir-grid.is-revealed .dir-card { opacity: 1; transform: none; }
.dir-grid.is-revealed .dir-card:nth-child(1) { transition-delay: 0ms; }
.dir-grid.is-revealed .dir-card:nth-child(2) { transition-delay: 90ms; }
.dir-grid.is-revealed .dir-card:nth-child(3) { transition-delay: 180ms; }
.dir-grid.is-revealed .dir-card:nth-child(4) { transition-delay: 270ms; }
.dir-grid.is-revealed .dir-card:nth-child(5) { transition-delay: 360ms; }
.dir-grid.is-revealed .dir-card:nth-child(6) { transition-delay: 450ms; }

.dir-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rano-ink);
}
.dir-text {
  display: block;
  margin-top: 12px;
  max-width: 22rem;
  font-size: 15px;
  line-height: 22px;
  color: var(--rano-ink-soft);
  text-wrap: pretty;
}
.dir-cta {
  display: block;
  margin-top: clamp(20px, 2.4vw, 34px);
  font-size: 17px;
  font-weight: 600;
  color: var(--rano-accent);
}
.dir-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: clamp(120px, 13vw, 190px);
  flex-shrink: 0;
}
.dir-art img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}
/* Three cycles, alternating down the grid, so no two neighbours drift in sync. */
.dir-card:nth-child(3n+1) .dir-art img { animation: rano-float0 8s ease-in-out infinite; }
.dir-card:nth-child(3n+2) .dir-art img { animation: rano-float1 9s ease-in-out infinite; }
.dir-card:nth-child(3n+3) .dir-art img { animation: rano-float2 10s ease-in-out infinite; }

/* ------------------------------------------------------ services accordion */
/* Three image panels; the open one takes 1.9fr and reveals its description.
 * The export drove this with --rano-svc*-… variables rewritten per render;
 * here the open panel just carries `.is-open`. */

.svc-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  margin-top: 36px;
  transition: grid-template-columns 420ms cubic-bezier(.4, 0, .2, 1);
}

.svc-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: clamp(300px, 26vw, 380px);
  border-radius: calc(var(--rano-radius-card) * 1.2);
  background: #0b1020;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.07);
}
.svc-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 5, 44, 0) 30%,
                                      rgba(3, 5, 44, 0.32) 56%,
                                      rgba(3, 5, 44, 0.82) 100%);
}
.svc-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rano-radius-pill);
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.svc-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 26px);
}
.svc-title {
  display: block;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.svc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.svc-price { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }

.svc-text {
  display: block;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  transition: opacity 260ms cubic-bezier(.4, 0, .2, 1),
              max-height 320ms cubic-bezier(.4, 0, .2, 1),
              margin-top 320ms cubic-bezier(.4, 0, .2, 1);
}
.svc-panel.is-open .svc-text { opacity: 1; max-height: 64px; margin-top: 12px; }

/* The button does not fit a narrowed panel, so only the open one shows it. */
.svc-cta {
  display: none;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--rano-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  font-weight: 600;
  color: #14161f;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1);
}
.svc-panel.is-open .svc-cta { display: inline-flex; }

/* Progress bars under both the services and the doctors rails. */
.booking-heading {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0b0d1a;
}
.booking-heading span { color: var(--rano-accent); }
.booking-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.35;
  font-weight: 600;
  color: rgb(120, 127, 150);
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 26px;
  border-radius: var(--rano-radius-card);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
              0 10px 30px rgba(var(--rano-accent-rgb), 0.07);
}
.quote-text { margin: 0; font-size: 15px; line-height: 25px; color: rgb(40, 46, 74); text-wrap: pretty; }
.quote-by { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.quote-name { font-weight: 600; color: rgb(15, 20, 56); }
.quote-meta { color: rgb(130, 137, 160); }

.rail-bars { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rail-bar {
  position: relative;
  overflow: hidden;
  height: 4px;
  width: 30px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(3, 5, 44, 0.12);
  transition: width 380ms cubic-bezier(.4, 0, .2, 1);
}
.rail-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--rano-accent);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.4, 0, .2, 1);
}
.rail-bar[aria-selected="true"] { width: 64px; }
.rail-bar[aria-selected="true"]::after { opacity: 1; }

/* -------------------------------------------------------- doctors carousel */
/* Four cards on a sliding track; the selected one sits at full size, the
 * others recede. Three are in frame at a time. */

.doc-viewport {
  position: relative;
  overflow: hidden;
  margin: 0 -26px;
  padding: 26px 26px 44px;
  perspective: 1600px;
}
.doc-track {
  display: flex;
  align-items: flex-start;
  gap: 2%;
  transform: translateX(0%);
  transition: transform 560ms cubic-bezier(.4, 0, .2, 1);
}
.doc-slide {
  flex: 0 0 32%;
  position: relative;
  cursor: pointer;
  transform: scale(0.86);
  z-index: 1;
  transition: transform 520ms cubic-bezier(.4, 0, .2, 1);
}
.doc-slide.is-open { transform: scale(1); z-index: 10; }
.doc-slide:hover { transform: scale(0.86) scale(1.05); }
.doc-slide.is-open:hover { transform: scale(1.05); }

.doc-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(var(--rano-accent-rgb), 0.06);
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.06);
  opacity: 0.9;
  transition: opacity 420ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 420ms cubic-bezier(.4, 0, .2, 1);
}
.doc-slide.is-open .doc-card { opacity: 1; }

.doc-book { transition: gap 180ms cubic-bezier(.4, 0, .2, 1); }
.doc-book:hover { gap: 14px; color: #fff; }

.doc-arrow {
  position: absolute;
  top: clamp(120px, 14vw, 190px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(3, 5, 44, 0.09);
  font-size: 20px;
  color: var(--rano-accent);
  cursor: pointer;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1);
}
.doc-arrow:hover { background: rgb(240, 243, 255); }
.doc-arrow-prev { left: -6px; }
.doc-arrow-next { right: -6px; }

/* ------------------------------------------------------- analyses gateway */
/* Tall cards: copy at the top, artwork bleeding out of the bottom-left
 * corner, a solid pill bottom-right. */

.an-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: clamp(420px, 34vw, 520px);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.06);
  transition: box-shadow 420ms cubic-bezier(.4, 0, .2, 1),
              transform 420ms cubic-bezier(.4, 0, .2, 1);
}
.an-card-title {
  font-family: var(--font-display);
  margin: 6px 0 0;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--rano-ink);
}
.an-card-art {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 72%;
  height: 62%;
  transform-origin: 14% 100%;
  transition: transform 520ms cubic-bezier(.4, 0, .2, 1);
}
.an-card:hover .an-card-art { transform: scale(1.07); }
.an-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  animation: rano-float0 7s ease-in-out infinite;
  transform-origin: 50% 80%;
  will-change: transform;
}
.an-card-cta {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 2.2vw, 32px);
  bottom: clamp(22px, 2.2vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--rano-accent);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(var(--rano-accent-rgb), 0.24);
  transition: background 180ms cubic-bezier(.4, 0, .2, 1),
              transform 180ms cubic-bezier(.4, 0, .2, 1);
}
.an-card-cta:hover { background: rgb(0, 4, 132); color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------------- checkups */

.checkup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(340px, 26vw, 400px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 28px;
  background: linear-gradient(180deg, #fff 58%, rgb(240, 241, 248) 100%);
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.06);
  transition: box-shadow 220ms cubic-bezier(.4, 0, .2, 1),
              transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.checkup-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rano-ink);
  text-wrap: balance;
}
.checkup-age {
  font-family: var(--font-display);
  margin-top: 4px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.2;
  font-weight: 600;
  color: rgb(150, 157, 180);
}
.checkup-price {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rano-ink);
}
.checkup-cta {
  height: 56px;
  font-size: 16px;
  box-shadow: 0 12px 26px rgba(var(--rano-accent-rgb), 0.22);
}

/* ------------------------------------------------------------- about page */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.stat-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(22px, 2.6vw, 40px);
  min-height: clamp(148px, 13vw, 186px);
  padding: clamp(20px, 1.9vw, 26px) clamp(22px, 2vw, 28px);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.05);
}
.stat-white { background: #fff; }
.stat-grey { background: rgb(240, 240, 243); }
.stat-accent { background: var(--rano-accent); }

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.1vw, 46px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(154, 154, 162);
}
.stat-label { font-size: 15px; line-height: 20px; font-weight: 600; color: rgb(140, 143, 156); }
.stat-accent .stat-value, .stat-accent .stat-label { color: #fff; }

/* The badge deliberately overhangs the tile's right edge. */
.stat-badge {
  position: absolute;
  right: clamp(-56px, -4.4vw, -42px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(104px, 10vw, 132px);
  height: auto;
  object-fit: contain;
}
.stat-tile:has(.stat-badge) { overflow: visible; }

.feature-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: clamp(240px, 20vw, 290px);
  padding: clamp(22px, 2vw, 28px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(3, 5, 44, 0.06);
  transition: box-shadow 220ms cubic-bezier(.4, 0, .2, 1),
              transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.feature-title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rano-ink);
}
.feature-text { font-size: 14px; line-height: 21px; color: rgb(97, 105, 134); text-wrap: pretty; }
.feature-art {
  margin-top: auto;
  align-self: flex-end;
  width: clamp(96px, 9vw, 128px);
  height: auto;
  object-fit: contain;
}
.feature-icon { margin-top: auto; align-self: flex-end; color: var(--rano-accent); }

.about-video {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(var(--rano-accent-rgb), 0.06);
  aspect-ratio: 16 / 9;
}
.about-video > video, .about-video > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.about-video-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-video-scrim { position: absolute; inset: 0; background: rgba(3, 5, 44, 0.18); }
.about-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(3, 5, 44, 0.28);
  transition: background 180ms cubic-bezier(.4, 0, .2, 1),
              transform 180ms cubic-bezier(.4, 0, .2, 1);
}
.about-video-cover:hover .about-video-play { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.about-video-caption {
  position: absolute;
  left: clamp(18px, 2vw, 26px);
  bottom: clamp(18px, 2vw, 26px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(3, 5, 44, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* ----------------------------------------------------------- booking steps */

.step-row { display: flex; gap: 18px; }
.step-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--rano-radius-pill);
  background: var(--rano-accent);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.step-line { flex: 1; width: 2px; margin: 8px 0 0; background: rgba(var(--rano-accent-rgb), 0.14); }
.step-body { display: flex; flex-direction: column; gap: 6px; padding-bottom: 26px; }
.step-body-last { padding-bottom: 0; }
.step-title { font-size: 17px; line-height: 24px; font-weight: 600; color: rgb(15, 20, 56); }
.step-text { font-size: 15px; line-height: 23px; color: rgb(97, 105, 134); text-wrap: pretty; }

/* ---------------------------------------------------------- branches map */

.map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--rano-accent);
  font-family: var(--rano-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(3, 5, 44, 0.22);
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1),
              background 220ms cubic-bezier(.4, 0, .2, 1),
              color 220ms cubic-bezier(.4, 0, .2, 1);
}
.map-pin.is-active {
  transform: translate(-50%, -50%) scale(1.22);
  background: var(--rano-accent);
  color: #fff;
}

.branch-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 22px;
  background: #fff;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(var(--rano-accent-rgb), 0.1);
  transition: box-shadow 220ms cubic-bezier(.4, 0, .2, 1);
}
.branch-card.is-active {
  box-shadow: inset 0 0 0 1.5px var(--rano-accent),
              0 10px 26px rgba(var(--rano-accent-rgb), 0.12);
}
.branch-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(var(--rano-accent-rgb), 0.1);
  font-size: 13px;
  font-weight: 700;
  color: var(--rano-accent);
}

/* -------------------------------------------------------------- accordion */

.faq-list {
  border-radius: var(--rano-radius-control);
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--rano-accent-rgb), 0.07),
              0 10px 30px rgba(var(--rano-accent-rgb), 0.07);
}
.faq-item { position: relative; }
.faq-item-ruled { border-bottom: 1px solid rgba(var(--rano-accent-rgb), 0.07); }
.faq-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rano-accent); }
.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--rano-font);
}

.faq-answer {
  display: none;
  margin: 0;
  padding: 0 68px 22px 22px;
  font-size: 14.5px;
  line-height: 23px;
  color: rgb(97, 105, 134);
  text-wrap: pretty;
}
.faq-item.is-open .faq-answer { display: block; }
.faq-item .faq-chevron-up { display: none; }
.faq-item.is-open .faq-chevron-up { display: block; }
.faq-item.is-open .faq-chevron-down { display: none; }
.faq-item .faq-rail { opacity: 0; transition: opacity var(--transition-base); }
.faq-item.is-open .faq-rail { opacity: 1; }

/* The export duplicated each row's markup — once for the open colours, once
 * for the closed ones — and switched with sc-if. One copy, two states. */
.faq-question {
  font-size: 15.5px;
  line-height: 22px;
  font-weight: 600;
  color: rgb(15, 20, 56);
  transition: color var(--transition-base);
}
.faq-item.is-open .faq-question { color: var(--rano-accent); }

.faq-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--rano-radius-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--rano-accent-rgb), 0.16);
  color: rgb(120, 128, 156);
  transition: background var(--transition-base), color var(--transition-base),
              box-shadow var(--transition-base);
}
.faq-item.is-open .faq-chip { background: var(--rano-accent); box-shadow: none; color: #fff; }

.no-js .faq-answer { display: block; }

/* ------------------------------------------------------------------ tabs */

.tabscroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabscroll::-webkit-scrollbar { display: none; }

.tab-chip {
  flex-shrink: 0;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: rgb(70, 78, 105);
  text-decoration: none;
  transition: background-color 220ms cubic-bezier(.4, 0, .2, 1),
              color 220ms cubic-bezier(.4, 0, .2, 1);
}
.tab-chip:hover { background: rgba(var(--rano-accent-rgb), 0.07); color: var(--rano-accent); }
.tab-chip.is-active { font-weight: 600; background: var(--rano-accent); color: #fff; }

.site-nav-link {
  padding: 6px 4px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 500;
  color: rgb(70, 78, 105);
  text-decoration: none;
  transition: color 180ms cubic-bezier(.4, 0, .2, 1);
}
.site-nav-link:hover { color: var(--rano-accent); }
.site-nav-link[aria-current="page"] { color: var(--rano-accent); font-weight: 600; }

.phone-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 20px 0 16px;
  border-radius: var(--rano-radius-pill);
  text-decoration: none;
  background: rgba(3, 5, 44, 0.05);
  color: rgb(15, 20, 56);
  transition: background 180ms cubic-bezier(.4, 0, .2, 1),
              color 180ms cubic-bezier(.4, 0, .2, 1);
}
.phone-pill:hover {
  background: rgba(var(--rano-accent-rgb), 0.13);
  color: var(--rano-accent);
}


/* ------------------------------------------------------------- site header */
/* The navigation pill follows the page.
 *
 * Two mechanisms, because the two headers sit differently. The inner pages'
 * header is in the normal flow, so `sticky` is right: nothing below it needs
 * padding to make room. The landing's lives inside the hero, which is
 * `overflow:hidden` — that makes it a scroll container of its own, and a
 * sticky child sticks to *it*, coming unstuck the moment the hero leaves the
 * screen. `fixed` is measured against the viewport instead, and since the
 * hero starts at the top of the page the pill does not move by a pixel at
 * rest. Nothing in its ancestry has a transform or filter, which would
 * otherwise capture a fixed element.
 *
 * site.js adds .is-stuck once the page has actually moved. */

.site-header {
  z-index: 60;
}
.site-header--inner {
  position: sticky;
  top: 0;
}
.site-header--landing {
  position: fixed;
}

/* Below the hero the glass has white page behind it rather than video, so it
 * gains body to keep the menu legible. */
.site-header--landing.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
              inset 0 0 0 1px rgba(255, 255, 255, 0.6),
              0 14px 38px rgba(3, 5, 44, 0.16);
}

/* The inner header is a transparent band around an opaque pill, so content
 * would otherwise scroll through the gap above it. Fading it out reads as
 * intended; a solid band would put back the tinted strip the design dropped. */
.site-header--inner.is-stuck {
  background: linear-gradient(to bottom,
              rgba(247, 249, 255, 0.94) 55%, rgba(247, 249, 255, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header,
.site-header--landing.is-stuck {
  transition: background 220ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 220ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}


/* ------------------------------------------------------- language switcher */
/* A <details> disclosure rather than a <select>: the browser draws a select's
 * option list itself, so it landed on the glass pill as a stack of blue system
 * rows that no stylesheet could reach. */

.lang-switch { position: relative; }

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--rano-radius-pill);
  background: rgba(3, 5, 44, 0.05);
  color: rgb(3, 5, 44);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1),
              color 180ms cubic-bezier(.4, 0, .2, 1);
}
/* Safari and Chrome each draw their own marker on a summary. */
.lang-trigger::-webkit-details-marker { display: none; }
.lang-trigger::marker { content: ''; }

.lang-switch[open] .lang-trigger,
.lang-trigger:hover {
  background: rgba(var(--rano-accent-rgb), 0.13);
  color: var(--rano-accent);
}
.lang-trigger:focus-visible {
  outline: 2px solid var(--rano-accent);
  outline-offset: 2px;
}
.lang-current { font-size: 16px; font-weight: 600; }
/* The chevron points up while the menu is open. */
.lang-switch[open] .lang-trigger > svg:last-child { transform: rotate(180deg); }
.lang-trigger > svg:last-child { transition: transform 180ms cubic-bezier(.4, 0, .2, 1); }

.lang-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7),
              0 14px 34px rgba(3, 5, 44, 0.16);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  color: rgb(15, 20, 56);
  cursor: pointer;
  transition: background 140ms cubic-bezier(.4, 0, .2, 1),
              color 140ms cubic-bezier(.4, 0, .2, 1);
}
.lang-option:hover { background: rgba(var(--rano-accent-rgb), 0.09); }
.lang-option:focus-visible {
  outline: 2px solid var(--rano-accent);
  outline-offset: -2px;
}
.lang-option.is-active { color: var(--rano-accent); font-weight: 600; }
.lang-option.is-active .lang-option-code {
  background: var(--rano-accent);
  color: #fff;
}
.lang-option-code {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 0;
  border-radius: 7px;
  background: rgba(3, 5, 44, 0.06);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.lang-option-name { white-space: nowrap; }


/* ------------------------------------------------------------ form fields */
/* Stand-ins for Nuxt UI's <Input variant="soft" size="xl"> and its <Select>. */

.field {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--rano-radius-control);
  background: var(--ui-bg-elevated);
  font-family: var(--rano-font);
  font-size: 16px;
  color: var(--ui-text-highlighted);
  outline: 0;
  transition: box-shadow var(--transition-base);
}
.field::placeholder { color: var(--ui-text-dimmed); }
.field:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--rano-accent-rgb), 0.35); }

/* On the glass hero bar the controls need their own white surface with a
 * hairline, or they read as plain text. 40px matches the export's control. */
.field-onglass {
  height: 40px;
  font-size: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(3, 5, 44, 0.16);
}
/* Leaves room for the leading icon the design puts inside two of them. */
.field-with-icon { padding-left: 44px; }

/* A select shows its own colour for the chosen option, so an unchosen
 * placeholder would render as ordinary dark text. Dim it while it is empty. */
select.field:has(option[value=""]:checked) { color: var(--ui-text-dimmed); }
select.field option { color: var(--ui-text-highlighted); }

textarea.field { height: auto; min-height: 56px; padding: 16px 20px; line-height: 1.5; resize: vertical; }

select.field {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239198b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.field-sm { height: 44px; font-size: 15px; }
/* Pill-shaped search and sort controls with a leading icon. */
.field-pill { border-radius: 999px; padding-left: 48px; }
select.field-pill { padding-right: 46px; }
.field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--ui-text-toned);
  pointer-events: none;
}

.hero-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(15, 20, 56);
}

.footer-heading {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 20px;
  color: rgb(15, 20, 56);
}
.footer-link {
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  color: rgb(97, 105, 134);
  transition: color 180ms cubic-bezier(.4, 0, .2, 1);
}
.footer-link:hover { color: var(--rano-accent); }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  flex-shrink: 0;
  text-decoration: none;
  color: rgb(15, 20, 56);
  transition: color .18s ease, background .18s ease;
}
.social-link:hover {
  color: var(--rano-accent);
  background: color-mix(in oklab, var(--rano-accent) 10%, transparent);
}

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(3, 5, 44, 0.05);
  color: rgb(3, 5, 44);
  cursor: pointer;
}

.field-error {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: rgb(190, 18, 60);
}
.field-invalid { box-shadow: inset 0 0 0 1px rgb(190, 18, 60) !important; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--rano-radius-pill);
  font-family: var(--rano-font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 180ms cubic-bezier(.4, 0, .2, 1);
}
.btn-block { width: 100%; }
.btn-lg { height: 48px; font-size: 15px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13.5px; }

.btn-soft { background: rgba(var(--rano-accent-rgb), 0.07); color: var(--rano-accent); }
.btn-soft:hover { background: rgba(var(--rano-accent-rgb), 0.13); color: var(--rano-accent); }

.btn-primary { background: var(--rano-accent); color: #fff; }
.btn-primary:hover { background: rgb(0, 4, 132); color: #fff; }

.btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(3, 5, 44, 0.16);
  color: var(--ui-text-highlighted);
}
.btn-outline:hover { background: rgba(3, 5, 44, 0.05); color: var(--ui-text-highlighted); }

.btn-ghost {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(3, 5, 44, 0.12);
  color: rgb(15, 20, 56);
  height: 48px;
  padding: 0 22px;
  font-size: 15.5px;
}
.btn-ghost:hover { background: rgb(240, 243, 255); color: rgb(15, 20, 56); }

/* ------------------------------------------------------------------ grid */
/* The export laid sections on a fixed 12-column grid with hard `span` values
 * and no breakpoints — at phone widths the cards collapsed into unreadable
 * slivers. Same desktop geometry, with the columns folding. */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 1100px) { .span-3 { grid-column: span 6; } }
@media (max-width: 900px) {
  .span-4 { grid-column: span 6; }
  .span-5, .span-7, .span-8 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .span-3, .span-4, .span-6 { grid-column: span 12; }
}

/* ---------------------------------------------------------- table layouts */

.row-analyses {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
  gap: 14px;
}
/* The price table's column template is set inline, because the number of
 * price columns comes from pages.py rather than being fixed here. */
.row-prices {
  display: grid;
  gap: 14px;
}

@media (max-width: 720px) {
  .row-analyses, .row-prices { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px 14px; }
  .row-analyses > :first-child, .row-prices > :first-child { grid-column: 1 / -1; }
  .row-analyses:first-child, .row-prices:first-child { display: none; }
}

/* --------------------------------------------------------------- utility */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  /* Two doctor cards in frame instead of three. */
  .doc-slide { flex: 0 0 48%; }
}
@media (max-width: 900px) {
  :root { --rano-section-gap: 56px; }
  .site-nav-mobile-hidden { display: none !important; }
  /* The accordion cannot narrow further, so the panels stack full-width. */
  .svc-grid { grid-template-columns: 1fr; }
  .svc-panel { height: clamp(240px, 52vw, 320px); }
  .svc-text { opacity: 1; max-height: 64px; margin-top: 12px; }
  .svc-cta { display: inline-flex; }
  .rail-bars { display: none; }
  .dir-card { grid-template-columns: minmax(0, 1fr); }
  .dir-art { width: 140px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The overhanging badge has nowhere to go once the tiles narrow. */
  .stat-badge { display: none; }
}
@media (max-width: 640px) {
  .doc-slide { flex: 0 0 82%; }
  .doc-arrow { display: none; }
}