/* =================================================================
   AĒSTEC DUBAI — Subpage stylesheet
   Loaded after main.css. Reuses the same tokens (:root in main.css)
   and component classes. Adds page-specific components only.
   ================================================================= */


/* ----------------------------------------------------------------
   SHARED — page hero (text intro, clears the fixed nav)
   ---------------------------------------------------------------- */
.page-hero {
  background: var(--cream);
  padding-top: clamp(150px, 18vh, 220px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.page-hero--centered .page-hero__inner {
  margin-inline: auto;
  text-align: center;
}
.page-hero--centered .page-hero__lead { margin-inline: auto; }

.page-hero__inner {
  max-width: 880px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-top: 4px;
}

.page-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 600px;
  margin-top: 24px;
}

/* breadcrumb above page-hero title */
.page-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-grey);
  margin-bottom: 20px;
}
.page-crumb a { color: var(--text-grey); }
.page-crumb a:hover { color: var(--ink); }
.page-crumb span { opacity: 0.5; }


/* ----------------------------------------------------------------
   SHARED — trust-bar (recurring credentials strip)
   ---------------------------------------------------------------- */
.trust-bar {
  background: var(--beige-deep);
}
.trust-bar--ink { background: var(--ink); }

.trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  padding-block: 22px;
}

.trust-bar__item {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.trust-bar--ink .trust-bar__item { color: rgba(249, 247, 242, 0.78); }

.trust-bar__item:first-child { color: var(--ink); }
.trust-bar--ink .trust-bar__item:first-child { color: var(--cream); }

.trust-bar__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--taupe-dark);
}


/* ----------------------------------------------------------------
   SHARED — CTA band (dark closer, full width)
   ---------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(72px, 9vw, 128px);
}

.cta-band__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 80px);
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.18;
  font-weight: 400;
  color: var(--cream);
  max-width: 620px;
}

.cta-band__lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(249, 247, 242, 0.7);
  max-width: 460px;
  margin-top: 18px;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex-shrink: 0;
}


/* ----------------------------------------------------------------
   SHARED — media placeholder (photos intentionally left blank)
   ---------------------------------------------------------------- */
.media-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(18, 18, 18, 0.018) 0,
      rgba(18, 18, 18, 0.018) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--beige-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-placeholder::after {
  content: attr(data-label);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-dark);
}
.media-placeholder--portrait { aspect-ratio: 3 / 4; }
.media-placeholder--landscape { aspect-ratio: 4 / 3; }
.media-placeholder--wide { aspect-ratio: 16 / 9; }
.media-placeholder--tall { aspect-ratio: 4 / 5; }
.media-placeholder--square { aspect-ratio: 1 / 1; }

.media-placeholder--ink {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(249, 247, 242, 0.03) 0,
      rgba(249, 247, 242, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    #1b1b1b;
  border-color: rgba(249, 247, 242, 0.12);
}
.media-placeholder--ink::after { color: rgba(249, 247, 242, 0.4); }


/* ----------------------------------------------------------------
   SHARED — section intro (left aligned)
   ---------------------------------------------------------------- */
.intro {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.intro__lead {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 620px;
}


/* ================================================================
   ABOUT / HERITAGE
   ================================================================ */

/* 02 — origin story */
.origin {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.origin__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.origin__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 10px;
}
.origin__label .about-dot { background: var(--ink); }

.origin__body { max-width: 620px; }
.origin__para {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.origin__para:last-child { margin-bottom: 0; }
.origin__year {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
}

/* 03 — figures band (reuses .about-stats styling on its own row) */
.figures {
  padding-bottom: var(--section-pad-y);
  background: var(--cream);
}
.figures .about-stats { margin-bottom: 0; }

/* 04 — three pillars with deep links */
.pillars {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px;
  background: var(--cream);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
}
.pillar__num {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--taupe-dark);
}
.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.pillar__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
}
.pillar .link-arrow { margin-top: 6px; align-self: flex-start; font-size: 13px; }

/* location band (real clinic photo) */
.location-band {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.location-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.location-band__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
}
.location-band__body { max-width: 480px; }
.location-band__para {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: 20px;
}

/* 05 — team */
.team {
  padding-block: var(--section-pad-y);
  background: var(--ink);
  color: var(--cream);
}
.team .pre-headline { color: rgba(249, 247, 242, 0.65); }
.team .section-headline { color: var(--cream); }
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.team-card__media {
  width: 100%;
  margin-bottom: 20px;
  filter: grayscale(1);
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 4px;
}
.team-card__role {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.team-card__bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(249, 247, 242, 0.7);
}

/* 06 — anonymous-professional quotes */
.quotes {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 36px 32px;
  background: var(--cream);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 rgba(18, 18, 18, 0.04), 0 8px 24px rgba(18, 18, 18, 0.04);
}
.quote-card__text {
  font-family: var(--font-quote);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
}
.quote-card__mark {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 40px;
  line-height: 0.4;
  color: var(--taupe-light);
}
.quote-card__attr {
  font-family: var(--font-mulish);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}


/* ================================================================
   TREATMENTS OVERVIEW
   ================================================================ */
.tx-overview {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}

/* signature wide card */
.signature-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 440px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  margin-bottom: 20px;
}
.signature-card__media {
  position: relative;
  background-size: cover;
  background-position: center;
}
.signature-card__media.media-placeholder { border: none; border-radius: 0; }
.signature-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(36px, 4vw, 64px);
}
.signature-card__badge {
  align-self: flex-start;
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.signature-card__name {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  color: var(--cream);
}
.signature-card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(249, 247, 242, 0.75);
  max-width: 440px;
}
.signature-card__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.signature-card .link-arrow {
  color: var(--cream);
  border-color: rgba(249, 247, 242, 0.3);
}
.signature-card .link-arrow:hover { color: var(--accent); border-color: var(--accent); }

