/* Homepage sections. Each block carries its own responsive rules. */

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  --w: min(100% - 2 * var(--gutter), var(--max));
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-block-size: min(max(42rem, 100svh), 64rem);
  padding-block-start: var(--header-h);
  background: var(--c-cream);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  z-index: -1;
  inset-block: var(--header-h) var(--facts-h, 7.5rem);
  inset-inline-end: 0;
  inline-size: calc(50% + .06 * var(--w));
  border-start-start-radius: var(--arch);
  overflow: hidden;
  background: var(--c-stone);
}
.hero__media picture, .hero__img { inline-size: 100%; block-size: 100%; }
.hero__img {
  object-fit: cover;
  object-position: 36% 50%;
  scale: 1.04;
  will-change: transform;
}
.hero__body { display: flex; align-items: center; padding-block: clamp(2.5rem, 6vh, 5rem); }
.hero__copy { max-inline-size: calc(.44 * var(--w)); }
.hero__eyebrow { color: var(--c-ink-2); }
.dot { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--c-cyan); flex: none; }
.hero__title {
  margin-block: 1.75rem 2rem;
  font-size: clamp(3rem, 1rem + 5vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.hero__title .line { display: block; overflow: hidden; padding-block-end: .08em; margin-block-end: -.08em; }
.hero__title .line > * { display: inline-block; }
.hero__title em { color: var(--c-indigo); }
.hero__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-ink-2); max-inline-size: 32rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-block-start: 2.5rem; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 1.5rem 3rem;
  min-block-size: var(--facts-h, 7.5rem);
  align-content: center;
  border-block-start: 1px solid var(--c-rule);
}
.hero__facts div { display: grid; gap: .35rem; }
.hero__facts dt { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); }
.hero__facts dd { font-size: .9375rem; color: var(--c-ink); }
.hero__facts a:hover { color: var(--c-indigo); }

@media (prefers-reduced-motion: no-preference) {
  .hero__media { animation: hero-media 1.6s var(--ease-out) both; }
  .hero__img { animation: hero-img 2.4s var(--ease-out) both; }
  .hero__title .line > * { animation: line-up 1.1s var(--ease-out) both; }
  .hero__title .line:nth-child(2) > * { animation-delay: .1s; }
  .hero__title .line:nth-child(3) > * { animation-delay: .2s; }
  .hero__eyebrow, .hero__lead, .hero__actions, .hero__facts { animation: fade-up 1s var(--ease-out) both; }
  .hero__eyebrow { animation-delay: .05s; }
  .hero__lead { animation-delay: .35s; }
  .hero__actions { animation-delay: .45s; }
  .hero__facts { animation-delay: .6s; }
}
@keyframes hero-media { from { clip-path: inset(0 0 0 18%); } to { clip-path: inset(0); } }
[dir="rtl"] .hero__media { animation-name: hero-media-rtl; }
@keyframes hero-media-rtl { from { clip-path: inset(0 18% 0 0); } to { clip-path: inset(0); } }
@keyframes hero-img { from { scale: 1.14; } to { scale: 1.04; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .hero { display: block; min-block-size: 0; padding-block-end: 0; }
  .hero__body { padding-block: clamp(2.5rem, 7vw, 4rem) 2.5rem; }
  .hero__copy { max-inline-size: 38rem; }
  .hero__title { font-size: clamp(3.1rem, 1.6rem + 7vw, 5.5rem); margin-block: 1.25rem 1.5rem; }
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    margin-inline-start: var(--gutter);
    inline-size: auto;
    aspect-ratio: 16 / 10;
    border-start-start-radius: clamp(3.5rem, 18vw, 9rem);
  }
  .hero__img { object-position: 40% 50%; }
  .hero__facts {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    padding-block: 2rem 2.5rem;
    border: 0;
  }
  .hero__facts div:first-child { grid-column: 1 / -1; }
  .hero__facts div { padding-block-start: 1rem; border-block-start: 1px solid var(--c-rule); }
}
@media (max-width: 479px) {
  .hero__media { aspect-ratio: 5 / 4; }
  .hero__facts { grid-template-columns: 1fr; gap: 1rem; }
  .hero__actions .btn { inline-size: 100%; justify-content: space-between; }
}

