/* Allied Health page */

/* ===== Page measure =====
   The global .container caps at --container (1600px) — wider than a typical
   laptop viewport, so on a 1440-1536px screen it never actually constrains and
   this page's copy runs the full width of the glass. Other pages get away with
   it because they're card grids; this one is long-form prose, which needs a
   real measure. These caps land the intro copy at ~650px and each practitioner
   bio at ~775px — the same band the rest of the site already uses for body text
   (.page-banner p.lede is 720px, .page-section .lede is 760px). The FAQ caps
   itself at 920px further down.
   Compound selectors so these beat the base .container regardless of the order
   this file and styles.css end up in. */
.ah-banner .container,
.container.ah-intro-grid,
.container.ah-pracs,
.ah-prac-head .container {
  max-width: 1200px;
}

:root {
  --ah-cyan: #00d4f0;
  --ah-cyan-soft: rgba(0, 212, 240, 0.12);
  --ah-line: rgba(255, 255, 255, 0.08);
  --ah-ink: rgba(255, 255, 255, 0.78);
  --ah-card: #0f1418;
  --ah-bg: #07090b;
}

.ah-eyebrow {
  display: inline-block;
  font-size: calc(12px * var(--fs-scale, 1));
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ah-cyan);
  font-weight: 700;
  margin: 0 0 14px;
  padding: 6px 14px;
  background: var(--ah-cyan-soft);
  border: 1px solid rgba(0, 212, 240, 0.28);
  border-radius: 999px;
}
.ah-eyebrow--center {
  display: block;
  margin: 0 auto 16px;
  width: max-content;
}
.ah-h2 {
  font-family: "Anton", "Inter", sans-serif;
  font-size: calc(clamp(28px, 4.2vw, 46px) * var(--fs-scale, 1));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
  line-height: 1.05;
}
.ah-h2--center {
  text-align: center;
  margin: 0 auto 16px;
}
.ah-h2 em {
  font-style: normal;
  color: var(--ah-cyan);
}
.ah-divider {
  display: block;
  width: 70px;
  height: 4px;
  background: var(--ah-cyan);
  border-radius: 2px;
  margin: 0 auto;
}

/* ===== INTRO ===== */
.ah-intro {
  padding: 80px 0;
  background: var(--ah-bg);
}
.ah-intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 440px;
  gap: 64px;
  align-items: center;
}
.ah-intro-copy p {
  font-size: calc(19.5px * var(--fs-scale, 1));
  line-height: 1.75;
  color: var(--ah-ink);
  margin: 0 0 16px;
}
.ah-intro-copy p strong {
  color: #fff;
  font-weight: 600;
}
.ah-intro-media {
  justify-self: end;
  width: 100%;
}
.ah-intro-media img {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: 14px;
  display: block;
  border: 1px solid var(--ah-line);
}

/* ===== PRACTITIONERS HEAD ===== */
.ah-prac-head {
  padding: 80px 0 36px;
  text-align: center;
}

/* ===== PRACTITIONER BLOCKS ===== */
.ah-pracs {
  /* Keep the 24px side padding .container sets — this element carries both
     classes, and a bare `padding: 20px 0` here silently wiped it, letting the
     practitioner photos run into the edge of the viewport. */
  padding: 20px 24px 100px;
  display: grid;
  gap: 72px;
}
.ah-prac {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
}
.ah-prac.is-flipped {
  grid-template-columns: 1fr 320px;
}
.ah-prac.is-flipped .ah-prac-media {
  order: 2;
}
.ah-prac.is-flipped .ah-prac-body {
  order: 1;
}

/* Decorative side accent */
.ah-prac::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 212, 240, 0.45),
    transparent
  );
  border-radius: 2px;
  pointer-events: none;
}
.ah-prac.is-flipped::before {
  left: auto;
  right: -1px;
}

.ah-prac-media {
  position: relative;
  position: sticky;
  top: 100px;
}
.ah-prac-media::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  background: linear-gradient(
    140deg,
    rgba(0, 212, 240, 0.18) 0%,
    transparent 45%,
    transparent 60%,
    rgba(0, 212, 240, 0.08) 100%
  );
  z-index: 0;
  filter: blur(20px);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.ah-prac:hover .ah-prac-media::after {
  opacity: 1;
}
.ah-prac-photo {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ah-card);
  box-shadow: 0 0 0 1px var(--ah-line),
    0 20px 50px -20px rgba(0, 0, 0, 0.7);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.ah-prac:hover .ah-prac-photo {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(0, 212, 240, 0.4),
    0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.ah-prac-photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ah-prac:hover .ah-prac-photo img {
  transform: scale(1.04);
}
.ah-prac-photo-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  background: rgba(7, 9, 11, 0.7);
  border: 1px solid rgba(0, 212, 240, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ah-prac-photo-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ah-cyan);
  box-shadow: 0 0 8px var(--ah-cyan);
}