/* three regular cards */
.tx-overview__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* echo reminder band */
.echo-band {
  padding-block: var(--section-pad-y);
  background: var(--ink);
  color: var(--cream);
}
.echo-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.echo-band .pre-headline { color: rgba(249, 247, 242, 0.65); }
.echo-band__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
}
.echo-band__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(249, 247, 242, 0.72);
  margin-top: 20px;
  max-width: 460px;
}
.echo-band__media { width: 100%; }


/* ================================================================
   TREATMENT TEMPLATE
   ================================================================ */

/* 01 — hero */
.tx-hero {
  padding-top: clamp(150px, 18vh, 220px);
  padding-bottom: clamp(56px, 6vw, 88px);
  background: var(--cream);
}
.tx-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.tx-hero__badge {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 20px;
}
.tx-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}
.tx-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 22px;
  max-width: 480px;
}
.tx-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-block: 32px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tx-fact__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-grey);
  margin-bottom: 6px;
}
.tx-fact__value {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.tx-hero__media { width: 100%; }

/* 02 — for who */
.tx-forwho {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.tx-forwho__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.tx-forwho__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.tx-forwho__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
}
.tx-forwho__item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.tx-forwho__item::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* 03 — how it works under echo (reuses ultrasound layout pattern) */
.tx-method {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.tx-method__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.tx-method__media {
  position: sticky;
  top: 60px;
  width: 100%;
}
.tx-method__steps { margin-top: 40px; }
.tx-method__step {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.tx-method__step:last-child { border-bottom: 1px solid var(--line); }
.tx-method__step-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--ink);
}
.tx-method__step-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* 04 — process in 3 steps */
.tx-process {
  padding-block: var(--section-pad-y);
  background: var(--ink);
  color: var(--cream);
}
.tx-process .pre-headline { color: rgba(249, 247, 242, 0.65); }
.tx-process .section-headline { color: var(--cream); }
.tx-process__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}
.tx-process__row--four { grid-template-columns: repeat(4, 1fr); }
.tx-step {
  padding-top: 28px;
  border-top: 1px solid rgba(249, 247, 242, 0.18);
}
.tx-step__num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 18px;
}
.tx-step__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 12px;
}
.tx-step__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(249, 247, 242, 0.7);
}
.tx-step__body em {
  color: var(--accent);
  font-style: normal;
}

/* 05 — before & after (filtered) reuses results section bg */
.tx-results {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.tx-results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(40px, 5vw, 56px);
}

/* 06 — price + touch-up */
.tx-price {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.tx-price__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(36px, 4vw, 56px);
  background: var(--beige);
  border-radius: var(--radius-card);
}
.tx-price__amount {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.tx-price__unit {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-grey);
  margin-top: 10px;
}
.tx-price__note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.tx-price__note strong { color: var(--ink); }
.tx-price__note .link-arrow { margin-top: 16px; }


/* ================================================================
   RESULTS / BEFORE & AFTER
   ================================================================ */
.ba {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}

.ba-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.ba-filter__btn {
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ba-filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.ba-filter__btn.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px clamp(20px, 2.4vw, 32px);
}
.ba-card.is-hidden { display: none; }

.ba-quote {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 80px);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-card);
  text-align: center;
  align-items: center;
}
.ba-quote__text {
  font-family: var(--font-quote);
  font-size: clamp(20px, 2.2vw, 30px);
  font-style: italic;
  line-height: 1.4;
  color: var(--cream);
  max-width: 760px;
}
.ba-quote__attr {
  font-family: var(--font-mulish);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}


/* ================================================================
   PRICING
   ================================================================ */
