/* =========================================================
   PAIN MANAGEMENT PAGE
   ========================================================= */

.pm-page {
  --pm-purple: #211548;
  --pm-purple-2: #392b6f;

  --pm-lilac: #f3efff;
  --pm-peach: #fff5ed;
  --pm-orange: #ff9757;
  --pm-cyan: #eef9fb;

  --pm-teal: #0c7894;
  --pm-teal-2: #2ba8bd;

  --pm-ink: #18313d;
  --pm-muted: #667c86;
  --pm-line: #dce8eb;

  --pm-shadow:
    0 18px 48px
    rgba(8, 48, 63, 0.08);

  --pm-shadow-lg:
    0 30px 80px
    rgba(8, 48, 63, 0.13);
}


/* =========================================================
   HERO
   ========================================================= */

.pm-hero {
  padding: 42px 0 38px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fafcfd
    );
}


.pm-hero-card {
  position: relative;

  min-height: 430px;

  overflow: hidden;

  border-radius: 32px;

  box-shadow:
    var(--pm-shadow-lg);
}


.pm-hero-image {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;
}


.pm-hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 26, 37, 0.02),
      rgba(5, 26, 37, 0.06) 44%,
      rgba(5, 26, 37, 0.20)
    );
}


.pm-hero-panel {
  position: absolute;

  z-index: 2;

  left: 46px;

  top: 50%;

  width:
    min(
      510px,
      48%
    );

  transform:
    translateY(-50%);

  padding: 36px 38px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      rgba(33, 21, 72, 0.98),
      rgba(56, 40, 109, 0.96)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 22px;

  box-shadow:
    0 22px 55px
    rgba(22, 12, 57, 0.24);
}


.pm-kicker {
  display: inline-flex;

  margin-bottom: 14px;

  color: #a8e7ee;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.pm-hero-panel h1 {
  margin:
    0
    0
    16px;

  color: #ffffff;

  font-family:
    "Libre Baskerville",
    Georgia,
    serif;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4rem
    );

  line-height: 1.05;

  letter-spacing: -0.035em;
}


.pm-hero-panel p {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  line-height: 1.7;
}


