/* ==========================================================================
   AMRIT CLINIC PREMIUM — Page-level styles
   Heroes, homepage sections, treatment pages, blog, gallery, contact, 404.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Ambient brand wash behind the hero — the "expensive" feeling comes from
   large, soft, low-opacity gradients rather than saturated blocks. */
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: 780px;
  height: 780px;
  max-width: 90vw;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(148, 213, 7, 0.16) 0%, transparent 66%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -14%;
  width: 620px;
  height: 620px;
  max-width: 80vw;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(0, 184, 217, 0.1) 0%, transparent 66%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.25rem, 1.8rem + 2.2vw, 4rem);
}

.hero__eyebrow { margin-bottom: var(--sp-4); }

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
  max-width: 18ch;
}

.hero__subtitle {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--secondary-soft);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.hero__chips { margin-bottom: var(--sp-6); }

/* ---- Split layout (default) ---- */
.hero--split .hero__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 900px) {
  .hero--split .hero__inner { grid-template-columns: 1.05fr 1fr; gap: var(--sp-16); }
}

/*
 * No hero image set — collapse the reserved media column instead of leaving
 * half the banner empty, and cap the content width so a single column of
 * text doesn't sprawl edge-to-edge on wide screens.
 */
.hero--split.hero--no-media .hero__inner { grid-template-columns: 1fr; }
.hero--split.hero--no-media .hero__content { max-width: 640px; }

.hero__media {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  aspect-ratio: 4 / 5;
  max-height: 620px;
}

.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Floating glass stat card over the hero image. */
.hero__float {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  right: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.hero__float-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--secondary-deep);
  flex: none;
}

.hero__float-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--secondary);
  line-height: 1.1;
}

.hero__float-label { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Full-bleed layout ---- */
.hero--full .hero__inner {
  min-height: min(62vh, 560px);
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 2.4rem + 3.5vw, 5rem);
}

.hero--full .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--full .hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.hero__overlay { position: absolute; inset: 0; z-index: 1; }

.hero__overlay--light  { background: linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 62%); }
.hero__overlay--medium { background: linear-gradient(100deg, rgba(22, 33, 46, 0.86) 0%, rgba(22, 33, 46, 0.42) 68%); }
.hero__overlay--brand  { background: linear-gradient(115deg, rgba(22, 33, 46, 0.9) 0%, rgba(76, 115, 0, 0.55) 100%); }

.hero--full .hero__inner,
.hero--center .hero__inner { position: relative; z-index: 2; }

.hero--on-dark .hero__title { color: var(--white); }
.hero--on-dark .hero__subtitle { color: rgba(255, 255, 255, 0.82); }
.hero--on-dark .eyebrow { color: var(--brand); }

/* ---- Centred ---- */
.hero--center { text-align: center; }
.hero--center .hero__title,
.hero--center .hero__subtitle { max-width: 24ch; margin-inline: auto; }
.hero--center .hero__subtitle { max-width: 58ch; }
.hero--center .hero__actions,
.hero--center .hero__chips { justify-content: center; }
.hero--center .eyebrow { justify-content: center; }

/* ---- Compact inner-page banner ---- */
.hero--compact {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%);
  border-bottom: 0;
}
.hero--compact::before, .hero--compact::after { display: none; }
.hero--compact .hero__inner { padding-block: clamp(1.75rem, 1.5rem + 1.4vw, 3rem); }
.hero--compact .hero__title { font-size: var(--fs-2xl); max-width: 22ch; }
.hero--compact .hero__subtitle { margin-bottom: var(--sp-5); }

/* ---- Trust strip under the hero ---- */
.hero-trust {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--sp-10) * -1);
  padding-bottom: var(--sp-12);
}