.pricing {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.pricing__intro {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.pricing__intro-lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 20px;
}

.price-group { margin-bottom: clamp(40px, 5vw, 64px); }
.price-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 6px;
}
.price-group__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  color: var(--ink);
}
.price-group__unit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-grey);
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.price-row__name {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
}
.price-row__desc {
  display: block;
  font-size: 13px;
  color: var(--text-grey);
  margin-top: 3px;
  max-width: 460px;
}
.price-row__amount {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  white-space: nowrap;
}
.price-row__amount--quiet {
  font-size: 16px;
  font-style: italic;
  color: var(--taupe-dark);
}
.price-row__link {
  color: var(--accent-dark);
  border-bottom: 1px solid rgba(186, 128, 0, 0.4);
}
.price-row__link:hover { border-bottom-color: var(--accent-dark); }

/* notes + why blocks */
.price-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.price-note-card {
  padding: 32px 30px;
  background: var(--beige);
  border-radius: var(--radius-card);
}
.price-note-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}
.price-note-card__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.price-why {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.price-why__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.price-why__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.price-why__point-num {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--taupe-dark);
  margin-bottom: 12px;
}
.price-why__point-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
}
.price-why__point-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* ================================================================
   CONSULT
   ================================================================ */
.consult {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.consult__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* reassurance aside */
.consult-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(32px, 3vw, 44px);
  background: var(--cream);
  border-radius: var(--radius-card);
}
.consult-reassure__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 18px;
}
.consult-reassure__item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.consult-reassure__item:first-of-type { border-top: none; padding-top: 0; }
.consult-reassure__icon {
  flex-shrink: 0;
  color: var(--accent-dark);
  margin-top: 2px;
}
.consult-reassure__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.consult-reassure__text strong { color: var(--ink); font-weight: 600; }

/* direct contact options */
.consult-contact {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.consult-contact__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(36px, 4vw, 56px);
}
.consult-channel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px;
  background: var(--beige);
  border-radius: var(--radius-card);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.consult-channel:hover { transform: translateY(-2px); }
.consult-channel--primary { background: var(--ink); color: var(--cream); }
.consult-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
}
.consult-channel--primary .consult-channel__icon { background: rgba(249,247,242,0.12); color: var(--cream); }
.consult-channel__label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
}
.consult-channel__value {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
}
.consult-channel--primary .consult-channel__value { color: rgba(249,247,242,0.72); }
.consult-channel__meta {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-grey);
}
.consult-channel--primary .consult-channel__meta { color: var(--accent); }

/* location */
.consult-location {
  padding-block: var(--section-pad-y);
  background: var(--ink);
  color: var(--cream);
}
.consult-location__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.consult-location__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
}
.consult-location .pre-headline { color: rgba(249, 247, 242, 0.65); }
.consult-location__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
}
.consult-location__detail {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: rgba(249, 247, 242, 0.72);
  margin-top: 20px;
}
.consult-location__detail strong { color: var(--cream); font-weight: 500; }


/* ================================================================
   REGISTER INTEREST — typeform-style flow
   ================================================================ */
.typeform {
  min-height: 100svh;
  background: var(--cream);
  display: flex;
  flex-direction: column;
}
.typeform__bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(18, 18, 18, 0.06);
  z-index: 50;
}
.typeform__bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}

.typeform__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 72px);
}
.typeform__brand {
  font-family: var(--font-editorial);
  font-size: 22px;
  color: var(--ink);
}
.typeform__exit {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.typeform__exit:hover { color: var(--ink); }

.typeform__stage {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(24px, 5vh, 80px) clamp(20px, 4vw, 72px) clamp(80px, 12vh, 140px);
}
.typeform__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.tf-step { display: none; }
.tf-step.is-active { display: block; animation: tf-in 0.5s var(--ease) both; }
@keyframes tf-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tf-step__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  margin-bottom: 20px;
}
.tf-step__count svg { display: block; }
.tf-step__q {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.tf-step__hint {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 520px;
}

.tf-field {
  margin-top: 36px;
}
.tf-field input,
.tf-field textarea {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--line-strong);
  padding: 12px 0;
  outline: none;
  transition: border-color 0.2s var(--ease);
  resize: none;
}
.tf-field input::placeholder,
.tf-field textarea::placeholder { color: var(--taupe-light); }
.tf-field input:focus,
.tf-field textarea:focus { border-color: var(--accent); }

.tf-options {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-soft);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  text-align: left;
  width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.tf-option:hover { border-color: var(--ink); }
.tf-option.is-selected {
  border-color: var(--accent);
  background: rgba(246, 168, 0, 0.08);
}
.tf-option__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.tf-option.is-selected .tf-option__key {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.tf-step__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}
.tf-enter-hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-grey);
}
.tf-enter-hint strong { color: var(--ink-soft); font-weight: 600; }

