/* =========================================================================
   Astang Ayurveda — design system

   One hue carries the site: the ocean green the brand already used. The logo
   purple appears only as a small accent. Type is Segoe UI throughout.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
  /* Brand — re-declared inline by the Customizer; these are the fallbacks. */
  --brand-primary: #0B7F73;
  --brand-deep:    #075E55;
  --brand-soft:    #13BFB1;
  --brand-leaf:    #457710;
  --brand-purple:  #830080;

  --brand-primary-rgb: 11 127 115;
  --brand-deep-rgb:    7 94 85;
  --brand-soft-rgb:    19 191 177;
  --brand-leaf-rgb:    69 119 16;
  --brand-purple-rgb:  131 0 128;

  /* Every component reads these, so one hue change repaints the site. */
  --accent:     var(--brand-primary);
  --accent-rgb: var(--brand-primary-rgb);

  /*
   * Ground — warm paper rather than pale mint.
   *
   * A green site on a green-grey ground has no colour in it: the accent and the
   * background are the same idea at different strengths, which is why the page
   * read as washed out however saturated the green got. Putting the greens on
   * linen and clay instead gives the one hue something to be a colour against,
   * and the warm neutrals are the right register for the subject anyway —
   * turmeric, jute, terracotta, unbleached cotton.
   */
  --white:   #FFFFFF;
  --paper:   #FCFAF6;
  --mist:    #F5F0E7;
  --mist-2:  #EBE3D4;
  --line:    #E3DACA;
  --line-2:  #F0EADF;
  --ink:     #14211E;
  --ink-2:   #45564F;
  --ink-3:   #7B8781;

  /* Type — Segoe UI first, with a graceful cross-platform fallback chain. */
  --font-ui: "Segoe UI", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;

  --step--2: 0.75rem;
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.14vw, 1.02rem);
  --step-1:  clamp(1.08rem, 1.03rem + 0.24vw, 1.22rem);
  --step-2:  clamp(1.28rem, 1.18rem + 0.46vw, 1.6rem);
  --step-3:  clamp(1.55rem, 1.35rem + 0.9vw, 2.15rem);
  --step-4:  clamp(1.9rem, 1.55rem + 1.6vw, 2.9rem);
  --step-5:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  --container: 1240px;
  --gutter: clamp(1rem, 3.5vw, 2.25rem);

  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgb(15 36 32 / 0.05);
  --shadow-sm: 0 1px 2px rgb(15 36 32 / 0.05), 0 3px 10px rgb(15 36 32 / 0.05);
  --shadow-md: 0 4px 14px rgb(15 36 32 / 0.08), 0 12px 30px rgb(15 36 32 / 0.07);
  --shadow-lg: 0 10px 26px rgb(15 36 32 / 0.10), 0 26px 60px rgb(15 36 32 / 0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 78px;
}

/* ---------------------------------------------------------- 2. Reset/base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.016em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-primary); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--brand-deep); }

:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; border-radius: 4px; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

ul, ol { padding-left: 1.2em; margin: 0 0 var(--sp-4); }
li { margin-bottom: 0.3em; }

blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--mist);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  font-size: var(--step-1);
}
blockquote cite { display: block; margin-top: var(--sp-2); font-size: var(--step--1); font-style: normal; color: var(--ink-3); }

table {
  width: 100%; border-collapse: collapse; margin: var(--sp-5) 0;
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xs); font-size: var(--step--1);
}
th, td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line-2); }
th { background: var(--mist); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

code, kbd, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.9em; }
pre { background: var(--ink); color: #EAF3F0; padding: var(--sp-4); border-radius: var(--radius-lg); overflow-x: auto; }

::selection { background: rgb(var(--brand-soft-rgb) / 0.28); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--brand-deep); color: #fff; padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* --------------------------------------------------------------- 3. Layout */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.astang-main { display: block; min-height: 40vh; }

.astang-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7); padding-block: var(--sp-7);
}
.astang-layout--sidebar { grid-template-columns: minmax(0, 1fr) 312px; }
@media (max-width: 1024px) { .astang-layout--sidebar { grid-template-columns: minmax(0, 1fr); } }

.astang-align-center { display: block; text-align: center; }
.astang-align-right  { display: block; text-align: right; }

.astang-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-deep);
  background: rgb(var(--brand-soft-rgb) / 0.14);
  padding: 0.32rem 0.8rem; border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}

/* ----------------------------------------------------------- 4. Top bar */

.astang-topbar {
  background: var(--brand-deep);
  color: rgb(255 255 255 / 0.88);
  font-size: var(--step--1);
}
.astang-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 38px; flex-wrap: wrap;
}
.astang-topbar__msg { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.astang-topbar__msg .astang-icon { color: var(--brand-soft); }
.astang-topbar__links { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; justify-content: flex-end; }
.astang-topbar a { color: rgb(255 255 255 / 0.88); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.astang-topbar a:hover { color: #fff; }
.astang-topbar__menu { display: flex; align-items: center; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.astang-topbar__menu li { margin: 0; padding: 0; }
.astang-topbar__menu li::before { display: none; }

@media (max-width: 900px) {
  .astang-topbar { font-size: var(--step--2); }
  .astang-topbar__msg { display: none; }
  .astang-topbar__inner { justify-content: center; min-height: 34px; }
  .astang-topbar__links { gap: var(--sp-4); justify-content: center; }
  .astang-topbar__menu { display: none; }
}

/* ------------------------------------------------------------ 5. Header */

.astang-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow 0.25s var(--ease);
}
.astang-header.is-stuck { box-shadow: 0 2px 16px rgb(15 36 32 / 0.09); }

.astang-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }

.astang-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; }
.astang-brand img { max-height: 56px; width: auto; }
.astang-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.astang-brand__name { font-weight: 700; font-size: 1.28rem; color: var(--brand-leaf); letter-spacing: -0.02em; }
.astang-brand__tagline { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-purple); font-weight: 600; }

.astang-header__nav { margin-left: auto; }
.astang-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* Primary menu */
.astang-menu { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.astang-menu__item { position: relative; margin: 0; }
.astang-menu__link {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0.55rem 0.72rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink-2);
  font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.astang-menu__link:hover { color: var(--brand-primary); background: var(--mist); }
.astang-menu__item--depth-0 > .astang-menu__link::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: var(--brand-primary); transform: scaleX(0); transform-origin: center;
  transition: transform 0.2s var(--ease);
}
.astang-menu__item--depth-0:hover > .astang-menu__link::after,
.astang-menu__item--depth-0.is-open > .astang-menu__link::after,
.astang-menu__item--depth-0.is-current > .astang-menu__link::after { transform: scaleX(1); }
.astang-menu__item.is-current > .astang-menu__link { color: var(--brand-primary); }
.astang-menu__desc { font-size: 0.7rem; color: var(--ink-3); font-weight: 400; }
.astang-menu__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.3rem; color: inherit; }
.astang-menu__chevron {
  display: block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}

/* --- Dropdown --- */
.astang-submenu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 262px; margin: 0; padding: 0.4rem;
  list-style: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
  z-index: 60;
}
/* Bridges the gap between the trigger and the panel so a pointer travelling
   down from the link never lands on bare page. */
.astang-submenu::before { content: ""; position: absolute; inset: -14px 0 auto 0; height: 14px; }

/*
 * Opening is driven by JS (`.is-open`) rather than :hover, so it can carry an
 * intent delay — a bare CSS :hover drops the moment the pointer clips a corner
 * on its way to the panel, which made the menu feel like it toggled shut just
 * as you went to click. :focus-within is kept for keyboard users.
 */
.astang-menu__item.is-open > .astang-submenu,
.astang-menu__item:focus-within > .astang-submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.astang-submenu .astang-menu__link {
  padding: 0.5rem 0.65rem; white-space: normal; font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius-sm);
}
.astang-submenu .astang-submenu { top: -0.4rem; left: calc(100% + 0.4rem); }
.astang-menu__item--depth-0:nth-last-child(-n+3) > .astang-submenu:not(.astang-submenu--mega) { left: auto; right: 0; }

/* --- Mega panel --- */
.astang-submenu--mega {
  left: 50%; transform: translate(-50%, 6px);
  width: min(1080px, calc(100vw - 3rem));
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: var(--radius-xl);
  border-top: 3px solid var(--brand-primary);
  background: var(--white);
  /* Multi-column rather than grid: the branches are wildly uneven (one has a
     dozen children, another has one) and columns balance them automatically. */
  display: block; columns: 2; column-gap: 2rem;
  max-height: min(74vh, 620px); overflow-y: auto; overscroll-behavior: contain;
}
.astang-menu__item--mega-3 > .astang-submenu--mega { columns: 3; }
.astang-menu__item--mega-4 > .astang-submenu--mega { columns: 4; }
.astang-menu__item.is-open > .astang-submenu--mega,
.astang-menu__item:focus-within > .astang-submenu--mega { transform: translate(-50%, 0); }

.astang-submenu--mega > .astang-menu__item { break-inside: avoid; display: block; margin-bottom: 0.1rem; }

/* A plain entry in a mega column. */
.astang-submenu--mega > .astang-menu__item > .astang-menu__link {
  position: relative; font-size: 0.865rem; font-weight: 500; color: var(--ink-2);
  padding: 0.4rem 0.5rem 0.4rem 0.95rem; line-height: 1.35;
}
.astang-submenu--mega > .astang-menu__item > .astang-menu__link::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.88em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line);
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.astang-submenu--mega > .astang-menu__item > .astang-menu__link:hover { background: var(--mist); color: var(--brand-primary); }
.astang-submenu--mega > .astang-menu__item > .astang-menu__link:hover::before { background: var(--brand-soft); transform: scale(1.5); }

/* Only a branch that actually has children reads as a column heading. */
.astang-submenu--mega > .astang-menu__item--has-children { margin-bottom: 0.65rem; }
.astang-submenu--mega > .astang-menu__item--has-children > .astang-menu__link {
  flex-direction: row; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--brand-deep); padding: 0.3rem 0.4rem 0.4rem;
  border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 0.25rem;
}

/* Colour-coded speciality icon on each group heading. */
.astang-menu__icon {
  --mi: var(--brand-leaf);
  flex-shrink: 0; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px;
  font-size: 0.72rem; font-style: normal; line-height: 1;
  color: var(--mi); background: color-mix(in srgb, var(--mi) 13%, transparent);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.astang-menu__item--has-children > .astang-menu__link:hover .astang-menu__icon {
  background: var(--mi); color: #fff;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .astang-menu__icon { background: var(--mist); }
}
.astang-submenu--mega > .astang-menu__item--has-children > .astang-menu__link::before { display: none; }
.astang-submenu--mega > .astang-menu__item--has-children > .astang-menu__link:hover { background: transparent; color: var(--brand-primary); }

/*
 * Child links inside a mega panel are always laid out — but they must follow
 * the panel's own visibility. Setting `visible` here instead of `inherit`
 * un-hid them inside the closed panel: `visibility` is inherited, so a
 * descendant can re-show itself inside a hidden ancestor. The result was a
 * 1080x620 block of invisible-but-hoverable links lying over the page, which
 * opened the Disease menu whenever the pointer crossed the content.
 */
.astang-submenu--mega .astang-submenu {
  position: static; opacity: 1; transform: none;
  visibility: inherit; pointer-events: inherit;
  box-shadow: none; border: 0; padding: 0; min-width: 0; background: none;
  display: block; max-height: none; overflow: visible;
}
.astang-submenu--mega .astang-submenu .astang-menu__link {
  position: relative; font-weight: 400; color: var(--ink-2);
  font-size: 0.845rem; line-height: 1.35; padding: 0.3rem 0.4rem 0.3rem 0.95rem;
}
.astang-submenu--mega .astang-submenu .astang-menu__link::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.78em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line); transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}
.astang-submenu--mega .astang-submenu .astang-menu__link:hover {
  color: var(--brand-primary); background: var(--mist);
}
.astang-submenu--mega .astang-submenu .astang-menu__link:hover::before {
  background: var(--brand-soft); transform: scale(1.5);
}
.astang-submenu--mega .astang-menu__item--has-children > .astang-menu__toggle { display: none; }

