/* =========================================================
   BPDC COURSE TEMPLATE
   Shared stylesheet for individual PADI course pages.
   Global site styles remain in ../styles.css.
   ========================================================= */
/* =========================================================
   DISCOVER SCUBA DIVING
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.dsd-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/reef-diver.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY

   Prevent content headings from inheriting sticky rules.
   ========================================================= */

.dsd-page .course-detail-intro,
.dsd-page .course-detail-section,
.dsd-page .course-detail-section > h2,
.dsd-page .course-detail-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   ANCHOR OFFSET
   --------------------------------------------------------- */

.dsd-page [id] {
  scroll-margin-top: 175px;
}


/* ---------------------------------------------------------
   INTRO SPACING
   --------------------------------------------------------- */

.dsd-page .course-detail-intro {
  margin-bottom: 58px;
}


/* =========================================================
   MAJOR CONTENT SPACING
   ========================================================= */

.dsd-page .course-detail-section {
  margin-bottom: 90px;
}

.dsd-page .course-detail-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.dsd-page .course-detail-section > h2 {
  margin:
    0
    0
    18px;
}

.dsd-page .course-detail-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   THREE-STEP DSD JOURNEY
   ========================================================= */

.dsd-journey {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;

  margin-top: 34px;
}

.dsd-journey-card {
  position: relative;

  min-height: 265px;

  padding: 28px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.dsd-step-number {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 26px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.7rem;
  font-weight: 900;
}

.dsd-step-label {
  display: block;

  margin-bottom: 7px;

  color: var(--red);

  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dsd-journey-card h3 {
  margin:
    0
    0
    11px;

  color: var(--black);

  font-size: 1rem;
}

.dsd-journey-card p {
  margin: 0;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.65;
}


/* =========================================================
   EXPERIENCE IMAGES
   ========================================================= */

.dsd-water-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.dsd-water-heading h2 {
  margin:
    8px
    0
    0;
}

.dsd-water-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.84rem;
  line-height: 1.65;
}

.dsd-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.dsd-experience-image {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.dsd-experience-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.dsd-experience-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.dsd-experience-image figcaption {
  position: absolute;

  z-index: 2;

  left: 25px;
  right: 25px;
  bottom: 22px;
}

.dsd-experience-image figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dsd-experience-image figcaption strong {
  color: var(--white);

  font-size: 1rem;
}


/* =========================================================
   SCHEDULE
   ========================================================= */

.dsd-schedule-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.dsd-schedule-card {
  padding: 28px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.dsd-schedule-card > span {
  display: block;

  margin-bottom: 8px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dsd-schedule-card > strong {
  display: block;

  margin-bottom: 11px;

  color: var(--white);

  font-size: 1.18rem;
}

.dsd-schedule-card p {
  margin: 0;

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

  font-size: 0.8rem;
  line-height: 1.6;
}


/* ---------------------------------------------------------
   NO MINIMUM
   --------------------------------------------------------- */

.dsd-no-minimum {
  display: grid;

  grid-template-columns:
    160px
    1fr;

  gap: 24px;

  align-items: center;

  margin-top: 16px;
  padding: 21px 23px;

  background: var(--light);

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

  border-radius: 13px;
}

.dsd-no-minimum span {
  color: var(--black);

  font-size: 0.78rem;
  font-weight: 900;
}

.dsd-no-minimum p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PICKUP NOTE
   ========================================================= */

.dsd-pickup-note {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 22px;
  padding: 22px 24px;

  background: var(--light);

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

  border-radius: 13px;
}

.dsd-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.dsd-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   NOT A CERTIFICATION
   ========================================================= */

.dsd-certification-note {
  padding: 38px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.dsd-certification-note .eyebrow {
  color: var(--red);
}

.dsd-certification-note h2 {
  max-width: 760px;

  color: var(--white) !important;
}

.dsd-certification-note p {
  max-width: 760px;

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

  line-height: 1.7;
}

.dsd-certification-note p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   OPEN WATER NEXT STEP
   ========================================================= */

.dsd-next-step {
  display: grid;

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

  gap: 42px;

  align-items: center;

  padding: 34px;

  background: var(--light);

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

  border-radius: 20px;
}

.dsd-next-step h2 {
  margin:
    8px
    0
    12px !important;
}

.dsd-next-step p {
  max-width: 680px;

  margin: 0 !important;

  color: var(--gray);

  line-height: 1.65;
}


/* =========================================================
   FAQ / RELATED SPACING
   ========================================================= */

.dsd-page .activity-faq-section {
  margin-top: 0;
}

.dsd-page .activity-faq-section > h2 {
  margin-bottom: 28px;
}

.dsd-page .dsd-related-section {
  margin-top: 105px;
  margin-bottom: 20px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .dsd-journey {
    grid-template-columns: 1fr;
  }

  .dsd-journey-card {
    min-height: 0;
  }

  .dsd-water-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .dsd-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .dsd-page [id] {
    scroll-margin-top: 120px;
  }


  .dsd-page .course-detail-intro {
    margin-bottom: 45px;
  }


  .dsd-page .course-detail-section {
    margin-bottom: 65px;
  }


  .dsd-image-grid {
    grid-template-columns: 1fr;
  }


  .dsd-experience-image {
    aspect-ratio: 16 / 11;
  }


  .dsd-schedule-grid {
    grid-template-columns: 1fr;
  }


  .dsd-schedule-card {
    padding: 24px 21px;
  }


  .dsd-no-minimum {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .dsd-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .dsd-certification-note {
    padding:
      30px
      23px;
  }


  .dsd-next-step {
    padding:
      28px
      22px;
  }


  .dsd-page .dsd-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   PADI SCUBA DIVER
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.scuba-diver-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/divers-eel.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   IMPORTANT LAYOUT SAFETY
   ========================================================= */

.scuba-diver-page .scuba-diver-intro,
.scuba-diver-page .scuba-diver-section,
.scuba-diver-page .scuba-diver-limit-section,
.scuba-diver-page .scuba-diver-next-step,
.scuba-diver-page .scuba-diver-section > h2,
.scuba-diver-page .scuba-diver-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto;

  transform: none !important;
}


/* ---------------------------------------------------------
   ANCHOR OFFSET
   --------------------------------------------------------- */

.scuba-diver-page [id] {
  scroll-margin-top: 175px;
}


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

.scuba-diver-page .scuba-diver-intro {
  max-width: 850px;

  margin-bottom: 58px;
}

.scuba-diver-page .scuba-diver-intro > p:last-child {
  max-width: 800px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.scuba-diver-page .scuba-diver-section {
  margin-bottom: 92px;
}

.scuba-diver-page .scuba-diver-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.scuba-diver-page .scuba-diver-section > h2 {
  margin:
    0
    0
    18px;
}

.scuba-diver-page .scuba-diver-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   COURSE JOURNEY
   ========================================================= */

.scuba-diver-journey {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.scuba-diver-journey article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.scuba-diver-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.scuba-diver-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scuba-diver-journey h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.scuba-diver-journey p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   IMAGE SECTION
   ========================================================= */

.scuba-diver-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.scuba-diver-media-heading h2 {
  margin:
    8px
    0
    0;
}

.scuba-diver-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.scuba-diver-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.scuba-diver-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.scuba-diver-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.scuba-diver-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.scuba-diver-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.scuba-diver-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scuba-diver-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   OPEN-WATER LOCATION CALLOUT
   ========================================================= */

.scuba-diver-dive-callout {
  display: grid;

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

  gap: 30px;

  align-items: center;

  margin-top: 28px;
  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.scuba-diver-dive-callout span {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scuba-diver-dive-callout strong {
  color: var(--black);

  font-size: 0.9rem;
}

.scuba-diver-dive-callout p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   DEPTH BANNER
   ========================================================= */

.scuba-diver-depth-banner {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 16px;
  padding: 27px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.scuba-diver-depth-banner > div {
  padding-right: 20px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.scuba-diver-depth-banner span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.scuba-diver-depth-banner strong {
  color: var(--white);

  font-size: 1.4rem;
  font-weight: 900;
}

.scuba-diver-depth-banner p {
  margin: 0;

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

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PICKUP
   ========================================================= */

.scuba-diver-pickup-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding: 22px 24px;

  background: var(--light);

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

  border-radius: 13px;
}

.scuba-diver-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.scuba-diver-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   CERTIFICATION LIMIT
   ========================================================= */

.scuba-diver-limit-section {
  margin-bottom: 92px;
  padding: 39px;

  background: var(--black);

  border-radius: 23px;

  color: var(--white);
}

.scuba-diver-limit-section .eyebrow {
  color: var(--red);
}

.scuba-diver-limit-section h2 {
  max-width: 760px;

  margin:
    8px
    0
    17px;

  color: var(--white);
}

.scuba-diver-limit-section p {
  max-width: 770px;

  margin:
    0
    0
    13px;

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

  line-height: 1.7;
}

.scuba-diver-limit-section p:last-child {
  margin-bottom: 0;
}

.scuba-diver-limit-section strong {
  color: var(--white);
}


/* =========================================================
   PRICING
   ========================================================= */

.scuba-diver-price-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.scuba-diver-price-grid article {
  padding: 30px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.scuba-diver-price-grid article:last-child {
  border:
    2px solid var(--black);
}

.scuba-diver-price-label {
  display: block;

  margin-bottom: 12px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scuba-diver-price {
  color: var(--black);

  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
}

.scuba-diver-price-grid article > small {
  display: block;

  margin-top: 7px;

  color: var(--gray);

  font-size: 0.67rem;
  font-weight: 700;
}

.scuba-diver-price-grid article > p {
  min-height: 68px;

  margin:
    22px
    0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}

.scuba-diver-price-total {
  padding-top: 18px;

  border-top:
    1px solid var(--line);
}

.scuba-diver-price-total span {
  display: block;

  margin-bottom: 4px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.scuba-diver-price-total strong {
  color: var(--black);

  font-size: 0.95rem;
}

.scuba-diver-fee-note {
  margin-top: 15px !important;

  color: var(--gray);

  font-size: 0.72rem;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.scuba-diver-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 35px;

  background: var(--light);

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

  border-radius: 21px;
}

.scuba-diver-next-step h2 {
  margin:
    8px
    0
    12px;
}

.scuba-diver-next-step p {
  max-width: 680px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}


/* =========================================================
   SIDEBAR PRICE OPTIONS
   ========================================================= */

.scuba-diver-summary-prices {
  margin:
    22px
    0;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.scuba-diver-summary-prices > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scuba-diver-summary-prices > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.scuba-diver-summary-prices p {
  margin: 0;

  color: var(--gray);

  font-size: 0.73rem;
}

.scuba-diver-summary-prices strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.scuba-diver-summary-prices small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.scuba-diver-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ + RELATED
   ========================================================= */

.scuba-diver-page .scuba-diver-faq-section {
  margin-bottom: 0;
}

.scuba-diver-page .scuba-diver-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .scuba-diver-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .scuba-diver-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .scuba-diver-page [id] {
    scroll-margin-top: 120px;
  }


  .scuba-diver-page .scuba-diver-intro {
    margin-bottom: 45px;
  }


  .scuba-diver-page .scuba-diver-section {
    margin-bottom: 67px;
  }


  .scuba-diver-journey {
    grid-template-columns: 1fr;
  }


  .scuba-diver-journey article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .scuba-diver-image-grid {
    grid-template-columns: 1fr;
  }


  .scuba-diver-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .scuba-diver-dive-callout {
    grid-template-columns: 1fr;

    gap: 9px;
  }


  .scuba-diver-depth-banner {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .scuba-diver-depth-banner p {
    grid-column:
      1 / -1;

    padding-top: 8px;
  }


  .scuba-diver-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .scuba-diver-limit-section {
    margin-bottom: 67px;

    padding:
      30px
      23px;
  }


  .scuba-diver-price-grid {
    grid-template-columns: 1fr;
  }


  .scuba-diver-price-grid article > p {
    min-height: 0;
  }


  .scuba-diver-next-step {
    margin-bottom: 75px;

    padding:
      29px
      22px;
  }


  .scuba-diver-page .scuba-diver-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   PADI OPEN WATER DIVER
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.open-water-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/reef-diver.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.open-water-page .open-water-intro,
.open-water-page .open-water-section,
.open-water-page .open-water-class-section,
.open-water-page .open-water-next-step,
.open-water-page .open-water-section > h2,
.open-water-page .open-water-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto;

  transform: none !important;
}


/* ---------------------------------------------------------
   ANCHOR OFFSET
   --------------------------------------------------------- */

.open-water-page [id] {
  scroll-margin-top: 175px;
}


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

.open-water-page .open-water-intro {
  max-width: 860px;

  margin-bottom: 58px;
}

.open-water-page .open-water-intro > p:last-child {
  max-width: 800px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.open-water-page .open-water-section {
  margin-bottom: 94px;
}

.open-water-page .open-water-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.open-water-page .open-water-section > h2 {
  margin:
    0
    0
    18px;
}

.open-water-page .open-water-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   CERTIFICATION JOURNEY
   ========================================================= */

.open-water-journey {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.open-water-journey article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.open-water-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.open-water-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.open-water-journey h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.open-water-journey p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   IMAGES
   ========================================================= */

.open-water-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.open-water-media-heading h2 {
  margin:
    8px
    0
    0;
}

.open-water-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.open-water-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.open-water-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.open-water-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.open-water-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.open-water-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.open-water-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.open-water-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   THREE DAY SCHEDULE
   ========================================================= */

.open-water-schedule {
  display: grid;

  gap: 16px;

  margin-top: 30px;
}

.open-water-schedule > article {
  display: grid;

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

  overflow: hidden;

  background: var(--light);

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

  border-radius: var(--radius);
}

.open-water-day {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding: 25px 15px;

  background: var(--black);

  color: var(--white);
}

.open-water-day span {
  margin-bottom: 3px;

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

  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.open-water-day strong {
  color: var(--white);

  font-size: 1.65rem;
  font-weight: 900;
}

.open-water-day-content {
  padding: 25px 28px;
}

.open-water-day-label {
  display: block;

  margin-bottom: 7px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.open-water-day-content h3 {
  margin:
    0
    0
    9px;

  font-size: 1rem;
}

.open-water-day-content p {
  margin: 0;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.65;
}

.open-water-day-depth {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-top: 17px;
  padding-top: 15px;

  border-top:
    1px solid var(--line);
}

.open-water-day-depth span {
  color: var(--gray);

  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.open-water-day-depth strong {
  color: var(--black);

  font-size: 0.82rem;
}


/* ---------------------------------------------------------
   WEATHER / LOCATION NOTE
   --------------------------------------------------------- */

.open-water-location-note {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 16px;
  padding: 23px 25px;

  background: var(--black);

  border-radius: 14px;
}

.open-water-location-note strong {
  color: var(--white);

  font-size: 0.8rem;
}

.open-water-location-note p {
  margin: 0;

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

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   DEPTH PROGRESSION
   ========================================================= */

.open-water-depth-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.open-water-depth-grid article {
  padding: 30px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.open-water-depth-grid article > span {
  display: block;

  margin-bottom: 10px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.open-water-depth-grid article > strong {
  display: block;

  color: var(--white);

  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
}

.open-water-depth-grid article > small {
  display: block;

  margin-top: 6px;

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

  font-size: 0.64rem;
}

.open-water-depth-grid p {
  margin:
    22px
    0
    0;

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

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   CLASS SIZE
   ========================================================= */

.open-water-class-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--light);

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

  border-radius: 22px;
}

.open-water-class-section h2 {
  margin:
    8px
    0
    12px;
}

.open-water-class-section p {
  max-width: 680px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.open-water-class-number {
  text-align: center;
}

.open-water-class-number span,
.open-water-class-number small {
  display: block;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.open-water-class-number strong {
  display: block;

  margin:
    4px
    0;

  color: var(--black);

  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}


/* =========================================================
   PICKUP
   ========================================================= */

.open-water-pickup-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding: 22px 24px;

  background: var(--light);

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

  border-radius: 13px;
}

.open-water-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.open-water-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.open-water-price-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 17px;

  margin-top: 30px;
}

.open-water-price-grid article {
  position: relative;

  padding: 31px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.open-water-price-featured {
  border:
    2px solid var(--black) !important;
}

.open-water-price-badge {
  position: absolute;

  top: -13px;
  right: 22px;

  padding:
    7px
    11px;

  background: var(--black);

  border-radius: 999px;

  color: var(--white);

  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.open-water-price-label {
  display: block;

  margin-bottom: 12px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.open-water-price {
  color: var(--black);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.open-water-price-grid article > small {
  display: block;

  margin-top: 7px;

  color: var(--gray);

  font-size: 0.66rem;
}

.open-water-price-grid h3 {
  margin:
    23px
    0
    10px;

  font-size: 1rem;
}

.open-water-price-grid article > p {
  margin:
    0
    0
    19px;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}

.open-water-price-grid ul {
  margin:
    0
    0
    23px;

  padding-left: 19px;

  color: var(--gray);

  font-size: 0.75rem;
  line-height: 1.75;
}

.open-water-price-total {
  padding-top: 17px;

  border-top:
    1px solid var(--line);
}

.open-water-price-total span {
  display: block;

  margin-bottom: 4px;

  color: var(--gray);

  font-size: 0.61rem;
  font-weight: 900;
  text-transform: uppercase;
}

.open-water-price-total strong {
  color: var(--black);

  font-size: 0.95rem;
}

.open-water-fee-note {
  margin-top: 15px !important;

  color: var(--gray);

  font-size: 0.72rem;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.open-water-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.open-water-next-step .eyebrow {
  color: var(--red);
}

.open-water-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.open-water-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.open-water-summary-prices {
  margin:
    22px
    0;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.open-water-summary-prices > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.open-water-summary-prices > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.open-water-summary-prices p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.open-water-summary-prices strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.open-water-summary-prices small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.open-water-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ + RELATED
   ========================================================= */

.open-water-page .open-water-faq-section {
  margin-bottom: 0;
}

.open-water-page .open-water-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .open-water-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .open-water-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .open-water-page [id] {
    scroll-margin-top: 120px;
  }


  .open-water-page .open-water-intro {
    margin-bottom: 45px;
  }


  .open-water-page .open-water-section {
    margin-bottom: 68px;
  }


  .open-water-journey {
    grid-template-columns: 1fr;
  }


  .open-water-journey article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .open-water-image-grid {
    grid-template-columns: 1fr;
  }


  .open-water-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .open-water-schedule > article {
    grid-template-columns: 70px minmax(0, 1fr);
  }


  .open-water-day {
    padding:
      20px
      10px;
  }


  .open-water-day-content {
    padding:
      22px
      19px;
  }


  .open-water-location-note {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .open-water-depth-grid {
    grid-template-columns: 1fr;
  }


  .open-water-class-section {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .open-water-class-number {
    text-align: left;
  }


  .open-water-class-number strong {
    font-size: 2.6rem;
  }


  .open-water-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .open-water-price-grid {
    grid-template-columns: 1fr;
  }


  .open-water-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .open-water-page .open-water-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   OPEN WATER — SINGLE FULL COURSE PRICE
   ========================================================= */

.open-water-single-price {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}


.open-water-single-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}


.open-water-single-price-main .open-water-price-label {
  color: var(--red);
}


.open-water-single-price-main .open-water-price {
  color: var(--white);
}


.open-water-single-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}


.open-water-single-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.open-water-single-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}


.open-water-single-price-total strong {
  color: var(--white);

  font-size: 1rem;
}


.open-water-single-price-details {
  padding: 34px;
}


.open-water-single-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}


.open-water-single-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}


@media (max-width: 640px) {

  .open-water-single-price {
    grid-template-columns: 1fr;
  }

  .open-water-single-price-main,
  .open-water-single-price-details {
    padding:
      28px
      22px;
  }

}
.open-water-alt-price-note {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--gray);
}

.open-water-alt-price-note strong {
  color: var(--black);
}

/* =========================================================
   SCUBA DIVER — SINGLE FULL COURSE PRICE
   ========================================================= */

.scuba-diver-single-price {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}


/* MAIN PRICE */

.scuba-diver-single-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}


.scuba-diver-single-price-main
.scuba-diver-price-label {
  color: var(--red);
}


.scuba-diver-single-price-main
.scuba-diver-price {
  color: var(--white);
}


.scuba-diver-single-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}


/* GST TOTAL */

.scuba-diver-single-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.scuba-diver-single-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}


.scuba-diver-single-price-total strong {
  color: var(--white);

  font-size: 1rem;
}


/* INCLUDED SIDE */

.scuba-diver-single-price-details {
  padding: 34px;
}


.scuba-diver-single-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}


.scuba-diver-single-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}


/* FEES */

.scuba-diver-fee-note {
  margin-top: 18px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* ELEARNING LOWER PRICE NOTE */

.scuba-diver-alt-price-note {
  margin-top: 10px !important;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.7;
}


.scuba-diver-alt-price-note strong {
  color: var(--black);
}


/* SIDEBAR ELEARNING NOTE */

.scuba-diver-summary-alt-price {
  margin:
    14px
    0
    0 !important;

  padding-top: 13px;

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

  color: var(--gray) !important;

  font-size: 0.68rem !important;
  line-height: 1.55 !important;
}


.scuba-diver-summary-alt-price strong {
  display: block;

  margin-bottom: 3px;

  color: var(--black);

  font-size: 0.68rem;
}


/* MOBILE */

@media (max-width: 640px) {

  .scuba-diver-single-price {
    grid-template-columns: 1fr;
  }


  .scuba-diver-single-price-main,
  .scuba-diver-single-price-details {
    padding:
      28px
      22px;
  }

}

/* =========================================================
   PADI OPEN WATER REFERRAL
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.referral-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/reef-diver.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.open-water-referral-page .referral-intro,
.open-water-referral-page .referral-section,
.open-water-referral-page .referral-class-section,
.open-water-referral-page .referral-next-step,
.open-water-referral-page .referral-section > h2,
.open-water-referral-page .referral-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER / ANCHOR OFFSET
   --------------------------------------------------------- */

.open-water-referral-page [id] {
  scroll-margin-top: 175px;
}


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

.open-water-referral-page .referral-intro {
  max-width: 860px;

  margin-bottom: 58px;
}

.open-water-referral-page
.referral-intro > p:last-child {
  max-width: 800px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.open-water-referral-page .referral-section {
  margin-bottom: 92px;
}

.open-water-referral-page
.referral-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.open-water-referral-page
.referral-section > h2 {
  margin:
    0
    0
    18px;
}

.open-water-referral-page
.referral-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   REFERRAL PROCESS
   ========================================================= */

.referral-process {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.referral-process article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.referral-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.referral-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.referral-process h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.referral-process p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   REFERRAL DOCUMENTATION
   ========================================================= */

.referral-document-card {
  display: grid;

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

  gap: 25px;

  margin-top: 28px;
  padding: 32px;

  background: var(--black);

  border-radius: 20px;

  color: var(--white);
}

.referral-document-icon {
  display: grid;

  place-items: center;

  width: 52px;
  height: 52px;

  background: var(--red);

  border-radius: 50%;

  color: var(--white);

  font-size: 1.2rem;
  font-weight: 900;
}

.referral-document-card h3 {
  margin:
    2px
    0
    12px;

  color: var(--white);

  font-size: 1.05rem;
}

.referral-document-card p {
  max-width: 730px;

  margin:
    0
    0
    10px;

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

  font-size: 0.8rem;
  line-height: 1.68;
}

.referral-document-card p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   IMAGES
   ========================================================= */

.referral-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.referral-media-heading h2 {
  margin:
    8px
    0
    0;
}

.referral-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.referral-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.referral-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.referral-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.referral-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.referral-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.referral-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.referral-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   TWO-DAY SCHEDULE
   ========================================================= */

.referral-schedule {
  display: grid;

  gap: 16px;

  margin-top: 30px;
}

.referral-schedule > article {
  display: grid;

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

  overflow: hidden;

  background: var(--light);

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

  border-radius: var(--radius);
}

.referral-day {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding:
    25px
    15px;

  background: var(--black);

  color: var(--white);
}

.referral-day span {
  margin-bottom: 3px;

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

  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-day strong {
  color: var(--white);

  font-size: 1.65rem;
  font-weight: 900;
}

.referral-day-content {
  padding:
    25px
    28px;
}

.referral-day-time {
  display: block;

  margin-bottom: 7px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.referral-day-content h3 {
  margin:
    0
    0
    9px;

  font-size: 1rem;
}

.referral-day-content p {
  margin: 0;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.65;
}

.referral-day-depth {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-top: 17px;
  padding-top: 15px;

  border-top:
    1px solid var(--line);
}

.referral-day-depth span {
  color: var(--gray);

  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.referral-day-depth strong {
  color: var(--black);

  font-size: 0.82rem;
}


/* =========================================================
   LOCATION / WEATHER NOTICE
   ========================================================= */

.referral-location-note {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 16px;
  padding:
    23px
    25px;

  background: var(--black);

  border-radius: 14px;
}

.referral-location-note strong {
  color: var(--white);

  font-size: 0.8rem;
}

.referral-location-note p {
  margin: 0;

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

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   DEPTH PROGRESSION
   ========================================================= */

.referral-depth-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.referral-depth-grid article {
  padding: 30px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.referral-depth-grid article > span {
  display: block;

  margin-bottom: 10px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-depth-grid article > strong {
  display: block;

  color: var(--white);

  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
}

.referral-depth-grid article > small {
  display: block;

  margin-top: 6px;

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

  font-size: 0.64rem;
}

.referral-depth-grid p {
  margin:
    22px
    0
    0;

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

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   CLASS SIZE
   ========================================================= */

.referral-class-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 92px;
  padding: 36px;

  background: var(--light);

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

  border-radius: 22px;
}

.referral-class-section h2 {
  margin:
    8px
    0
    12px;
}

.referral-class-section p {
  max-width: 680px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.referral-class-number {
  text-align: center;
}

.referral-class-number span,
.referral-class-number small {
  display: block;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.referral-class-number strong {
  display: block;

  margin:
    4px
    0;

  color: var(--black);

  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}


/* =========================================================
   PICKUP NOTE
   ========================================================= */

.referral-pickup-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding:
    22px
    24px;

  background: var(--light);

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

  border-radius: 13px;
}

.referral-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.referral-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.referral-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.referral-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}

.referral-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-price {
  color: var(--white);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.referral-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.referral-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.referral-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.referral-price-total strong {
  color: var(--white);

  font-size: 1rem;
}

.referral-price-details {
  padding: 34px;
}

.referral-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.referral-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}

.referral-fee-note {
  margin-top: 18px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.referral-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.referral-next-step .eyebrow {
  color: var(--red);
}

.referral-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.referral-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.referral-summary-price {
  margin:
    22px
    0;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.referral-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.referral-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.referral-summary-price strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.referral-summary-price small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.referral-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ / RELATED
   ========================================================= */

.open-water-referral-page
.referral-faq-section {
  margin-bottom: 0;
}

.open-water-referral-page
.referral-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .referral-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .referral-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .open-water-referral-page [id] {
    scroll-margin-top: 120px;
  }


  .open-water-referral-page
  .referral-intro {
    margin-bottom: 45px;
  }


  .open-water-referral-page
  .referral-section {
    margin-bottom: 68px;
  }


  .referral-process {
    grid-template-columns: 1fr;
  }


  .referral-process article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .referral-document-card {
    grid-template-columns: 1fr;

    gap: 18px;

    padding:
      28px
      22px;
  }


  .referral-image-grid {
    grid-template-columns: 1fr;
  }


  .referral-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .referral-schedule > article {
    grid-template-columns:
      70px
      minmax(0, 1fr);
  }


  .referral-day {
    padding:
      20px
      10px;
  }


  .referral-day-content {
    padding:
      22px
      19px;
  }


  .referral-location-note {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .referral-depth-grid {
    grid-template-columns: 1fr;
  }


  .referral-class-section {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .referral-class-number {
    text-align: left;
  }


  .referral-class-number strong {
    font-size: 2.6rem;
  }


  .referral-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .referral-price-card {
    grid-template-columns: 1fr;
  }


  .referral-price-main,
  .referral-price-details {
    padding:
      28px
      22px;
  }


  .referral-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .open-water-referral-page
  .referral-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   PADI SCUBA REFRESHER
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.refresher-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/reef-diver.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.refresher-page .refresher-intro,
.refresher-page .refresher-section,
.refresher-page .refresher-policy-section,
.refresher-page .refresher-next-step,
.refresher-page .refresher-section > h2,
.refresher-page .refresher-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER / ANCHOR OFFSET
   --------------------------------------------------------- */

.refresher-page [id] {
  scroll-margin-top: 175px;
}


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

.refresher-page .refresher-intro {
  max-width: 860px;

  margin-bottom: 58px;
}

.refresher-page
.refresher-intro > p:last-child {
  max-width: 800px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.refresher-page .refresher-section,
.refresher-page .refresher-policy-section {
  margin-bottom: 92px;
}

.refresher-page
.refresher-section > .eyebrow,
.refresher-page
.refresher-policy-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.refresher-page
.refresher-section > h2,
.refresher-page
.refresher-policy-section > h2 {
  margin:
    0
    0
    18px;
}


/* =========================================================
   REFRESHER POLICY
   ========================================================= */

.refresher-policy-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.refresher-policy-grid article {
  padding: 31px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.refresher-policy-grid
.refresher-policy-required {
  background: var(--black);

  border-color: var(--black);

  color: var(--white);
}

.refresher-policy-grid article > span {
  display: block;

  margin-bottom: 13px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.refresher-policy-grid article > strong {
  display: block;

  margin-bottom: 20px;

  color: var(--black);

  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.refresher-policy-grid
.refresher-policy-required > strong {
  color: var(--white);
}

.refresher-policy-grid h3 {
  margin:
    0
    0
    10px;

  font-size: 0.95rem;
}

.refresher-policy-required h3 {
  color: var(--white);
}

.refresher-policy-grid p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}

.refresher-policy-required p {
  color:
    rgba(255, 255, 255, 0.68);
}


/* =========================================================
   PROCESS
   ========================================================= */

.refresher-process {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.refresher-process article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.refresher-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.refresher-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.refresher-process h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.refresher-process p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   MEDIA
   ========================================================= */

.refresher-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.refresher-media-heading h2 {
  margin:
    8px
    0
    0;
}

.refresher-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.refresher-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.refresher-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.refresher-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.refresher-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.refresher-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.refresher-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.refresher-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   SCHEDULE
   ========================================================= */

.refresher-schedule-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.refresher-schedule-grid article {
  padding: 28px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.refresher-schedule-grid article > span {
  display: block;

  margin-bottom: 8px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.refresher-schedule-grid article > strong {
  display: block;

  margin-bottom: 11px;

  color: var(--white);

  font-size: 1.18rem;
}

.refresher-schedule-grid p {
  margin: 0;

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

  font-size: 0.8rem;
  line-height: 1.6;
}

.refresher-minimum-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 16px;
  padding:
    21px
    23px;

  background: var(--light);

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

  border-radius: 13px;
}

.refresher-minimum-note strong {
  font-size: 0.78rem;
}

.refresher-minimum-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   DIVE BANNER
   ========================================================= */

.refresher-dive-banner {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.refresher-dive-banner > div:first-child {
  display: flex;
  flex-direction: column;

  justify-content: center;

  padding: 30px;

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

.refresher-dive-banner span {
  display: block;

  margin-bottom: 7px;

  color: var(--red);

  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.refresher-dive-banner > div:first-child strong {
  color: var(--white);

  font-size: 2.2rem;
  font-weight: 900;
}

.refresher-dive-banner small {
  margin-top: 4px;

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

.refresher-dive-location {
  padding: 30px;
}

.refresher-dive-location > strong {
  display: block;

  margin-bottom: 10px;

  color: var(--white);

  font-size: 1.05rem;
}

.refresher-dive-location p {
  margin: 0;

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

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   PICKUP
   ========================================================= */

.refresher-pickup-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding:
    22px
    24px;

  background: var(--light);

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

  border-radius: 13px;
}

.refresher-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.refresher-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.refresher-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.refresher-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}

.refresher-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.refresher-price {
  color: var(--white);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.refresher-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.refresher-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.refresher-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.refresher-price-total strong {
  color: var(--white);

  font-size: 1rem;
}

.refresher-price-details {
  padding: 34px;
}

.refresher-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.refresher-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}

.refresher-fee-note {
  margin-top: 18px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.refresher-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.refresher-next-step .eyebrow {
  color: var(--red);
}

.refresher-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.refresher-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.refresher-summary-price {
  margin:
    22px
    0;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.refresher-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.refresher-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.refresher-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.refresher-summary-price strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.refresher-summary-price small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.refresher-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ / RELATED
   ========================================================= */

.refresher-page
.refresher-faq-section {
  margin-bottom: 0;
}

.refresher-page
.refresher-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .refresher-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .refresher-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .refresher-page [id] {
    scroll-margin-top: 120px;
  }


  .refresher-page
  .refresher-intro {
    margin-bottom: 45px;
  }


  .refresher-page
  .refresher-section,
  .refresher-page
  .refresher-policy-section {
    margin-bottom: 68px;
  }


  .refresher-policy-grid {
    grid-template-columns: 1fr;
  }


  .refresher-process {
    grid-template-columns: 1fr;
  }


  .refresher-process article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .refresher-image-grid {
    grid-template-columns: 1fr;
  }


  .refresher-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .refresher-schedule-grid {
    grid-template-columns: 1fr;
  }


  .refresher-minimum-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .refresher-dive-banner {
    grid-template-columns: 1fr;
  }


  .refresher-dive-banner > div:first-child {
    border-right: 0;

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


  .refresher-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .refresher-price-card {
    grid-template-columns: 1fr;
  }


  .refresher-price-main,
  .refresher-price-details {
    padding:
      28px
      22px;
  }


  .refresher-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .refresher-page
  .refresher-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   PADI ADVANCED OPEN WATER
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.advanced-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/divers-eel.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.advanced-page .advanced-intro,
.advanced-page .advanced-section,
.advanced-page .advanced-age-section,
.advanced-page .advanced-class-section,
.advanced-page .advanced-next-step,
.advanced-page .advanced-section > h2,
.advanced-page .advanced-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER / ANCHOR OFFSET
   --------------------------------------------------------- */

.advanced-page [id] {
  scroll-margin-top: 175px;
}


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

.advanced-page .advanced-intro {
  max-width: 880px;

  margin-bottom: 58px;
}

.advanced-page
.advanced-intro > p:last-child {
  max-width: 810px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.advanced-page .advanced-section {
  margin-bottom: 94px;
}

.advanced-page
.advanced-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.advanced-page
.advanced-section > h2 {
  margin:
    0
    0
    18px;
}

.advanced-page
.advanced-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.advanced-process {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.advanced-process article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.advanced-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.advanced-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.advanced-process h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.advanced-process p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   MEDIA
   ========================================================= */

.advanced-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.advanced-media-heading h2 {
  margin:
    8px
    0
    0;
}

.advanced-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.advanced-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.advanced-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.advanced-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.advanced-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.advanced-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.advanced-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.advanced-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   REQUIRED DIVES
   ========================================================= */

.advanced-required-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 31px;
}

.advanced-required-grid article {
  display: grid;

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

  gap: 20px;

  padding: 30px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.advanced-required-number {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  background: var(--red);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.67rem;
  font-weight: 900;
}

.advanced-required-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advanced-required-grid h3 {
  margin:
    0
    0
    10px;

  color: var(--white);

  font-size: 1rem;
}

.advanced-required-grid p {
  margin: 0;

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

  font-size: 0.79rem;
  line-height: 1.65;
}

.advanced-depth,
.advanced-navigation-note {
  margin-top: 21px;
  padding-top: 17px;

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

.advanced-depth span {
  display: block;

  margin-bottom: 4px;

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

  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.advanced-depth strong {
  color: var(--white);

  font-size: 1.18rem;
}

.advanced-required-grid small {
  display: block;

  margin-top: 9px;

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

  font-size: 0.65rem;
  line-height: 1.5;
}

.advanced-navigation-note strong {
  display: block;

  margin-bottom: 4px;

  color: var(--white);

  font-size: 0.83rem;
}

.advanced-navigation-note span {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.66rem;
}


/* =========================================================
   ELECTIVE ADVENTURE DIVES
   ========================================================= */

.advanced-elective-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;

  margin-top: 31px;
}

.advanced-elective-grid article {
  position: relative;

  padding:
    24px
    24px
    24px
    58px;

  background: var(--light);

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

  border-radius: 14px;
}

.advanced-elective-grid article > span {
  position: absolute;

  top: 24px;
  left: 20px;

  display: grid;

  place-items: center;

  width: 27px;
  height: 27px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.55rem;
  font-weight: 900;
}

.advanced-elective-grid h3 {
  margin:
    0
    0
    7px;

  color: var(--black);

  font-size: 0.88rem;
}

.advanced-elective-grid p {
  margin: 0;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.55;
}

.advanced-elective-note {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 16px;
  padding:
    22px
    24px;

  background: var(--black);

  border-radius: 14px;
}

.advanced-elective-note strong {
  color: var(--white);

  font-size: 0.79rem;
}

.advanced-elective-note p {
  margin: 0;

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

  font-size: 0.77rem;
  line-height: 1.6;
}


/* =========================================================
   SCHEDULE
   ========================================================= */

.advanced-schedule-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.advanced-schedule-grid > article {
  position: relative;

  padding: 30px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.advanced-schedule-grid
.advanced-schedule-featured {
  border:
    2px solid var(--black);
}

.advanced-schedule-label {
  display: block;

  margin-bottom: 10px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advanced-schedule-grid h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 1.6rem;
}

.advanced-schedule-grid > article > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}

.advanced-schedule-days {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 6px;

  margin-top: 23px;
}

.advanced-schedule-days span {
  padding:
    11px
    7px;

  background: var(--black);

  border-radius: 8px;

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

  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.advanced-schedule-days strong {
  display: block;

  margin-top: 4px;

  color: var(--white);

  font-size: 0.67rem;
}

.advanced-two-day {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.advanced-schedule-note {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 16px;
  padding:
    22px
    24px;

  background: var(--black);

  border-radius: 14px;
}

.advanced-schedule-note strong {
  color: var(--white);

  font-size: 0.79rem;
}

.advanced-schedule-note p {
  margin: 0;

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

  font-size: 0.77rem;
  line-height: 1.6;
}


/* =========================================================
   AGE / JUNIOR ADVANCED
   ========================================================= */

.advanced-age-section {
  margin-bottom: 94px;
  padding: 34px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.advanced-age-section > div:first-child {
  margin-bottom: 25px;
}

.advanced-age-section h2 {
  margin:
    8px
    0
    10px;

  color: var(--white);
}

.advanced-age-section > div:first-child p {
  max-width: 680px;

  margin: 0;

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

.advanced-age-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 11px;
}

.advanced-age-grid article {
  padding: 24px;

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

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

  border-radius: 13px;
}

.advanced-age-grid span {
  display: block;

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

  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.advanced-age-grid strong {
  display: block;

  margin:
    5px
    0
    11px;

  color: var(--white);

  font-size: 2rem;
  line-height: 1;
}

.advanced-age-grid h3 {
  margin: 0;

  color: var(--white);

  font-size: 0.86rem;
}


/* =========================================================
   CLASS SIZE
   ========================================================= */

.advanced-class-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--light);

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

  border-radius: 22px;
}

.advanced-class-section h2 {
  margin:
    8px
    0
    12px;
}

.advanced-class-section p {
  max-width: 680px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.advanced-class-number {
  text-align: center;
}

.advanced-class-number span,
.advanced-class-number small {
  display: block;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.advanced-class-number strong {
  display: block;

  margin:
    4px
    0;

  color: var(--black);

  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}


/* =========================================================
   PICKUP
   ========================================================= */

.advanced-pickup-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding:
    22px
    24px;

  background: var(--light);

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

  border-radius: 13px;
}

.advanced-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.advanced-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.advanced-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.advanced-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}

.advanced-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advanced-price {
  color: var(--white);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.advanced-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.advanced-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.advanced-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.advanced-price-total strong {
  color: var(--white);

  font-size: 1rem;
}

.advanced-price-details {
  padding: 34px;
}

.advanced-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.advanced-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}

.advanced-fee-note {
  margin-top: 18px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.advanced-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.advanced-next-step .eyebrow {
  color: var(--red);
}

.advanced-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.advanced-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.advanced-summary-price {
  margin:
    22px
    0;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.advanced-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advanced-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.advanced-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.advanced-summary-price strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.advanced-summary-price small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.advanced-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ + RELATED
   ========================================================= */

.advanced-page
.advanced-faq-section {
  margin-bottom: 0;
}

.advanced-page
.advanced-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .advanced-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .advanced-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .advanced-page [id] {
    scroll-margin-top: 120px;
  }


  .advanced-page
  .advanced-intro {
    margin-bottom: 45px;
  }


  .advanced-page
  .advanced-section {
    margin-bottom: 68px;
  }


  .advanced-process {
    grid-template-columns: 1fr;
  }


  .advanced-process article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .advanced-image-grid {
    grid-template-columns: 1fr;
  }


  .advanced-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .advanced-required-grid {
    grid-template-columns: 1fr;
  }


  .advanced-required-grid article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      25px
      20px;
  }


  .advanced-elective-grid {
    grid-template-columns: 1fr;
  }


  .advanced-elective-note {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .advanced-schedule-grid {
    grid-template-columns: 1fr;
  }


  .advanced-schedule-note {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .advanced-age-section {
    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .advanced-age-grid {
    grid-template-columns: 1fr;
  }


  .advanced-class-section {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .advanced-class-number {
    text-align: left;
  }


  .advanced-class-number strong {
    font-size: 2.6rem;
  }


  .advanced-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .advanced-price-card {
    grid-template-columns: 1fr;
  }


  .advanced-price-main,
  .advanced-price-details {
    padding:
      28px
      22px;
  }


  .advanced-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .advanced-page
  .advanced-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   PADI RESCUE DIVER
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.rescue-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.70) 46%,
      rgba(4, 30, 42, 0.22) 82%
    ),
    url("../../images/divers-eel.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.rescue-page .rescue-intro,
.rescue-page .rescue-section,
.rescue-page .rescue-efr-section,
.rescue-page .rescue-focus-section,
.rescue-page .rescue-age-section,
.rescue-page .rescue-class-section,
.rescue-page .rescue-next-step,
.rescue-page .rescue-section > h2,
.rescue-page .rescue-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER / ANCHOR OFFSET
   --------------------------------------------------------- */

.rescue-page [id] {
  scroll-margin-top: 175px;
}


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

.rescue-page .rescue-intro {
  max-width: 880px;

  margin-bottom: 58px;
}

.rescue-page
.rescue-intro > p:last-child {
  max-width: 810px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.rescue-page .rescue-section {
  margin-bottom: 94px;
}

.rescue-page
.rescue-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.rescue-page
.rescue-section > h2 {
  margin:
    0
    0
    18px;
}

.rescue-page
.rescue-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   PREREQUISITES
   ========================================================= */

.rescue-prerequisite-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.rescue-prerequisite-grid article {
  display: grid;

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

  gap: 20px;

  padding: 29px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.rescue-prerequisite-number {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.67rem;
  font-weight: 900;
}

.rescue-prerequisite-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rescue-prerequisite-grid h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 1rem;
}

.rescue-prerequisite-grid p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   EFR CALLOUT
   ========================================================= */

.rescue-efr-section {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.rescue-efr-heading .eyebrow {
  color: var(--red);
}

.rescue-efr-heading h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.rescue-efr-heading p {
  max-width: 680px;

  margin: 0;

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

  line-height: 1.68;
}

.rescue-efr-price {
  padding-left: 30px;

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

.rescue-efr-price > span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rescue-efr-price > strong {
  display: block;

  color: var(--white);

  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
}

.rescue-efr-price > small {
  display: block;

  margin:
    7px
    0
    19px;

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

  font-size: 0.65rem;
}


/* =========================================================
   COURSE SCHEDULE
   ========================================================= */

.rescue-schedule {
  display: grid;

  gap: 16px;

  margin-top: 30px;
}

.rescue-schedule > article {
  display: grid;

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

  overflow: hidden;

  background: var(--light);

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

  border-radius: var(--radius);
}

.rescue-schedule-optional {
  border-style: dashed !important;
}

.rescue-day {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding:
    25px
    15px;

  background: var(--black);

  color: var(--white);
}

.rescue-schedule-optional
.rescue-day {
  background:
    #2b2b2b;
}

.rescue-day span {
  margin-bottom: 3px;

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

  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rescue-day strong {
  color: var(--white);

  font-size: 1.65rem;
  font-weight: 900;
}

.rescue-day-content {
  padding:
    25px
    28px;
}

.rescue-day-label {
  display: block;

  margin-bottom: 7px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rescue-day-content h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 1rem;
}

.rescue-day-content p {
  margin:
    0
    0
    10px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.65;
}

.rescue-day-content > a {
  color: var(--red);

  font-size: 0.72rem;
  font-weight: 800;
}

.rescue-duration-note {
  display: grid;

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

  gap: 25px;

  align-items: center;

  margin-top: 16px;
  padding:
    22px
    24px;

  background: var(--black);

  border-radius: 14px;
}

.rescue-duration-note strong {
  color: var(--white);

  font-size: 0.8rem;
}

.rescue-duration-note p {
  margin: 0;

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

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   MEDIA
   ========================================================= */

.rescue-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.rescue-media-heading h2 {
  margin:
    8px
    0
    0;
}

.rescue-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.rescue-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.rescue-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.rescue-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.rescue-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.rescue-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.rescue-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rescue-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   RESCUE FOCUS
   ========================================================= */

.rescue-focus-section {
  display: grid;

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

  gap: 42px;

  align-items: center;

  margin-bottom: 94px;
  padding: 35px;

  background: var(--light);

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

  border-radius: 22px;
}

.rescue-focus-section h2 {
  margin:
    8px
    0
    12px;
}

.rescue-focus-section p {
  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.rescue-focus-words {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.rescue-focus-words span {
  display: grid;

  place-items: center;

  min-height: 72px;

  padding: 10px;

  background: var(--black);

  border-radius: 10px;

  color: var(--white);

  font-size: 0.67rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}


/* =========================================================
   AGE
   ========================================================= */

.rescue-age-section {
  margin-bottom: 94px;
  padding: 34px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.rescue-age-section > div:first-child {
  margin-bottom: 25px;
}

.rescue-age-section h2 {
  margin:
    8px
    0
    10px;

  color: var(--white);
}

.rescue-age-section > div:first-child p {
  max-width: 680px;

  margin: 0;

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

.rescue-age-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 11px;
}

.rescue-age-grid article {
  padding: 24px;

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

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

  border-radius: 13px;
}

.rescue-age-grid span {
  display: block;

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

  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rescue-age-grid strong {
  display: block;

  margin:
    5px
    0
    11px;

  color: var(--white);

  font-size: 2rem;
  line-height: 1;
}

.rescue-age-grid h3 {
  margin: 0;

  color: var(--white);

  font-size: 0.86rem;
}


/* =========================================================
   CLASS SIZE
   ========================================================= */

.rescue-class-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--light);

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

  border-radius: 22px;
}

.rescue-class-section h2 {
  margin:
    8px
    0
    12px;
}

.rescue-class-section p {
  max-width: 680px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.rescue-class-number {
  text-align: center;
}

.rescue-class-number span,
.rescue-class-number small {
  display: block;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rescue-class-number strong {
  display: block;

  margin:
    4px
    0;

  color: var(--black);

  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}


/* =========================================================
   PICKUP
   ========================================================= */

.rescue-pickup-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 22px;
  padding:
    22px
    24px;

  background: var(--light);

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

  border-radius: 13px;
}

.rescue-pickup-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.rescue-pickup-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.78rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.rescue-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.rescue-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}

.rescue-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rescue-price {
  color: var(--white);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.rescue-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.rescue-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.rescue-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rescue-price-total strong {
  color: var(--white);

  font-size: 1rem;
}

.rescue-price-details {
  padding: 34px;
}

.rescue-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.rescue-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}


/* ---------------------------------------------------------
   EFR PRICE NOTE
   --------------------------------------------------------- */

.rescue-efr-price-note {
  display: grid;

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

  gap: 30px;

  align-items: center;

  margin-top: 16px;
  padding:
    24px
    26px;

  background: var(--light);

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

  border-radius: 14px;
}

.rescue-efr-price-note > div:first-child > strong {
  display: block;

  margin-bottom: 6px;

  color: var(--black);

  font-size: 0.82rem;
}

.rescue-efr-price-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.76rem;
  line-height: 1.6;
}

.rescue-efr-price-note
> div:last-child {
  padding-left: 23px;

  border-left:
    1px solid var(--line);
}

.rescue-efr-price-note
> div:last-child > span {
  display: block;

  color: var(--gray);

  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rescue-efr-price-note
> div:last-child > strong {
  display: block;

  margin:
    4px
    0
    8px;

  color: var(--black);

  font-size: 0.9rem;
}

.rescue-efr-price-note a {
  color: var(--red);

  font-size: 0.68rem;
  font-weight: 800;
}

.rescue-fee-note {
  margin-top: 15px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.rescue-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.rescue-next-step .eyebrow {
  color: var(--red);
}

.rescue-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.rescue-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.rescue-summary-price {
  margin:
    22px
    0
    14px;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.rescue-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rescue-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.rescue-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.rescue-summary-price strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.rescue-summary-price small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   SIDEBAR EFR
   --------------------------------------------------------- */

.rescue-summary-efr {
  margin-bottom: 20px;
  padding: 15px;

  background: var(--light);

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

  border-radius: 10px;
}

.rescue-summary-efr > span {
  display: block;

  margin-bottom: 4px;

  color: var(--gray);

  font-size: 0.59rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rescue-summary-efr > strong {
  display: block;

  margin-bottom: 7px;

  color: var(--black);

  font-size: 0.74rem;
}

.rescue-summary-efr a {
  color: var(--red);

  font-size: 0.64rem;
  font-weight: 800;
}

.rescue-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ / RELATED
   ========================================================= */

.rescue-page
.rescue-faq-section {
  margin-bottom: 0;
}

.rescue-page
.rescue-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .rescue-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .rescue-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .rescue-page [id] {
    scroll-margin-top: 120px;
  }


  .rescue-page
  .rescue-intro {
    margin-bottom: 45px;
  }


  .rescue-page
  .rescue-section {
    margin-bottom: 68px;
  }


  .rescue-prerequisite-grid {
    grid-template-columns: 1fr;
  }


  .rescue-prerequisite-grid article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .rescue-efr-section {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 68px;

    padding:
      30px
      23px;
  }


  .rescue-efr-price {
    padding:
      22px
      0
      0;

    border-left: 0;

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


  .rescue-schedule > article {
    grid-template-columns:
      70px
      minmax(0, 1fr);
  }


  .rescue-day {
    padding:
      20px
      10px;
  }


  .rescue-day-content {
    padding:
      22px
      19px;
  }


  .rescue-duration-note {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .rescue-image-grid {
    grid-template-columns: 1fr;
  }


  .rescue-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .rescue-focus-section {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .rescue-age-section {
    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .rescue-age-grid {
    grid-template-columns: 1fr;
  }


  .rescue-class-section {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .rescue-class-number {
    text-align: left;
  }


  .rescue-class-number strong {
    font-size: 2.6rem;
  }


  .rescue-pickup-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .rescue-price-card {
    grid-template-columns: 1fr;
  }


  .rescue-price-main,
  .rescue-price-details {
    padding:
      28px
      22px;
  }


  .rescue-efr-price-note {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .rescue-efr-price-note
  > div:last-child {
    padding:
      17px
      0
      0;

    border-left: 0;

    border-top:
      1px solid var(--line);
  }


  .rescue-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .rescue-page
  .rescue-related-section {
    margin-top: 80px;
  }

}
/* =========================================================
   EMERGENCY FIRST RESPONSE
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.efr-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.94) 0%,
      rgba(4, 20, 32, 0.72) 48%,
      rgba(4, 30, 42, 0.24) 82%
    ),
    url("../../images/reef-diver.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.efr-page .efr-intro,
.efr-page .efr-section,
.efr-page .efr-response-section,
.efr-page .efr-rescue-section,
.efr-page .efr-class-section,
.efr-page .efr-next-step,
.efr-page .efr-section > h2,
.efr-page .efr-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER OFFSET
   --------------------------------------------------------- */

.efr-page [id] {
  scroll-margin-top: 175px;
}


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

.efr-page .efr-intro {
  max-width: 880px;

  margin-bottom: 58px;
}

.efr-page
.efr-intro > p:last-child {
  max-width: 810px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.efr-page .efr-section {
  margin-bottom: 94px;
}

.efr-page
.efr-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.efr-page
.efr-section > h2 {
  margin:
    0
    0
    18px;
}

.efr-page
.efr-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   RESPOND FIRST INTRO
   ========================================================= */

.efr-response-section {
  display: grid;

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

  gap: 42px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.efr-response-section .eyebrow {
  color: var(--red);
}

.efr-response-section h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.efr-response-section p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}

.efr-response-words {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.efr-response-words span {
  display: grid;

  place-items: center;

  min-height: 74px;

  padding: 10px;

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

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

  border-radius: 10px;

  color: var(--white);

  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}


/* =========================================================
   COURSE PROCESS
   ========================================================= */

.efr-process {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.efr-process article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.efr-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.efr-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.efr-process h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.efr-process p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   WHO CAN TAKE IT
   ========================================================= */

.efr-who-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;

  margin-top: 30px;
}

.efr-who-grid article {
  position: relative;

  padding:
    25px
    24px
    25px
    60px;

  background: var(--light);

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

  border-radius: 14px;
}

.efr-who-grid article > span {
  position: absolute;

  top: 25px;
  left: 21px;

  display: grid;

  place-items: center;

  width: 28px;
  height: 28px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.55rem;
  font-weight: 900;
}

.efr-who-grid h3 {
  margin:
    0
    0
    7px;

  color: var(--black);

  font-size: 0.89rem;
}

.efr-who-grid p {
  margin: 0;

  color: var(--gray);

  font-size: 0.75rem;
  line-height: 1.58;
}


/* =========================================================
   RESCUE DIVER CONNECTION
   ========================================================= */

.efr-rescue-section {
  display: grid;

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

  gap: 42px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.efr-rescue-copy .eyebrow {
  color: var(--red);
}

.efr-rescue-copy h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.efr-rescue-copy p {
  max-width: 680px;

  margin:
    0
    0
    22px;

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

  line-height: 1.68;
}

.efr-rescue-path {
  padding: 25px;

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

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

  border-radius: 15px;
}

.efr-rescue-path > span:first-child {
  display: block;

  margin-bottom: 16px;

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

  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.efr-rescue-path > div {
  padding: 13px;

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

  border-radius: 9px;
}

.efr-rescue-path strong {
  display: block;

  color: var(--white);

  font-size: 0.84rem;
}

.efr-rescue-path small {
  display: block;

  margin-top: 3px;

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

  font-size: 0.61rem;
}

.efr-path-arrow {
  display: block;

  padding: 7px;

  color: var(--red);

  font-weight: 900;
  text-align: center;
}


/* =========================================================
   ONE-DAY COURSE
   ========================================================= */

.efr-day-card {
  display: grid;

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

  overflow: hidden;

  margin-top: 30px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.efr-day-number {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding: 25px;

  background: var(--black);

  color: var(--white);
}

.efr-day-number span {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.efr-day-number strong {
  display: block;

  margin:
    3px
    0;

  color: var(--white);

  font-size: 2.5rem;
  line-height: 1;
}

.efr-day-number small {
  color:
    rgba(255, 255, 255, 0.55);

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.efr-day-content {
  padding:
    28px
    30px;
}

.efr-day-content > span {
  display: block;

  margin-bottom: 7px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.efr-day-content h3 {
  margin:
    0
    0
    10px;

  color: var(--black);

  font-size: 1rem;
}

.efr-day-content p {
  margin: 0;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.65;
}

.efr-schedule-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 16px;
  padding:
    21px
    23px;

  background: var(--black);

  border-radius: 13px;
}

.efr-schedule-note strong {
  color: var(--white);

  font-size: 0.78rem;
}

.efr-schedule-note p {
  margin: 0;

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

  font-size: 0.77rem;
  line-height: 1.6;
}


/* =========================================================
   CLASS SIZE
   ========================================================= */

.efr-class-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--light);

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

  border-radius: 22px;
}

.efr-class-section h2 {
  margin:
    8px
    0
    12px;
}

.efr-class-section p {
  max-width: 670px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.efr-class-stats {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px;
}

.efr-class-stats div {
  padding:
    20px
    12px;

  background: var(--black);

  border-radius: 11px;

  text-align: center;
}

.efr-class-stats span,
.efr-class-stats small {
  display: block;

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

  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
}

.efr-class-stats strong {
  display: block;

  margin:
    5px
    0;

  color: var(--white);

  font-size: 2.1rem;
  line-height: 1;
}


/* =========================================================
   WHAT YOU LEARN
   ========================================================= */

.efr-learn-card {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 13px;

  margin-top: 30px;
}

.efr-learn-card > div {
  padding: 26px;

  background: var(--light);

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

  border-radius: 14px;
}

.efr-learn-card span {
  display: block;

  margin-bottom: 8px;

  color: var(--red);

  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.efr-learn-card h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.9rem;
}

.efr-learn-card p {
  margin: 0;

  color: var(--gray);

  font-size: 0.75rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.efr-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.efr-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}

.efr-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.efr-price {
  color: var(--white);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.efr-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.efr-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.efr-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.efr-price-total strong {
  color: var(--white);

  font-size: 1rem;
}

.efr-price-details {
  padding: 34px;
}

.efr-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.efr-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}

.efr-fee-note {
  margin-top: 18px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.efr-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.efr-next-step .eyebrow {
  color: var(--red);
}

.efr-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.efr-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.efr-summary-price {
  margin:
    22px
    0
    15px;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.efr-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.efr-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.efr-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.efr-summary-price strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.efr-summary-price small {
  display: block;

  margin-top: 10px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.efr-summary-rescue {
  margin-bottom: 20px;
  padding: 15px;

  background: var(--light);

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

  border-radius: 10px;
}

.efr-summary-rescue > span {
  display: block;

  margin-bottom: 5px;

  color: var(--red);

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.efr-summary-rescue > strong {
  display: block;

  margin-bottom: 8px;

  color: var(--black);

  font-size: 0.72rem;
  line-height: 1.45;
}

.efr-summary-rescue a {
  color: var(--red);

  font-size: 0.64rem;
  font-weight: 800;
}

.efr-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ / RELATED
   ========================================================= */

.efr-page
.efr-faq-section {
  margin-bottom: 0;
}

.efr-page
.efr-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .efr-response-section,
  .efr-rescue-section,
  .efr-class-section {
    grid-template-columns: 1fr;
  }


  .efr-next-step {
    grid-template-columns: 1fr;
  }


  .efr-class-stats {
    max-width: 320px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .efr-page [id] {
    scroll-margin-top: 120px;
  }


  .efr-page
  .efr-intro {
    margin-bottom: 45px;
  }


  .efr-page
  .efr-section {
    margin-bottom: 68px;
  }


  .efr-response-section {
    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .efr-process {
    grid-template-columns: 1fr;
  }


  .efr-process article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .efr-who-grid {
    grid-template-columns: 1fr;
  }


  .efr-rescue-section {
    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .efr-day-card {
    grid-template-columns:
      80px
      minmax(0, 1fr);
  }


  .efr-day-number {
    padding:
      20px
      10px;
  }


  .efr-day-content {
    padding:
      23px
      19px;
  }


  .efr-schedule-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .efr-class-section {
    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .efr-learn-card {
    grid-template-columns: 1fr;
  }


  .efr-price-card {
    grid-template-columns: 1fr;
  }


  .efr-price-main,
  .efr-price-details {
    padding:
      28px
      22px;
  }


  .efr-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .efr-page
  .efr-related-section {
    margin-top: 80px;
  }

}
/* =========================================================
   PADI ENRICHED AIR NITROX
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.nitrox-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.93) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/ray-sunlight.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.nitrox-page .nitrox-intro,
.nitrox-page .nitrox-section,
.nitrox-page .nitrox-benefit-section,
.nitrox-page .nitrox-depth-section,
.nitrox-page .nitrox-no-dive-section,
.nitrox-page .nitrox-class-section,
.nitrox-page .nitrox-next-step,
.nitrox-page .nitrox-section > h2,
.nitrox-page .nitrox-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER OFFSET
   --------------------------------------------------------- */

.nitrox-page [id] {
  scroll-margin-top: 175px;
}


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

.nitrox-page .nitrox-intro {
  max-width: 880px;

  margin-bottom: 58px;
}

.nitrox-page
.nitrox-intro > p:last-child {
  max-width: 810px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.nitrox-page .nitrox-section {
  margin-bottom: 94px;
}

.nitrox-page
.nitrox-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.nitrox-page
.nitrox-section > h2 {
  margin:
    0
    0
    18px;
}

.nitrox-page
.nitrox-section > p {
  margin-bottom: 18px;
}


/* =========================================================
   WHY NITROX
   ========================================================= */

.nitrox-benefit-section {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.nitrox-benefit-section .eyebrow {
  color: var(--red);
}

.nitrox-benefit-section h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.nitrox-benefit-section p {
  max-width: 690px;

  margin:
    0
    0
    10px;

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

  line-height: 1.68;
}

.nitrox-benefit-section p:last-child {
  margin-bottom: 0;
}

.nitrox-benefit-stat {
  padding-left: 28px;

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

.nitrox-benefit-stat span {
  display: block;

  margin-bottom: 8px;

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

  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nitrox-benefit-stat strong {
  display: block;

  margin-bottom: 8px;

  color: var(--white);

  font-size: 1.15rem;
  line-height: 1.2;
}

.nitrox-benefit-stat small {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.64rem;
  line-height: 1.45;
}


/* =========================================================
   DEPTH FACT
   ========================================================= */

.nitrox-depth-section {
  display: grid;

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

  gap: 25px;

  align-items: start;

  margin-bottom: 94px;
  padding: 31px;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: 18px;
}

.nitrox-depth-symbol {
  display: grid;

  place-items: center;

  width: 56px;
  height: 56px;

  background: var(--red);

  border-radius: 50%;

  color: var(--white);

  font-size: 1.25rem;
  font-weight: 900;
}

.nitrox-depth-section h2 {
  margin:
    8px
    0
    10px;

  color: var(--black);
}

.nitrox-depth-section p {
  max-width: 760px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}


/* =========================================================
   PROCESS
   ========================================================= */

.nitrox-process {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.nitrox-process article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.nitrox-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.nitrox-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nitrox-process h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.nitrox-process p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   GAS ANALYSIS
   ========================================================= */

.nitrox-analysis-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  margin-top: 30px;
}

.nitrox-analysis-grid article {
  padding: 24px;

  background: var(--black);

  border-radius: 13px;

  color: var(--white);
}

.nitrox-analysis-grid article > span {
  display: block;

  margin-bottom: 10px;

  color: var(--red);

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nitrox-analysis-grid article > strong {
  display: block;

  margin-bottom: 8px;

  color: var(--white);

  font-size: 0.95rem;
}

.nitrox-analysis-grid p {
  margin: 0;

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

  font-size: 0.72rem;
  line-height: 1.55;
}


/* =========================================================
   NO REQUIRED DIVES
   ========================================================= */

.nitrox-no-dive-section {
  display: grid;

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

  gap: 36px;

  align-items: center;

  margin-bottom: 94px;
  padding: 34px;

  background: var(--light);

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

  border-radius: 22px;
}

.nitrox-no-dive-number {
  text-align: center;
}

.nitrox-no-dive-number span {
  display: block;

  margin-bottom: 7px;

  color: var(--gray);

  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.4;
  text-transform: uppercase;
}

.nitrox-no-dive-number strong {
  color: var(--black);

  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}

.nitrox-no-dive-section h2 {
  margin:
    8px
    0
    11px;
}

.nitrox-no-dive-section p {
  max-width: 690px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}


/* =========================================================
   CLASS SIZE
   ========================================================= */

.nitrox-class-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 94px;
  padding: 36px;

  background: var(--light);

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

  border-radius: 22px;
}

.nitrox-class-section h2 {
  margin:
    8px
    0
    12px;
}

.nitrox-class-section p {
  max-width: 670px;

  margin: 0;

  color: var(--gray);

  line-height: 1.68;
}

.nitrox-class-stats {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px;
}

.nitrox-class-stats div {
  padding:
    20px
    12px;

  background: var(--black);

  border-radius: 11px;

  text-align: center;
}

.nitrox-class-stats span,
.nitrox-class-stats small {
  display: block;

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

  font-size: 0.54rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nitrox-class-stats strong {
  display: block;

  margin:
    5px
    0;

  color: var(--white);

  font-size: 2rem;
  line-height: 1;
}


/* =========================================================
   COURSE DURATION
   ========================================================= */

.nitrox-duration-card {
  display: grid;

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

  gap: 0;

  align-items: stretch;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

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

  border-radius: var(--radius);
}

.nitrox-duration-card > div:not(.nitrox-duration-arrow) {
  padding: 27px;
}

.nitrox-duration-card span {
  display: block;

  margin-bottom: 8px;

  color: var(--red);

  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nitrox-duration-card strong {
  display: block;

  margin-bottom: 8px;

  color: var(--black);

  font-size: 0.95rem;
}

.nitrox-duration-card p {
  margin: 0;

  color: var(--gray);

  font-size: 0.76rem;
  line-height: 1.6;
}

.nitrox-duration-arrow {
  display: grid;

  place-items: center;

  background: var(--black);

  color: var(--white);

  font-size: 1.15rem;
  font-weight: 900;
}

.nitrox-schedule-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 15px;
  padding:
    21px
    23px;

  background: var(--black);

  border-radius: 13px;
}

.nitrox-schedule-note strong {
  color: var(--white);

  font-size: 0.77rem;
}

.nitrox-schedule-note p {
  margin: 0;

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

  font-size: 0.76rem;
  line-height: 1.6;
}


/* =========================================================
   PRICING
   ========================================================= */

.nitrox-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.nitrox-price-main {
  padding: 34px;

  background: var(--black);

  color: var(--white);
}

.nitrox-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nitrox-price {
  color: var(--white);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.nitrox-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.nitrox-price-total {
  margin-top: 26px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.nitrox-price-total span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nitrox-price-total strong {
  color: var(--white);

  font-size: 1rem;
}

.nitrox-price-details {
  padding: 34px;
}

.nitrox-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.nitrox-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}


/* ---------------------------------------------------------
   ALTERNATE PRICE
   --------------------------------------------------------- */

.nitrox-alt-price-note {
  display: grid;

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

  gap: 30px;

  align-items: center;

  margin-top: 16px;
  padding:
    24px
    26px;

  background: var(--light);

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

  border-radius: 14px;
}

.nitrox-alt-price-note
> div:first-child > strong {
  display: block;

  margin-bottom: 6px;

  color: var(--black);

  font-size: 0.82rem;
}

.nitrox-alt-price-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.76rem;
  line-height: 1.6;
}

.nitrox-alt-price-note
> div:last-child {
  padding-left: 23px;

  border-left:
    1px solid var(--line);
}

.nitrox-alt-price-note
> div:last-child > span {
  display: block;

  color: var(--gray);

  font-size: 0.59rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nitrox-alt-price-note
> div:last-child > strong {
  display: block;

  margin:
    5px
    0;

  color: var(--black);

  font-size: 0.94rem;
}

.nitrox-alt-price-note
> div:last-child > small {
  color: var(--gray);

  font-size: 0.62rem;
}

.nitrox-fee-note {
  margin-top: 16px !important;

  color: var(--gray);

  font-size: 0.74rem;
  line-height: 1.65;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.nitrox-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 95px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.nitrox-next-step .eyebrow {
  color: var(--red);
}

.nitrox-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.nitrox-next-step p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.68;
}


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

.nitrox-summary-price {
  margin:
    22px
    0
    14px;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.nitrox-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nitrox-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.nitrox-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.nitrox-summary-price strong {
  color: var(--black);

  font-size: 0.76rem;

  white-space: nowrap;
}

.nitrox-summary-price small {
  display: block;

  margin-top: 9px;

  color: var(--gray);

  font-size: 0.66rem;
  line-height: 1.5;
}

.nitrox-summary-alt {
  margin-bottom: 20px;
  padding: 15px;

  background: var(--light);

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

  border-radius: 10px;
}

.nitrox-summary-alt > span {
  display: block;

  margin-bottom: 5px;

  color: var(--red);

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nitrox-summary-alt > strong {
  display: block;

  margin-bottom: 6px;

  color: var(--black);

  font-size: 0.78rem;
}

.nitrox-summary-alt > small {
  display: block;

  color: var(--gray);

  font-size: 0.62rem;
  line-height: 1.45;
}

.nitrox-summary-pickup {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ / RELATED
   ========================================================= */

.nitrox-page
.nitrox-faq-section {
  margin-bottom: 0;
}

.nitrox-page
.nitrox-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .nitrox-benefit-section,
  .nitrox-class-section {
    grid-template-columns: 1fr;
  }


  .nitrox-benefit-stat {
    padding:
      22px
      0
      0;

    border-left: 0;

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


  .nitrox-analysis-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .nitrox-class-stats {
    max-width: 320px;
  }


  .nitrox-next-step {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .nitrox-page [id] {
    scroll-margin-top: 120px;
  }


  .nitrox-page
  .nitrox-intro {
    margin-bottom: 45px;
  }


  .nitrox-page
  .nitrox-section {
    margin-bottom: 68px;
  }


  .nitrox-benefit-section {
    gap: 24px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .nitrox-depth-section {
    grid-template-columns: 1fr;

    gap: 17px;

    margin-bottom: 68px;

    padding:
      25px
      21px;
  }


  .nitrox-process {
    grid-template-columns: 1fr;
  }


  .nitrox-process article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .nitrox-analysis-grid {
    grid-template-columns: 1fr;
  }


  .nitrox-no-dive-section {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-bottom: 68px;

    padding:
      28px
      22px;
  }


  .nitrox-no-dive-number {
    text-align: left;
  }


  .nitrox-class-section {
    gap: 25px;

    margin-bottom: 68px;

    padding:
      29px
      22px;
  }


  .nitrox-duration-card {
    grid-template-columns: 1fr;
  }


  .nitrox-duration-arrow {
    min-height: 48px;

    transform: rotate(90deg);
  }


  .nitrox-schedule-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .nitrox-price-card {
    grid-template-columns: 1fr;
  }


  .nitrox-price-main,
  .nitrox-price-details {
    padding:
      28px
      22px;
  }


  .nitrox-alt-price-note {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .nitrox-alt-price-note
  > div:last-child {
    padding:
      17px
      0
      0;

    border-left: 0;

    border-top:
      1px solid var(--line);
  }


  .nitrox-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .nitrox-page
  .nitrox-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   PADI DIVEMASTER
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.divemaster-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 7, 12, 0.95) 0%,
      rgba(3, 18, 28, 0.72) 46%,
      rgba(3, 28, 38, 0.20) 82%
    ),
    url("../../images/divers-eel.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================================
   LAYOUT SAFETY
   ========================================================= */

.divemaster-page .divemaster-intro,
.divemaster-page .divemaster-section,
.divemaster-page .divemaster-pro-section,
.divemaster-page .divemaster-efr-section,
.divemaster-page .divemaster-season-section,
.divemaster-page .divemaster-equipment-section,
.divemaster-page .divemaster-materials-section,
.divemaster-page .divemaster-location-section,
.divemaster-page .divemaster-next-step,
.divemaster-page .divemaster-section > h2,
.divemaster-page .divemaster-section > header {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: auto !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   FIXED HEADER OFFSET
   --------------------------------------------------------- */

.divemaster-page [id] {
  scroll-margin-top: 175px;
}


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

.divemaster-page .divemaster-intro {
  max-width: 900px;

  margin-bottom: 60px;
}

.divemaster-page
.divemaster-intro > p:last-child {
  max-width: 820px;

  color: var(--gray);

  line-height: 1.7;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

.divemaster-page .divemaster-section {
  margin-bottom: 96px;
}

.divemaster-page
.divemaster-section > .eyebrow {
  display: block;

  margin-bottom: 9px;
}

.divemaster-page
.divemaster-section > h2 {
  margin:
    0
    0
    18px;
}

.divemaster-page
.divemaster-section > p {
  margin-bottom: 18px;
}


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

.divemaster-pro-section {
  display: grid;

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

  gap: 42px;

  align-items: center;

  margin-bottom: 96px;
  padding: 38px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.divemaster-pro-section .eyebrow {
  color: var(--red);
}

.divemaster-pro-section h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.divemaster-pro-section p {
  max-width: 700px;

  margin: 0;

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

  line-height: 1.68;
}

.divemaster-pro-words {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.divemaster-pro-words span {
  display: grid;

  place-items: center;

  min-height: 78px;

  padding: 10px;

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

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

  border-radius: 10px;

  color: var(--white);

  font-size: 0.67rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}


/* =========================================================
   TRAINING JOURNEY
   ========================================================= */

.divemaster-process {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 32px;
}

.divemaster-process article {
  display: grid;

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

  gap: 20px;

  padding: 27px;

  background: var(--light);

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

  border-radius: var(--radius);
}

.divemaster-step {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.68rem;
  font-weight: 900;
}

.divemaster-step-label {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.divemaster-process h3 {
  margin:
    0
    0
    9px;

  color: var(--black);

  font-size: 0.98rem;
}

.divemaster-process p {
  margin: 0;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   MEDIA
   ========================================================= */

.divemaster-media-heading {
  display: grid;

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

  gap: 45px;

  align-items: end;

  margin-bottom: 28px;
}

.divemaster-media-heading h2 {
  margin:
    8px
    0
    0;
}

.divemaster-media-heading > p {
  margin: 0;

  color: var(--gray);

  font-size: 0.83rem;
  line-height: 1.68;
}

.divemaster-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.divemaster-image-grid figure {
  position: relative;

  margin: 0;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--black);

  border-radius: var(--radius);
}

.divemaster-image-grid img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.divemaster-image-grid figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.76),
      rgba(0, 0, 0, 0.04) 62%
    );

  pointer-events: none;
}

.divemaster-image-grid figcaption {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 21px;
}

.divemaster-image-grid figcaption span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.divemaster-image-grid figcaption strong {
  color: var(--white);

  font-size: 0.98rem;
}


/* =========================================================
   DIVE COUNTS
   ========================================================= */

.divemaster-dive-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 30px;
}

.divemaster-dive-grid article {
  padding: 32px;

  background: var(--black);

  border-radius: var(--radius);

  color: var(--white);
}

.divemaster-dive-grid article > span {
  display: block;

  margin-bottom: 10px;

  color: var(--red);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.divemaster-dive-grid article > strong {
  display: block;

  color: var(--white);

  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}

.divemaster-dive-grid article > small {
  display: block;

  margin-top: 5px;

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

  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.divemaster-dive-grid p {
  margin:
    22px
    0
    0;

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

  font-size: 0.79rem;
  line-height: 1.65;
}


/* =========================================================
   REQUIREMENTS
   ========================================================= */

.divemaster-requirements {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;

  margin-top: 30px;
}

.divemaster-requirement-item {
  display: grid;

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

  gap: 18px;

  padding: 24px;

  background: var(--light);

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

  border-radius: 14px;
}

.divemaster-requirement-item > span {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  background: var(--black);

  border-radius: 50%;

  color: var(--white);

  font-size: 0.6rem;
  font-weight: 900;
}

.divemaster-requirement-item strong {
  display: block;

  margin-bottom: 6px;

  color: var(--black);

  font-size: 0.84rem;
}

.divemaster-requirement-item p {
  margin: 0;

  color: var(--gray);

  font-size: 0.75rem;
  line-height: 1.58;
}


/* =========================================================
   EFR CONNECTION
   ========================================================= */

.divemaster-efr-section {
  display: grid;

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

  gap: 35px;

  align-items: center;

  margin-bottom: 96px;
  padding: 34px;

  background: var(--black);

  border-radius: 20px;

  color: var(--white);
}

.divemaster-efr-section .eyebrow {
  color: var(--red);
}

.divemaster-efr-section h2 {
  margin:
    8px
    0
    10px;

  color: var(--white);
}

.divemaster-efr-section p {
  max-width: 690px;

  margin: 0;

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

  line-height: 1.65;
}


/* =========================================================
   DURATION
   ========================================================= */

.divemaster-duration-card {
  display: grid;

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

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

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

  border-radius: var(--radius);
}

.divemaster-duration-number {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  padding: 30px;

  background: var(--black);

  color: var(--white);

  text-align: center;
}

.divemaster-duration-number span {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-duration-number strong {
  display: block;

  margin:
    6px
    0;

  color: var(--white);

  font-size: 2.8rem;
  line-height: 1;
}

.divemaster-duration-number small {
  color:
    rgba(255, 255, 255, 0.52);

  font-size: 0.61rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-duration-content {
  padding:
    30px
    32px;
}

.divemaster-duration-content h3 {
  margin:
    0
    0
    10px;

  color: var(--black);
}

.divemaster-duration-content p {
  margin:
    0
    0
    11px;

  color: var(--gray);

  font-size: 0.79rem;
  line-height: 1.65;
}

.divemaster-duration-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   BUSY SEASON
   ========================================================= */

.divemaster-season-section {
  display: grid;

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

  gap: 36px;

  align-items: center;

  margin-bottom: 96px;
  padding: 35px;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: 22px;
}

.divemaster-season-date {
  padding: 25px;

  background: var(--black);

  border-radius: 14px;

  color: var(--white);

  text-align: center;
}

.divemaster-season-date > span {
  display: block;

  margin-bottom: 11px;

  color: var(--red);

  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.divemaster-season-date > strong {
  display: block;

  color: var(--white);

  font-size: 1.25rem;
}

.divemaster-season-date > small {
  display: block;

  margin:
    7px
    0;

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

  font-size: 0.6rem;
  text-transform: uppercase;
}

.divemaster-season-section h2 {
  margin:
    8px
    0
    11px;
}

.divemaster-season-section p {
  max-width: 700px;

  margin:
    0
    0
    9px;

  color: var(--gray);

  line-height: 1.65;
}

.divemaster-season-section p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   EQUIPMENT
   ========================================================= */

.divemaster-equipment-section {
  display: grid;

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

  gap: 38px;

  align-items: center;

  margin-bottom: 96px;
  padding: 35px;

  background: var(--light);

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

  border-radius: 22px;
}

.divemaster-equipment-section h2 {
  margin:
    8px
    0
    11px;
}

.divemaster-equipment-section p {
  max-width: 700px;

  margin:
    0
    0
    9px;

  color: var(--gray);

  line-height: 1.65;
}

.divemaster-equipment-section p:last-child {
  margin-bottom: 0;
}

.divemaster-equipment-status {
  padding: 25px;

  background: var(--black);

  border-radius: 13px;

  color: var(--white);

  text-align: center;
}

.divemaster-equipment-status span {
  display: block;

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

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-equipment-status strong {
  display: block;

  margin:
    8px
    0;

  color: var(--white);

  font-size: 1.1rem;
}

.divemaster-equipment-status small {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.61rem;
}


/* =========================================================
   MATERIALS
   ========================================================= */

.divemaster-materials-section {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 96px;
  padding: 36px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.divemaster-materials-copy .eyebrow {
  color: var(--red);
}

.divemaster-materials-copy h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.divemaster-materials-copy p {
  max-width: 690px;

  margin:
    0
    0
    22px;

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

  line-height: 1.68;
}

.divemaster-materials-note {
  padding: 24px;

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

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

  border-radius: 13px;
}

.divemaster-materials-note > span {
  display: block;

  margin-bottom: 6px;

  color: var(--red);

  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-materials-note > strong {
  display: block;

  margin-bottom: 8px;

  color: var(--white);

  font-size: 0.82rem;
  line-height: 1.4;
}

.divemaster-materials-note p {
  margin: 0;

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

  font-size: 0.7rem;
  line-height: 1.55;
}


/* =========================================================
   LOCATION
   ========================================================= */

.divemaster-location-section {
  display: grid;

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

  gap: 38px;

  align-items: center;

  margin-bottom: 96px;
  padding: 35px;

  background: var(--light);

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

  border-radius: 22px;
}

.divemaster-location-section h2 {
  margin:
    8px
    0
    11px;
}

.divemaster-location-section p {
  max-width: 710px;

  margin: 0;

  color: var(--gray);

  line-height: 1.65;
}

.divemaster-location-tag {
  padding: 24px;

  background: var(--black);

  border-radius: 13px;

  color: var(--white);

  text-align: center;
}

.divemaster-location-tag span {
  display: block;

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

  font-size: 0.57rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-location-tag strong {
  display: block;

  margin:
    7px
    0;

  color: var(--white);

  font-size: 1.15rem;
}

.divemaster-location-tag small {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.61rem;
}


/* =========================================================
   PRICING
   ========================================================= */

.divemaster-price-card {
  display: grid;

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

  gap: 0;

  margin-top: 30px;

  overflow: hidden;

  background: var(--light);

  border:
    2px solid var(--black);

  border-radius: var(--radius);
}

.divemaster-price-main {
  padding: 35px;

  background: var(--black);

  color: var(--white);
}

.divemaster-price-label {
  display: block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.divemaster-price {
  color: var(--white);

  font-size: 2.55rem;
  font-weight: 900;
  line-height: 1;
}

.divemaster-price-main > small {
  display: block;

  margin-top: 7px;

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

  font-size: 0.67rem;
}

.divemaster-price-contact {
  margin-top: 27px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}

.divemaster-price-contact span {
  display: block;

  margin-bottom: 5px;

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

  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-price-contact strong {
  color: var(--white);

  font-size: 0.84rem;
  line-height: 1.4;
}

.divemaster-price-details {
  padding: 35px;
}

.divemaster-price-details h3 {
  margin:
    0
    0
    17px;

  color: var(--black);
}

.divemaster-price-details ul {
  margin: 0;

  padding-left: 20px;

  color: var(--gray);

  font-size: 0.8rem;
  line-height: 1.85;
}

.divemaster-price-note {
  display: grid;

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

  gap: 24px;

  align-items: center;

  margin-top: 16px;
  padding:
    22px
    24px;

  background: var(--light);

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

  border-radius: 14px;
}

.divemaster-price-note strong {
  color: var(--black);

  font-size: 0.8rem;
}

.divemaster-price-note p {
  margin: 0;

  color: var(--gray);

  font-size: 0.76rem;
  line-height: 1.6;
}


/* =========================================================
   NEXT STEP
   ========================================================= */

.divemaster-next-step {
  display: grid;

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

  gap: 40px;

  align-items: center;

  margin-bottom: 96px;
  padding: 38px;

  background: var(--black);

  border-radius: 22px;

  color: var(--white);
}

.divemaster-next-step .eyebrow {
  color: var(--red);
}

.divemaster-next-step h2 {
  margin:
    8px
    0
    12px;

  color: var(--white);
}

.divemaster-next-step p {
  max-width: 700px;

  margin: 0;

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

  line-height: 1.68;
}

.divemaster-next-actions {
  display: flex;

  flex-direction: column;

  gap: 10px;

  min-width: 180px;
}


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

.divemaster-summary-price {
  margin:
    22px
    0
    14px;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid var(--line);
}

.divemaster-summary-price > span {
  display: block;

  margin-bottom: 14px;

  color: var(--gray);

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.divemaster-summary-price > div {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding:
    9px
    0;
}

.divemaster-summary-price p {
  margin: 0;

  color: var(--gray);

  font-size: 0.72rem;
}

.divemaster-summary-price strong {
  color: var(--black);

  font-size: 0.75rem;

  white-space: nowrap;
}

.divemaster-summary-price small {
  display: block;

  margin-top: 9px;

  color: var(--gray);

  font-size: 0.65rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   SIDEBAR MATERIALS
   --------------------------------------------------------- */

.divemaster-summary-materials,
.divemaster-summary-season {
  margin-bottom: 14px;
  padding: 15px;

  background: var(--light);

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

  border-radius: 10px;
}

.divemaster-summary-materials > span,
.divemaster-summary-season > span {
  display: block;

  margin-bottom: 5px;

  color: var(--red);

  font-size: 0.57rem;
  font-weight: 900;
  text-transform: uppercase;
}

.divemaster-summary-materials > strong,
.divemaster-summary-season > strong {
  display: block;

  margin-bottom: 7px;

  color: var(--black);

  font-size: 0.71rem;
  line-height: 1.4;
}

.divemaster-summary-materials a {
  color: var(--red);

  font-size: 0.63rem;
  font-weight: 800;
}

.divemaster-summary-season p {
  margin: 0;

  color: var(--gray);

  font-size: 0.64rem;
  line-height: 1.48;
}

.divemaster-summary-logistics {
  margin:
    18px
    0
    0;

  color: var(--gray);

  font-size: 0.68rem;
  line-height: 1.55;
}


/* =========================================================
   FAQ / RELATED
   ========================================================= */

.divemaster-page
.divemaster-faq-section {
  margin-bottom: 0;
}

.divemaster-page
.divemaster-related-section {
  margin-top: 105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 960px) {

  .divemaster-pro-section,
  .divemaster-materials-section,
  .divemaster-equipment-section,
  .divemaster-location-section {
    grid-template-columns: 1fr;
  }


  .divemaster-media-heading {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .divemaster-equipment-status,
  .divemaster-location-tag {
    max-width: 260px;
  }


  .divemaster-next-step {
    grid-template-columns: 1fr;
  }


  .divemaster-next-actions {
    flex-direction: row;

    flex-wrap: wrap;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .divemaster-page [id] {
    scroll-margin-top: 120px;
  }


  .divemaster-page
  .divemaster-intro {
    margin-bottom: 45px;
  }


  .divemaster-page
  .divemaster-section {
    margin-bottom: 70px;
  }


  .divemaster-pro-section {
    gap: 25px;

    margin-bottom: 70px;

    padding:
      30px
      22px;
  }


  .divemaster-process {
    grid-template-columns: 1fr;
  }


  .divemaster-process article {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    padding:
      23px
      20px;
  }


  .divemaster-image-grid {
    grid-template-columns: 1fr;
  }


  .divemaster-image-grid figure {
    aspect-ratio: 16 / 11;
  }


  .divemaster-dive-grid {
    grid-template-columns: 1fr;
  }


  .divemaster-requirements {
    grid-template-columns: 1fr;
  }


  .divemaster-efr-section {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-bottom: 70px;

    padding:
      29px
      22px;
  }


  .divemaster-duration-card {
    grid-template-columns: 1fr;
  }


  .divemaster-duration-number {
    padding:
      25px
      20px;
  }


  .divemaster-duration-content {
    padding:
      25px
      21px;
  }


  .divemaster-season-section {
    grid-template-columns: 1fr;

    gap: 23px;

    margin-bottom: 70px;

    padding:
      28px
      22px;
  }


  .divemaster-season-date {
    max-width: 220px;
  }


  .divemaster-equipment-section,
  .divemaster-materials-section,
  .divemaster-location-section {
    gap: 24px;

    margin-bottom: 70px;

    padding:
      29px
      22px;
  }


  .divemaster-price-card {
    grid-template-columns: 1fr;
  }


  .divemaster-price-main,
  .divemaster-price-details {
    padding:
      29px
      22px;
  }


  .divemaster-price-note {
    grid-template-columns: 1fr;

    gap: 7px;
  }


  .divemaster-next-step {
    margin-bottom: 75px;

    padding:
      30px
      23px;
  }


  .divemaster-next-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .divemaster-page
  .divemaster-related-section {
    margin-top: 80px;
  }

}

/* =========================================================
   BPDC SPECIALTY COURSE DETAIL TEMPLATE
   Reusable by individual PADI specialty course pages.
   ========================================================= */

.specialty-course-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("../../images/reef-diver.webp");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.specialty-course-page [id] {
  scroll-margin-top: 175px;
}

.specialty-course-hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;

  margin-top: 26px;
}

.specialty-course-price {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;

  padding: 11px 18px;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.specialty-course-price strong {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 900;
}

.specialty-course-price span,
.specialty-course-tax {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.specialty-course-quick {
  background: var(--black);
  color: var(--white);
}

.specialty-course-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.specialty-course-quick-grid > div {
  min-width: 0;
  padding: 25px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.specialty-course-quick-grid > div:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.specialty-course-quick-grid span,
.specialty-summary-label {
  display: block;
  margin-bottom: 8px;
  color: #96969e;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.specialty-course-quick-grid strong {
  display: block;
  color: var(--white);
  font-size: 0.82rem;
  line-height: 1.35;
}

.specialty-course-details {
  padding-top: 105px;
  padding-bottom: 115px;
}

.specialty-course-intro {
  max-width: 860px;
  margin-bottom: 62px;
}

.specialty-course-intro h2,
.specialty-course-section > h2 {
  margin: 9px 0 18px;
}

.specialty-course-intro .lead {
  color: var(--black);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.65;
}

.specialty-course-intro p,
.specialty-course-section > p {
  color: var(--gray);
  line-height: 1.75;
}

.specialty-course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 70px;
  align-items: start;
}

.specialty-course-section {
  margin-bottom: 88px;
}

.specialty-learning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.specialty-learning-grid article {
  min-height: 225px;
  padding: 28px;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.specialty-learning-grid article > span,
.specialty-inclusions-grid article > span {
  color: var(--red);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.specialty-learning-grid h3,
.specialty-inclusions-grid h3 {
  margin: 18px 0 10px;
  color: var(--black);
}

.specialty-learning-grid p,
.specialty-inclusions-grid li {
  color: var(--gray);
  font-size: 0.85rem;
  line-height: 1.7;
}

.specialty-course-steps {
  display: grid;
  gap: 15px;
  margin-top: 32px;
}

.specialty-course-steps article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 25px 0;
  border-top: 1px solid var(--line);
}

.specialty-course-steps article:last-child {
  border-bottom: 1px solid var(--line);
}

.specialty-step-number {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--black);
  border-radius: 50%;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 900;
}

.specialty-course-steps h3 {
  margin: 2px 0 8px;
}

.specialty-course-steps p {
  margin: 0;
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.7;
}

.specialty-inclusions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.specialty-inclusions-grid article {
  padding: 30px;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.specialty-inclusions-grid ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.specialty-course-note {
  margin-top: 18px;
  padding: 20px 22px;
  background: #fff7f7;
  border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0;
  font-size: 0.83rem;
}

.specialty-prerequisites {
  padding: 34px;
  background: var(--black);
  border-radius: var(--radius);
}

.specialty-prerequisites h2,
.specialty-prerequisites p {
  color: var(--white);
}

.specialty-prerequisites p {
  margin-bottom: 0;
  color: #b9b9bf;
}

.specialty-prerequisite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0;
}

.specialty-prerequisite-grid div {
  padding: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}

.specialty-prerequisite-grid span {
  display: block;
  margin-bottom: 8px;
  color: #96969e;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.specialty-prerequisite-grid strong {
  color: var(--white);
  font-size: 0.9rem;
}

.specialty-course-faq details {
  border-top: 1px solid var(--line);
}

.specialty-course-faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.specialty-course-faq summary {
  position: relative;
  padding: 22px 42px 22px 0;
  color: var(--black);
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.specialty-course-faq summary::-webkit-details-marker {
  display: none;
}

.specialty-course-faq summary::after {
  content: "+";
  position: absolute;
  top: 18px;
  right: 0;
  color: var(--red);
  font-size: 1.35rem;
  font-weight: 900;
}

.specialty-course-faq details[open] summary::after {
  content: "\2212";
}

.specialty-course-faq details p {
  margin: 0;
  padding: 0 42px 22px 0;
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.7;
}

.specialty-course-summary {
  position: sticky;
  top: 120px;
  padding: 34px;
  background: var(--black);
  border-radius: var(--radius);
  color: var(--white);
}

.specialty-summary-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 18px 0 4px;
}

.specialty-summary-price strong {
  color: var(--white);
  font-size: 2.35rem;
  font-weight: 950;
}

.specialty-summary-price span,
.specialty-summary-tax {
  color: #96969e;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.specialty-summary-tax {
  margin: 0 0 24px;
}

.specialty-summary-list {
  margin: 0 0 26px;
}

.specialty-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.specialty-summary-list div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.specialty-summary-list dt {
  color: #96969e;
  font-size: 0.72rem;
  font-weight: 800;
}

.specialty-summary-list dd {
  margin: 0;
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 850;
  text-align: right;
}

.specialty-summary-button {
  width: 100%;
  text-align: center;
}

.specialty-summary-link {
  display: block;
  margin-top: 16px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.specialty-final-cta {
  display: flex;
  justify-content: space-between;
  gap: 45px;
  align-items: center;
}

.specialty-final-cta > div:first-child {
  max-width: 680px;
}

.specialty-final-cta h2 {
  margin: 9px 0 12px;
}

.specialty-final-cta p {
  margin: 0;
  color: var(--gray);
}

.specialty-final-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .specialty-course-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .specialty-course-quick-grid > div:nth-child(4),
  .specialty-course-quick-grid > div:nth-child(5) {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

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

  .specialty-course-summary {
    position: static;
  }

  .specialty-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .specialty-course-hero {
    background-position: 58% center;
  }

  .specialty-course-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specialty-course-quick-grid > div {
    padding: 21px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .specialty-course-quick-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .specialty-course-details {
    padding-top: 75px;
    padding-bottom: 85px;
  }

  .specialty-course-intro {
    margin-bottom: 46px;
  }

  .specialty-course-layout {
    gap: 48px;
  }

  .specialty-course-section {
    margin-bottom: 64px;
  }

  .specialty-learning-grid,
  .specialty-inclusions-grid,
  .specialty-prerequisite-grid {
    grid-template-columns: 1fr;
  }

  .specialty-learning-grid article {
    min-height: 0;
  }

  .specialty-course-steps article {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
  }

  .specialty-step-number {
    width: 42px;
    height: 42px;
  }

  .specialty-prerequisites,
  .specialty-course-summary {
    padding: 27px 23px;
  }

  .specialty-final-actions,
  .specialty-final-actions .btn {
    width: 100%;
  }
}
/* =========================================================
   BPDC SPECIALTY COURSE HERO IMAGES
   Course-specific artwork with a local fallback image.
   ========================================================= */

.specialty-course-hero--underwater-navigator {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-underwater-navigator-800x562.jpg"),
    url("../../images/aerial-reef.webp");
}
.specialty-course-hero--boat-diver {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-boat-diver-800x562.jpg"),
    url("../../images/aerial-reef.webp");
}
.specialty-course-hero--deep-diver {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-deep-diver-800x562.jpg"),
    url("../../images/ray-sunlight.webp");
}
.specialty-course-hero--drift-diver {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-drift-diver-800x562.jpg"),
    url("../../images/reef-diver.webp");
}
.specialty-course-hero--night-diver {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-night-diver-800x562.jpg"),
    url("../../images/divers-eel.webp");
}
.specialty-course-hero--search-and-recovery {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-search-and-recovery-800x562.jpg"),
    url("../../images/reef-diver.webp");
}
.specialty-course-hero--emergency-oxygen-provider {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-emergency-oxygen-provider-800x562.jpg"),
    url("../../images/aerial-reef.webp");
}
.specialty-course-hero--self-reliant-diver {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-self-reliant-diver-800x562.jpg"),
    url("../../images/reef-diver.webp");
}
.specialty-course-hero--shark-conservation {
  background-image:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.92) 0%,
      rgba(4, 20, 32, 0.68) 46%,
      rgba(4, 30, 42, 0.20) 82%
    ),
    url("https://belizeprodivecenter.com/wp-content/uploads/2020/01/padi-specialty-course-aware-shark-conservation-800x562.jpg"),
    url("../../images/nurse-shark.webp");
}