/* nav controls bottom right */
.typeform__nav {
  position: fixed;
  bottom: clamp(20px, 4vw, 40px);
  right: clamp(20px, 4vw, 72px);
  display: flex;
  gap: 8px;
  z-index: 40;
}
.tf-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-soft);
  background: var(--ink);
  color: var(--cream);
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.tf-nav-btn:hover { background: #1f3535; }
.tf-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* completion screen */
.tf-done {
  display: none;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}
.tf-done.is-active { display: block; animation: tf-in 0.5s var(--ease) both; }
.tf-done__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  margin-bottom: 28px;
}
.tf-done__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.tf-done__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 20px;
}
.tf-done__actions { margin-top: 36px; }


/* ================================================================
   RESPONSIVE — subpages
   ================================================================ */
@media (max-width: 1024px) {
  .origin__grid { grid-template-columns: 1fr; }
  .origin__label { padding-top: 0; }

  .pillars__grid,
  .team__grid,
  .quotes__grid { grid-template-columns: 1fr; }

  .location-band__grid { grid-template-columns: 1fr; }
  .location-band__media { aspect-ratio: 4 / 3; }

  .signature-card { grid-template-columns: 1fr; }
  .signature-card__media { min-height: 280px; }
  .tx-overview__row { grid-template-columns: 1fr; }
  .echo-band__grid { grid-template-columns: 1fr; }

  .tx-hero__grid { grid-template-columns: 1fr; }
  .tx-forwho__grid { grid-template-columns: 1fr; }
  .tx-method__grid { grid-template-columns: 1fr; }
  .tx-method__media { position: static; }
  .tx-process__row { grid-template-columns: 1fr; }
  .tx-results__grid { grid-template-columns: 1fr 1fr; }
  .tx-price__card { grid-template-columns: 1fr; }

  .ba-grid { grid-template-columns: 1fr 1fr; }

  .price-extras { grid-template-columns: 1fr; }
  .price-why__grid { grid-template-columns: 1fr; }
  .price-why__points { grid-template-columns: 1fr; }

  .consult__grid { grid-template-columns: 1fr; }
  .consult-contact__row { grid-template-columns: 1fr; }
  .consult-location__grid { grid-template-columns: 1fr; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cta-band__actions { align-items: flex-start; }
}

@media (max-width: 640px) {
  .tx-forwho__list { grid-template-columns: 1fr; }
  .tx-results__grid { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .tx-hero__facts { gap: 24px; }
  .price-row { flex-wrap: wrap; gap: 6px 20px; }
}


/* ================================================================
   v2 — image hero frames, trust row, reviews, depth glows
   (appended; later rules intentionally override earlier ones)
   ================================================================ */

/* ---- PAGE HERO as image frame ---- */
.page-hero {
  background: var(--cream);
  padding: clamp(12px, 1.6vw, 20px);
  padding-bottom: 0;
}
.page-hero__frame {
  position: relative;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  min-height: clamp(420px, 58vh, 600px);
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 4vw, 64px);
  padding-top: clamp(120px, 16vh, 190px);
}
.page-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,18,18,0.80) 0%, rgba(18,18,18,0.42) 45%, rgba(18,18,18,0.20) 100%);
  z-index: 1;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0;
  text-align: left;
}
.page-hero__frame .pre-headline { color: rgba(249, 247, 242, 0.85); margin-bottom: 18px; }
.page-hero__frame .page-hero__title { color: var(--cream); }
.page-hero__frame .page-hero__lead { color: rgba(249, 247, 242, 0.9); }
.page-hero__frame .pricing__intro-lead { color: rgba(249, 247, 242, 0.92); }

/* ---- TREATMENT HERO as image frame ---- */
.tx-hero {
  background: var(--cream);
  padding: clamp(12px, 1.6vw, 20px);
  padding-bottom: 0;
}
.tx-hero__frame {
  position: relative;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  min-height: clamp(480px, 66vh, 640px);
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 4vw, 64px);
  padding-top: clamp(120px, 16vh, 190px);
}
.tx-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,18,18,0.82) 0%, rgba(18,18,18,0.45) 48%, rgba(18,18,18,0.22) 100%);
  z-index: 1;
}
.tx-hero__intro {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.tx-hero__frame .page-crumb,
.tx-hero__frame .page-crumb a { color: rgba(249, 247, 242, 0.7); }
.tx-hero__frame .page-crumb a:hover { color: var(--cream); }
.tx-hero__frame .tx-hero__title { color: var(--cream); }
.tx-hero__frame .tx-hero__sub { color: rgba(249, 247, 242, 0.9); }
.tx-hero__frame .tx-hero__badge { border-color: var(--accent); color: var(--accent); }
.tx-hero__frame .tx-hero__facts { border-color: rgba(249, 247, 242, 0.25); }
.tx-hero__frame .tx-fact__label { color: rgba(249, 247, 242, 0.7); }
.tx-hero__frame .tx-fact__value { color: var(--cream); }

/* ---- TRUST row in treatment hero ---- */
.tx-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.tx-trust__avatars { display: inline-flex; flex-shrink: 0; }
.tx-trust__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--taupe-light);
  border: 2px solid rgba(249, 247, 242, 0.9);
}
.tx-trust__avatar + .tx-trust__avatar { margin-left: -12px; }
.tx-trust__meta { display: flex; flex-direction: column; gap: 3px; }
.tx-trust__row { display: flex; align-items: center; gap: 10px; }
.tx-trust__stars { color: #f8ba0a; letter-spacing: 1px; font-size: 13px; }
.tx-trust__score { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--cream); }
.tx-trust__label { font-family: var(--font-body); font-size: 12.5px; color: rgba(249, 247, 242, 0.75); }