/* Header actions */
.astang-header__search { position: relative; }
.astang-icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--white); color: var(--ink-2); cursor: pointer; font-size: 1rem;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.astang-icon-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.astang-searchpanel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, 80vw);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.6rem;
  display: none; z-index: 70;
}
.astang-searchpanel.is-open { display: block; }

.astang-burger { display: none; }
.astang-burger span { display: block; width: 19px; height: 2px; background: currentColor; border-radius: 2px; transition: 0.2s var(--ease); }
.astang-burger span + span { margin-top: 4px; }
.astang-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.astang-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.astang-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .astang-burger { display: inline-grid; }
  .astang-header__inner { gap: var(--sp-3); }
  .astang-header__nav {
    position: fixed;
    inset: var(--astang-header-bottom, var(--header-h)) 0 0 auto;
    width: min(400px, 88vw);
    background: var(--white);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(102%); transition: transform 0.28s var(--ease); z-index: 90;
  }
  body.nav-open .astang-header__nav { transform: translateX(0); }
  body.nav-open { overflow: hidden; }

  .astang-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .astang-menu__item { border-bottom: 1px solid var(--line-2); }
  .astang-menu__link { padding: 0.8rem 0.5rem; white-space: normal; font-size: 0.96rem; }
  .astang-menu__item--depth-0 > .astang-menu__link::after { display: none; }
  .astang-menu__item--has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .astang-menu__item--has-children > .astang-submenu { grid-column: 1 / -1; }
  .astang-menu__toggle { display: grid; place-items: center; width: 44px; height: 44px; }
  .astang-menu__toggle[aria-expanded="true"] .astang-menu__chevron { transform: rotate(-135deg); }

  .astang-submenu, .astang-submenu--mega {
    position: static; width: auto !important; opacity: 1; visibility: visible;
    transform: none !important; box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 0.4rem 0.8rem; display: none; columns: 1 !important;
    background: none; min-width: 0; max-height: none; overflow: visible; border-top: 0;
  }
  .astang-submenu.is-open { display: block; }
  .astang-submenu--mega > .astang-menu__item > .astang-menu__link { border-bottom: 0; text-transform: none; font-size: 0.94rem; letter-spacing: 0; }
  .astang-submenu--mega .astang-submenu { display: none; padding-left: 0.8rem; }
  .astang-submenu--mega .astang-submenu.is-open { display: block; }
  .astang-submenu--mega .astang-menu__item--has-children > .astang-menu__toggle { display: grid; }
}

@media (max-width: 620px) {
  .astang-header .astang-header__cta { display: none; }
  .astang-brand img { max-height: 44px; }
  :root { --header-h: 66px; }
}

.astang-scrim {
  position: fixed; inset: 0; background: rgb(15 36 32 / 0.42);
  opacity: 0; visibility: hidden; transition: 0.28s var(--ease); z-index: 80;
}
body.nav-open .astang-scrim { opacity: 1; visibility: visible; }

/* ------------------------------------------------------- 6. Hero slider */

.astang-slider { position: relative; background: var(--mist-2); overflow: hidden; }
.astang-slider__stage { position: relative; }
.astang-slider__track { list-style: none; margin: 0; padding: 0; position: relative; }
/*
 * Crossfade on opacity alone. Transitioning `visibility` alongside it makes
 * some compositors drop the image layer entirely mid-transition, so inactive
 * slides are taken out of the interaction and accessibility trees with
 * pointer-events and aria-hidden instead.
 */
.astang-slider__slide {
  margin: 0; position: absolute; inset: 0; z-index: 1;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.astang-slider__slide:first-child { position: relative; }
.astang-slider__slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.astang-slider__image {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 24 / 9;
  transform: scale(1.06); transform-origin: 60% 45%;
}
/* Slow Ken Burns drift on whichever slide is showing. */
.astang-slider__slide.is-active .astang-slider__image {
  animation: astang-kenburns 11s ease-out forwards;
}
@keyframes astang-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14) translate3d(-1.2%, -0.8%, 0); }
}

/* A soft wash so captions stay legible over any photograph. */
.astang-slider__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, rgb(7 40 36 / 0.52) 0%, rgb(7 40 36 / 0.18) 46%, transparent 72%);
}

@media (max-width: 780px) {
  .astang-slider__image { aspect-ratio: 16 / 10; }
  .astang-slider__slide::after {
    background: linear-gradient(0deg, rgb(7 40 36 / 0.72) 0%, rgb(7 40 36 / 0.2) 55%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .astang-slider__slide.is-active .astang-slider__image { animation: none; transform: scale(1.02); }
}

/*
 * The caption is a contained panel rather than a full-bleed scrim: the banner
 * artwork stays fully visible, and the text sits on its own readable surface.
 */
/*
 * The caption sits in the container gutter, aligned with the rest of the page,
 * and is typeset directly on the photograph rather than boxed in a slab. The
 * gradient wash on the slide is what keeps it readable.
 */
.astang-slider__caption {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-items: center;
  width: 100%; max-width: var(--container); margin-inline: auto;
  left: 0; right: 0; transform: none;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.astang-slider__panel {
  pointer-events: auto;
  color: #fff;
  max-width: 33rem;
  padding: 0;
  border: 0; background: none; box-shadow: none;
  border-left: 3px solid var(--brand-soft);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
}
/* Staged reveal: the panel rises in, then each line follows. */
.astang-slider__slide.is-active .astang-slider__panel { animation: astang-rise 0.7s var(--ease) both; }
.astang-slider__slide.is-active .astang-slider__title { animation: astang-rise 0.6s var(--ease) 0.12s both; }
.astang-slider__slide.is-active .astang-slider__line  { animation: astang-rise 0.6s var(--ease) 0.22s both; }
.astang-slider__slide.is-active .astang-slider__panel .astang-btn { animation: astang-rise 0.6s var(--ease) 0.34s both; }
@keyframes astang-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .astang-slider__slide.is-active :is(.astang-slider__panel, .astang-slider__title, .astang-slider__line, .astang-slider__panel .astang-btn) { animation: none; }
}
.astang-slider__title {
  font-size: var(--step-3); font-weight: 700; line-height: 1.16;
  margin: 0 0 var(--sp-3); letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 2px 18px rgb(4 30 27 / 0.45);
  text-wrap: balance;
}
.astang-slider__line {
  font-size: var(--step-0); margin: 0 0 0.3rem;
  color: rgb(255 255 255 / 0.9); max-width: 44ch;
  text-shadow: 0 1px 12px rgb(4 30 27 / 0.4);
}
.astang-slider__line:last-of-type { margin-bottom: 0; }
.astang-slider__panel .astang-btn { margin-top: var(--sp-3); background: #fff; color: var(--brand-deep) !important; }
.astang-slider__panel .astang-btn:hover { background: var(--mist); }

/* --- Appointment form docked into the hero --- */
.astang-herobook {
  position: absolute; z-index: 4;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  top: 50%; transform: translateY(-50%);
  width: min(21rem, 34vw);
}
.astang-herobook__form {
  display: grid; gap: 0.55rem;
  background: rgb(255 255 255 / 0.96);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
  box-shadow: 0 20px 55px rgb(4 30 27 / 0.32);
  backdrop-filter: blur(4px);
}
.astang-herobook__title {
  margin: 0 0 0.15rem; font-weight: 700; font-size: var(--step-1);
  color: var(--ink); line-height: 1.25;
}
.astang-herobook__field { display: block; margin: 0; }
.astang-herobook__field input,
.astang-herobook__field select { padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.astang-herobook .astang-btn { margin-top: 0.15rem; }
.astang-herobook__submit { background: #25A957; }
.astang-herobook__submit:hover { background: #1E8B47; }
.astang-herobook__submit i { font-size: 1.05rem; }
.astang-herobook__alt { margin: 0; font-size: 0.8rem; color: var(--ink-3); text-align: center; }
.astang-herobook__alt a { color: var(--brand-deep); font-weight: 600; text-decoration: none; }

@media (max-width: 1100px) {
  .astang-herobook { width: min(18rem, 38vw); }
  .astang-herobook__form { padding: var(--sp-3); }
  .astang-slider__panel { max-width: 26rem; }
}

@media (max-width: 860px) {
  /* Below tablet the form leaves the photograph and becomes its own band. */
  .astang-slider { padding-bottom: 0; }
  .astang-herobook {
    position: static; transform: none; width: auto;
    margin: 0 auto; padding: var(--sp-4) var(--gutter) var(--sp-5);
    max-width: var(--container);
  }
  .astang-herobook__form { box-shadow: var(--shadow-md); background: var(--white); }
  .astang-slider__caption { position: absolute; }
}

@media (max-width: 780px) {
  .astang-slider__caption {
    align-items: end; padding-bottom: 2.8rem;
  }
  .astang-slider__panel { max-width: none; }
  .astang-slider__line:nth-of-type(n+3) { display: none; }
}

.astang-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgb(255 255 255 / 0.85); color: var(--brand-deep);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.astang-slider__arrow:hover { background: #fff; }
.astang-slider__arrow::before {
  content: ""; width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.astang-slider__arrow--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.astang-slider__arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.astang-slider__arrow--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.astang-slider__arrow--next::before { transform: rotate(45deg); margin-right: 3px; }
@media (max-width: 620px) { .astang-slider__arrow { width: 36px; height: 36px; } }

.astang-slider__dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.9rem; z-index: 5;
  display: flex; gap: 0.4rem;
}
.astang-slider__dot {
  position: relative; overflow: hidden;
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.45);
  transition: width 0.35s var(--ease), background 0.25s var(--ease);
}
.astang-slider__dot.is-active { width: 44px; background: rgb(255 255 255 / 0.35); }
/* The active dot doubles as a progress bar for the autoplay interval. */
.astang-slider__dot.is-active::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #fff; transform-origin: left; transform: scaleX(0);
  animation: astang-dot-progress var(--slide-ms, 6000ms) linear forwards;
}
.astang-slider.is-paused .astang-slider__dot.is-active::after { animation-play-state: paused; }
@keyframes astang-dot-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .astang-slider__dot.is-active::after { animation: none; transform: scaleX(1); }
}

/* --------------------------------------------------------- 7. Intro band */

.astang-intro {
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line-2);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.astang-intro__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .astang-intro__grid { grid-template-columns: 1fr; } }

.astang-intro__title { font-size: var(--step-4); margin-bottom: var(--sp-3); max-width: 20ch; }
.astang-intro__text { color: var(--ink-2); font-size: var(--step-1); max-width: 58ch; margin-bottom: var(--sp-5); }
.astang-intro__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.astang-intro__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.astang-intro__facts li {
  display: flex; gap: var(--sp-3); align-items: center; margin: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 0.85rem 1rem;
  box-shadow: var(--shadow-xs);
}
.astang-intro__facts .astang-icon {
  flex-shrink: 0; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgb(var(--brand-soft-rgb) / 0.15); color: var(--brand-deep); font-size: 1rem;
}
.astang-intro__facts strong { display: block; font-size: 0.92rem; }
.astang-intro__facts span { font-size: var(--step--1); color: var(--ink-3); }

/* --------------------------------------------------- 7b. Parallax band */

/*
 * The backdrop is a real, translated element rather than a fixed-attachment
 * background: a fixed backdrop paints against the viewport, so the band reads
 * as if it is sliding over the sections beneath it, and iOS ignores it outright.
 */
.astang-parallax {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 11vw, 8rem);
  color: #fff; text-align: center;
  background: var(--ink);
}
.astang-parallax__media { position: absolute; inset: -14% 0; z-index: 0; }
.astang-parallax__media img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
  transform: translate3d(0, var(--parallax-shift, 0px), 0);
}
.astang-parallax__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(5 40 36 / 0.80), rgb(5 40 36 / 0.66));
}
.astang-parallax__inner { position: relative; z-index: 2; max-width: 62rem; }
.astang-parallax__title { color: #fff; font-size: var(--step-3); margin-bottom: var(--sp-3); }
.astang-parallax__lead {
  font-size: var(--step-3); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.015em; margin-bottom: var(--sp-3); text-wrap: balance;
}
.astang-parallax__sub { font-size: var(--step-1); color: rgb(255 255 255 / 0.82); max-width: 52ch; margin-inline: auto; }
.astang-parallax__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }
.astang-eyebrow--light { color: #fff; background: rgb(255 255 255 / 0.16); }
.astang-btn--ondark {
  background: transparent; color: #fff !important;
  border-color: rgb(255 255 255 / 0.45); box-shadow: none;
}
.astang-btn--ondark:hover { background: rgb(255 255 255 / 0.14); color: #fff !important; border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .astang-parallax__media img { transform: none; }
}

/* --------------------------------------------------- 7c. Care steps */

.astang-steps { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--paper); }
.astang-steps__head { text-align: center; max-width: 58rem; margin: 0 auto var(--sp-6); }
.astang-steps__title { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.astang-steps__lead { color: var(--ink-2); font-size: var(--step-1); max-width: 56ch; margin-inline: auto; }

.astang-steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: astang-step;
}
.astang-step {
  --step-tint: var(--brand-primary);
  position: relative; margin: 0; padding: var(--sp-5) var(--sp-4) var(--sp-5);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden;
}
.astang-step::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--step-tint);
}
.astang-step__num {
  position: absolute; right: var(--sp-4); top: var(--sp-3);
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--step-tint); opacity: 0.13;
}
.astang-step__icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; margin-bottom: var(--sp-3); font-size: 1.1rem;
  color: var(--step-tint); background: color-mix(in srgb, var(--step-tint) 12%, transparent);
}
.astang-step__title { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.astang-step__text { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .astang-step__icon { background: var(--mist); }
}

/* --------------------------------------------------- 7d. Closing band */

.astang-closing {
  padding-block: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%);
  border-top: 1px solid var(--line-2);
}
.astang-closing__inner { text-align: center; max-width: 46rem; }
.astang-closing .astang-mandala { width: 68px; margin: 0 auto var(--sp-4); opacity: 0.55; }
.astang-closing__title { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.astang-closing__text { color: var(--ink-2); font-size: var(--step-1); margin-bottom: var(--sp-5); }
.astang-closing__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ------------------------------------------------------- 8. Page header */

/*
 * Dark, and deliberately so. The old header washed the photograph out to 4%
 * behind pale grey text: a band that took up the top of every inner page and
 * committed to nothing. Inverting it gives the site the one strong horizontal
 * it was missing, makes the photograph worth loading, and means the white
 * content below arrives as a change of gear rather than more of the same.
 */
.astang-pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
  background: linear-gradient(135deg, #0C4E47 0%, #0A322D 58%, #14211E 100%);
  color: #fff;
}
/* A wide, soft glow keeps the flat green from reading as a slab. */
.astang-pagehead::after {
  content: ""; position: absolute; right: -8%; top: -70%;
  width: 34rem; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--brand-soft-rgb) / 0.22), transparent 66%);
  pointer-events: none; z-index: 1;
}
.astang-pagehead__inner { position: relative; z-index: 2; }