/* =========================================================
   2. INTRODUCTION
   ========================================================= */
.intro { background: var(--c-paper); }
.section-head--split {
  max-inline-size: none;
  grid-template-columns: minmax(10rem, 1fr) 3fr;
  gap: 2rem 4rem;
  align-items: baseline;
}
.intro__statement {
  font-size: var(--fs-statement);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: pretty;
  max-inline-size: 30ch;
}
.intro__statement em { color: var(--c-indigo); }

.intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: end;
  margin-block-start: clamp(4rem, 3rem + 5vw, 8rem);
}
.intro__figure { aspect-ratio: 4 / 5; max-block-size: 40rem; background: var(--c-stone); }
.intro__figure picture, .intro__figure img { inline-size: 100%; block-size: 100%; }
.intro__figure img { object-fit: cover; object-position: 30% 50%; }

.triad__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: baseline;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-block-start: 1px solid var(--c-rule);
}
.triad__item:last-child { border-block-end: 1px solid var(--c-rule); }
.triad__num { font: italic 300 1.1rem/1 var(--font-serif); color: var(--c-cyan-ink); }
.triad__word { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.75rem); line-height: 1; }
.triad__word em { color: var(--c-indigo); }
.triad__item p { color: var(--c-ink-2); }
.triad__item:nth-child(2) { --reveal-delay: .08s; }
.triad__item:nth-child(3) { --reveal-delay: .16s; }

@media (max-width: 1023px) {
  .section-head--split { grid-template-columns: 1fr; }
  .intro__grid { grid-template-columns: 1fr; }
  .intro__figure { aspect-ratio: 16 / 10; max-inline-size: 36rem; }
}
@media (max-width: 599px) {
  .triad__item { grid-template-columns: 2.25rem 1fr; }
  .triad__item p { grid-column: 2; }
  .intro__figure { aspect-ratio: 4 / 3; }
}

/* =========================================================
   3. THE 5P APPROACH
   ========================================================= */
.fivep { background: var(--c-indigo-night); color: var(--c-on-dark); position: relative; overflow: hidden; }
.fivep::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -20%;
  inline-size: 70rem; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 176, 240, .12), transparent 70%);
  pointer-events: none;
}
.fivep h2 { color: var(--c-on-dark); }
.fivep h2 em { color: var(--c-cyan-soft); }
.fivep .eyebrow { color: var(--c-on-dark-2); }
.fivep .eyebrow .num { color: var(--c-cyan-soft); border-color: var(--c-rule-dark); }
.fivep .section-intro { color: var(--c-on-dark-2); }
.fivep__head { max-inline-size: 52rem; }

.fivep__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, .95fr) minmax(18rem, 1.1fr) minmax(17rem, 1fr);
  grid-template-areas: "tabs dial panels";
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  margin-block-start: clamp(3.5rem, 2rem + 5vw, 7rem);
}

.fivep__tabs { grid-area: tabs; display: grid; border-block-start: 1px solid var(--c-rule-dark); }
.fivep__tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  padding-block: 1.2rem;
  text-align: start;
  border-block-end: 1px solid var(--c-rule-dark);
  color: var(--c-on-dark-2);
  transition: color .35s;
}
.fivep__tab::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1px;
  inline-size: 100%;
  block-size: 1px;
  background: var(--c-cyan);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform .7s var(--ease-out);
}
[dir="rtl"] .fivep__tab::after { --origin: right; }
.fivep__code { font: 600 .75rem/1 var(--font-sans); letter-spacing: .1em; color: var(--c-cyan-soft); }
.fivep__label { font: 300 clamp(1.15rem, 1rem + .5vw, 1.5rem)/1.2 var(--font-serif); }
.fivep__tab:hover { color: var(--c-on-dark); }
.fivep__tab[aria-selected="true"] { color: var(--c-on-dark); }
.fivep__tab[aria-selected="true"]::after { transform: scaleX(1); }
.fivep__tab:focus-visible { outline-color: var(--c-cyan-soft); }