/* ---- How it works: clear the fixed nav when image sticks ---- */
.tx-method__media { top: 110px; }

/* ---- Tighten gap between price card and FAQ ---- */
.tx-price { padding-bottom: clamp(44px, 5vw, 72px); }
.tx-price + .faq { padding-top: clamp(40px, 5vw, 64px); }

/* ---- ORIGIN photo (about) ---- */
.origin__grid { grid-template-columns: 200px minmax(0, 1fr) 340px; }
.origin__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
}

/* ---- REVIEWS page (masonry) ---- */
.reviews {
  padding-block: var(--section-pad-y);
  background: var(--beige);
}
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.reviews__rating { display: flex; align-items: center; gap: 14px; }
.reviews__rating-stars { color: #f6a800; letter-spacing: 2px; font-size: 16px; }
.reviews__rating-score {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}
.reviews__rating-meta { font-family: var(--font-body); font-size: 13px; color: var(--text-grey); }
.reviews-masonry { column-count: 3; column-gap: 24px; }
.review-card {
  break-inside: avoid;
  margin: 0 0 24px;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  box-shadow: 0 1px 0 rgba(18, 18, 18, 0.04), 0 8px 24px rgba(18, 18, 18, 0.04);
}
.review-card__stars { color: #f6a800; letter-spacing: 2px; font-size: 13px; margin-bottom: 14px; }
.review-card__text {
  font-family: var(--font-mulish);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 22px;
  letter-spacing: 0.005em;
}
.review-card__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--taupe-light);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line);
}
.review-card__name { font-family: var(--font-mulish); font-size: 13px; font-weight: 600; color: var(--ink); }
.review-card__meta { font-family: var(--font-mulish); font-size: 12px; color: var(--text-grey); }

/* ---- DARK SECTION depth (radial glow) ---- */
.cta-band,
.tx-process,
.team,
.echo-band,
.consult-location {
  background:
    radial-gradient(90% 60% at 78% 6%, rgba(246, 168, 0, 0.08) 0%, rgba(246, 168, 0, 0) 55%),
    radial-gradient(85% 70% at 8% 108%, rgba(202, 182, 163, 0.10) 0%, rgba(202, 182, 163, 0) 55%),
    var(--ink);
}
.ba-quote {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(246, 168, 0, 0.10) 0%, rgba(246, 168, 0, 0) 55%),
    var(--ink);
}

/* ---- RESPONSIVE (v2) ---- */
@media (max-width: 1024px) {
  .origin__grid { grid-template-columns: 1fr; }
  .origin__media { aspect-ratio: 16 / 10; }
  .reviews-masonry { column-count: 2; }
  .reviews__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 640px) {
  .page-hero__frame { min-height: clamp(360px, 70vh, 480px); padding-top: clamp(110px, 22vh, 150px); }
  .tx-hero__frame { min-height: clamp(420px, 80vh, 540px); padding-top: clamp(110px, 22vh, 150px); }
  .tx-trust { flex-wrap: wrap; gap: 12px; }
  .reviews-masonry { column-count: 1; }
}


/* ================================================================
   v3 — treatment hero reverts to two-column with a side photo
   (light background; result image sits next to the hero text)
   ================================================================ */
.tx-hero {
  padding: 0;
  padding-top: clamp(140px, 15vh, 196px);
  padding-bottom: clamp(48px, 6vw, 80px);
  background: var(--cream);
}
.tx-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.tx-hero__media { width: 100%; }

/* trust row on light background */
.tx-trust__avatar { border-color: var(--cream); }
.tx-trust__score { color: var(--ink); }
.tx-trust__label { color: var(--ink-soft); }

@media (max-width: 1024px) {
  .tx-hero__grid { grid-template-columns: 1fr; }
}