.astang-pagehead__media { position: absolute; inset: 0; z-index: 0; }
.astang-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Dense enough on the left to hold white text at AAA, open enough on the right
   that the photograph is genuinely part of the design. */
.astang-pagehead--image::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgb(10 40 36 / 0.95) 0%,
      rgb(10 40 36 / 0.88) 38%,
      rgb(10 40 36 / 0.62) 68%,
      rgb(10 40 36 / 0.38) 100%),
    linear-gradient(180deg, rgb(10 40 36 / 0.25), rgb(10 40 36 / 0.45));
}
.astang-pagehead--image .astang-pagehead__media img { filter: saturate(0.85) contrast(1.05); }
@media (max-width: 700px) {
  .astang-pagehead--image::before {
    background: linear-gradient(180deg, rgb(10 40 36 / 0.82) 0%, rgb(10 40 36 / 0.93) 100%);
  }
}
.astang-pagehead__eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: #fff;
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  padding: 0.32rem 0.85rem; border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
}
.astang-pagehead__title {
  font-size: var(--step-5); line-height: 1.06; letter-spacing: -0.025em;
  color: #fff; margin-bottom: 0; max-width: 20ch;
}
/* The rule that runs through the whole design language — under section titles,
   under card titles, and here. */
.astang-pagehead__title::after {
  content: ""; display: block; width: 60px; height: 3px; border-radius: 3px;
  margin-top: var(--sp-4); background: var(--brand-soft);
}
.astang-pagehead__excerpt {
  max-width: 58ch; color: rgb(255 255 255 / 0.82);
  font-size: var(--step-1); margin-top: var(--sp-4);
}

/* --- Buttons inside body copy ---
 * The legacy treatment pages sign off with a rank of four solid pills — two
 * phone numbers, two addresses — which is more visual weight than the article
 * above them. Outlined, they read as the contact chips they are, and they fill
 * in on hover like every other button on the site. Scoped to article copy, so
 * the header, hero and sidebar calls to action stay solid. */