@media (max-width: 899px) {
  .hero-trust { margin-top: 0; padding-top: var(--sp-8); }
  .hero__media { aspect-ratio: 3 / 2; max-height: 380px; }
  .hero__float { position: static; margin-top: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   2. HOMEPAGE — DOCTOR
   -------------------------------------------------------------------------- */

.doctor-intro {
  display: grid;
  gap: var(--sp-10);
  align-items: center;
}

@media (min-width: 900px) {
  .doctor-intro { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-16); }
}

.doctor-intro__media { position: relative; }

.doctor-intro__portrait {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  aspect-ratio: 4 / 5;
}

.doctor-intro__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Decorative lime frame offset behind the portrait. */
.doctor-intro__media::before {
  content: '';
  position: absolute;
  inset: var(--sp-6) calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-6);
  border: 2px solid var(--brand);
  border-radius: var(--r-2xl);
  z-index: -1;
}

.doctor-intro__creds {
  display: grid;
  gap: var(--sp-4);
  margin-block: var(--sp-6);
  list-style: none;
}

.doctor-intro__creds li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
}

.doctor-intro__creds .icon { color: var(--brand-ink); flex: none; margin-top: 2px; }

.doctor-intro__signature { height: 54px; width: auto; margin-top: var(--sp-4); opacity: 0.85; }

/* --------------------------------------------------------------------------
   3. HOMEPAGE — CATEGORY TILES
   -------------------------------------------------------------------------- */

.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}

.cat-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-slower) var(--ease-out);
}

.cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(22, 33, 46, 0.05) 30%, rgba(22, 33, 46, 0.88) 100%);
  transition: background var(--t-base) var(--ease);
}

.cat-tile:hover img { transform: scale(1.06); }
.cat-tile:hover::after { background: linear-gradient(180deg, rgba(22, 33, 46, 0.2) 20%, rgba(22, 33, 46, 0.92) 100%); }

.cat-tile__count {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 5px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--white);
}

.cat-tile__title { color: var(--white); font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.cat-tile__text  { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); margin-bottom: var(--sp-4); }

.cat-tile__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand);
}

.cat-tile__link::after {
  content: '';
  width: 7px; height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}

.cat-tile:hover .cat-tile__link::after { transform: rotate(45deg) translate(3px, -3px); }

/* --------------------------------------------------------------------------
   4. HOMEPAGE — WHY US SPLIT
   -------------------------------------------------------------------------- */

.why {
  display: grid;
  gap: var(--sp-10);
  align-items: center;
}

@media (min-width: 1024px) { .why { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } }

.why__list { display: grid; gap: var(--sp-5); list-style: none; margin: 0; }

.why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.why__item:hover { transform: translateX(4px); box-shadow: var(--sh-md); }

.why__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand-ink);
  flex: none;
}

.why__title { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.why__text  { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: var(--lh-relaxed); }

.why__media {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  aspect-ratio: 1 / 1;
}

.why__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   5. HOMEPAGE — GOOGLE REVIEWS
   -------------------------------------------------------------------------- */

.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-md);
  margin-bottom: var(--sp-10);
  text-align: center;
}

.reviews-summary__score {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  color: var(--secondary);
}

.reviews-summary__meta { display: grid; gap: var(--sp-2); }
.reviews-summary__count { font-size: var(--fs-sm); color: var(--muted); }

.reviews-summary__divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

@media (max-width: 640px) { .reviews-summary__divider { display: none; } }

/* --------------------------------------------------------------------------
   6. TREATMENT PAGE
   -------------------------------------------------------------------------- */

.treatment-body { display: grid; gap: var(--section-y-sm); }

.t-section { scroll-margin-top: calc(var(--header-h) + var(--sp-8)); }

.t-section__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--brand-tint-2);
  position: relative;
}

.t-section__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--brand);
}

.t-section__intro {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--secondary-soft);
  margin-bottom: var(--sp-6);
}

.t-prose { line-height: var(--lh-relaxed); }
.t-prose > * + * { margin-top: var(--sp-4); }
.t-prose h3 { margin-top: var(--sp-8); font-size: var(--fs-lg); }
.t-prose h4 { margin-top: var(--sp-6); }
.t-prose ul,
.t-prose ol { padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }
.t-prose img { border-radius: var(--r-lg); margin-block: var(--sp-6); }

/* Two-column split for dos/don'ts and risks/complications. */
.t-split {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.t-panel {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border);
}

.t-panel--do   { border-top: 3px solid var(--success); }
.t-panel--dont { border-top: 3px solid var(--danger); }