.fivep__dial { grid-area: dial; position: relative; aspect-ratio: 1; inline-size: 100%; max-inline-size: 30rem; justify-self: center; }
.fivep__ring { inline-size: 100%; block-size: 100%; overflow: visible; }
.fivep__orbit { fill: none; stroke: var(--c-rule-dark); stroke-width: .5; stroke-dasharray: 1 3; }
.fivep__core { fill: rgba(246, 241, 232, .03); stroke: var(--c-rule-dark); stroke-width: .5; }
.fivep__hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; pointer-events: stroke; }
.fivep__arc { fill: none; stroke: rgba(246, 241, 232, .22); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; transition: stroke .5s, stroke-width .5s; }
.fivep__arc.is-active { stroke: var(--c-cyan); stroke-width: 3; }
.fivep__node { fill: var(--c-indigo-night); stroke: rgba(246, 241, 232, .35); stroke-width: .75; transition: fill .5s, stroke .5s; cursor: pointer; }
.fivep__node.is-active { fill: var(--c-cyan); stroke: var(--c-cyan); }
.fivep__node-label { font: 600 5.5px var(--font-sans); letter-spacing: .05em; fill: var(--c-on-dark-2); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill .5s; }
.fivep__node-label.is-active { fill: var(--c-indigo-night); }
.fivep__big {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 300 clamp(4.5rem, 2rem + 6vw, 8.5rem)/1 var(--font-serif);
  letter-spacing: -.04em;
  color: var(--c-on-dark);
  pointer-events: none;
}
.fivep__big.is-changing { animation: big-swap .7s var(--ease-out); }
@keyframes big-swap { from { opacity: 0; transform: translateY(.4em); filter: blur(4px); } }

.fivep__panels { grid-area: panels; display: grid; }
.fivep__panel { grid-area: 1 / 1; display: grid; gap: 1.25rem; align-content: center; }
.fivep__panel:focus-visible { outline-color: var(--c-cyan-soft); outline-offset: 1rem; }
.fivep__panel.is-entering { animation: fade-up .7s var(--ease-out); }
.fivep__kicker { font: 600 var(--fs-eyebrow)/1.3 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-cyan-soft); }
.fivep__panel h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem); color: var(--c-on-dark); }
.fivep__panel p:last-child { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-on-dark-2); }

/* Without JavaScript: show all five principles as a readable list. */
html:not(.js) .fivep__tabs, html:not(.js) .fivep__dial { display: none; }
html:not(.js) .fivep__stage { grid-template-columns: 1fr; grid-template-areas: "panels"; }
html:not(.js) .fivep__panel { grid-area: auto; padding-block: 1.5rem; border-block-start: 1px solid var(--c-rule-dark); }

@media (max-width: 1099px) {
  .fivep__stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "dial panels" "tabs tabs";
    row-gap: 3rem;
  }
  .fivep__tabs { grid-template-columns: repeat(5, 1fr); border: 0; gap: .5rem; }
  .fivep__tab { grid-template-columns: 1fr; gap: .6rem; padding: 1rem 0 1.1rem; border-block-start: 1px solid var(--c-rule-dark); border-block-end: 0; }
  .fivep__tab::after { inset-block-end: auto; inset-block-start: -1px; }
  .fivep__label { font-size: 1rem; }
}
@media (max-width: 719px) {
  .fivep__stage { grid-template-columns: 1fr; grid-template-areas: "dial" "tabs" "panels"; row-gap: 2rem; }
  .fivep__dial { max-inline-size: 17rem; }
  .fivep__tabs { gap: .35rem; }
  .fivep__tab { justify-items: center; text-align: center; min-block-size: 3rem; padding-block: .9rem; }
  .fivep__label { display: none; }
  .fivep__code { font-size: .875rem; }
  .fivep__panels { min-block-size: 15rem; align-content: start; }
  .fivep__panel { align-content: start; }
}