.astang-content .astang-btn,
.astang-content .astang-btn--lg {
  background: transparent; color: var(--brand-deep) !important;
  border: 1px solid rgb(var(--brand-primary-rgb) / 0.38);
  box-shadow: none; font-weight: 600;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.astang-content .astang-btn:hover,
.astang-content .astang-btn--lg:hover {
  background: var(--brand-deep); color: #fff !important;
  border-color: var(--brand-deep); transform: none;
}
.astang-content .astang-btn-wrap { display: inline-block; margin: 0 var(--sp-2) var(--sp-2) 0; }

/* --- Index list ---
 * The signature list of the site: a run of bare links, rendered as a numbered
 * catalogue with a rule between each entry. Used wherever the legacy copy left
 * a stack of links, which is most treatment pages, and echoed by the sidebar
 * navigation so the two read as the same object. */
.astang-index {
  list-style: none; padding: 0;
  margin: var(--sp-4) 0 var(--sp-5);
  counter-reset: astang-index;
  border-top: 1px solid var(--line);
}
.astang-index__row { margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.astang-index__row::before { display: none; }
.astang-index .astang-index__link {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 0.85rem 0.9rem;
  margin-inline: -0.9rem;
  color: var(--ink); font-weight: 600; font-size: 0.98rem;
  text-decoration: none; background: none;
  border-radius: var(--radius-sm);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
/* Leading-zero numerals: this is an index, and an index counts. */
.astang-index .astang-index__link::before {
  counter-increment: astang-index;
  content: counter(astang-index, decimal-leading-zero);
  flex-shrink: 0; min-width: 2ch;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--brand-primary); opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.astang-index .astang-index__link::after {
  content: "→"; margin-left: auto; color: var(--brand-primary);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.astang-index .astang-index__link:hover { background: var(--mist); color: var(--brand-deep); }
.astang-index .astang-index__link:hover::before { opacity: 1; }
.astang-index .astang-index__link:hover::after { opacity: 1; transform: none; }

.astang-crumbs { font-size: var(--step--1); color: rgb(255 255 255 / 0.6); margin-bottom: var(--sp-4); }
.astang-crumbs a { color: rgb(255 255 255 / 0.82); text-decoration: none; }
.astang-crumbs a:hover { color: #fff; text-decoration: underline; }
.astang-crumbs__sep { margin-inline: 0.4rem; opacity: 0.45; }
/* Was `var(--ink)`, from when the header was a pale band. On the dark header
   that made the current page — the one crumb that names where you are —
   near-invisible. */
.astang-crumbs span[aria-current] { color: #fff; font-weight: 600; }

/* ----------------------------------------------------------- 9. Buttons */

.astang-btn {
  --astang-btn-bg: var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.7rem 1.35rem;
  background: var(--astang-btn-bg); color: #fff !important;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; line-height: 1.2;
  text-decoration: none !important; border: 1px solid transparent;
  border-radius: var(--radius-pill); cursor: pointer;
  box-shadow: 0 1px 2px rgb(15 36 32 / 0.10);
  transition: background 0.18s var(--ease), transform 0.16s var(--ease), box-shadow 0.18s var(--ease);
}
.astang-btn:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.astang-btn:active { transform: translateY(0); }
.astang-btn--lg { padding: 0.85rem 1.7rem; font-size: 0.98rem; }
.astang-btn--sm { padding: 0.5rem 1rem; font-size: 0.84rem; }
.astang-btn--block { display: flex; width: 100%; }
.astang-btn--ghost {
  --astang-btn-bg: transparent;
  color: var(--ink) !important; border-color: var(--line); box-shadow: none;
}
.astang-btn--ghost:hover { background: var(--mist); color: var(--brand-deep) !important; border-color: var(--brand-primary); }
.astang-btn--accent { --astang-btn-bg: var(--brand-purple); }
.astang-btn--accent:hover { background: #6A0068; }
/* Aliases kept so older markup keeps working. */
.astang-btn--gold, .astang-btn--rainbow, .astang-btn--purple, .astang-btn--blue, .astang-btn--red { --astang-btn-bg: var(--brand-primary); }
.astang-btn--gold:hover, .astang-btn--rainbow:hover { background: var(--brand-deep); }
.astang-btn-wrap { display: inline-block; }

/* Legacy Betheme button classes still present in stored content. */
.tp-button, .button_theme, .mfn-rich a.button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.2rem; border-radius: var(--radius-pill);
  background: var(--brand-primary); color: #fff !important;
  font-weight: 600; text-decoration: none !important; font-size: 0.88rem;
  transition: background 0.18s var(--ease), transform 0.16s var(--ease);
}
.tp-button:hover, .button_theme:hover, .mfn-rich a.button:hover { background: var(--brand-deep); transform: translateY(-1px); }

.astang-mark { --astang-mark: rgb(var(--brand-soft-rgb) / 0.3); background: var(--astang-mark); padding: 0.05em 0.28em; border-radius: 4px; }
.astang-dropcap { float: left; font-size: 3.1em; line-height: 0.84; padding: 0.06em 0.13em 0 0; color: var(--brand-primary); font-weight: 700; }
.astang-tooltip { border-bottom: 1px dotted var(--brand-primary); cursor: help; }
.astang-alert {
  padding: var(--sp-4); border-radius: var(--radius-lg);
  background: var(--mist); border-left: 4px solid var(--brand-primary); margin-block: var(--sp-4);
}
.astang-alert--error, .astang-alert--danger { background: #FDF1F0; border-color: #C0392B; }
.astang-alert--success { background: rgb(var(--brand-soft-rgb) / 0.10); border-color: var(--brand-primary); }
.astang-alert--warning { background: #FFF8E8; border-color: #C88A04; }

.astang-icon { font-style: normal; line-height: 1; }
.astang-icon-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.astang-fact { text-align: center; padding: var(--sp-3); }
.astang-fact__number { display: block; font-size: var(--step-3); font-weight: 700; color: var(--accent); line-height: 1; }
.astang-fact__label { display: block; font-size: var(--step--1); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

.astang-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.astang-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.astang-mandala { color: var(--brand-soft); }

/* ---------------------------------------- 10. Muffin Builder rendering */

.mfn-section {
  --mfn-section-pt: 0px;
  --mfn-section-pb: 0px;
  position: relative;
  padding-top: max(var(--mfn-section-pt), 2.25rem);
  padding-bottom: max(var(--mfn-section-pb), 2.25rem);
}
.mfn-section--has-bg { background-color: var(--mfn-section-bg); }

/*
 * Sections with a photographic background.
 *
 * Their copy was authored as white text with a drop shadow. The theme strips
 * near-white inline colours (they were also being used to hide keyword text on
 * light pages), so legibility has to come from the section instead: a scrim
 * over the photograph, and light type on top of it.
 */
.mfn-section--has-image {
  position: relative; isolation: isolate;
  background-image: var(--mfn-section-image);
  background-size: cover; background-position: center;
  color: #fff;
}
.mfn-section--has-image::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(5 40 36 / 0.72), rgb(5 40 36 / 0.82));
}
.mfn-section--has-image > * { position: relative; z-index: 1; }
.mfn-section--has-image :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.mfn-section--has-image p,
.mfn-section--has-image li { color: rgb(255 255 255 / 0.88); }
.mfn-section--has-image .mfn-rich ul li::before { background: var(--brand-soft); }
.mfn-section--has-image .mfn-fancy__slogan,
.mfn-section--has-image .astang-eyebrow { color: #fff; background: rgb(255 255 255 / 0.16); }
.mfn-section--has-image .tp-button,
.mfn-section--has-image .button_theme,
.mfn-section--has-image .mfn-rich a.button {
  background: #fff; color: var(--brand-deep) !important;
}
.mfn-section--has-image .mfn-rich a:not(.astang-btn):not(.tp-button):not(.button):not(.button_theme):not(.astang-quotecard):not(.astang-index__link) {
  color: #fff; background-image: linear-gradient(var(--brand-soft), var(--brand-soft));
}
/* …but a card brings its own light surface, so the white-on-photograph type
   must stop at its edge. Left to run on, the speaker cards on the symposium
   page print white titles and a white button on a white card. */
.mfn-section--has-image :is(.mfn-iconbox, .mfn-contact, .mfn-team, .mfn-visual, .astang-action) {
  color: var(--ink);
}
.mfn-section--has-image :is(.mfn-iconbox, .mfn-contact, .mfn-team, .mfn-visual, .astang-action) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ink);
}
.mfn-section--has-image .mfn-iconbox .mfn-iconbox__title { color: var(--card-accent); }
.mfn-section--has-image :is(.mfn-iconbox, .mfn-contact, .mfn-team, .mfn-visual, .astang-action) :is(p, li) {
  color: var(--ink-2);
}
.mfn-section--has-image .mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a:is(.tp-button, .button, .button_theme, .astang-btn) {
  background: var(--card-accent); color: #fff !important;
}
.mfn-section--dark { background: var(--ink); color: #E6EFEC; }
.mfn-section--dark :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
.mfn-section--dark a { color: var(--brand-soft); }
/* Quiet alternation instead of a colour rotation. */
.mfn-section:nth-of-type(even) { background-color: var(--mist); }

/* …except across a run of card rows. The builder saved the twelve treatment
   cards as four sections of three, so the alternation striped one grid and a
   section's padding opened a 72px trench between rows that are 24px apart
   sideways. Close both: a run of card sections reads as a single grid. */
.mfn-section.mfn-section--cards { background-color: transparent; }
.mfn-section--cards:has(+ .mfn-section--cards) { padding-bottom: 0; }
.mfn-section--cards + .mfn-section--cards { padding-top: var(--sp-5); }

.mfn-section__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.mfn-section__inner--full { max-width: none; padding-inline: 0; }
.mfn-section__title { font-size: var(--step-3); text-align: center; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); position: relative; }
.mfn-section__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 54px; height: 3px; border-radius: 3px; background: var(--brand-primary);
}

/*
 * A 60-column track divides evenly by every denominator in the data
 * (2,3,4,5,6). `gap` cannot supply the gutter: 59 gaps would exceed the
 * container and collapse every column to zero, so it is carried as cell
 * padding with the grid pulled out by half a gutter.
 */
.mfn-grid {
  --mfn-gutter: var(--sp-5);
  display: grid; grid-template-columns: repeat(60, minmax(0, 1fr));
  column-gap: 0; row-gap: var(--mfn-gutter);
  margin-inline: calc(var(--mfn-gutter) / -2);
  align-items: stretch;
}
.mfn-wrap, .mfn-item {
  --mfn-span: 60;
  grid-column: span var(--mfn-span);
  min-width: 0; padding-inline: calc(var(--mfn-gutter) / 2);
}
/* Flex chain so cards in a row share the tallest sibling's height. */
.mfn-wrap__inner { height: 100%; min-width: 0; display: flex; flex-direction: column; }
.mfn-wrap__inner > .mfn-grid { flex: 1; }
.mfn-wrap--has-bg > .mfn-wrap__inner { background: var(--mfn-wrap-bg); border-radius: var(--radius-lg); padding: var(--sp-5); }
.mfn-wrap--has-image > .mfn-wrap__inner {
  background-image: var(--mfn-wrap-image); background-size: cover; background-position: center;
  border-radius: var(--radius-lg); padding: var(--sp-5);
}
.mfn-wrap--v-middle { align-self: center; }
.mfn-wrap--v-bottom { align-self: end; }

@media (max-width: 980px) { .mfn-item, .mfn-wrap { grid-column: span 60 !important; } }

/* Rich text out of the old editor */
.mfn-rich > :last-child { margin-bottom: 0; }
.mfn-rich img { border-radius: var(--radius-sm); height: auto; }
.mfn-rich img.alignleft  { float: left;  margin: 0.3rem var(--sp-5) var(--sp-4) 0; }
.mfn-rich img.alignright { float: right; margin: 0.3rem 0 var(--sp-4) var(--sp-5); }
.mfn-rich img.aligncenter { margin-inline: auto; }
.mfn-rich iframe { max-width: 100%; border-radius: var(--radius-lg); }
.mfn-rich::after { content: ""; display: block; clear: both; }
.mfn-rich ul { list-style: none; padding-left: 0; }
.mfn-rich ul li { position: relative; padding-left: 1.4em; }
.mfn-rich ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-soft);
}
.mfn-rich ol { padding-left: 1.3em; }
.mfn-rich ul ul { margin-top: 0.3em; }

/* The legacy content sets `text-align: justify` inline on most paragraphs.
   Without hyphenation that opens rivers of whitespace; delete to restore. */
.mfn-rich [style*="justify"],
.astang-content [style*="justify"],
.widget [style*="justify"] { text-align: start !important; }

/*
 * Legacy Betheme column classes inside stored HTML.
 *
 * These were floated thirds nudged around with negative margins — the home
 * page's action row in particular collapsed into a mess. Where a rich-text
 * block's direct children are those columns, it becomes a centred flex row
 * instead: predictable widths, aligned buttons, no floats.
 */
.mfn-rich .column { min-width: 0; margin-bottom: var(--sp-3); }

@media (min-width: 782px) {
  .mfn-rich:has(> .column) {
    display: flex; flex-wrap: wrap; gap: var(--sp-4);
    align-items: center; justify-content: center;
  }
  .mfn-rich:has(> .column) > .column {
    flex: 1 1 200px; margin: 0; padding: 0; text-align: center; min-width: 0;
  }
  .mfn-rich:has(> .column) > .column.one { flex-basis: 100%; }
  .mfn-rich:has(> .column) > .column.one-second,
  .mfn-rich:has(> .column) > .column.two-fourth { flex-basis: 46%; }
  .mfn-rich:has(> .column) > .column.one-third { flex-basis: 30%; }
  .mfn-rich:has(> .column) > .column.two-third { flex-basis: 63%; }
  .mfn-rich:has(> .column) > .column.one-fourth { flex-basis: 22%; }
  .mfn-rich:has(> .column) > .column.three-fourth { flex-basis: 72%; }
  .mfn-rich:has(> .column) > .column.one-fifth { flex-basis: 17%; }
  .mfn-rich:has(> .column) > .column.one-sixth { flex-basis: 14%; }

  /* Decorative images dropped into an action row must not tower over it. */
  .mfn-rich:has(> .column) > .column img { max-height: 120px; width: auto; margin-inline: auto; }
}

/* Buttons sitting in an action row read as one set. */
.mfn-rich:has(> .column) .astang-btn,
.mfn-rich:has(> .column) .tp-button,
.mfn-rich:has(> .column) .button_theme { width: 100%; max-width: 300px; justify-content: center; }

.mfn-button-wrap { margin: 0; }
.mfn-button-wrap--center { text-align: center; }
.mfn-button-wrap--right { text-align: right; }

.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-justify { text-align: justify; }

/* Equal-height cards across a builder row. */
.mfn-item--column { display: flex; }
.mfn-item--column > .mfn-column { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mfn-item--column > .mfn-column > .mfn-rich { flex: 1; }
.mfn-rich > .astang-promo,
.mfn-rich > .astang-panel { height: 100%; }
.mfn-sc-column { display: inline-block; vertical-align: top; width: calc(var(--mfn-span) / 60 * 100% - 1rem); margin-right: 1rem; }
@media (max-width: 782px) { .mfn-sc-column { width: 100%; margin-right: 0; } }

.mfn-column__title { font-size: var(--step-2); }
.mfn-column--boxed { background: var(--mfn-column-bg); padding: var(--sp-5); border-radius: var(--radius-lg); }

/* --- Action tiles ---
 * A section that turned out to be nothing but links, rendered as one even grid
 * instead of a scatter of pills at two different sizes. */
.astang-actions {
  display: grid; gap: var(--sp-3);
  /* 195px lets five tiles sit on one row at container width instead of
     wrapping four-plus-one orphan. */
  grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr));
}
.astang-action {
  --act: var(--brand-primary);
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.astang-action:hover {
  color: var(--ink); transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--act) 45%, var(--line));
  box-shadow: var(--shadow-md);
}
/* Same accent language as the treatment cards: a coloured cap and a coloured
   lift, so the two grids on the page read as one family. */
@supports (background: color-mix(in srgb, red 5%, white)) {
  .astang-action {
    background: color-mix(in srgb, var(--act) 4%, #fff);
    border-color: color-mix(in srgb, var(--act) 18%, #fff);
  }
  .astang-action::before {
    content: ""; position: absolute; pointer-events: none;
    inset: -1px -1px auto -1px; height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--act), color-mix(in srgb, var(--act) 35%, transparent));
  }
  .astang-action:hover {
    box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--act) 65%, transparent),
                0 3px 10px rgb(15 36 32 / 0.05);
  }
}
.astang-action__icon {
  flex-shrink: 0; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  font-size: 1.05rem; color: var(--act);
  background: color-mix(in srgb, var(--act) 12%, transparent);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.astang-action:hover .astang-action__icon { background: var(--act); color: #fff; }
.astang-action__label { flex: 1; min-width: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.astang-action__go {
  flex-shrink: 0; width: 8px; height: 8px;
  border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.astang-action:hover .astang-action__go { border-color: var(--act); transform: rotate(45deg) translate(2px, -2px); }
.astang-actions__extra { margin-top: var(--sp-5); text-align: center; }
.astang-actions__extra img { max-height: 92px; width: auto; margin-inline: auto; opacity: 0.85; }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .astang-action__icon { background: var(--mist); }
}

/* --- Promo / panel: rescued from the 2014 inline styles ---
 * A promo is a heading and a button and nothing else, so the composition has to
 * come from the tile: icon chip at the top, heading under it, action pinned to
 * the foot. Left centred, the pair sat with their copy jammed against the
 * bottom edge and a hand's width of empty green above it. */
.astang-promo, .astang-panel {
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
}
.astang-promo {
  --promo-a: #0E8A7D; --promo-b: var(--brand-deep); --promo-c: #05413B;
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--promo-a) 0%, var(--promo-b) 55%, var(--promo-c) 100%);
  color: #fff; box-shadow: var(--shadow-md);
  padding: var(--sp-6) var(--sp-5);
  justify-content: flex-start; align-items: flex-start; text-align: left;
  gap: var(--sp-4);
}
/* Two promos side by side were the same green rectangle twice. The second is
   separated by value rather than by hue — a darker, cooler cut of the same
   ocean — so the row has a rhythm without introducing a second colour. */
.mfn-grid > .mfn-wrap:last-child .astang-promo {
  --promo-a: #12564F; --promo-b: #0C332E; --promo-c: #14211E;
}
/* A large, very faint mandala watermark gives the block some craft. */
.astang-promo::before {
  content: ""; position: absolute; right: -3.5rem; top: -3.5rem;
  width: 15rem; height: 15rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / 0.14), transparent 62%);
  pointer-events: none;
}
.astang-promo > * { position: relative; z-index: 1; }
.astang-promo__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 15px; font-size: 1.25rem;
  background: rgb(255 255 255 / 0.15); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}