/* ================================================================
   v4 — "How it works" as sticky-stacking cards (like homepage Standards)
   Dark cards stack on a light (cream) section as you scroll.
   ================================================================ */
.tx-method__head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.tx-method__stack {
  display: flex;
  flex-direction: column;
}
.tx-method__card {
  position: sticky;
  display: grid;
  grid-template-columns: 260px 60px 1fr;
  column-gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  padding: clamp(32px, 3.5vw, 52px) clamp(28px, 3vw, 48px);
  background:
    radial-gradient(90% 130% at 85% 0%, rgba(246, 168, 0, 0.08), transparent 55%),
    var(--ink);
  color: var(--cream);
  border-radius: var(--radius-card);
  border: 1px solid rgba(249, 247, 242, 0.10);
}
.tx-method__card + .tx-method__card { margin-top: 16px; }
.tx-method__card:nth-child(1) { top: 104px; }
.tx-method__card:nth-child(2) { top: 124px; }
.tx-method__card:nth-child(3) { top: 144px; }
.tx-method__card .media-placeholder { aspect-ratio: 4 / 3; border-radius: 8px; }
.tx-method__num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  padding-top: 4px;
}
.tx-method__card .tx-method__step-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 12px;
}
.tx-method__card .tx-method__step-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(249, 247, 242, 0.72);
  max-width: 560px;
}

/* anchor offset so #contact clears the fixed nav */
#contact { scroll-margin-top: 120px; }

@media (max-width: 1024px) {
  .tx-method__card {
    position: relative;
    top: auto !important;
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .tx-method__card .media-placeholder { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .tx-method__card { position: relative; top: auto !important; }
}


/* ================================================================
   v5 — "How it works" keeps the 2-column layout, but the left
   image is sized shorter than the steps so the sticky pin is
   actually visible (steps scroll past the pinned image).
   ================================================================ */
.tx-method__grid {
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.tx-method__media {
  position: sticky;
  top: 104px;
  align-self: start;
}
.tx-method__steps { margin-top: 36px; }
.tx-method__step { padding: 32px 0; }

@media (max-width: 1024px) {
  .tx-method__grid { grid-template-columns: 1fr; }
  .tx-method__media { position: static; max-width: 360px; }
}


/* ================================================================
   v6 — photo behind every "Request a consultation" CTA band,
   plus the "What is" intro section for the Aēslift page.
   ================================================================ */
.cta-band {
  background:
    radial-gradient(90% 130% at 80% 0%, rgba(246, 168, 0, 0.12), transparent 55%),
    linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.88)),
    url("../images/hero image/Aestec_4_Web resolution.webp");
  background-size: cover;
  background-position: center;
}

.tx-intro {
  padding-block: var(--section-pad-y);
  background: var(--cream);
}
.tx-intro__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.tx-intro__body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 20px;
  max-width: 620px;
}
.tx-intro__body p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .tx-intro__grid { grid-template-columns: 1fr; } }


/* ================================================================
   v7 — real image boxes (echo/team) + before/after slider
   ================================================================ */
.tx-method__media {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
}
.echo-band__media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
}
.team-card__media {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
}

/* Before / After slider (treatment hero) */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 816 / 1500;
  max-width: 440px;
  margin-inline: auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  box-shadow: 0 20px 60px rgba(18, 18, 18, 0.18);
  cursor: ew-resize;
}
.ba-slider__img {
  position: absolute;
  inset: 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
.ba-slider__after  { background-position: 100% 0; }
.ba-slider__before {
  background-position: 0 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.ba-slider__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--cream);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-slider__knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.3);
}
.ba-slider__tag {
  position: absolute;
  bottom: 16px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  pointer-events: none;
}
.ba-slider__tag--before { left: 14px; }
.ba-slider__tag--after  { right: 14px; }

/* results-page stats strip */
.ba-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  padding: 22px 0 0;
  margin-bottom: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.ba-stat__num {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--ink);
  line-height: 1;
}
.ba-stat__num .ba-stat__stars { color: #f6a800; font-size: 18px; letter-spacing: 2px; }
.ba-stat__label {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-grey);
  margin-top: 6px;
}
.ba-stat { min-width: 140px; }


/* ================================================================
   v8 — echography hero background video + video lightbox
   ================================================================ */