/* =========================================================
   4. TEAM
   ========================================================= */
.team { background: var(--c-cream); }
.team__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.team__aside { display: grid; gap: 3rem; }
@media (min-width: 1024px) and (min-height: 760px) {
  .team__aside { position: sticky; inset-block-start: calc(var(--header-h) + 2.5rem); }
}

/* Editorial name plate: a deliberate typographic treatment, not a missing photo. */
.plate {
  position: relative;
  aspect-ratio: 4 / 5;
  max-inline-size: 22rem;
  display: grid;
  place-items: center;
  color: var(--c-on-dark);
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(0, 176, 240, .16), transparent 70%),
    var(--c-indigo-night);
}
.plate::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 58%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid var(--c-rule-dark);
}
/* Small cyan point sitting on top of the ring (ring top = 50% - 29% of width = 26.8% of height). */
.plate::after {
  content: "";
  position: absolute;
  inset-block-start: 26.8%;
  inset-inline-start: 50%;
  inline-size: .45rem;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--c-cyan);
}
[dir="rtl"] .plate::before, [dir="rtl"] .plate::after { translate: 50% -50%; }
.plate__img { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; }
.plate__mark {
  position: absolute;
  inset-block-start: 14%;
  font: 600 .625rem/1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}
.plate__mono {
  position: relative;
  font: italic 300 clamp(3.5rem, 2.6rem + 2.4vw, 5rem)/1 var(--font-serif);
  letter-spacing: .04em;
  color: var(--c-on-dark);
}
.plate__mono.is-changing { animation: big-swap .6s var(--ease-out); }
.plate__cap {
  position: absolute;
  inset-inline: 1.5rem;
  inset-block-end: 1.75rem;
  display: grid;
  gap: .4rem;
  justify-items: center;
  text-align: center;
}
.plate__name { font: 300 1.2rem/1.2 var(--font-serif); color: var(--c-on-dark); }
.plate__spec { min-block-size: 1em; font: 500 .6875rem/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cyan-soft); }

.roster { border-block-start: 1px solid var(--c-rule-strong); counter-reset: doctor; }
.roster li { counter-increment: doctor; }
.roster__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem 2rem;
  padding-block: clamp(1.2rem, 1rem + .6vw, 1.6rem);
  border-block-end: 1px solid var(--c-rule);
}
.roster__name {
  font: 300 clamp(1.45rem, 1.05rem + 1.3vw, 2.2rem)/1.15 var(--font-serif);
  letter-spacing: -.015em;
  transition: transform .5s var(--ease-out), color .35s;
}
.roster__spec { font-size: .875rem; color: var(--c-ink-2); text-align: end; }
.roster__spec--pending { font-style: italic; color: var(--c-ink-3); }
.roster__row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: 1.25rem;
  block-size: 1px;
  background: var(--c-cyan);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform .5s var(--ease-out);
}
[dir="rtl"] .roster__row::before { --origin: right; }
.roster__row:hover .roster__name, .roster__row:focus-visible .roster__name, .roster__row.is-active .roster__name { transform: translateX(2rem); color: var(--c-indigo); }
[dir="rtl"] .roster__row:hover .roster__name, [dir="rtl"] .roster__row:focus-visible .roster__name, [dir="rtl"] .roster__row.is-active .roster__name { transform: translateX(-2rem); }
.roster__row:hover::before, .roster__row:focus-visible::before, .roster__row.is-active::before { transform: scaleX(1); }
.team__more { margin-block-start: 2.5rem; }