.astang-promo :is(h1,h2,h3,h4,h5,h6) {
  color: #fff; font-size: var(--step-2); margin: 0;
  line-height: 1.22; letter-spacing: -0.015em; max-width: 22ch;
  text-wrap: balance;
}
.astang-promo p { color: rgb(255 255 255 / 0.86); font-size: 0.95rem; max-width: 40ch; }
.astang-promo .astang-btn, .astang-promo .tp-button, .astang-promo .button_theme,
.astang-promo .mfn-rich a.button {
  background: #fff; color: var(--brand-deep) !important; align-self: flex-start;
  border: 0; font-weight: 600; padding: 0.6rem 1.3rem;
}
.astang-promo .astang-btn:hover, .astang-promo .tp-button:hover,
.astang-promo .mfn-rich a.button:hover { background: var(--mist); color: var(--brand-deep) !important; transform: translateY(-1px); }
/* Pins the action to the foot of the tile whatever the heading's height. */
.astang-promo .astang-btn-wrap { align-self: flex-start; margin-top: auto; }

.astang-panel {
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs); align-items: center; text-align: center;
}
.astang-panel img { border-radius: var(--radius-sm); }
/* A panel holding nothing but a quote card was framing it twice — two white
   boxes, two borders — and its `align-items: center` kept the inner card from
   ever filling the outer one, which is why it sat narrow and short between two
   full-height tiles. Let the card be the card. */
.astang-panel:has(> .astang-quotecard) {
  padding: 0; border: 0; background: none; box-shadow: none;
  align-items: stretch; text-align: left;
}

/* --- Patient-stories card (replaces the old animated GIF) ---
 * Sits between two saturated tiles, so it is built to hold its own: same
 * padding rhythm, same icon chip, same action at the foot. */
.astang-quotecard {
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
  padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--white) 0%, var(--mist) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.astang-quotecard:hover { color: var(--ink); transform: translateY(-3px); border-color: rgb(var(--brand-soft-rgb) / 0.6); box-shadow: var(--shadow-md); }
.astang-quotecard__mark {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; margin-bottom: var(--sp-2);
  background: linear-gradient(140deg, var(--brand-soft), var(--brand-primary));
  color: #fff; font-size: 1.25rem;
  box-shadow: 0 8px 16px -10px rgb(var(--brand-primary-rgb) / 0.9);
}
.astang-quotecard__title {
  font-weight: 700; font-size: var(--step-2); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--brand-deep); text-wrap: balance;
}
.astang-quotecard__text { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.astang-quotecard__go {
  margin-top: auto; padding-top: var(--sp-4);
  font-weight: 600; font-size: 0.88rem; color: var(--brand-primary);
}
.astang-quotecard__go::after { content: " →"; transition: margin 0.18s var(--ease); }
.astang-quotecard:hover .astang-quotecard__go::after { margin-left: 0.2rem; }

/* --- The closing tile band ---
 * The three tiles were saved at 24, 15 and 20 of 60 — uneven, and one column
 * short of a full row, so the middle card came out narrow and the row ended
 * with a ragged edge. Even them up. The span arrives as an inline custom
 * property, so this has to win on `grid-column` outright, the same way the
 * mobile stacking rule does. */
.mfn-section:has(> .mfn-section__inner > .mfn-grid > .mfn-wrap .astang-promo)
  > .mfn-section__inner > .mfn-grid > .mfn-wrap { grid-column: span 20 !important; }
@media (max-width: 980px) {
  .mfn-section:has(> .mfn-section__inner > .mfn-grid > .mfn-wrap .astang-promo)
    > .mfn-section__inner > .mfn-grid > .mfn-wrap { grid-column: span 60 !important; }
}

/* --- Feature column: photograph, heading, copy, action ---
 * Unframed beside the two framed cards it shares a row with, this read as
 * unfinished. Same card as everything else, with the photograph bled to the
 * top edge the way the treatment cards do it. */
.mfn-column--feature {
  height: 100%; overflow: hidden;
  padding: 0 var(--sp-5) var(--sp-5);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.mfn-column--feature > .mfn-rich > p:first-child {
  margin: 0 calc(var(--sp-5) * -1) var(--sp-5);
}
.mfn-column--feature > .mfn-rich > p:first-child img {
  display: block; width: 100%; margin: 0; border-radius: 0;
}
.mfn-column--feature > .mfn-rich > :is(h1,h2,h3,h4,h5,h6) {
  font-size: var(--step-3); margin-bottom: var(--sp-3);
}
.mfn-column--feature .astang-btn-wrap { display: inline-block; margin-top: var(--sp-4); }

/* --- Icon box: the treatment grid ---
 * One hue. The five-tone rotation this used to run made the grid look like a
 * paint chart rather than a hospital, and it fought the logo instead of
 * carrying it.
 *
 * What actually holds twelve cards together is the photography, and twelve
 * stock photographs shot by twelve different people do not agree about
 * anything — white balance least of all. So they are graded: held back and
 * pulled toward the brand green at rest, released to full colour under the
 * pointer. The grid reads as one set from across the room, and the card you
 * are pointing at is the only one in full colour. */
.mfn-iconbox {
  --card-accent: var(--brand-primary);
  --card-accent-rgb: var(--brand-primary-rgb);
  display: flex; gap: var(--sp-3); height: 100%;
  position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
.mfn-iconbox--left::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: -1px auto -1px -1px; width: 3px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--card-accent);
}
.mfn-iconbox:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--card-accent-rgb) / 0.45);
  box-shadow: 0 20px 38px -22px rgb(var(--card-accent-rgb) / 0.55), 0 3px 10px rgb(20 33 30 / 0.06);
}

.mfn-iconbox__media { flex-shrink: 0; position: relative; }
.mfn-iconbox__media img {
  position: relative;
  width: 60px; height: 60px; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgb(var(--card-accent-rgb) / 0.35);
}

/*
 * The `top` variant is the treatment grid: an image-led card — photograph
 * across the full width, then title, rule, blurb and a filled call to action.
 *
 * The card itself no longer clips. Clipping a rounded, bordered box *and*
   translating it while it contains a transformed image is what made Chrome
   flash a dark hairline along the edge under the pointer: for a frame the
   composited clip is a shade larger than the content it holds, and the gap
   paints as the layer's own empty backdrop. The media rounds its own top
   corners instead, so there is nothing left for the card to clip. */
.mfn-iconbox--top {
  flex-direction: column; align-items: stretch; text-align: left;
  gap: 0; padding: 0;
}
.mfn-iconbox--top .mfn-iconbox__media {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  transform: translateZ(0); backface-visibility: hidden;
}
.mfn-iconbox--top .mfn-iconbox__media img {
  width: 100%; height: 100%; border-radius: 0; box-shadow: none;
  /* Permanent 2% overhang. The image is always wider than its clip, so even a
     half-pixel rounding error has picture behind it rather than bare layer. */
  transform: scale(1.02);
  filter: saturate(0.74) contrast(1.04) brightness(1.02);
  transition: transform 0.6s var(--ease), filter 0.45s var(--ease);
}
/* The grade. A green wash multiplied over the photograph pulls twelve
   different white balances onto one, and lifts off under the pointer. */
.mfn-iconbox--top .mfn-iconbox__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: multiply; opacity: 1;
  background: linear-gradient(170deg, rgb(19 191 177 / 0.13), rgb(7 94 85 / 0.24));
  transition: opacity 0.45s var(--ease);
}
/* Dissolve the photograph into the card instead of cutting it off with a hard
   edge — the image fades to the card surface across its lower third. Sits
   above the grade so the fade stays a clean white, not a multiplied green. */
.mfn-iconbox--top .mfn-iconbox__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 0) 45%,
    rgb(255 255 255 / 0.55) 74%,
    rgb(255 255 255 / 0.92) 92%,
    var(--white) 100%);
}
.mfn-iconbox--top:hover .mfn-iconbox__media img { transform: scale(1.09); filter: none; }
.mfn-iconbox--top:hover .mfn-iconbox__media::before { opacity: 0; }
/* Pull the body up into the faded zone so the two really merge. */
.mfn-iconbox--top .mfn-iconbox__body { margin-top: -2.4rem; position: relative; z-index: 1; }
.mfn-iconbox--top .mfn-iconbox__media--icon {
  width: 100%; height: auto; aspect-ratio: 16 / 10; font-size: 2rem;
  /* The card stopped clipping, so this has to round its own top corners. */
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  box-shadow: none;
}
.mfn-iconbox--top .mfn-iconbox__body {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2); flex: 1;
}
.mfn-iconbox__media--icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; font-size: 1.2rem; color: #fff;
  background: linear-gradient(140deg, rgb(var(--card-accent-rgb) / 0.72), var(--card-accent));
  box-shadow: 0 8px 16px -10px rgb(var(--card-accent-rgb) / 0.9);
}
/* Ink, not green. With the button and the rule already carrying the hue, a
   green title as well turned every card into three shades of the same note. */
.mfn-iconbox__title { font-size: var(--step-2); font-weight: 600; margin-bottom: 0.15rem; color: var(--ink); letter-spacing: -0.014em; }
.mfn-iconbox--top .mfn-iconbox__title { margin-bottom: 0.1rem; }
.mfn-iconbox__title a { color: inherit; text-decoration: none; }
.mfn-iconbox:hover .mfn-iconbox__title { color: var(--brand-deep); }
/* Short accent rule under the title; grows with the card on hover. Animating
   width rather than a transform keeps it off the compositor, where a scaled
   pseudo-element inside a lifting card is exactly what used to seam. */
.mfn-iconbox--top .mfn-iconbox__title::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 3px;
  margin-top: 0.55rem; background: var(--card-accent); opacity: 0.5;
  transition: width 0.25s var(--ease), opacity 0.25s var(--ease);
}
.mfn-iconbox--top:hover .mfn-iconbox__title::after { width: 54px; opacity: 1; }
.mfn-iconbox__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mfn-iconbox__body .mfn-rich {
  font-size: 0.845rem; color: var(--ink-2); line-height: 1.5;
  /* Column so the button below can be pushed to the foot of the card. */
  display: flex; flex-direction: column; flex: 1;
}
/* Blurbs vary from one line to six — clamp so a row of cards stays even. */
.mfn-iconbox__body .mfn-rich p:first-of-type {
  margin-bottom: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mfn-iconbox__body .mfn-rich br { display: none; }
/* The blurb's own margin is zeroed by the clamp above, which left the button
   sitting flush against the last line of text. Padding gives it air that an
   auto margin cannot collapse; the auto margin then drops it to the foot of
   the card so buttons stay level across a row of uneven blurbs. */
.mfn-iconbox__body .mfn-rich p:has(> a:only-child:is(.tp-button, .button, .button_theme, .astang-btn)) {
  margin-top: auto; padding-top: var(--sp-4);
}
/* Outranks the generic `.mfn-rich a.button` rule above (0,2,1). Outlined, not
   filled: twelve solid pills down a page is a lot of shouting for what is
   really a "read on". It fills when you point at it — the one moment it has
   something to say. */
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.tp-button,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.button,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.button_theme,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.astang-btn {
  padding: 0.5rem 1.15rem; font-size: 0.8rem; font-weight: 600;
  background: transparent; color: var(--brand-deep) !important;
  border: 1px solid rgb(var(--card-accent-rgb) / 0.38); border-radius: var(--radius-pill);
  box-shadow: none; transform: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.tp-button:hover,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.button:hover,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.button_theme:hover,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.astang-btn:hover {
  background: var(--brand-deep); color: #fff !important;
  border-color: var(--brand-deep); transform: none;
}
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.tp-button::after,
.mfn-iconbox :is(.mfn-rich, .mfn-iconbox__actions) a.button::after { content: " →"; }
.mfn-iconbox--left .astang-btn, .mfn-iconbox--left .tp-button { align-self: flex-start; }

/* --- List row --- */
.mfn-list { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; }
.mfn-list__media--icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  font-size: 1.1rem; color: var(--brand-deep); background: rgb(var(--brand-soft-rgb) / 0.13);
}
.mfn-list__media img { width: 44px; height: 44px; object-fit: contain; }
.mfn-list__title { font-size: var(--step-1); margin-bottom: 0.1rem; }
.mfn-list__body { min-width: 0; }
.mfn-list__body big { font-weight: 700; color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; }
.mfn-list__body h4 { margin-bottom: 0.15rem; font-size: var(--step-0); }
.mfn-list__link { text-decoration: none; color: inherit; display: block; }

/* --- Fancy heading --- */
.mfn-fancy { text-align: center; max-width: 62ch; margin-inline: auto; }
.mfn-fancy__icon { font-size: 1.7rem; color: var(--accent); display: block; margin-bottom: var(--sp-2); }
.mfn-fancy__slogan { font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--brand-deep); margin-bottom: var(--sp-2); }
.mfn-fancy__title { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.mfn-fancy__rule { display: block; width: 54px; height: 3px; margin: 0 auto var(--sp-3); border-radius: 3px; background: var(--brand-primary); }
.mfn-fancy__text { color: var(--ink-2); }

/* --- CTA --- */
.mfn-cta {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5); border-radius: var(--radius-xl);
  background: var(--mist); border: 1px solid var(--line);
}
.mfn-cta__icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%; font-size: 1.3rem; color: #fff;
  background: linear-gradient(140deg, var(--brand-soft), var(--brand-primary));
}
.mfn-cta__body { flex: 1 1 300px; min-width: 0; }
.mfn-cta__title { font-size: var(--step-2); margin-bottom: var(--sp-1); }
.mfn-cta__button { flex-shrink: 0; }
.mfn-item--call_to_action.outline .mfn-cta { background: transparent; border-style: dashed; }