.t-panel__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-4);
}

.t-list { list-style: none; display: grid; gap: var(--sp-3); margin: 0; font-size: var(--fs-sm); }

.t-list li { position: relative; padding-left: var(--sp-6); line-height: var(--lh-relaxed); }

.t-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--brand);
}

.t-list--check li::before {
  top: 0.3em;
  width: 17px;
  height: 17px;
  background: var(--success-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316803D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.t-list--cross li::before {
  top: 0.3em;
  width: 17px;
  height: 17px;
  background: var(--danger-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---- Cost ---- */
.cost-range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-tint) 0%, rgba(255, 255, 255, 0.5) 100%);
  border: 1px solid var(--brand-tint-2);
  margin-bottom: var(--sp-6);
}

.cost-range__value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--secondary);
  line-height: 1;
}

.cost-range__label { font-size: var(--fs-sm); color: var(--muted); }
.cost-range__note  { flex-basis: 100%; font-size: var(--fs-xs); color: var(--muted); margin: 0; }

/* ---- Doctor's advice ---- */
.advice {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-deep) 100%);
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  overflow: hidden;
}

.advice::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(148, 213, 7, 0.2) 0%, transparent 68%);
}

.advice > * { position: relative; }

@media (min-width: 720px) { .advice { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-8); } }

.advice__portrait {
  width: 108px;
  height: 108px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 3px solid rgba(148, 213, 7, 0.5);
  flex: none;
}

.advice__quote {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  font-style: italic;
  margin-bottom: var(--sp-5);
}

.advice__name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--white);
  font-size: var(--fs-base);
}

.advice__role { font-size: var(--fs-sm); color: var(--brand); }

.advice__signature { height: 46px; width: auto; margin-top: var(--sp-4); filter: brightness(0) invert(1); opacity: 0.7; }

/* ---- On-page nav ---- */
.t-nav {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border);
}

.t-nav__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  margin-bottom: var(--sp-4);
}

.t-nav__list { list-style: none; display: grid; gap: 2px; margin: 0; }

.t-nav__list a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--body);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}

.t-nav__list a:hover,
.t-nav__list a.is-active {
  border-left-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. BLOG
   -------------------------------------------------------------------------- */

.post-header { margin-bottom: var(--sp-8); }

.post-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--sp-5);
}

.post-header__meta > * { display: inline-flex; align-items: center; gap: 5px; }
.post-header__meta a { color: var(--brand-ink); text-decoration: none; font-weight: 500; }

.post-header__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }

.post-hero {
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: var(--sp-10);
  box-shadow: var(--sh-lg);
  aspect-ratio: 16 / 9;
}

.post-hero img { width: 100%; height: 100%; object-fit: cover; }

.byline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}

.byline__avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex: none;
}

.byline__name { font-family: var(--font-heading); font-weight: 600; color: var(--heading); font-size: var(--fs-sm); }
.byline__role { font-size: var(--fs-xs); color: var(--muted); }

.byline__reviewed {
  margin-left: auto;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: none;
}

.byline__reviewed strong { display: block; color: var(--success); }

@media (max-width: 620px) {
  .byline { flex-wrap: wrap; }
  .byline__reviewed { margin-left: 0; text-align: left; flex-basis: 100%; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
}

/* ---- Takeaways ---- */
.takeaways {
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
  margin-bottom: var(--sp-8);
}

.takeaways__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--brand-ink);
  margin-bottom: var(--sp-4);
}

/* ---- Table of contents ---- */
.toc {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-8);
}

.toc__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

.toc__list { list-style: none; display: grid; gap: var(--sp-2); margin: 0; counter-reset: toc; }

.toc__list a {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--body);
  text-decoration: none;
  counter-increment: toc;
}

.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand);
  flex: none;
}

.toc__list a:hover { color: var(--brand-ink); }