@media (max-width: 1023px) {
  .team__grid { grid-template-columns: 1fr; gap: 3rem; }
  .plate { display: none; }
  .roster__row { grid-template-columns: 2.5rem 1fr; column-gap: 1rem; row-gap: .2rem; }
  /* Small index numbers replace the plate on smaller screens. */
  .roster__row::before {
    content: counter(doctor, decimal-leading-zero);
    position: static;
    grid-row: span 2;
    inline-size: auto;
    block-size: auto;
    padding-block-start: .55rem;
    background: none;
    transform: none;
    font: 500 .75rem/1 var(--font-sans);
    letter-spacing: .06em;
    color: var(--c-cyan-ink);
  }
  .roster__spec { text-align: start; }
  .roster__row:hover .roster__name, .roster__row:focus-visible .roster__name, .roster__row.is-active .roster__name { transform: none; }
}

/* =========================================================
   5. SERVICES
   ========================================================= */
.services { background: var(--c-paper); }
.services__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.services__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  max-block-size: 46rem;
  border-start-end-radius: var(--arch);
  overflow: hidden;
  background: var(--c-stone);
}
.services__figure picture, .services__figure img { inline-size: 100%; block-size: 100%; }
.services__figure img { object-fit: cover; object-position: 45% 60%; }
.services__body { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); justify-items: start; }

.entries { inline-size: 100%; border-block-start: 1px solid var(--c-rule-strong); }
.entry {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
  row-gap: .6rem;
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-block-end: 1px solid var(--c-rule);
}
.entry__num { grid-row: span 2; padding-block-start: .6rem; font: 500 .75rem/1 var(--font-sans); letter-spacing: .06em; color: var(--c-cyan-ink); }
.entry h3 { font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); }
.entry p { max-inline-size: 30rem; color: var(--c-ink-2); }
.entry:nth-child(2) { --reveal-delay: .08s; }
.entry:nth-child(3) { --reveal-delay: .16s; }

@media (max-width: 1023px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__figure { aspect-ratio: 16 / 11; max-inline-size: 44rem; order: 2; }
  .services__body { order: 1; }
}
@media (max-width: 479px) {
  .entry { grid-template-columns: 2.5rem 1fr; }
}

/* =========================================================
   6. MEDICAL LAB & FUNCTIONAL DIAGNOSTICS
   ========================================================= */
.lab { background: linear-gradient(180deg, var(--c-stone), #efe8dc 60%, var(--c-cream)); }
.section-head--wide {
  max-inline-size: none;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  align-items: end;
}
.section-head--wide .eyebrow { grid-column: 1 / -1; }
.section-head--wide .section-intro { padding-block-end: .5rem; }

.lab-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem clamp(2rem, 4vw, 4.5rem);
  margin-block-start: clamp(4.5rem, 3rem + 5vw, 8rem);
}
.lab-line { display: grid; align-content: start; gap: 1rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--c-rule-strong); }
.lab-line__num { font: 500 .75rem/1 var(--font-sans); letter-spacing: .06em; color: var(--c-cyan-ink); }
.lab-line h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); }
.lab-line p { max-inline-size: 22rem; color: var(--c-ink-2); }
.lab-line:nth-child(2) { --reveal-delay: .08s; }
.lab-line:nth-child(3) { --reveal-delay: .16s; }

.signature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 7rem);
  margin-block-start: clamp(5rem, 3.5rem + 5vw, 9rem);
  padding: clamp(2.5rem, 1rem + 5vw, 6rem);
  background: var(--c-paper);
  border-start-end-radius: var(--arch);
  box-shadow: 0 2rem 5rem -2rem rgba(26, 29, 58, .12);
}
.signature__intro { display: grid; gap: 1.5rem; max-inline-size: 36rem; }
.signature__intro h3 { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.6rem); line-height: 1.05; }
.signature__lead { font-size: 1.0625rem; color: var(--c-ink-2); }
.signature__path {
  padding-block: 1.5rem;
  border-block: 1px solid var(--c-rule);
  font: italic 300 clamp(1.3rem, 1.1rem + .7vw, 1.7rem)/1.4 var(--font-serif);
  color: var(--c-ink);
}
.signature__for { font: 500 .875rem/1 var(--font-sans); color: var(--c-indigo); }