/* --- Divider --- */
.mfn-divider { --mfn-divider-h: 24px; border: 0; height: var(--mfn-divider-h); margin: 0; }
.mfn-divider--line { position: relative; }
.mfn-divider--line::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.mfn-divider--brand::after { height: 3px; border-radius: 3px; background: var(--brand-primary); }

/* --- Opening hours --- */
.mfn-hours {
  background: linear-gradient(155deg, var(--brand-primary), var(--brand-deep));
  color: #fff; padding: var(--sp-5); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden; height: 100%;
}
.mfn-hours::after {
  content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem;
  width: 10rem; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / 0.07);
}
/* The legacy "infobox" graphic is a cropped cog — it was never an icon, it was
   a watermark, and at 42px inverted to white it just looked broken. Put it back
   to being a watermark: it now fills the middle of the card, which is space the
   row's height hands down whether the card wants it or not. */
.mfn-hours__image {
  position: absolute; right: -2.5rem; top: 32%; z-index: 0;
  width: 17rem; height: auto; margin: 0;
  filter: brightness(0) invert(1); opacity: 0.11; pointer-events: none;
}
.mfn-hours__icon {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; margin-bottom: var(--sp-3); font-size: 1.25rem;
  background: rgb(255 255 255 / 0.15); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}
.mfn-hours__title { color: #fff; font-size: var(--step-2); position: relative; z-index: 1; }
/* The card stretches to the tallest item in its row, which left the hours
   floating in the top third above a hand's width of empty green. Let the body
   take the slack and drop the list to the foot. */
.mfn-hours { display: flex; flex-direction: column; }
.mfn-hours__body {
  position: relative; z-index: 1; font-size: 0.92rem;
  display: flex; flex-direction: column; flex: 1;
}
.mfn-hours__body p { opacity: 0.88; }
/* The row takes its height from the feature card beside it, which is far taller
   than two lines of opening hours need. Rather than stretch the rows apart —
   which left them adrift in the middle of the card — the block stays tight and
   drops to the foot, with the watermark holding the space above it. */
.mfn-hours__body ul {
  list-style: none; padding: var(--sp-2) 0 0; margin: var(--sp-5) 0 0;
  margin-top: auto; position: relative; z-index: 1;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
/* Label above value, not beside it. Side by side in a column this narrow, a
   value as ordinary as "7am to 1pm every day" broke across two right-aligned
   lines and read as a mistake. */
.mfn-hours__body ul li {
  display: block; padding: 0.85rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.18); padding-left: 0;
}
.mfn-hours__body ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.mfn-hours__body ul li::before { display: none; }
.mfn-hours__body label {
  display: block; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.68rem; opacity: 0.7; margin-bottom: 0.15rem;
}
.mfn-hours__body span { display: block; text-align: left; font-size: 1rem; font-weight: 600; }
.mfn-hours__body br { display: none; }

/* --- Contact box --- */
.mfn-contact {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-5); height: 100%;
  display: flex; flex-direction: column;
}
.mfn-contact__title { font-size: var(--step-2); margin-bottom: var(--sp-3); }
/* Same reasoning as the hours card: the rows take the slack the row's height
   hands down, instead of leaving it pooled under the last line. */
.mfn-contact__list { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.mfn-contact__row { flex: 1; display: flex; gap: var(--sp-3); align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); margin: 0; font-size: 0.92rem; }
.mfn-contact__row--address { align-items: flex-start; }
.mfn-contact__row:last-child { border-bottom: 0; }
.mfn-contact__row .astang-icon {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgb(var(--brand-soft-rgb) / 0.13); color: var(--brand-deep); font-size: 0.85rem;
}
.mfn-contact__row a { text-decoration: none; font-weight: 500; color: var(--ink); }
.mfn-contact__row a:hover { color: var(--brand-primary); }

/* --- Team: the chief physician card ---
 * Presented as a proper card with the portrait beside the quote on wide
 * screens, rather than a lone circle above a wall of centred text. */
.mfn-team {
  height: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.mfn-team__heading { font-size: var(--step-2); margin: 0; }
.mfn-team__photo { width: 132px; flex-shrink: 0; margin: 0; }
.mfn-team--circle .mfn-team__photo img {
  border-radius: 50%; aspect-ratio: 1; object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgb(var(--brand-leaf-rgb) / 0.20);
}
.mfn-team__body { min-width: 0; }
.mfn-team__name { font-size: var(--step-2); margin-bottom: 0.1rem; color: var(--brand-leaf); }
.mfn-team__role { color: var(--brand-purple); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.74rem; }
.mfn-team .mfn-rich { font-size: 0.92rem; color: var(--ink-2); }
.mfn-team .mfn-rich p { position: relative; padding-left: 1.4rem; }
.mfn-team .mfn-rich p::before {
  content: "\201C"; position: absolute; left: 0; top: -0.35rem;
  font-size: 2.2rem; line-height: 1; color: rgb(var(--brand-leaf-rgb) / 0.35);
}
.mfn-team__socials { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }
.mfn-team__social {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--mist); color: var(--ink-2); text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.mfn-team__social:hover { background: var(--brand-leaf); color: #fff; }

@media (min-width: 620px) {
  .mfn-team { flex-direction: row; align-items: flex-start; flex-wrap: wrap; text-align: left; }
  .mfn-team__heading { flex-basis: 100%; }
  .mfn-team__body { flex: 1; display: flex; flex-direction: column; height: 100%; }
}

/* --- "News & Events" / "Our Blog" teasers ---
 * Free-form visual blocks that hold a heading, an embed or image, a blurb and
 * a link. Given the same card frame as everything else in the row. */
.mfn-item--visual .mfn-visual {
  height: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mfn-item--visual .mfn-visual > h3:first-child,
.mfn-item--visual .mfn-visual > h2:first-child {
  margin: 0; font-size: var(--step-1); color: var(--brand-leaf);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.mfn-item--visual .mfn-visual iframe,
.mfn-item--visual .mfn-visual img { border-radius: var(--radius-lg); width: 100%; }
.mfn-item--visual .mfn-visual iframe { aspect-ratio: 16 / 9; height: auto; }
.mfn-item--visual .mfn-visual p { font-size: 0.9rem; color: var(--ink-2); margin: 0; }
.mfn-item--visual .mfn-visual .astang-btn { align-self: flex-start; margin-top: auto; }

/* --- Image --- */
.mfn-image { margin: 0; }
.mfn-image img { border-radius: var(--radius-lg); }
.mfn-image--center { text-align: center; }
.mfn-image--center img { margin-inline: auto; }
.mfn-image--right img { margin-left: auto; }
.mfn-image figcaption { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-3); text-align: center; }

/* --- Tabs --- */
.mfn-tabs { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.mfn-tabs__nav { display: flex; flex-wrap: wrap; background: var(--mist); border-bottom: 1px solid var(--line); }
.mfn-tabs__tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 0.8rem 1.2rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem;
  color: var(--ink-2); border-bottom: 3px solid transparent; transition: all 0.18s var(--ease);
}
.mfn-tabs__tab:hover { color: var(--brand-primary); }
.mfn-tabs__tab[aria-selected="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); background: var(--white); }
.mfn-tabs__panel { padding: var(--sp-5); }
.mfn-tabs__panel[hidden] { display: none; }

/* --- Accordion / FAQ --- */
.astang-accordion { display: grid; gap: var(--sp-2); margin-block: var(--sp-5); }
.astang-accordion__title { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.astang-accordion__item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color 0.18s var(--ease);
}
.astang-accordion__item[open] { border-color: rgb(var(--brand-soft-rgb) / 0.55); box-shadow: var(--shadow-xs); }
.astang-accordion__summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.85rem 1.1rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--step-0); color: var(--ink);
}
.astang-accordion__summary::-webkit-details-marker { display: none; }
.astang-accordion__summary:hover { color: var(--brand-primary); }
.astang-accordion__number {
  flex-shrink: 0; display: grid; place-items: center; min-width: 2rem; height: 2rem;
  padding-inline: 0.45rem; border-radius: var(--radius-pill);
  background: rgb(var(--brand-soft-rgb) / 0.14); color: var(--brand-deep);
  font-size: 0.76rem; font-weight: 700;
}
.astang-accordion__label { flex: 1; min-width: 0; }
.astang-accordion__chevron {
  flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.astang-accordion__item[open] .astang-accordion__chevron { transform: rotate(-135deg); border-color: var(--brand-primary); }
.astang-accordion__panel { padding: 0 1.1rem 1.1rem; font-size: 0.94rem; color: var(--ink-2); }

/* --- Before / after --- */
.mfn-ba { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); user-select: none; }
.mfn-ba__img { width: 100%; display: block; }
.mfn-ba__after { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.mfn-ba__after .mfn-ba__img { position: absolute; inset: 0; width: auto; height: 100%; max-width: none; }
.mfn-ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.14); pointer-events: none; }
.mfn-ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md);
}
.mfn-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; appearance: none; background: transparent; cursor: ew-resize; margin: 0; }
.mfn-ba__range::-webkit-slider-thumb { appearance: none; width: 42px; height: 100%; cursor: ew-resize; }
.mfn-ba__range::-moz-range-thumb { width: 42px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }

.mfn-visual, .mfn-code, .mfn-generic { min-width: 0; }
.mfn-visual iframe { width: 100%; aspect-ratio: 16/9; height: auto; }

/* ------------------------------------------------------------- 11. Cards */

.astang-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); }
.astang-cards--2 { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
.astang-cards--4 { grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); }