.page-hero__frame--video { background-color: var(--ink); }
.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-btn {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(249, 247, 242, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-video-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--cream);
  transform: translateY(-1px);
}
.hero-video-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(10, 10, 10, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.video-modal.is-open { opacity: 1; visibility: visible; }
.video-modal__player {
  width: min(1120px, 100%);
  max-height: 86vh;
  border-radius: var(--radius-card);
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.video-modal__close {
  position: absolute;
  top: clamp(18px, 3vw, 32px);
  right: clamp(18px, 3vw, 36px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}
.video-modal__close:hover { background: rgba(255, 255, 255, 0.24); }


/* ================================================================
   v9 — Careers ("Work at Aēstec") + Job application
   ================================================================ */
.careers-hero {
  background: var(--cream);
  padding: clamp(100px, 13vh, 152px) clamp(12px, 1.6vw, 20px) 0;
}
.careers-hero__frame {
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: linear-gradient(118deg, #b8a08b 0%, #9c8068 60%, #7e6450 100%);
  padding: clamp(20px, 2.4vw, 34px);
}
.careers-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: clamp(24px, 4vw, 56px);
}
.careers-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(249, 247, 242, 0.9);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
}
.careers-badge b { font-weight: 600; }
.careers-hero__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: 0 clamp(6px, 1vw, 22px) clamp(20px, 3vw, 44px);
}
.careers-hero__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center top;
  border-radius: var(--radius-card);
}
.careers-hero__content { color: var(--cream); max-width: 520px; }
.careers-hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--cream);
}
.careers-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(249, 247, 242, 0.85);
  margin-top: 20px;
}
.careers-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
.careers-hero__actions .btn-primary { background: var(--cream); color: var(--ink); }
.careers-hero__actions .btn-primary:hover { background: #fff; }
.careers-hero__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  border-bottom: 1px solid rgba(249, 247, 242, 0.5);
  padding-bottom: 3px;
}
.careers-hero__link:hover { border-color: var(--cream); }

/* positions */
.positions { padding-block: var(--section-pad-y); background: var(--cream); }
.positions .ba-filter { margin-bottom: clamp(28px, 4vw, 44px); }
.position {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.position:last-child { border-bottom: 1px solid var(--line); }
.position.is-hidden { display: none; }
.position__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 400;
  color: var(--ink);
  grid-column: 1;
}
.position__desc {
  grid-column: 1;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 560px;
}
.position__tags { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.position__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.position__apply {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}
.position__apply svg { transition: transform 0.25s var(--ease); }
.position__apply:hover { color: var(--accent-dark); }
.position__apply:hover svg { transform: translate(3px, -3px); }

/* job application page */
.job-hero {
  padding-top: clamp(140px, 16vh, 196px);
  padding-bottom: clamp(28px, 3vw, 44px);
  background: var(--cream);
}
.job-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 6px;
  max-width: 820px;
}
.job-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.job-body { padding-bottom: var(--section-pad-y); background: var(--cream); }
.job-body__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.job-section { margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.job-section__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 20px;
}
.job-list { display: grid; gap: 14px; }
.job-list__item {
  display: flex;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.job-list__item svg { flex-shrink: 0; margin-top: 4px; color: var(--accent-dark); }
.job-list__item strong { color: var(--ink); font-weight: 600; }

/* apply form */
.apply { padding-block: var(--section-pad-y); background: var(--beige); }
.apply__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.apply__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.apply__text {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: 20px;
}
.apply__text a { color: var(--accent-dark); border-bottom: 1px solid rgba(186,128,0,0.4); }
.apply__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--cream);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(18, 18, 18, 0.08);
}
.apply__form input,
.apply__form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  padding: 15px 16px;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-soft);
  outline: none;
  resize: vertical;
  transition: border-color 0.2s var(--ease);
}
.apply__form input::placeholder,
.apply__form textarea::placeholder { color: var(--text-grey); }
.apply__form input:focus,
.apply__form textarea:focus { border-color: var(--ink); }
.apply__form .btn-primary { align-self: flex-start; margin-top: 6px; }

@media (max-width: 1024px) {
  .careers-hero__grid { grid-template-columns: 1fr; }
  .careers-hero__media { aspect-ratio: 16 / 10; }
  .apply__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .careers-hero__badges { gap: 8px; }
  .position { grid-template-columns: 1fr; }
  .position__apply { grid-column: 1; grid-row: auto; margin-top: 14px; }
}


/* ================================================================
   v10 — job hero (image frame) + centered job body column
   ================================================================ */
.page-hero__frame .page-crumb,
.page-hero__frame .page-crumb a { color: rgba(249, 247, 242, 0.75); }
.page-hero__frame .page-crumb a:hover { color: var(--cream); }
.page-hero__frame .position__tag { border-color: rgba(249, 247, 242, 0.4); color: var(--cream); }
.page-hero__frame .job-hero__meta { margin-top: 22px; }

.job-body .container { max-width: 860px; }
.job-body__intro { max-width: none; }
.job-section { max-width: none; }


/* ================================================================
   v11 — before/after slider square (1:1), face-framed cover
   ================================================================ */
.ba-slider { aspect-ratio: 1 / 1; max-width: 480px; }
.ba-slider__img { background-size: 200% auto; }
.ba-slider__after  { background-position: 100% 32%; }
.ba-slider__before { background-position: 0% 32%; }