/* 360° orbit: three phases summarised, the full pathway lives on the Medical Lab page. */
.orbit { position: relative; inline-size: 100%; max-inline-size: 19rem; aspect-ratio: 1; justify-self: center; margin-block: 2.5rem 3.5rem; }
.orbit__svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.orbit__track { fill: none; stroke: var(--c-rule); stroke-width: 1; }
.orbit__line {
  fill: none;
  stroke: var(--c-indigo);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 120px 120px;
  transition: stroke-dashoffset 2.2s var(--ease-soft) .3s;
}
.js .signature:not(.is-in) .orbit__line { stroke-dashoffset: 100; }
.orbit__dot { fill: var(--c-paper); stroke: var(--c-indigo); stroke-width: 1.25; }
.orbit__dot--end { fill: var(--c-indigo); }
.orbit__deg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 300 clamp(3.5rem, 2rem + 4vw, 5.75rem)/1 var(--font-serif);
  letter-spacing: -.04em;
  color: var(--c-indigo);
}
.orbit__label {
  position: absolute;
  max-inline-size: 9rem;
  font: 500 .8125rem/1.35 var(--font-sans);
  color: var(--c-ink-2);
}
.orbit__label--top { inset-block-end: calc(90% + .9rem); inset-inline-start: 50%; translate: -50% 0; max-inline-size: none; text-align: center; white-space: nowrap; }
[dir="rtl"] .orbit__label--top { translate: 50% 0; }
/* Side labels sit outside the ring, below and outward of their point. */
.orbit__label--right { inset-block-start: calc(70% + 1rem); inset-inline-start: calc(84.6% + .5rem); inline-size: 8rem; }
.orbit__label--left { inset-block-start: calc(70% + 1rem); inset-inline-end: calc(84.6% + .5rem); inline-size: 8rem; text-align: end; }

.lab__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-block-start: clamp(3rem, 2rem + 2vw, 4.5rem);
}
.disclaimer { max-inline-size: 36rem; font-size: .875rem; color: var(--c-ink-3); }

@media (max-width: 1099px) {
  .signature { grid-template-columns: 1fr; }
  .orbit { margin-block: 2rem 4rem; }
}
@media (max-width: 767px) {
  .section-head--wide { grid-template-columns: 1fr; }
  .lab-lines { grid-template-columns: 1fr; gap: 0; }
  .lab-line { grid-template-columns: 2.5rem 1fr; column-gap: .5rem; row-gap: .5rem; padding-block: 1.75rem; }
  .lab-line__num { grid-row: span 2; padding-block-start: .6rem; }
  .signature { border-start-end-radius: clamp(3rem, 16vw, 6rem); }
  /* Phones: ring on top, the three phases in sequence beneath it. */
  .orbit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1.5rem;
    max-inline-size: none;
    aspect-ratio: auto;
    margin-block: 1rem 0;
  }
  .orbit__svg, .orbit__deg { grid-column: 1 / -1; grid-row: 1; justify-self: center; inline-size: 12rem; block-size: 12rem; }
  .orbit__deg { position: static; font-size: 3.25rem; }
  .orbit__label { position: static; grid-row: 2; inline-size: auto; max-inline-size: none; translate: none; white-space: normal; text-align: center; font-size: .75rem; }
  .orbit__label--top { grid-column: 1; }
  .orbit__label--right { grid-column: 2; }
  .orbit__label--left { grid-column: 3; }
  .lab__foot .btn { inline-size: 100%; justify-content: space-between; }
}