.astang-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; display: flex;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.astang-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgb(var(--brand-soft-rgb) / 0.6); }
.astang-card__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; width: 100%; }
.astang-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.astang-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease); }
.astang-card:hover .astang-card__media img { transform: scale(1.04); }
.astang-card__media--placeholder { display: grid; place-items: center; background: var(--mist); }
.astang-card__media--placeholder .astang-mandala { width: 34%; opacity: 0.5; }
.astang-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.astang-card__tag {
  align-self: flex-start; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-deep); background: rgb(var(--brand-soft-rgb) / 0.13);
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
}
.astang-card__title { font-size: var(--step-1); margin: 0; line-height: 1.3; }
.astang-card:hover .astang-card__title { color: var(--brand-primary); }
.astang-card__excerpt {
  color: var(--ink-2); font-size: 0.875rem; margin: 0; flex: 1; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.astang-card__more { font-weight: 600; color: var(--brand-primary); font-size: 0.84rem; }
.astang-card__more::after { content: " →"; transition: margin 0.18s var(--ease); }
.astang-card:hover .astang-card__more::after { margin-left: 0.2rem; }

/* --------------------------------------------------------- 12. Post/page */

.astang-content { max-width: 76ch; }
.astang-layout--sidebar .astang-content { max-width: none; }
.astang-content > * + * { margin-top: var(--sp-4); }
.astang-content h2 { margin-top: var(--sp-6); font-size: var(--step-2); }
.astang-content h3 { margin-top: var(--sp-5); }
.astang-content h2::before {
  content: ""; display: block; width: 40px; height: 3px; border-radius: 3px;
  margin-bottom: var(--sp-2); background: var(--brand-primary);
}

/* The opening paragraph of an inner page reads as a standfirst. */
.astang-content > .mfn-rich > p:first-of-type,
.astang-content > p:first-of-type {
  font-size: var(--step-1); color: var(--ink-2); line-height: 1.6;
}
/*
 * In-content links. The legacy copy is dense with them — plain underlined green
 * turned paragraphs into a thicket. These sit on a tinted rule that fills in on
 * hover, so they read as links without shouting.
 *
 * The quote card is excluded because it is an `<a>` too, and this rule was
 * quietly winning against it: it replaced the card's background, flattened its
 * corners to 2px, cut its bottom padding to 1px and drew its underline right
 * across the foot of the card. That stray line was visible on the home page.
 */
.astang-content a:not(.astang-btn):not(.tp-button):not(.button):not(.button_theme):not(.astang-quotecard):not(.astang-index__link),
.mfn-rich a:not(.astang-btn):not(.tp-button):not(.button):not(.button_theme):not(.astang-quotecard):not(.astang-index__link) {
  color: var(--brand-deep);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--brand-soft), var(--brand-soft));
  background-size: 100% 1px;
  background-position: 0 calc(100% - 1px);
  background-repeat: no-repeat;
  padding-bottom: 1px;
  border-radius: 2px;
  transition: background-size 0.2s var(--ease), color 0.2s var(--ease);
}
.astang-content a:not(.astang-btn):not(.tp-button):not(.button):not(.button_theme):not(.astang-quotecard):not(.astang-index__link):hover,
.mfn-rich a:not(.astang-btn):not(.tp-button):not(.button):not(.button_theme):not(.astang-quotecard):not(.astang-index__link):hover {
  color: var(--brand-deep);
  background-size: 100% 100%;
  background-position: 0 100%;
}
.astang-content h3 { color: var(--brand-deep); }

/* --- Sidebar booking card (flows with the page; not sticky, so it can never overlap the widgets below it on narrow screens) --- */
.astang-booking {
  background: linear-gradient(150deg, #0E8A7D, var(--brand-deep));
  color: #fff; border-radius: var(--radius-xl); padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
.astang-booking__eyebrow {
  display: inline-block; font-size: var(--step--2); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: rgb(255 255 255 / 0.8); margin-bottom: var(--sp-2);
}
.astang-booking__title { font-size: var(--step-1); font-weight: 700; line-height: 1.28; margin-bottom: var(--sp-2); }
.astang-booking__text { font-size: 0.88rem; color: rgb(255 255 255 / 0.82); margin-bottom: var(--sp-4); }
.astang-booking .astang-btn { background: #fff; color: var(--brand-deep) !important; border: 0; }
.astang-booking .astang-btn:hover { background: var(--mist); color: var(--brand-deep) !important; }
.astang-booking__call {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: var(--sp-3); padding: 0.55rem; border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.35); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
}
.astang-booking__call:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.astang-booking__meta { list-style: none; padding: 0; margin: var(--sp-4) 0 0; font-size: 0.82rem; }
.astang-booking__meta li { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.28rem 0; margin: 0; color: rgb(255 255 255 / 0.82); }
.astang-booking__meta .astang-icon { color: var(--brand-soft); margin-top: 0.15rem; }

/* --- Inner-page closing CTA --- */
.astang-next {
  margin-top: var(--sp-7);
  background: linear-gradient(140deg, var(--ink) 0%, #113A34 100%);
  color: #fff; padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.astang-next__inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  align-items: center; justify-content: space-between;
}
.astang-next__copy { flex: 1 1 30rem; min-width: 0; }
.astang-next__title { color: #fff; font-size: var(--step-2); margin-bottom: var(--sp-2); max-width: 24ch; }
.astang-next__text { color: rgb(255 255 255 / 0.78); max-width: 56ch; margin: 0; font-size: 0.96rem; }
.astang-next__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.astang-next__primary { background: var(--brand-soft); color: #05302B !important; }
.astang-next__primary:hover { background: #fff; color: var(--brand-deep) !important; }

.astang-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--sp-4); }
.astang-meta__item { display: inline-flex; align-items: center; gap: 0.35rem; }

.astang-featured { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--sp-5); }
.astang-featured img { width: 100%; }

.astang-share { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.astang-share__label { font-weight: 700; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

.astang-postnav { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin-top: var(--sp-6); }
.astang-postnav__link {
  display: block; padding: var(--sp-4); border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.astang-postnav__link:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.astang-postnav__dir { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); font-weight: 700; }
.astang-postnav__title { font-weight: 600; margin-top: 0.25rem; display: block; }
.astang-postnav__link--next { text-align: right; }

.astang-pagination { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: var(--sp-6); }
.astang-pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 0.75rem;
  border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.86rem;
  transition: all 0.16s var(--ease);
}
.astang-pagination .page-numbers:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.astang-pagination .page-numbers.current { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* -------------------------------------------------------- 13. Sidebar */

.astang-sidebar { display: grid; gap: var(--sp-4); align-content: start; }
.widget { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4); }
.widget:has(> .textwidget:empty),
.widget:has(> .custom-html-widget:empty),
.widget:has(> .textwidget > .custom-html-widget:empty) { display: none; }

/* Script-only widgets (ads, pixels): keep the script, drop the empty card. */
.astang-widget--passive { background: none; border: 0; padding: 0; }
.astang-widget--passive:empty { display: none; }

.widget :is(h1, h2, h3, h4, h5, h6) { font-size: var(--step-1); line-height: 1.25; margin-bottom: var(--sp-2); }
.widget :is(h4, h5, h6) { font-size: var(--step-0); }
.widget p { font-size: 0.9rem; }
.widget img { border-radius: var(--radius-sm); }

/* --- Download stacks ---
 * "Click to Download" is four PDFs, saved as four buttons stacked one under
 * the other: a column of solid green lozenges taking up half the sidebar to
 * offer four documents. As a ruled list with a download mark it takes a third
 * of the room and reads as a set of files, which is what it is. */
.widget .textwidget .astang-btn-wrap { display: block; }
.widget .textwidget .astang-btn-wrap:first-of-type .astang-btn { border-top: 1px solid var(--line); }
.widget .textwidget .astang-btn {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--sp-3); width: 100%; text-align: left;
  padding: 0.75rem 0.1rem; font-size: 0.9rem; font-weight: 600;
  background: none; color: var(--ink) !important;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; transform: none;
  transition: color 0.18s var(--ease), padding-left 0.18s var(--ease);
}
.widget .textwidget .astang-btn::before {
  content: "↓"; flex-shrink: 0;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; font-size: 0.8rem;
  background: rgb(var(--brand-soft-rgb) / 0.14); color: var(--brand-deep);
}
.widget .textwidget .astang-btn:hover {
  background: none; color: var(--brand-deep) !important;
  padding-left: 0.45rem; transform: none;
}

.widget__title { font-size: var(--step-1); margin-bottom: var(--sp-3); position: relative; padding-bottom: var(--sp-2); }
.widget__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--brand-primary); }

.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 0.4rem 0; border-bottom: 1px solid var(--line-2); margin: 0; font-size: 0.9rem; }
.widget li:last-child { border-bottom: 0; }
.widget a { text-decoration: none; color: var(--ink-2); }
.widget a:hover { color: var(--brand-primary); }
.astang-widget-menu .children, .astang-widget-menu .sub-menu { padding-left: 0.8rem; margin-top: 0.3rem; border-left: 2px solid var(--line); }
.astang-widget-menu .current-menu-item > a, .astang-widget-menu .current_page_item > a { color: var(--brand-primary); font-weight: 600; }

.search-form { display: flex; gap: 0.4rem; }
.search-form label { flex: 1; min-width: 0; }
.search-form .search-field,
input[type="search"], input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; padding: 0.62rem 0.9rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 0.92rem;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgb(var(--brand-soft-rgb) / 0.18);
}
.search-form .search-submit, button[type="submit"], input[type="submit"] {
  padding: 0.62rem 1.2rem; border: 0; border-radius: var(--radius-pill);
  background: var(--brand-primary); color: #fff; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background 0.16s var(--ease);
}
.search-form .search-submit:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: var(--brand-deep); }

/* --------------------------------------------------------- 14. Footer */

.astang-footer { margin-top: var(--sp-8); background: var(--ink); color: rgb(232 241 238 / 0.76); }
.astang-footer::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-soft) 55%, var(--brand-primary)); }

/*
 * When the closing band sits directly above the footer, the two run together:
 * the band's lower edge fades to the footer's ink and the gap and rule between
 * them are removed, so the page ends on one continuous dark field.
 */
/* The closing band is the last child of <main>, and the footer is <main>'s
   next sibling — so the join is matched through the wrapper, not directly. */
.astang-main:has(> .astang-parallax:last-child) + .astang-footer,
.astang-main:has(> .astang-next:last-child) + .astang-footer { margin-top: 0; }

.astang-main:has(> .astang-parallax:last-child) + .astang-footer::before,
.astang-main:has(> .astang-next:last-child) + .astang-footer::before { display: none; }