/* ================================================================
   v12 — Patient stories (listing + blog-style article)
   ================================================================ */
.stories { padding-block: var(--section-pad-y); background: var(--cream); }
.stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
}
.story-card { display: flex; flex-direction: column; }
.story-card__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  transition: transform 0.35s var(--ease);
}
.story-card:hover .story-card__media { transform: translateY(-4px); }
.story-card__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--ink);
  margin-bottom: 6px;
}
.story-card__line {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
  max-width: 38ch;
}
.story-card__link {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.story-card:hover .story-card__link { color: var(--accent-dark); }
.story-card__link svg { transition: transform 0.25s var(--ease); }
.story-card:hover .story-card__link svg { transform: translateX(4px); }

.story-article { padding-block: clamp(48px, 6vw, 80px) var(--section-pad-y); background: var(--cream); }
.story-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.story-h {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 400;
  color: var(--ink);
  margin: 40px 0 14px;
}
.story-p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.story-pull {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 2vw, 28px);
  margin: clamp(36px, 4vw, 52px) 0;
}
.story-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mulish);
  font-size: 13px;
  color: var(--text-grey);
}
.story-back { margin-top: 8px; }
@media (max-width: 1024px) { .stories__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .stories__grid { grid-template-columns: 1fr; } }


/* ================================================================
   v13 — mobile: stronger hero fade + text-first stacking
   ================================================================ */
.page-hero__frame::before {
  background: linear-gradient(to top,
    rgba(18,18,18,0.90) 0%,
    rgba(18,18,18,0.52) 30%,
    rgba(18,18,18,0.18) 62%,
    rgba(18,18,18,0.28) 100%);
}
.tx-hero__frame::before {
  background: linear-gradient(to top,
    rgba(18,18,18,0.90) 0%,
    rgba(18,18,18,0.55) 32%,
    rgba(18,18,18,0.2) 64%,
    rgba(18,18,18,0.3) 100%);
}

@media (max-width: 1024px) {
  /* content sections: text first, image second */
  .tx-method__grid .tx-method__media { order: 2; }
  .tx-method__grid .tx-method__body { order: 1; }
  .echo-band__grid .echo-band__media { order: 2; }
  .echo-band__grid .echo-band__body-wrap { order: 1; }
  .location-band__grid .location-band__media { order: 2; }
  .location-band__grid .location-band__body { order: 1; }
  .consult-location__grid .consult-location__media { order: 2; }
  .consult-location__grid .consult-location__body { order: 1; }
  .careers-hero__grid .careers-hero__media { order: 2; }
  .careers-hero__grid .careers-hero__content { order: 1; }

  /* treatment hero: text, then the before/after slider */
  .tx-hero__grid .tx-hero__intro { order: 1; }
  .tx-hero__grid .tx-hero__media { order: 2; }
  .ba-slider { max-width: 100%; }
}


/* ================================================================
   v14 — subpage mobile fixes
   ================================================================ */
@media (max-width: 1024px) {
  /* before/after slider goes UNDER the text on treatment heroes */
  .tx-hero__grid .ba-slider,
  .tx-hero__grid .tx-hero__media { order: 2; }

  /* process steps: horizontal scroll timeline with bullets */
  .tx-process__row, .tx-process__row--four {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 16px; margin-inline: 0; padding-inline: 0;
    scrollbar-width: none;
  }
  .tx-process__row::-webkit-scrollbar { display: none; }
  .tx-step {
    flex: 0 0 80%; scroll-snap-align: start;
    border-top: none; padding-top: 0; position: relative;
  }
  .tx-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(249, 247, 242, 0.35);
    color: var(--accent); margin-bottom: 18px;
    font-size: 16px; position: relative;
  }
  .tx-step:not(:last-child) .tx-step__num::after {
    content: ""; position: absolute; left: 46px; top: 50%;
    width: 80vw; height: 1px; background: rgba(249, 247, 242, 0.22);
  }
}

@media (max-width: 640px) {
  /* more breathing room under the nav on subpage heroes */
  .page-hero__frame { padding-top: clamp(124px, 24vh, 162px); }
  .tx-hero__frame { padding-top: clamp(124px, 24vh, 162px); }

  /* results header: stack, keep "All results" on one line */
  .results-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .results-header .pill-link { white-space: nowrap; }
}


/* ================================================================
   v15 — process timeline number (solid) + nav arrows on dark
   ================================================================ */
@media (max-width: 1024px) {
  .tx-step__num { border-color: var(--accent); color: var(--accent); }
  .tx-process .carousel-arrow { border-color: rgba(249, 247, 242, 0.35); color: var(--cream); }
  .tx-process .carousel-arrow:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .tx-process .carousel-nav { margin-top: 4px; }
}