.pm-hero-note {
  position: absolute;

  z-index: 2;

  right: 44px;

  bottom: 40px;

  width:
    min(
      360px,
      33%
    );

  padding: 18px 20px;

  color: #ffffff;

  background:
    rgba(
      12,
      38,
      52,
      0.88
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 16px;

  backdrop-filter:
    blur(9px);
}


.pm-hero-note strong {
  display: block;

  margin-bottom: 5px;
}


.pm-hero-note span {
  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 0.78rem;

  line-height: 1.55;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.pm-main {
  padding: 56px 0 92px;
}


.pm-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    310px;

  gap: 52px;

  align-items: start;
}


.pm-content {
  min-width: 0;
}


.pm-content h2 {
  color:
    var(--pm-purple);

  font-family:
    "Libre Baskerville",
    Georgia,
    serif;

  font-size:
    clamp(
      1.8rem,
      3vw,
      2.7rem
    );

  line-height: 1.25;
}


.pm-content h3 {
  color:
    var(--pm-purple);
}


.pm-content p {
  color:
    var(--pm-muted);

  line-height: 1.8;
}


.pm-lead {
  color:
    var(--pm-ink) !important;

  font-size: 1.06rem;
}


/* =========================================================
   INTRO
   ========================================================= */

.pm-intro {
  margin-bottom: 54px;
}


.pm-feature-image {
  overflow: hidden;

  margin-top: 28px;

  border-radius: 24px;

  box-shadow:
    var(--pm-shadow);
}


.pm-feature-image img {
  display: block;

  width: 100%;

  height: 360px;

  object-fit: cover;
}


/* =========================================================
   CONTENT SECTION
   ========================================================= */

.pm-section {
  margin-bottom: 56px;
}


.pm-section-intro {
  max-width: 780px;

  margin-bottom: 24px;
}


/* =========================================================
   ACCORDION
   ========================================================= */

.pm-accordion {
  display: grid;

  gap: 10px;
}


.pm-acc {
  overflow: hidden;

  background: #ffffff;

  border:
    1px solid
    var(--pm-line);

  border-radius: 14px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.pm-acc.open {
  border-color:
    rgba(
      12,
      120,
      148,
      0.28
    );

  box-shadow:
    0 10px 26px
    rgba(8, 48, 63, 0.06);
}


.pm-acc button {
  width: 100%;

  display: grid;

  grid-template-columns:
    46px
    1fr
    auto;

  align-items: center;

  gap: 13px;

  padding: 18px;

  background: none;

  border: 0;

  cursor: pointer;

  text-align: left;
}


.pm-acc-number {
  color:
    var(--pm-teal);

  font-size: 0.74rem;

  font-weight: 900;
}


.pm-acc-label {
  color:
    var(--pm-purple);

  font-weight: 850;
}


.pm-acc-icon {
  display: grid;

  place-items: center;

  width: 30px;
  height: 30px;

  color:
    var(--pm-teal);

  background:
    var(--pm-cyan);

  border-radius: 50%;

  font-weight: 900;

  transition:
    transform 0.2s ease;
}


.pm-acc.open
.pm-acc-icon {
  transform:
    rotate(45deg);
}


.pm-acc-answer {
  display: none;

  padding:
    0
    18px
    19px
    77px;

  color:
    var(--pm-muted);

  line-height: 1.65;
}


.pm-acc.open
.pm-acc-answer {
  display: block;
}


/* =========================================================
   MEDICATION CARD
   ========================================================= */

.pm-split-card {
  display: grid;

  grid-template-columns:
    0.95fr
    1.05fr;

  overflow: hidden;

  margin-bottom: 24px;

  background: #ffffff;

  border:
    1px solid
    var(--pm-line);

  border-radius: 22px;

  box-shadow:
    var(--pm-shadow);
}


.pm-split-image {
  min-height: 250px;

  overflow: hidden;

  background:
    var(--pm-cyan);
}


.pm-split-image img {
  width: 100%;

  height: 100%;

  min-height: 250px;

  object-fit: cover;
}


.pm-split-body {
  padding: 30px;
}


.pm-card-kicker {
  display: block;

  margin-bottom: 7px;

  color:
    var(--pm-teal);

  font-size: 0.68rem;

  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.pm-check-list {
  display: grid;

  gap: 9px;

  margin:
    17px
    0
    0;

  padding: 0;

  list-style: none;
}


.pm-check-list li {
  position: relative;

  padding-left: 22px;

  color:
    var(--pm-muted);
}


.pm-check-list li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color:
    var(--pm-teal);

  font-weight: 900;
}


/* =========================================================
   CONSERVATIVE REFERRAL CARD
   ========================================================= */

.pm-referral-card {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  overflow: hidden;

  padding: 30px;

  background:
    linear-gradient(
      135deg,
      #ff9253,
      #ffad75
    );

  border-radius: 24px;

  box-shadow:
    0 16px 38px
    rgba(222, 118, 55, 0.16);
}


.pm-referral-copy {
  padding-right: 26px;
}


.pm-referral-copy
.pm-card-kicker {
  color:
    rgba(
      255,
      255,
      255,
      0.76
    );
}


.pm-referral-copy h3 {
  color: #ffffff;
}


.pm-referral-list {
  display: grid;

  gap: 9px;

  margin:
    16px
    0
    0;

  padding: 0;

  list-style: none;
}


.pm-referral-list li {
  position: relative;

  padding-left: 21px;

  color: #ffffff;
}


.pm-referral-list li::before {
  content: "○";

  position: absolute;

  left: 0;

  color: #ffffff;
}


.pm-referral-image {
  overflow: hidden;

  min-height: 230px;

  border-radius: 16px;
}


.pm-referral-image img {
  width: 100%;

  height: 100%;

  min-height: 230px;

  object-fit: cover;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.pm-sidebar {
  position: sticky;

  top: 110px;

  display: grid;

  gap: 18px;
}


.pm-sidebar-card {
  padding: 24px;

  border-radius: 22px;

  border:
    1px solid
    var(--pm-line);

  box-shadow:
    0 10px 28px
    rgba(8, 48, 63, 0.05);
}


.pm-sidebar-card--treatments {
  background:
    linear-gradient(
      145deg,
      #f7f4ff,
      #eee8ff
    );
}


.pm-sidebar-card--providers {
  background:
    linear-gradient(
      145deg,
      #fffaf6,
      #fff0e5
    );
}


.pm-sidebar-card--cta {
  color: #ffffff;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(43, 168, 189, 0.18),
      transparent 42%
    ),
    var(--navy);

  border-color:
    transparent;
}


.pm-sidebar-kicker {
  display: block;

  margin-bottom: 7px;

  color:
    var(--pm-teal);

  font-size: 0.68rem;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.pm-sidebar-card--cta
.pm-sidebar-kicker {
  color: #9ee4ed;
}


.pm-sidebar-card h3 {
  margin-bottom: 15px;

  color:
    var(--pm-purple);
}


.pm-sidebar-card--cta h3 {
  color: #ffffff;
}


.pm-sidebar-card--cta p {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


.pm-sidebar-links,
.pm-provider-list {
  display: grid;

  gap: 8px;
}


.pm-sidebar-links a,
.pm-provider-list a {
  display: block;

  padding: 11px 12px;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  border:
    1px solid
    rgba(33, 21, 72, 0.05);

  border-radius: 10px;

  color:
    var(--pm-purple);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.pm-sidebar-links a:hover,
.pm-provider-list a:hover {
  transform:
    translateX(3px);

  box-shadow:
    0 6px 16px
    rgba(33, 21, 72, 0.06);
}


.pm-sidebar-links a.active {
  color: #ffffff;

  background:
    var(--pm-purple);
}


.pm-provider-list strong {
  display: block;

  font-size: 0.8rem;
}


.pm-provider-list span {
  color: #776f80;

  font-size: 0.7rem;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.pm-final-cta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding: 42px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(43, 168, 189, 0.22),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #0b2635,
      #123b4c
    );

  border-radius: 30px;

  box-shadow:
    var(--pm-shadow);
}


.pm-final-cta .eyebrow {
  color: #9ee4ed;
}


.pm-final-cta h2 {
  color: #ffffff;
}


.pm-final-cta p {
  max-width: 680px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


.pm-final-cta .btn {
  flex: 0 0 auto;

  background: #ffffff;

  color:
    var(--navy);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .pm-layout {
    grid-template-columns:
      1fr;
  }


  .pm-sidebar {
    position: static;

    grid-template-columns:
      1fr 1fr;
  }


  .pm-sidebar-card--cta {
    grid-column:
      1 / -1;
  }

}


@media (max-width: 820px) {

  .pm-hero-card {
    min-height: 560px;
  }


  .pm-hero-panel {
    left: 24px;
    right: 24px;

    top: auto;
    bottom: 24px;

    width: auto;

    transform: none;
  }


  .pm-hero-note {
    display: none;
  }


  .pm-split-card,
  .pm-referral-card {
    grid-template-columns:
      1fr;
  }


  .pm-referral-copy {
    padding-right: 0;
    padding-bottom: 22px;
  }


  .pm-sidebar {
    grid-template-columns:
      1fr;
  }


  .pm-sidebar-card--cta {
    grid-column:
      auto;
  }

}


@media (max-width: 620px) {

  .pm-hero {
    padding:
      24px
      0
      40px;
  }


  .pm-hero-card {
    min-height: 520px;

    border-radius: 24px;
  }


  .pm-hero-panel {
    padding: 26px 23px;
  }


  .pm-hero-panel h1 {
    font-size:
      clamp(
        2.45rem,
        11vw,
        3.6rem
      );
  }


  .pm-feature-image img {
    height: 280px;
  }


  .pm-split-image,
  .pm-split-image img {
    min-height: 220px;
  }


  .pm-acc button {
    grid-template-columns:
      38px
      1fr
      auto;

    padding: 16px;
  }


  .pm-acc-answer {
    padding:
      0
      16px
      18px
      67px;
  }


  .pm-final-cta {
    flex-direction: column;

    align-items: flex-start;

    padding:
      32px
      26px;
  }

}