/* ---- Entry content ---- */
.entry-content {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.entry-content > * + * { margin-top: var(--sp-5); }

.entry-content h2 {
  margin-top: var(--sp-12);
  font-size: var(--fs-xl);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.entry-content h3 {
  margin-top: var(--sp-8);
  font-size: var(--fs-lg);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.entry-content ul,
.entry-content ol { padding-left: var(--sp-7); display: grid; gap: var(--sp-2); }

.entry-content li::marker { color: var(--brand-dark); }

.entry-content img,
.entry-content figure { border-radius: var(--r-lg); overflow: hidden; }

.entry-content figcaption {
  padding-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

.entry-content a { font-weight: 500; }

/* ---- References ---- */
.references {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

.references__title { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.references ol { padding-left: var(--sp-6); display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.references a { word-break: break-word; }

/* ---- Post navigation ---- */
.post-nav {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}

@media (min-width: 720px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav__link {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  text-decoration: none;
  transition: all var(--t-base) var(--ease);
}

.post-nav__link:hover { border-color: var(--brand); box-shadow: var(--sh-md); }
.post-nav__link--next { text-align: right; }

.post-nav__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--brand-ink);
}

.post-nav__title { font-family: var(--font-heading); font-weight: 600; color: var(--heading); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   8. GALLERY
   -------------------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--brand-tint);
  cursor: zoom-in;
}

/* Every fourth tile spans two columns — breaks the grid's monotony without
   any per-item configuration. */
.gallery-item:nth-child(4n + 1) { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 560px) {
  .gallery-item:nth-child(4n + 1) { grid-column: span 1; aspect-ratio: 1 / 1; }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slower) var(--ease-out);
}

.gallery-item:hover img { transform: scale(1.06); }

.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(22, 33, 46, 0.86));
  color: var(--white);
  font-size: var(--fs-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--t-base) var(--ease);
}

.gallery-item:hover .gallery-item__caption { opacity: 1; transform: none; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-8);
  background: rgba(11, 17, 24, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
  max-width: min(94vw, 1200px);
  max-height: 84vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
}

.lightbox__caption {
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 60ch;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }

.lightbox__close { top: var(--sp-6); right: var(--sp-6); }
.lightbox__nav--prev { left: var(--sp-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--sp-6); top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox__nav--prev { left: var(--sp-3); }
  .lightbox__nav--next { right: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   9. CONTACT
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--sp-10);
  align-items: start;
}

@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: var(--sp-16); } }

.contact-list { display: grid; gap: var(--sp-5); list-style: none; margin: 0; }

.contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.contact-list__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand-ink);
  flex: none;
}

.contact-list__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--muted);
  margin-bottom: 2px;
}

.contact-list__value {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.contact-list a { color: inherit; text-decoration: none; }
.contact-list a:hover { color: var(--brand-ink); }

.form-panel {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
}

/* --------------------------------------------------------------------------
   10. ARCHIVE / SEARCH / 404
   -------------------------------------------------------------------------- */

.archive-head {
  padding-block: var(--sp-12) var(--sp-8);
  text-align: center;
}

.archive-head__title { margin-bottom: var(--sp-3); }
.archive-head__desc  { color: var(--muted); max-width: 62ch; margin-inline: auto; }

.error-404 {
  display: grid;
  place-items: center;
  gap: var(--sp-6);
  padding-block: var(--section-y);
  text-align: center;
}

.error-404__code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 3rem + 12vw, 10rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   11. TECHNOLOGY
   -------------------------------------------------------------------------- */

.tech-card {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.tech-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }

@media (min-width: 720px) { .tech-card { grid-template-columns: 220px 1fr; align-items: center; } }

.tech-card__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--brand-tint);
  aspect-ratio: 4 / 3;
}

.tech-card__media img { width: 100%; height: 100%; object-fit: cover; }

.tech-card__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tech-card__title  { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.tech-card__text   { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-relaxed); }

/* --------------------------------------------------------------------------
   12. RELATED TREATMENTS STRIP
   -------------------------------------------------------------------------- */

.related-treatments { margin-top: var(--section-y-sm); }

.related-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all var(--t-base) var(--ease);
}

.related-card:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.related-card__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: none;
  background: var(--brand-tint);
}

.related-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--heading);
  margin-bottom: 2px;
}

.related-card__text {
  font-size: var(--fs-xs);
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}