/* =========================================================
   7. MEASUREMENT
   ========================================================= */
.measure { background: var(--c-paper); }
.measure__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); align-items: end; }
.measure__figure {
  position: relative;
  aspect-ratio: 3 / 2;
  border-start-start-radius: var(--arch);
  overflow: hidden;
  background: var(--c-stone);
}
.measure__figure picture, .measure__figure img { inline-size: 100%; block-size: 100%; }
.measure__figure img { object-fit: cover; object-position: 60% 60%; }

.instruments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem clamp(2rem, 4vw, 4.5rem);
  margin-block-start: clamp(4.5rem, 3rem + 5vw, 8rem);
}
.instrument { display: grid; gap: .75rem; align-content: start; padding-block-start: 2.25rem; border-block-start: 1px solid var(--c-rule-strong); }
.instrument:nth-child(2) { --reveal-delay: .1s; }
.instrument:nth-child(3) { --reveal-delay: .2s; }
.instrument__glyph {
  inline-size: 7.5rem;
  block-size: 2.5rem;
  margin-block-end: 1.5rem;
  fill: none;
  stroke: var(--c-indigo);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .5s;
}
.instrument__glyph * { stroke-dasharray: 260; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-soft) .3s; }
.js .instrument:not(.is-in) .instrument__glyph * { stroke-dashoffset: 260; }
.instrument:hover .instrument__glyph { stroke: var(--c-cyan-ink); }
.instrument__name { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); }
.instrument__purpose { font-size: 1.0625rem; color: var(--c-ink-2); }

@media (max-width: 1023px) {
  .measure__top { grid-template-columns: 1fr; }
  .measure__figure { border-start-start-radius: clamp(3.5rem, 16vw, 8rem); }
}
@media (max-width: 767px) {
  .instruments { grid-template-columns: 1fr; gap: 0; }
  .instrument { grid-template-columns: 1fr auto; column-gap: 1.5rem; padding-block: 2rem; }
  .instrument__glyph { grid-column: 2; grid-row: 1 / span 2; align-self: center; inline-size: 5.5rem; margin: 0; }
  .instrument__name, .instrument__purpose { grid-column: 1; }
}

/* =========================================================
   8. PRACTICAL INFORMATION
   ========================================================= */
.visit { background: var(--c-cream); }
.visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.visit__info { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }

.facts { border-block-start: 1px solid var(--c-rule-strong); }
.facts__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: .35rem 2rem;
  padding-block: 1.5rem;
  border-block-end: 1px solid var(--c-rule);
}
.facts dt { font: 600 .6875rem/1.8 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); }
.facts dd { font-size: 1.0625rem; line-height: 1.6; }
.facts a { background: linear-gradient(var(--c-cyan), var(--c-cyan)) no-repeat 0 100% / 0 1px; transition: background-size .45s var(--ease-out), color .3s; }
.facts a:hover { background-size: 100% 1px; color: var(--c-indigo); }
.facts dd .facts__dir { display: flex; inline-size: fit-content; align-items: center; gap: .4rem; margin-block-start: .6rem; font: 500 .875rem/1.2 var(--font-sans); color: var(--c-indigo); }