.ah-prac-body {
  padding-top: 4px;
}
.ah-prac-role {
  display: inline-block;
  font-size: calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ah-cyan);
  font-weight: 700;
  padding: 6px 14px;
  background: var(--ah-cyan-soft);
  border: 1px solid rgba(0, 212, 240, 0.3);
  border-radius: 999px;
  margin-bottom: 16px;
}
.ah-prac-name {
  font-family: "Anton", "Inter", sans-serif;
  font-size: calc(clamp(30px, 3.6vw, 44px) * var(--fs-scale, 1));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.02;
}
.ah-prac-title {
  margin: 0 0 22px;
  font-size: calc(13px * var(--fs-scale, 1));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  position: relative;
  padding-bottom: 18px;
}
.ah-prac-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--ah-cyan);
  border-radius: 2px;
}
.ah-prac-body p {
  font-size: calc(18.5px * var(--fs-scale, 1));
  line-height: 1.7;
  color: var(--ah-ink);
  margin: 0 0 14px;
}
.ah-prac-body p strong {
  color: #fff;
}
.ah-prac-body a {
  color: var(--ah-cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 212, 240, 0.45);
}
.ah-prac-body a:hover {
  border-bottom-color: var(--ah-cyan);
}
.ah-prac-sub {
  font-family: "Anton", "Inter", sans-serif;
  font-size: calc(16px * var(--fs-scale, 1));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ah-cyan);
  margin: 26px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ah-prac-sub::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--ah-cyan);
  border-radius: 2px;
}
.ah-prac-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ah-prac-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: calc(18px * var(--fs-scale, 1));
  line-height: 1.55;
  color: var(--ah-ink);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ah-line);
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.ah-prac-list li:hover {
  border-color: rgba(0, 212, 240, 0.25);
  background: rgba(0, 212, 240, 0.04);
}
.ah-tick {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ah-cyan-soft);
  color: var(--ah-cyan);
  border-radius: 50%;
  font-weight: 700;
  font-size: calc(12px * var(--fs-scale, 1));
  margin-top: 1px;
}
.ah-prac-socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.ah-prac-socials a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 240, 0.3);
  background: var(--ah-cyan-soft);
  color: var(--ah-cyan);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.ah-prac-socials a:hover {
  background: var(--ah-cyan);
  color: #001821;
  transform: translateY(-2px);
}
.ah-prac-socials svg {
  width: 16px;
  height: 16px;
}

/* ===== FAQ ===== */
.ah-faq {
  padding: 70px 0 90px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--ah-line);
}
.ah-faq .container {
  max-width: 920px;
}
.ah-faq-title {
  font-family: "Anton", "Inter", sans-serif;
  font-size: calc(clamp(26px, 3.4vw, 40px) * var(--fs-scale, 1));
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin: 0 0 36px;
  letter-spacing: 0.02em;
}
.ah-faq-item {
  border: 1px solid var(--ah-line);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--ah-card);
  overflow: hidden;
  transition: border-color 0.2s;
}
.ah-faq-item[open] {
  border-color: rgba(0, 212, 240, 0.35);
}
.ah-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: calc(15.5px * var(--fs-scale, 1));
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ah-faq-item summary::-webkit-details-marker {
  display: none;
}
.ah-faq-item summary::after {
  content: "+";
  font-family: "Anton", "Inter", sans-serif;
  font-size: calc(22px * var(--fs-scale, 1));
  color: var(--ah-cyan);
  transition: transform 0.2s;
}
.ah-faq-item[open] summary::after {
  content: "−";
}
.ah-faq-body {
  padding: 0 22px 20px;
  color: var(--ah-ink);
  font-size: calc(18px * var(--fs-scale, 1));
  line-height: 1.7;
}
.ah-faq-body p {
  margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .ah-prac {
    grid-template-columns: 280px 1fr;
    gap: 44px;
  }
  .ah-prac.is-flipped {
    grid-template-columns: 1fr 280px;
  }
}
@media (max-width: 980px) {
  .ah-intro-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ah-intro-media {
    justify-self: center;
  }
  .ah-intro-media img {
    max-width: 380px;
  }
  .ah-prac,
  .ah-prac.is-flipped {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ah-prac.is-flipped .ah-prac-media {
    order: 0;
  }
  .ah-prac.is-flipped .ah-prac-body {
    order: 0;
  }
  .ah-prac::before,
  .ah-prac.is-flipped::before {
    display: none;
  }
  .ah-prac-media {
    position: relative;
    top: 0;
    max-width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .ah-intro {
    padding: 60px 0;
  }
  .ah-prac-head {
    padding: 60px 0 26px;
  }
  .ah-pracs {
    padding: 10px 0 70px;
    gap: 56px;
  }
  .ah-prac-media {
    max-width: 260px;
  }
}