.astang-main > .astang-parallax:last-child { padding-bottom: clamp(5rem, 13vw, 9rem); }
.astang-main > .astang-parallax:last-child::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 65%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(15 36 32 / 0) 0%, rgb(15 36 32 / 0.5) 52%, var(--ink) 100%);
}
.astang-main > .astang-next:last-child {
  margin-top: var(--sp-7);
  background: linear-gradient(180deg, #113A34 0%, var(--ink) 100%);
}
.astang-footer a { color: rgb(232 241 238 / 0.76); text-decoration: none; }
.astang-footer a:hover { color: var(--brand-soft); }
.astang-footer :is(h2,h3,h4), .astang-footer .widget__title { color: #fff; }
.astang-footer .widget { background: transparent; border: 0; padding: 0; }
.astang-footer .widget li { border-bottom-color: rgb(255 255 255 / 0.08); }
.astang-footer .widget a { color: rgb(232 241 238 / 0.76); }
.astang-footer .widget__title::after { background: var(--brand-soft); }

.astang-footer__top { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.astang-footer__brand { max-width: 34ch; font-size: 0.9rem; }
.astang-footer__brand img { max-height: 60px; width: auto; margin-bottom: var(--sp-3); background: #fff; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); }
.astang-footer__sanskrit { font-style: italic; font-size: var(--step-1); color: var(--brand-soft); margin-bottom: var(--sp-2); }
.astang-footer__contact { list-style: none; padding: 0; margin: var(--sp-3) 0 0; font-size: 0.9rem; }
.astang-footer__contact li { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.35rem 0; margin: 0; }
.astang-footer__contact .astang-icon { color: var(--brand-soft); margin-top: 0.2rem; }

.astang-social { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--sp-3); }
.astang-social__link {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgb(255 255 255 / 0.07); color: #E8F1EE; transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.astang-social__link:hover { background: var(--brand-primary); color: #fff; }

.astang-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 0.08); padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between;
  font-size: var(--step--1);
}
.astang-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.astang-footer__legal li { margin: 0; }

.astang-footer__menu { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.astang-footer__menu li { position: relative; padding: 0.35rem 0 0.35rem 0.9rem; margin: 0; }
.astang-footer__menu li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-soft); opacity: 0.7;
}

/* -------------------------------------------- 15. Mobile action bar */

/*
 * Phone-only. `display:none` is the base state and the grid is only switched
 * on inside the narrow media query, so it can never appear on desktop.
 */
.astang-actionbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgb(15 36 32 / 0.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.astang-actionbar__item {
  display: grid; place-items: center; gap: 2px; padding: 0.5rem 0.25rem;
  text-decoration: none; color: var(--ink-2); font-size: 0.66rem; font-weight: 600;
  border-right: 1px solid var(--line-2);
}
.astang-actionbar__item:last-child { border-right: 0; }
.astang-actionbar__item .astang-icon { font-size: 1.05rem; color: var(--brand-primary); }

@media (max-width: 780px) {
  .astang-actionbar.is-enabled { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  body.has-actionbar { padding-bottom: 62px; }
}

/* ------------------------------------------------------ 16. WooCommerce */

.woocommerce ul.products {
  display: grid !important; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  margin: 0 !important; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-3); text-align: center;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.woocommerce ul.products li.product img { border-radius: var(--radius-sm); margin-bottom: var(--sp-2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--step-0) !important; padding: 0 !important; font-weight: 600; }
.woocommerce ul.products li.product .price { color: var(--brand-deep) !important; font-weight: 700; }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--brand-primary) !important; color: #fff !important;
  border-radius: var(--radius-pill) !important; font-weight: 600 !important;
  padding: 0.62rem 1.2rem !important; border: 0 !important;
  transition: background 0.18s var(--ease);
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover { background: var(--brand-deep) !important; }
.woocommerce span.onsale {
  background: var(--brand-purple) !important; border-radius: var(--radius-pill) !important;
  padding: 0.25rem 0.7rem !important; min-height: 0 !important; min-width: 0 !important;
  line-height: 1.4 !important; font-weight: 700;
}
.woocommerce div.product .product_title { font-size: var(--step-3); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--brand-deep) !important; font-size: var(--step-2); font-weight: 700; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--brand-primary) !important; background: var(--white);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.woocommerce-error { border-top-color: #C0392B !important; }
.woocommerce .woocommerce-breadcrumb { display: none; }

/* -------------------------------------------------- 17. Motion & print */

.mfn-animate { opacity: 0; transform: translateY(14px); }
.mfn-animate.is-visible { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .mfn-animate { opacity: 1; transform: none; }
}

@media print {
  .astang-header, .astang-topbar, .astang-footer, .astang-actionbar,
  .astang-share, .astang-postnav, .astang-sidebar, .astang-scrim, .astang-slider { display: none !important; }
  body { background: #fff; color: #000; }
  .astang-layout { display: block; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* ---------------------------------------------------- 18. 404 and misc */

.astang-404 { text-align: center; padding-block: var(--sp-8); }
.astang-404 .astang-mandala { width: min(180px, 45vw); margin: 0 auto var(--sp-4); opacity: 0.7; }
.astang-404__code { font-size: var(--step-5); font-weight: 700; line-height: 1; margin-bottom: var(--sp-2); color: var(--brand-primary); }
.astang-404__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }

.astang-no-results { text-align: center; padding: var(--sp-7) var(--sp-4); }
.astang-no-results .astang-mandala { width: 130px; margin: 0 auto var(--sp-4); opacity: 0.5; }

/* Contact Form 7 / WPForms */
.wpcf7-form p { margin-bottom: var(--sp-3); }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
.wpcf7-not-valid-tip { color: #C0392B; font-size: 0.84rem; }
.wpcf7-response-output { border-radius: var(--radius-lg) !important; border-width: 1px !important; padding: var(--sp-3) !important; }

/* ============================================================ Success stories
 * A testimonials system driven by the `astang_story` CPT. Two surfaces: a
 * per-page section (anchor #astang-success) and a site-wide tab that opens a
 * panel linking to each page's section. Same warm, image-led card language as
 * the treatment grid, so it belongs to the rest of the site rather than
 * arriving as a bolt-on. */

.astang-ss {
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
  background:
    radial-gradient(120% 60% at 100% 0, rgb(var(--brand-soft-rgb) / 0.10), transparent 60%),
    var(--mist);
  border-top: 1px solid var(--line);
}
/* Clear the sticky header when the anchor is jumped to. */
#astang-success { scroll-margin-top: 104px; }

.astang-ss__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.6rem, 4vw, 2.6rem); }
.astang-ss__title {
  font-size: var(--step-3); letter-spacing: -0.02em; margin: 0.4rem 0 0;
  position: relative; padding-bottom: var(--sp-3);
}
.astang-ss__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 3px; background: var(--brand-primary);
}
.astang-ss__lead { margin: var(--sp-4) auto 0; color: var(--ink-2); font-size: var(--step-1); }

.astang-ss__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 620px) { .astang-ss__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) {
  .astang-ss__grid { grid-template-columns: repeat(3, 1fr); }
  .astang-ss-card--featured { grid-column: span 2; }
}

/* --- Card --- */
.astang-ss-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);
}
.astang-ss-card:hover {
  transform: translateY(-4px); border-color: rgb(var(--brand-primary-rgb) / 0.4);
  box-shadow: 0 20px 38px -22px rgb(var(--brand-primary-rgb) / 0.5), 0 3px 10px rgb(20 33 30 / 0.06);
}
.astang-ss-card__media { position: relative; background: var(--mist); line-height: 0; }
.astang-ss__img,
.astang-ss__video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.astang-ss__video { background: #000; }
.astang-ss__audio { width: 100%; display: block; }
.astang-ss__embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.astang-ss__embed > iframe,
.astang-ss__embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.astang-ss__embed--audio { aspect-ratio: auto; background: none; padding: var(--sp-4) var(--sp-4) 0; }
.astang-ss__embed--audio > iframe { position: static; width: 100%; height: 152px; }

.astang-ss-card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.2rem 1.35rem 1.35rem; flex: 1; }
.astang-ss-card__badge {
  display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-deep); background: rgb(var(--brand-soft-rgb) / 0.14);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
}
.astang-ss-card__quote { margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--ink-2); }
.astang-ss-card__quote p { margin: 0 0 0.6em; }
.astang-ss-card__quote p:last-child { margin-bottom: 0; }
.astang-ss-card__by {
  margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.astang-ss-card__name { font-style: normal; font-weight: 700; color: var(--ink); }
.astang-ss-card__ctx { font-size: 0.82rem; color: var(--ink-3); }

/* Text-only stories carry the weight themselves: a tinted card and a big mark. */
.astang-ss-card--textonly { background: linear-gradient(162deg, var(--white), var(--mist)); }
.astang-ss-card--textonly .astang-ss-card__body { padding: 1.5rem 1.5rem 1.6rem; position: relative; }
.astang-ss-card--textonly .astang-ss-card__body { justify-content: center; }
.astang-ss-card--textonly .astang-ss-card__by { margin-top: 1.1rem; }
.astang-ss-card--textonly .astang-ss-card__quote { font-size: 1.06rem; color: var(--ink); }
.astang-ss-card--textonly .astang-ss-card__body::before {
  content: "\201C"; position: absolute; right: 1rem; top: 0.2rem;
  font-size: 4rem; line-height: 1; color: rgb(var(--brand-soft-rgb) / 0.28); pointer-events: none;
}
.astang-ss-card--featured.astang-ss-card--textonly .astang-ss-card__quote { font-size: 1.16rem; }

/* On a story's own single view. */
.astang-ss-single__media { margin: 0 0 var(--sp-5); border-radius: var(--radius-lg); overflow: hidden; }
.astang-ss-single__media .astang-ss__embed { border-radius: var(--radius-lg); }
.astang-ss-single__quote {
  margin: 0 0 var(--sp-5); padding-left: var(--sp-5); border-left: 3px solid var(--brand-soft);
  font-size: 1.2rem; line-height: 1.6; color: var(--ink);
}

/* --- The site-wide tab --- */
.astang-ss-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 96; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 0.55rem; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-deep));
  border-radius: 14px 0 0 14px; box-shadow: 0 12px 30px -12px rgb(7 94 85 / 0.7);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  transition: padding 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.astang-ss-tab:hover { padding-right: 0.9rem; box-shadow: 0 16px 36px -12px rgb(7 94 85 / 0.8); }
.astang-ss-tab:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
.astang-ss-tab i { writing-mode: horizontal-tb; font-size: 1.05rem; }
.astang-ss-tab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .astang-ss-tab { padding: 0.75rem 0.5rem; font-size: 0.74rem; }
  .astang-ss-tab .astang-ss-tab__label { display: none; }
  .astang-ss-tab i { font-size: 1.2rem; }
}

/* --- The panel --- */
.astang-ss-panel__backdrop {
  position: fixed; inset: 0; z-index: 1300; background: rgb(20 33 30 / 0.5);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.astang-ss-panel__backdrop.is-open { opacity: 1; }

.astang-ss-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(360px, 92vw);
  z-index: 1301; display: flex; flex-direction: column; overflow-y: auto;
  background: var(--paper); box-shadow: -24px 0 60px -24px rgb(20 33 30 / 0.55);
  transform: translateX(100%); transition: transform 0.3s var(--ease);
}
.astang-ss-panel.is-open { transform: none; }

.astang-ss-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; color: #fff;
  background: linear-gradient(160deg, var(--brand-primary), var(--brand-deep));
  position: sticky; top: 0;
}
.astang-ss-panel__title { margin: 0; font-size: 1.05rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; }
.astang-ss-panel__close {
  flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / 0.18); color: #fff; font-size: 1rem;
  transition: background 0.18s var(--ease);
}
.astang-ss-panel__close:hover { background: rgb(255 255 255 / 0.32); }
.astang-ss-panel__intro { margin: 0; padding: 1rem 1.25rem 0.4rem; color: var(--ink-2); font-size: 0.9rem; }

.astang-ss-panel__here {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.7rem 1rem;
  padding: 0.75rem 0.9rem; border-radius: var(--radius-lg);
  background: rgb(var(--brand-soft-rgb) / 0.14); color: var(--brand-deep);
  font-weight: 700; text-decoration: none;
}
.astang-ss-panel__here:hover { background: rgb(var(--brand-soft-rgb) / 0.22); }

.astang-ss-panel__list { list-style: none; margin: 0.3rem 0; padding: 0 0.75rem; display: flex; flex-direction: column; gap: 2px; }
.astang-ss-panel__list li { margin: 0; }
.astang-ss-panel__list li::before { display: none; }
.astang-ss-panel__link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.8rem; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--ink); font-weight: 600; transition: background 0.16s var(--ease);
}
.astang-ss-panel__link:hover { background: var(--mist); }
.astang-ss-panel__link.is-current { background: rgb(var(--brand-soft-rgb) / 0.14); color: var(--brand-deep); }
.astang-ss-panel__count {
  flex-shrink: 0; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--brand-primary); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.astang-ss-panel__all {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: auto 1rem 1.1rem; padding: 0.85rem; border-radius: var(--radius-lg);
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
  transition: background 0.18s var(--ease);
}
.astang-ss-panel__all:hover { background: var(--brand-deep); }

html.astang-ss-locked, html.astang-ss-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .astang-ss-panel, .astang-ss-panel__backdrop, .astang-ss-card { transition: none; }
}
@media print { .astang-ss-tab, .astang-ss-panel, .astang-ss-panel__backdrop { display: none !important; } }

/* --- Treatment-card actions row ---
 * Read More was lifted out of the copy into its own row so a quiet "Success
 * story" link can sit beside it. The button keeps the outlined-pill styling
 * (its selectors now also match here); the story link is a plain text link so
 * the hierarchy stays Read More → then the story. */
.mfn-iconbox__actions {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.9rem; padding-top: var(--sp-4);
}
.mfn-iconbox__actions a.tp-button,
.mfn-iconbox__actions a.button,
.mfn-iconbox__actions a.button_theme,
.mfn-iconbox__actions a.astang-btn { margin: 0; }
.mfn-iconbox__sslink {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 600; color: var(--brand-primary);
  background: none; border: 0; padding: 0.5rem 0; text-decoration: none;
  transition: color 0.18s var(--ease), gap 0.18s var(--ease);
}
.mfn-iconbox__sslink i { font-size: 0.9rem; }
.mfn-iconbox__sslink:hover { color: var(--brand-deep); gap: 0.55rem; }
.mfn-iconbox__sslink:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* On a photo-backed section the link needs to stay light. */
.mfn-section--has-image .mfn-iconbox__sslink { color: var(--brand-deep); }