.visit__map { display: grid; gap: 1.25rem; }
.map-card {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--c-paper);
  border-start-start-radius: var(--arch);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--c-rule);
}
.map-card__art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.map-card__streets path { fill: none; stroke: rgba(26, 29, 58, .07); stroke-width: 14; stroke-linecap: round; }
.map-card__streets .map-card__main { stroke: rgba(0, 176, 240, .16); stroke-width: 18; }
.map-card__halo { fill: rgba(0, 176, 240, .14); stroke: rgba(0, 176, 240, .45); stroke-width: 1; transform-origin: 240px 250px; }
.map-card__pin { fill: var(--c-indigo); stroke: var(--c-paper); stroke-width: 3; }
.js .visit__map.is-in .map-card__halo { animation: halo 2.4s var(--ease-out) .4s 2 both; }
@keyframes halo { 0% { transform: scale(.4); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.map-card__label {
  position: absolute;
  inset-block-start: calc(250 / 560 * 100% + 2.25rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid; gap: .15rem; justify-items: center;
  padding: .75rem 1.1rem;
  background: var(--c-paper);
  border-radius: .5rem;
  box-shadow: 0 .75rem 2rem rgba(26, 29, 58, .1);
  font-size: .8125rem; color: var(--c-ink-2);
  white-space: nowrap;
}
[dir="rtl"] .map-card__label { translate: 50% 0; }
.map-card__name { font: 600 .875rem/1.2 var(--font-sans); letter-spacing: .08em; color: var(--c-indigo); }
.map-card__note { position: absolute; inset-block-end: 1rem; inset-inline-start: 1.25rem; font-size: .75rem; color: var(--c-ink-3); }
.visit__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.visit__actions .btn--solid { flex: 1 1 14rem; justify-content: space-between; }
.visit__actions .btn--line { flex: 0 1 9rem; }

@media (max-width: 1023px) {
  .visit__grid { grid-template-columns: 1fr; }
  .map-card { aspect-ratio: 16 / 10; border-start-start-radius: clamp(3rem, 16vw, 7rem); }
}
@media (max-width: 559px) {
  .facts__row { grid-template-columns: 1fr; }
  .map-card { aspect-ratio: 4 / 3; }
  .visit__actions .btn--line { flex: 1 1 8rem; }
}

/* =========================================================
   9. CLOSING
   ========================================================= */
.closing {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: clamp(36rem, 88vh, 52rem);
  padding-block: var(--section);
  isolation: isolate;
  overflow: hidden;
}
.closing__media { position: absolute; inset: 0; z-index: -1; }
.closing__media picture, .closing__media img { inline-size: 100%; block-size: 100%; }
.closing__media img { object-fit: cover; object-position: 70% 50%; }
.closing__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(var(--closing-dir, 90deg), rgba(246, 241, 232, .97) 0%, rgba(246, 241, 232, .9) 38%, rgba(246, 241, 232, .35) 70%, rgba(246, 241, 232, .1) 100%);
}
[dir="rtl"] .closing__media::after { --closing-dir: -90deg; }
.closing__body { display: grid; gap: 1.75rem; }
.closing__body > * { max-inline-size: 40rem; }
.closing h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.5rem); }
.closing h2 em { color: var(--c-indigo); }
.closing__actions { display: grid; margin-block-start: 1rem; border-block-start: 1px solid var(--c-rule-strong); }
.contact-link {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--c-rule-strong);
}
.contact-link__k { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); }
.contact-link__v { font: 300 clamp(1.3rem, 1.05rem + .9vw, 1.9rem)/1.2 var(--font-serif); transition: color .3s, transform .5s var(--ease-out); overflow-wrap: anywhere; }
.contact-link:hover .contact-link__v { color: var(--c-indigo); transform: translateX(.5rem); }
[dir="rtl"] .contact-link:hover .contact-link__v { transform: translateX(-.5rem); }

@media (max-width: 767px) {
  .closing { align-items: end; }
  .closing__media::after { background: linear-gradient(0deg, rgba(246, 241, 232, .98) 0%, rgba(246, 241, 232, .94) 60%, rgba(246, 241, 232, .45) 100%); }
  .contact-link { grid-template-columns: 1fr; gap: .4rem; }
}

/* Links to the 5P Diagnostics page */
.fivep .fivep__more { justify-self: start; color: var(--c-on-dark); }
.fivep .fivep__more:hover { color: var(--c-cyan-soft); }
.fivep .fivep__more:focus-visible { outline-color: var(--c-cyan-soft); }
.measure__more { margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }