/* ===============================================================
 * JP Dental — custom overrides on top of the template's style.css
 * Ported from the previous Next.js build (app/globals.css).
 * Loaded last in includes/header.php so these rules win.
 * =============================================================== */

/* Fix for side menu scroll */
#extra-content {
    overflow-y: auto !important;
    right: 0 !important;
    width: 100% !important;
    padding-right: 0 !important;
}

/* Hide body scroll when menu is open */
body.no-scroll {
    overflow: hidden !important;
}

/* Custom scrollbar for side menu */
#extra-content::-webkit-scrollbar {
  width: 6px;
}
#extra-content::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.2);
  border-radius: 3px;
}

/* Team photos — source images vary in aspect ratio, so crop them to a
   consistent portrait frame instead of letting each one set its own height. */
.team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

/* Larger frame for the full profile blocks on the Dentists page */
.team-photo-lg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* The phone and email items in the dark contact strip are real tel:/mailto:
   links, so keep them looking like the surrounding text rather than picking up
   the default link colour and underline. */
.contact-link,
.contact-link:hover,
.contact-link:focus {
  color: inherit;
  text-decoration: none;
}

.contact-link h4,
.contact-link p {
  color: inherit;
}

.contact-link {
  transition: opacity 0.2s ease;
}

.contact-link:hover {
  opacity: 0.75;
}

.contact-link:focus-visible {
  outline: 2px solid var(--primary-color, #f75023);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
 * Mobile refinements (phone widths only — desktop layout unchanged)
 * --------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Contact strip: stack the icon above its text so all three items read as
     one tidy centred column, instead of three rows indented differently by
     their own label widths. */
  .contact-strip .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact-strip .d-flex > div {
    margin-left: 0 !important;
    margin-top: 10px;
  }

  .contact-strip i {
    font-size: 44px !important;
    line-height: 1;
  }

  .contact-strip p {
    margin-bottom: 0;
  }

  .contact-strip .mb-sm-30 {
    margin-bottom: 26px !important;
  }

  /* Footer: centre every column and the subfooter row. */
  footer {
    padding-top: 60px;
  }

  footer .container > .row > [class*="col-"] {
    text-align: center;
    margin-bottom: 30px;
  }

  footer .logo-footer {
    display: block;
    margin: 0 auto;
  }

  footer .widget {
    margin-bottom: 30px;
  }

  .subfooter .de-flex,
  .subfooter .de-flex > .de-flex-col {
    text-align: center;
    justify-content: center;
  }

  .subfooter .menu-simple {
    margin-top: 12px;
  }

  .subfooter .menu-simple li {
    margin: 0 10px;
  }
}

/* ---------------------------------------------------------------
 * Sticky mobile action bar (phones only)
 * --------------------------------------------------------------- */
.mobile-action-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 8px 12px;
    /* sit above the iOS home indicator rather than under it */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid rgba(18, 40, 90, 0.12);
    box-shadow: 0 -4px 16px rgba(18, 40, 90, 0.1);
  }

  .mobile-action-bar .mab-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--secondary-color);
    text-decoration: none;
  }

  .mobile-action-bar .mab-item i {
    font-size: 17px;
    color: var(--primary-color);
  }

  .mobile-action-bar .mab-item:hover,
  .mobile-action-bar .mab-item:active {
    color: var(--primary-color);
  }

  .mobile-action-bar .mab-cta {
    flex: 1.5 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .mobile-action-bar .mab-cta:hover,
  .mobile-action-bar .mab-cta:active {
    background: var(--secondary-color);
    color: #ffffff;
  }

  .mobile-action-bar a:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* Keep the bar from covering the end of the page or the back-to-top button. */
  #wrapper {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  #back-to-top.show {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ---------------------------------------------------------------
 * Page subheader clearance on tablet/phone
 * --------------------------------------------------------------- */
/* style.css has two conflicting mobile rules: the 992px block forces
   `padding: 40px 0 !important`, which beats the 767px block's `padding-top:
   100px`. 40px is less than the height of the absolutely-positioned header, so
   the page title ends up tucked behind the logo. `body` prefix raises
   specificity so this wins regardless of stylesheet order. */
@media (max-width: 992px) {
  body #subheader {
    padding: 120px 0 50px 0 !important;
  }
}

@media (max-width: 575px) {
  body #subheader {
    padding: 110px 0 40px 0 !important;
  }
}

/* ---------------------------------------------------------------
 * Form feedback + honeypot
 * --------------------------------------------------------------- */
.jp-alert {
  padding: 18px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  border-left: 4px solid;
  font-size: 15px;
}

.jp-alert-success {
  background: #e8f6ec;
  border-left-color: #2e7d32;
  color: #1b5e20;
}

.jp-alert-error {
  background: #fdecea;
  border-left-color: #c62828;
  color: #8e1c1c;
}

.jp-alert ul {
  padding-left: 18px;
}

.jp-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Honeypot field: off-screen for people, still fillable by naive bots.
   display:none would let smarter bots skip it. */
.jp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Blog thumbnails: post images vary, so crop to a consistent card ratio. */
.blog-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-thumb:hover {
  transform: scale(1.04);
}

.blog-article p {
  margin-bottom: 1.1rem;
}

/* Post bodies come from the admin rich editor, so they can now carry
   headings, lists and quotes as well as paragraphs. */
.blog-article h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.6rem;
}

.blog-article h3 {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.25rem;
}

.blog-article h2:first-child,
.blog-article h3:first-child {
  margin-top: 0;
}

.blog-article ul,
.blog-article ol {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}

.blog-article li {
  margin-bottom: 0.4rem;
}

.blog-article blockquote {
  margin: 1.5rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 3px solid var(--primary-color);
  color: var(--secondary-color);
  font-size: 1.05rem;
}

.blog-article a {
  color: var(--primary-color);
  text-decoration: underline;
}

.blog-article a:hover {
  color: var(--secondary-color);
}

/* ---------------------------------------------------------------
 * "Why Patients Choose Us" — treatment pages
 * Replaces the old half-split block that paired a tick list with a
 * generic stock photo of Western models.
 * --------------------------------------------------------------- */
.jp-reasons {
  background: #fff;
}

.jp-reason {
  height: 100%;
  padding: 34px 30px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jp-reason:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 14px 34px rgba(18, 40, 90, 0.09);
}

.jp-reason-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: rgba(242, 101, 34, 0.1);
  color: var(--primary-color);
  font-size: 27px;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}

.jp-reason:hover .jp-reason-icon {
  background: var(--primary-color);
  color: #fff;
}

.jp-reason h4 {
  margin-bottom: 9px;
  font-size: 19px;
}

.jp-reason p {
  margin-bottom: 0;
  font-size: 15px;
}

@media (max-width: 767px) {
  .jp-reason {
    padding: 26px 22px;
  }

  .jp-reason-icon {
    width: 50px;
    height: 50px;
    font-size: 23px;
    margin-bottom: 15px;
  }
}

/* ---------------------------------------------------------------
 * Treatment page sections: signs, process, FAQ, related
 * --------------------------------------------------------------- */

/* --- Who it's for --------------------------------------------- */
.jp-sign {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 16px 18px;
  background: #fff;
  border-radius: 11px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: var(--heading-font-color, #12285a);
}

.jp-sign i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 19px;
  color: var(--primary-color);
}

/* --- Treatment process ---------------------------------------- */
.jp-step {
  position: relative;
  height: 100%;
  padding: 34px 26px 28px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.jp-step:hover {
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 12px 30px rgba(18, 40, 90, 0.08);
}

.jp-step-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.jp-step h4 { margin-bottom: 8px; font-size: 18px; }
.jp-step p  { margin-bottom: 0; font-size: 15px; }

/* --- FAQ accordion -------------------------------------------- */
.jp-faq-item {
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.jp-faq-item[open] {
  border-color: rgba(242, 101, 34, 0.35);
}

.jp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: var(--heading-font-color, #12285a);
  list-style: none;
}

/* Hide the native disclosure triangle in both engines */
.jp-faq-item summary::-webkit-details-marker { display: none; }
.jp-faq-item summary::marker { content: ''; }

.jp-faq-item summary:hover { color: var(--primary-color); }

.jp-faq-item summary i {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--primary-color);
  transition: transform 0.25s ease;
}

.jp-faq-item[open] summary i { transform: rotate(180deg); }

.jp-faq-body {
  padding: 0 24px 22px;
}

.jp-faq-body p {
  margin: 0;
  font-size: 15.5px;
}

/* --- Related treatments --------------------------------------- */
.jp-related-card {
  display: block;
  height: 100%;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jp-related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 14px 34px rgba(18, 40, 90, 0.09);
}

.jp-related-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 16px;
}

.jp-related-card h4 {
  margin-bottom: 8px;
  font-size: 18px;
  color: var(--heading-font-color, #12285a);
}

.jp-related-card:hover h4 { color: var(--primary-color); }

.jp-related-card p {
  margin-bottom: 14px;
  font-size: 15px;
}

.jp-related-more {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-color);
}

.jp-related-more i {
  transition: transform 0.25s ease;
  display: inline-block;
}

.jp-related-card:hover .jp-related-more i { transform: translateX(4px); }

@media (max-width: 767px) {
  .jp-step,
  .jp-related-card { padding: 24px 20px; }
  .jp-faq-item summary { padding: 16px 18px; font-size: 16px; }
  .jp-faq-body { padding: 0 18px 18px; }
}

/* ---------------------------------------------------------------
 * Treatment hero images
 * Source photos arrive in whatever shape the camera gave them (the
 * children-dentistry pair range from 1.50 to 0.47 aspect), so crop both
 * to the ratios the layout was designed around instead of letting each
 * image set its own height and push the composition apart.
 * --------------------------------------------------------------- */
.jp-treatment-hero {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.jp-treatment-inset {
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

/* ---------------------------------------------------------------
 * About page — first section image pair
 * The two source photos are 1.50 and 0.67 aspect. Crop each to the
 * shape its slot was designed for, so the staggered composition holds.
 * --------------------------------------------------------------- */
.jp-about-landscape {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.jp-about-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

/* ---------------------------------------------------------------
 * Patient reviews (real Google reviews)
 * --------------------------------------------------------------- */
.jp-rating-card {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
}

.jp-rating-score {
  text-align: center;
  padding-right: 26px;
  border-right: 1px solid rgba(18, 40, 90, 0.1);
}

.jp-rating-score strong {
  display: block;
  font-size: 46px;
  line-height: 1;
  color: var(--secondary-color);
  font-weight: 800;
}

.jp-rating-score .d-stars {
  display: block;
  margin-top: 6px;
  color: #fbbc04;   /* Google's own star colour */
  font-size: 14px;
}

.jp-rating-meta { flex: 1 1 260px; }
.jp-rating-meta p { margin-bottom: 0; }

.jp-review {
  height: 100%;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.jp-review:hover {
  border-color: rgba(242, 101, 34, 0.3);
  box-shadow: 0 12px 30px rgba(18, 40, 90, 0.07);
}

.jp-review .d-stars { color: #fbbc04; font-size: 14px; }

.jp-review p {
  font-size: 15px;
  margin-bottom: 0.9rem;
}

.jp-review p:last-child { margin-bottom: 0; }

.jp-review-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.jp-review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--secondary-color);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.jp-review-who { flex: 1 1 auto; min-width: 0; }

.jp-review-who h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.jp-review-meta {
  font-size: 12.5px;
  color: var(--body-font-color, #6b7590);
}

.jp-review-topic {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(242, 101, 34, 0.1);
  color: var(--primary-color);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Compact variant used on the homepage */
.jp-review-sm { display: flex; flex-direction: column; }

.jp-review-quote {
  flex: 1 1 auto;
  font-size: 14.5px !important;
  margin-bottom: 18px !important;
}

.jp-review-head-sm {
  margin-bottom: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(18, 40, 90, 0.08);
}

.jp-review-head-sm .jp-review-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .jp-rating-card { padding: 22px; gap: 18px; }
  .jp-rating-score { padding-right: 18px; }
  .jp-rating-score strong { font-size: 38px; }
  .jp-review { padding: 22px 20px; }
  .jp-review-topic { display: none; }
}

/* ---------------------------------------------------------------
 * About page — sterilisation & clinic standards
 * Replaces the old two-column wall of text and tick list.
 * --------------------------------------------------------------- */
.jp-standard {
  height: 100%;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jp-standard:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 14px 34px rgba(18, 40, 90, 0.09);
}

.jp-standard-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(242, 101, 34, 0.1);
  color: var(--primary-color);
  font-size: 28px;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}

.jp-standard:hover .jp-standard-icon {
  background: var(--primary-color);
  color: #fff;
}

.jp-standard h4 { margin-bottom: 9px; font-size: 18px; }
.jp-standard p  { margin-bottom: 0; font-size: 15px; }

/* Highlight chips */
.jp-highlight {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  height: 100%;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.08);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--heading-font-color, #12285a);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.jp-highlight:hover {
  border-color: rgba(242, 101, 34, 0.3);
  box-shadow: 0 10px 26px rgba(18, 40, 90, 0.07);
}

.jp-highlight i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 21px;
  color: var(--primary-color);
}

@media (max-width: 767px) {
  .jp-standard  { padding: 26px 22px; }
  .jp-highlight { padding: 16px 18px; }
}

/* ---------------------------------------------------------------
 * Fifth-width column
 * Bootstrap's 12-column grid has no 5-across option, so the treatment
 * grid lays out as 5 + 4 instead of leaving a lone card on its own row.
 * Only applies at desktop; below that the normal col-md/col-sm rules win.
 * --------------------------------------------------------------- */
@media (min-width: 992px) {
  .jp-col-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}

/* ---------------------------------------------------------------
 * Treatment cards — uniform height
 * Descriptions vary in length, so without this the cards end at
 * different heights and the "+" buttons sit at different levels.
 * The card fills its column and the button is pushed to the bottom.
 * --------------------------------------------------------------- */
.jp-tcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(18, 40, 90, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* The template wraps each card in .hover, which has no height of its own. */
.hover:has(.jp-tcard) { height: 100%; }

.jp-tcard > .relative {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.jp-tcard h4 {
  min-height: 2.6em;      /* one- and two-line titles align */
  margin-bottom: 10px;
}

.jp-tcard p {
  flex: 1 1 auto;
  margin-bottom: 20px;
}

.jp-tcard .btn-plus {
  margin-top: auto;       /* pin to the bottom of every card */
  align-self: flex-start;
}

.jp-tcard img {
  height: 62px;
  width: auto;
  object-fit: contain;
}

.jp-tcard:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 101, 34, 0.3);
  box-shadow: 0 14px 34px rgba(18, 40, 90, 0.09);
}

@media (max-width: 991px) {
  .jp-tcard h4 { min-height: 0; }
}

/* Fallback: older engines ignore :has(), so stretch every .hover in a
   treatments row instead. */
.row > [class*="col"] > .hover { height: 100%; }

/* ---------------------------------------------------------------
 * Floating WhatsApp button
 * Desktop only — on phones the sticky action bar already carries
 * WhatsApp, and a float would sit on top of it.
 * --------------------------------------------------------------- */
.jp-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1035;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: 28px;
  background: #25d366;          /* WhatsApp brand green — recognised instantly */
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.jp-wa-float i {
  font-size: 27px;
  line-height: 1;
}

/* Label stays collapsed until hover, so the button reads as an icon at rest. */
.jp-wa-label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: 15px;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin-left 0.35s ease;
}

.jp-wa-float:hover,
.jp-wa-float:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.5);
}

.jp-wa-float:hover .jp-wa-label,
.jp-wa-float:focus-visible .jp-wa-label {
  max-width: 160px;
  opacity: 1;
  margin-left: 10px;
}

.jp-wa-float:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 3px;
}

/* Keep the back-to-top button clear of the float — desktop only, so the
   mobile rule that clears the sticky action bar (and the iOS safe area)
   still applies on phones. */
@media (min-width: 768px) {
  #back-to-top.show {
    bottom: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jp-wa-float,
  .jp-wa-label { transition: none; }
}

/* Phones already have WhatsApp in the sticky bar. */
@media (max-width: 767px) {
  .jp-wa-float { display: none; }
}

/* ---------------------------------------------------------------
 * Always-visible sticky header
 *
 * The template ships an auto-hide header: on3step.js adds .scroll-down
 * while scrolling down, and style.css:327 pulls it off-screen with
 * margin-top:-90px. The header only reappeared when scrolling back up.
 * Neutralising the offset keeps it fixed and visible in both directions;
 * the .smaller class still handles the fixed positioning and shrink.
 * --------------------------------------------------------------- */
@media (min-width: 992px) {
  header.scroll-down,
  header.nav-up,
  header.header-center.scroll-down {
    margin-top: 0;
  }
}

/* ===============================================================
 * HOME HERO BANNER
 *
 * Replaces the old two-slide swiper. One light clinic photo behind a
 * single column of content — badge, headline, treatment shortcuts, the
 * navy "why choose us" card, then the Google rating and CTA.
 *
 * Desktop keeps the identical stacking order and just constrains the
 * column so the photo stays visible beside it; nothing is rearranged
 * between breakpoints. The background image comes in as the --jp-hero-img
 * custom property, set inline in index.php.
 * =============================================================== */

/* --- Solid navy header on home --------------------------------
 * The base template header is dark already; these two rules pin it to
 * the same navy as the hero card and hold that colour once on3step.js
 * adds .smaller on scroll. Beats style.css on load order alone. */
header.jp-header-solid,
header.jp-header-solid.smaller {
  background: var(--secondary-color);
}

/* The template swaps in the dark logo on scroll via an unqualified
 * `header.smaller div#logo .logo-2` rule, and only ever hides the white one
 * under `.scroll-light` — a class no script in this project adds. On the
 * light-header inner pages that is harmless, but here it left both logos
 * showing side by side, the dark one unreadable on the navy bar. This header
 * keeps its navy at every scroll position, so the white logo is the only
 * correct one: hold the dark pair hidden. Outweighs style.css:454 on
 * specificity, not just load order. */
header.jp-header-solid.smaller div#logo .logo-2,
header.jp-header-solid.smaller div#logo .logo-scroll {
  display: none;
}

.jp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Clears the absolutely-positioned header, which the hero sits under. */
  padding: 132px 0 54px;
  background: #eef2f7;
}

.jp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jp-hero-img);
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Scrim: near-opaque behind the text column, clearing towards the right so
   the photo reads. Without it the navy headline loses contrast wherever the
   photo happens to be light. */
.jp-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.93) 42%,
    rgba(255, 255, 255, 0.72) 66%,
    rgba(255, 255, 255, 0.42) 100%
  );
}

.jp-hero-body {
  position: relative;
  max-width: 680px;
}

/* --- Badge ----------------------------------------------------- */
.jp-hero-badge {
  display: inline-block;
  margin-bottom: 22px;
  padding: 9px 18px;
  border-radius: 7px;
  background: var(--primary-color);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* --- Headline -------------------------------------------------- */
.jp-hero-title {
  margin: 0 0 20px;
  font-size: 62px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--secondary-color);
}

/* The accent word: script face, own line, brush underline beneath it. */
.jp-hero-script {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding-bottom: 20px;
  font-family: "Dancing Script", "Urbanist", cursive;
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-color);
}

.jp-hero-swoosh {
  position: absolute;
  left: 0;
  bottom: 4px;
  /* Wider than the word so the stroke runs past it, as a drawn line would. */
  width: 108%;
  height: 16px;
  color: var(--primary-color);
  overflow: visible;
}

/* --- Sub-line -------------------------------------------------- */
.jp-hero-sub {
  margin: 0 0 30px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: #566985;
}

/* --- Treatment shortcut chips ---------------------------------- */
/* --- "Why choose us" card -------------------------------------- */
/* Small screens only. On desktop the hero already carries the badge, the
   headline, the treatment chips and the rating, and this card pushed the
   fold down without adding anything new. On a phone those sit stacked and
   the card earns its place, so it is shown below 992px only. */
.jp-hero-why {
  padding: 24px 28px 26px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: var(--secondary-color);
  box-shadow: 0 16px 40px rgba(18, 40, 90, 0.22);
}

@media (min-width: 992px) {
  .jp-hero-why { display: none; }
}

.jp-hero-why-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.jp-hero-why-shield {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-color);
  color: #fff;
  font-size: 21px;
  line-height: 1;
}

.jp-hero-why-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.jp-hero-why-mark {
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 1px;
}

.jp-hero-why-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jp-hero-why-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.jp-hero-why-list i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 9px;
}

/* --- Rating + CTA row ------------------------------------------ */
.jp-hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 34px;
}

.jp-hero-rating {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.jp-hero-glogo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.jp-hero-rating-label,
.jp-hero-rating-count {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #667a99;
}

.jp-hero-rating-score {
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
  margin: 1px 0 2px;
}

.jp-hero-rating-score strong {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--secondary-color);
}

.jp-hero-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 14px;
  color: var(--primary-color);
}

.jp-hero-rating:hover .jp-hero-rating-score strong {
  color: var(--primary-color);
}

.jp-hero-rating:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
  border-radius: 8px;
}

.jp-hero-cta {
  flex: 0 0 auto;
}

.jp-hero-btn {
  display: block;
  padding: 16px 34px;
  border-radius: 9px;
  background: var(--primary-color);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.jp-hero-btn:hover,
.jp-hero-btn:focus-visible {
  background: var(--secondary-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18, 40, 90, 0.22);
}

/* "Walk-ins Welcome" sits under the button with a hairline rule either
   side, drawn with pseudo-elements rather than extra markup. */
.jp-hero-walkin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: #667a99;
  white-space: nowrap;
}

.jp-hero-walkin::before,
.jp-hero-walkin::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(242, 101, 34, 0.45);
}

/* --- Large desktop --------------------------------------------- */
@media (min-width: 1400px) {
  .jp-hero { padding: 152px 0 66px; }
  .jp-hero-title { font-size: 68px; }
}

/* --- Tablet ---------------------------------------------------- */
@media (max-width: 991px) {
  .jp-hero {
    padding: 118px 0 46px;
  }

  .jp-hero-body {
    max-width: 620px;
  }

  .jp-hero-title { font-size: 50px; }
  .jp-hero-sub   { font-size: 16px; margin-bottom: 26px; }

  /* Photo is cropped much tighter here, so lift the scrim to keep the
     navy headline legible across the whole column. */
  .jp-hero-bg::after {
    background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.9) 58%,
      rgba(255, 255, 255, 0.62) 100%
    );
  }
}

/* --- Phone ----------------------------------------------------- */
@media (max-width: 767px) {
  .jp-hero {
    padding: 104px 0 40px;
  }

  /* Portrait variant of the hero photo. The landscape file keeps its
     subject on the right, which this narrow viewport would crop straight
     off; the phone file centres it instead. Falls back to the desktop
     image if the phone file is ever missing. */
  .jp-hero-bg {
    background-image: var(--jp-hero-img-m, var(--jp-hero-img));
    background-position: center top;
  }

  .jp-hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.87) 34%,
      rgba(255, 255, 255, 0.94) 62%,
      rgba(255, 255, 255, 0.97) 100%
    );
  }

  .jp-hero-badge {
    margin-bottom: 18px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .jp-hero-title {
    font-size: 40px;
    margin-bottom: 16px;
  }

  .jp-hero-script {
    padding-bottom: 16px;
  }

  .jp-hero-swoosh {
    height: 13px;
    bottom: 2px;
  }

  .jp-hero-sub {
    font-size: 14.5px;
    margin-bottom: 24px;
  }

  /* Four across on a phone: shrink the circle and let the row divide the
     width evenly instead of wrapping to two lines. */
  .jp-hero-why {
    padding: 20px 20px 22px;
    margin-bottom: 22px;
    border-radius: 14px;
  }

  .jp-hero-why-head {
    gap: 12px;
    margin-bottom: 15px;
  }

  .jp-hero-why-shield {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
  }

  .jp-hero-why-head h2 { font-size: 16.5px; }

  .jp-hero-why-list li { font-size: 13px; gap: 9px; }
  .jp-hero-why-list i  { width: 16px; height: 16px; font-size: 8px; }

  .jp-hero-foot {
    gap: 18px;
  }

  .jp-hero-rating {
    flex: 1 1 150px;
    gap: 10px;
  }

  .jp-hero-glogo { width: 28px; height: 28px; }

  .jp-hero-rating-label,
  .jp-hero-rating-count { font-size: 11px; }

  .jp-hero-rating-score strong { font-size: 17px; }
  .jp-hero-stars { font-size: 12px; }

  .jp-hero-cta { flex: 1 1 150px; }

  .jp-hero-btn {
    padding: 14px 18px;
    font-size: 14px;
  }

  .jp-hero-walkin {
    justify-content: center;
    margin-top: 9px;
    font-size: 11px;
  }
}

/* Narrow phones: 4 chips across stops fitting, so go two-up. */
@media (max-width: 359px) {
  .jp-hero-title { font-size: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .jp-hero-btn { transition: none; }
}

/* ===============================================================
 * OUR SPECIALTIES — home page service cards
 *
 * Photo-led cards: a real treatment photo, the treatment's line icon in a
 * circular badge straddling the photo edge, then title, description and a
 * "Learn More" link. Deliberately no feature bullets here — the full list
 * lives on each treatment page.
 * =============================================================== */
.jp-spec-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jp-spec-card:hover {
  transform: translateY(-5px);
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 18px 40px rgba(18, 40, 90, 0.12);
}

.jp-spec-media {
  position: relative;
}

/* Source photos range from 3:2 landscape to 2:3 portrait, so crop them all
   to one frame rather than letting each set the card's height. */
.jp-spec-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.jp-spec-card:hover .jp-spec-media img {
  transform: scale(1.05);
}

/* Badge straddles the photo's bottom edge; the card clips overflow, so it is
   positioned from the bottom and the body reserves room for the half that
   hangs below. */
.jp-spec-badge {
  position: absolute;
  left: 50%;
  bottom: -28px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(18, 40, 90, 0.14);
}

.jp-spec-badge img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.jp-spec-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 42px 22px 26px;
  text-align: center;
}

.jp-spec-body h4 {
  margin-bottom: 12px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--secondary-color);
}

.jp-spec-card:hover .jp-spec-body h4 {
  color: var(--primary-color);
}

.jp-spec-body p {
  flex: 1 1 auto;
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.6;
}

.jp-spec-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--heading-font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--primary-color);
}

.jp-spec-more i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.jp-spec-card:hover .jp-spec-more i {
  transform: translateX(5px);
}

.jp-spec-card:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .jp-spec-body { padding: 40px 18px 24px; }
  .jp-spec-body h4 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .jp-spec-card,
  .jp-spec-media img,
  .jp-spec-more i { transition: none; }
}

/* ===============================================================
 * Implant Dentistry landing page  (/services/implant-dentistry)
 * Markup lives in includes/implant-landing.php.
 * Namespaced .jpi-* so nothing here can reach the other treatment
 * pages, which still use the generic service.php template.
 * =============================================================== */

/* Fixed header would otherwise cover the top of an anchored section. */
#solutions, #results, #process, #why, #reviews, #book {
  scroll-margin-top: 100px;
}

/* --- Hero ------------------------------------------------------ */
.jpi-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fills the window on load; min-height rather than height so a long
     offer block or a short laptop screen can still push it taller. */
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px;
  background: linear-gradient(180deg, #fdfaf8 0%, #fff 100%);
}

/* Hero photo as a full-bleed background. The file arrives as the
   --jpi-hero-img custom property set inline on the section, so no filename
   is hard-coded here.

   Spanning the whole row means a 16:9 photo has to cover a box that is
   wider than 16:9, so the overflow is vertical. The vertical anchor is set
   high (20%) rather than centred because the dentist's head sits close to
   the top edge of the artwork; centring sliced it. The copy now sits over
   the photo, so ::after fades it out on the left. */
.jpi-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  background-image: var(--jpi-hero-img);
  background-position: right 20%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Left-hand fade so the navy headline, the USP row and the offer card stay
   readable where they now overlap the clinic photo. */
.jpi-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #fdfaf8 0%,
    rgba(253, 250, 248, 0.96) 24%,
    rgba(253, 250, 248, 0.72) 40%,
    rgba(253, 250, 248, 0.25) 52%,
    rgba(253, 250, 248, 0) 62%
  );
}

.jpi-hero .container { position: relative; z-index: 2; }

.jpi-hero-title {
  margin-bottom: 10px;
  font-size: 38px;
  line-height: 1.2;
  color: var(--secondary-color);
}

.jpi-hero-accent {
  display: block;
  margin-top: 4px;
  font-size: 60px;
  line-height: 1.05;
  color: var(--primary-color);
}

.jpi-hero-lead {
  margin-bottom: 30px;
  font-family: var(--heading-font);
  font-size: 21px;
  font-weight: 600;
  color: var(--secondary-color);
}

/* --- Hero USP row ---------------------------------------------- */
.jpi-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 34px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.jpi-usp {
  max-width: 130px;
}

.jpi-usp i {
  display: block;
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 1;
  color: var(--secondary-color);
}

.jpi-usp span {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
  color: #5a6478;
}

/* --- Hero offer box -------------------------------------------- */
.jpi-offer {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 470px;
  margin-bottom: 28px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(242, 101, 34, 0.45);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(18, 40, 90, 0.06);
}

.jpi-offer-icon {
  flex: 0 0 auto;
  font-size: 38px;
  line-height: 1;
  color: var(--primary-color);
}

.jpi-offer-body strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--secondary-color);
}

.jpi-offer-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  background: rgba(242, 101, 34, 0.1);
  border: 1px solid rgba(242, 101, 34, 0.35);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-color);
}

/* --- Buttons --------------------------------------------------- */
.jpi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 9px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  /* Explicit — the template's body line-height is tall enough to add ~20px
     of dead space to a two-line button. */
  line-height: 1.3;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}

.jpi-btn i { font-size: 17px; line-height: 1; }

.jpi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(18, 40, 90, 0.18);
}

.jpi-btn-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.jpi-btn-primary:hover { background: #d9541a; border-color: #d9541a; color: #fff; }

.jpi-btn-navy {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
}

.jpi-btn-navy:hover { background: #0d1c40; border-color: #0d1c40; color: #fff; }

.jpi-btn-navy span strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.jpi-btn-outline {
  padding: 10px 20px;
  background: transparent;
  border-color: rgba(18, 40, 90, 0.25);
  color: var(--secondary-color);
  font-size: 12.5px;
}

.jpi-btn-outline:hover { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }

/* WhatsApp green — used wherever a booking CTA used to sit. */
.jpi-btn-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.jpi-btn-whatsapp:hover { background: #1da851; border-color: #1da851; color: #fff; }

/* Stacked call / WhatsApp pair that replaced the booking forms. */
.jpr-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 18px;
}

.jpr-contact-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.jpi-btn-wide  { padding-left: 42px; padding-right: 42px; }

/* The form's own submit stays chunkier than the inline buttons. */
.jpi-btn-block {
  width: 100%;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.jpi-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* --- Hero image ------------------------------------------------ */
/* --- Trust bar ------------------------------------------------- */
.jpi-stats { padding: 0 0 20px; background: #fff; }

.jpi-stat-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0;
  padding: 30px 26px;
  background: var(--secondary-color);
  border-radius: 16px;
  list-style: none;
}

.jpi-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
}

.jpi-stat > i {
  flex: 0 0 auto;
  font-size: 33px;
  line-height: 1;
  color: var(--primary-color);
}

.jpi-stat-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
}

.jpi-stat-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* --- Shared section heading ------------------------------------ */
.jpi-section-title {
  margin-bottom: 46px;
  font-size: 32px;
  text-align: center;
  color: var(--secondary-color);
}

.jpi-section-title span { color: var(--primary-color); }

.jpi-section-title::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--primary-color);
  border-radius: 2px;
}

.jpi-section-title-light { color: #fff; }

.jpi-block-title {
  margin-bottom: 26px;
  font-size: 25px;
  color: var(--secondary-color);
}

/* --- Implant solutions ----------------------------------------- */
.jpi-solutions { padding: 70px 0 30px; background: #fff; }

.jpi-solution {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jpi-solution:hover {
  transform: translateY(-5px);
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 16px 36px rgba(18, 40, 90, 0.1);
}

.jpi-solution-media { overflow: hidden; }

.jpi-solution-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.jpi-solution:hover .jpi-solution-media img { transform: scale(1.05); }

.jpi-solution-body { padding: 20px 22px 24px; }

.jpi-solution-body h4 {
  margin-bottom: 8px;
  font-size: 17.5px;
  color: var(--secondary-color);
}

.jpi-solution-body p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* --- Before / after -------------------------------------------- */
.jpi-results { padding: 60px 0 80px; background: #fff; }

.jpi-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(18, 40, 90, 0.1);
}

.jpi-case-half { position: relative; }

.jpi-case-half img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Hairline between the two halves, so the pair reads as one case. */
.jpi-case-half + .jpi-case-half::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  z-index: 1;
}

.jpi-case-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 5px 11px;
  background: rgba(18, 40, 90, 0.8);
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.jpi-case-tag-after {
  left: auto;
  right: 0;
  background: rgba(242, 101, 34, 0.9);
}

/* --- Process --------------------------------------------------- */
.jpi-process {
  padding: 20px 0;
  background: #fff;
}

.jpi-process .container {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--secondary-color);
  border-radius: 18px;
}

.jpi-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0 30px;
  list-style: none;
}

.jpi-pstep {
  position: relative;
  text-align: center;
  color: #fff;
}

.jpi-pstep-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  font-size: 32px;
  color: #fff;
}

/* Dotted rail joining one circle to the next. */
.jpi-pstep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 39px;
  left: calc(50% + 48px);
  width: calc(100% - 78px);
  border-top: 2px dotted rgba(255, 255, 255, 0.3);
}

.jpi-pstep-num {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  background: var(--primary-color);
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.jpi-pstep h4 {
  margin-bottom: 7px;
  font-size: 16.5px;
  color: #fff;
}

.jpi-pstep p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Why choose us --------------------------------------------- */
.jpi-why { padding: 80px 0; background: #fff; }

.jpi-checks { margin: 0; padding: 0; list-style: none; }

.jpi-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #46506a;
}

.jpi-check i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 18px;
  color: var(--primary-color);
}

.jpi-clinic-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

/* --- Google reviews -------------------------------------------- */
.jpi-google {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--heading-font);
  color: var(--secondary-color);
}

.jpi-google-logo { width: 20px; height: 20px; }
.jpi-google strong { font-size: 19px; font-weight: 800; }
.jpi-google-score { font-size: 17px; font-weight: 700; }
.jpi-google-stars { color: #fbbc04; font-size: 13px; letter-spacing: 1px; }
.jpi-google-count { font-size: 13px; font-weight: 500; color: #7a8296; }

/* Slider wrapper.
 *
 * style.css line 8179 repurposes the bare .swiper class for the template's
 * full-bleed hero carousel:
 *
 *     .swiper, .sw-overlay { position:absolute; width:100%; height:100%;
 *                            left:0; top:0 }
 *     .swiper             { background: var(--bg-dark-1) }
 *
 * Left alone that pulls this slider out of its column, stretches it to the
 * full page width and paints it dark, so the cards vanish. The two-class
 * selectors below outrank it and put the element back in normal flow.
 * Padding leaves room for the dots and stops the card's hover shadow being
 * clipped by the overflow:hidden Swiper needs.
 */
.jpi-review-slider.swiper {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  background: transparent;
  padding: 4px 4px 42px;
  margin: 0 -4px;
}

.jpi-review-slider .swiper-slide {
  position: relative;
  background: transparent;
}

/* Let autoHeight measure the card, not a stretched slide. */
.jpi-review-slider .swiper-slide { height: auto; }

/* style.css line 8258 pins .swiper-pagination to the bottom-right of the hero
   slider (width:100px; text-align:right; right:40px). Reset it so the dots
   centre under the card. */
.jpi-review-slider .jpi-review-dots {
  width: 100%;
  left: 0;
  right: auto;
  bottom: 8px;
  text-align: center;
  line-height: 1;
}

.jpi-review-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--secondary-color);
  opacity: 0.22;
  transition: width 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}

.jpi-review-dots .swiper-pagination-bullet-active {
  width: 22px;
  background: var(--primary-color);
  border-radius: 4px;
  opacity: 1;
}

.jpi-review {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 12px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.jpi-review:hover {
  border-color: rgba(242, 101, 34, 0.3);
  box-shadow: 0 10px 24px rgba(18, 40, 90, 0.07);
}

.jpi-review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(18, 40, 90, 0.08);
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary-color);
}

.jpi-review-body h5 {
  margin-bottom: 3px;
  font-size: 14.5px;
  color: var(--secondary-color);
}

.jpi-review-stars {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fbbc04;
}

.jpi-review-body p {
  margin-bottom: 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.jpi-google-more {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.jpi-google-more:hover { color: #d9541a; text-decoration: underline; }

/* --- Closing call to action ------------------------------------ */
.jpi-cta { padding: 0 0 80px; background: #fff; }

.jpi-cta .container {
  padding: 40px 34px;
  background: var(--secondary-color);
  border-radius: 18px;
}

.jpi-cta-lead { color: #fff; }

.jpi-cta-lead h3 {
  margin-bottom: 10px;
  font-size: 27px;
  line-height: 1.25;
  color: #fff;
}

.jpi-cta-lead > p {
  margin-bottom: 22px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.75);
}

.jpi-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
}

.jpi-cta-call i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: #25d366;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  transition: transform 0.25s ease;
}

.jpi-cta-call:hover { color: #fff; }
.jpi-cta-call:hover i { transform: scale(1.07); }

.jpi-cta-call small {
  display: block;
  font-size: 12.5px;
  opacity: 0.75;
}

.jpi-cta-call strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
}

/* Booking form card */
.jpi-form-card {
  height: 100%;
  padding: 24px 24px 26px;
  background: #fff;
  border-radius: 14px;
}

.jpi-form-card h4 {
  margin-bottom: 16px;
  font-size: 19px;
  text-align: center;
  color: var(--secondary-color);
}

.jpi-form-card .form-control {
  height: 46px;
  margin-bottom: 0;
  padding: 10px 14px;
  background: #f5f6f9;
  border: 1px solid rgba(18, 40, 90, 0.12);
  border-radius: 8px;
  font-size: 14px;
  color: var(--secondary-color);
}

.jpi-form-card select.form-control { appearance: none; background-image: none; }

.jpi-form-card .form-control:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.13);
  outline: none;
}

.jpi-form-card .form-control::placeholder { color: #969db0; opacity: 1; }

/* Labels are present for screen readers; the design uses placeholders. */
.jpi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Map card */
.jpi-map-card {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
}

.jpi-map {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
}

.jpi-map-body {
  display: flex;
  gap: 12px;
  padding: 18px 20px 22px;
}

.jpi-map-body > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 24px;
  color: var(--primary-color);
}

.jpi-map-body strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--heading-font);
  font-size: 15px;
  color: var(--secondary-color);
}

.jpi-map-body p {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* --- Responsive ------------------------------------------------ */
@media (max-width: 1199px) {
  .jpi-hero-accent { font-size: 50px; }
  .jpi-stat-list { grid-template-columns: repeat(3, 1fr); }
  .jpi-steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  /* The rails assume a single row — hide them once the steps wrap. */
  .jpi-pstep:not(:last-child)::after { display: none; }
}

@media (max-width: 991px) {
  /* Background drops below the copy on narrow screens, with room reserved
     for it, so the photo never sits underneath the headline. */
  /* Percentage padding resolves against the section's own width, so the
     space reserved below the copy is always exactly the height the image
     will occupy — 941/1672 of its width. A fixed pixel height cannot match
     the ratio at every phone size, and 'cover' then crops the difference,
     which is what was slicing the top off the dentist's head. */
  .jpi-hero { min-height: 0; padding: 110px 0 56.3%; }
  .jpi-hero-bg {
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    /* Same artwork as desktop. The box matches the file's own ratio, so
       'cover' has nothing to crop and the whole shot survives. */
    background-image: var(--jpi-hero-img);
    background-position: center bottom;
    background-size: cover;
  }

  /* Phone layout stacks the photo below the copy instead of behind it, so
     the desktop left-hand fade would only wash the artwork out. */
  .jpi-hero-bg::after { display: none; }
  .jpi-hero-title { font-size: 32px; }
  .jpi-hero-accent { font-size: 44px; }
  .jpi-section-title { font-size: 27px; margin-bottom: 36px; }
  .jpi-process .container { padding-left: 20px; padding-right: 20px; }
  .jpi-steps { padding-left: 0; padding-right: 0; }
  .jpi-why { padding: 60px 0; }
}

@media (max-width: 767px) {
  .jpi-hero-title { font-size: 27px; }
  .jpi-hero-accent { font-size: 36px; }
  .jpi-hero-lead { font-size: 18px; }
  .jpi-usps { gap: 20px 24px; }
  .jpi-usp { max-width: 118px; }
  .jpi-offer { padding: 15px 17px; }
  .jpi-offer-body strong { font-size: 14.5px; }
  .jpi-hero-actions .jpi-btn { flex: 1 1 100%; justify-content: center; }
  .jpi-stat-list { grid-template-columns: repeat(2, 1fr); padding: 24px 18px; }
  .jpi-steps { grid-template-columns: 1fr; row-gap: 32px; }
  .jpi-cta .container { padding: 30px 20px; }
  .jpi-cta-lead h3 { font-size: 23px; }
}

@media (max-width: 479px) {
  .jpi-stat-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .jpi-btn,
  .jpi-solution,
  .jpi-solution-media img,
  .jpi-cta-call i { transition: none; }

  .jpi-btn:hover,
  .jpi-solution:hover { transform: none; }
}










/* ===============================================================
 * Landing page HERO  —  shared by three treatment pages
 *
 *   .jpo-hero  orthodontics      (includes/ortho-landing.php)
 *   .jpr-hero  pediatric, full mouth rehabilitation
 *
 * Orthodontics kept its original .jpo-* class names so its banner renders
 * byte-for-byte as it always has; the newer pages use .jpr-hero-* against
 * the very same rules. Every selector below is therefore doubled — add a
 * rule to one name and you must add it to the other.
 *
 * The photograph arrives as a custom property set inline on the section:
 * --jpo-hero-img on orthodontics, --jpr-hero-img on the newer pages, so the
 * stylesheet never hard-codes a filename.
 *
 * Everything BELOW the hero is the shared .jpr-* section system at the foot
 * of this file, which also carries the scroll-margin rule for the anchors.
 * =============================================================== */

/* --- Hero ------------------------------------------------------ */
.jpo-hero,
.jpr-hero {
  padding: 125px 0 60px;
  background: linear-gradient(180deg, #fdfaf8 0%, #fff 100%);
}

.jpo-eyebrow,
.jpr-hero-eyebrow {
  margin-bottom: 8px;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--secondary-color);
}

.jpo-hero-title,
.jpr-hero-title {
  margin-bottom: 8px;
  font-size: 40px;
  line-height: 1.15;
  color: var(--secondary-color);
}

.jpo-hero-accent,
.jpr-hero-accent {
  display: block;
  font-size: 46px;
  line-height: 1.1;
  color: var(--secondary-color);
}

.jpo-hero-accent em,
.jpr-hero-accent em {
  font-style: normal;
  color: var(--primary-color);
}

.jpo-hero-lead,
.jpr-hero-lead {
  margin-bottom: 26px;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--secondary-color);
}

/* Hero photo as a bleeding background, not a framed column.
 *
 * Mirrors the home hero (.jp-hero-bg above): the image arrives as the
 * --jpo-hero-img custom property set inline on the section, so the stylesheet
 * never hard-codes a filename. It occupies the right side and is feathered
 * into the page on its left edge, so there is no visible box edge.
 */
.jpo-hero,
.jpr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.jpo-hero-bg,
.jpr-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  /* Wide on purpose. background-size:cover on a portrait photo in a landscape
     panel scales to the panel WIDTH, so the image never overflows sideways and
     background-position's X value does nothing — the subject always lands in
     the panel's centre. Widening the panel is therefore the only way to move
     the subject left, out from behind the card that floats over the right. */
  width: 72%;
  background-image: var(--jpo-hero-img, var(--jpr-hero-img));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Feathered edge. Matches the section's own gradient so the photo dissolves
   into the page rather than ending on a hard line, and keeps the headline
   readable wherever the photo happens to be light. */
.jpo-hero-bg::after,
.jpr-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #fdfaf8 0%,
    #fdfaf8 22%,
    rgba(253, 250, 248, 0.72) 38%,
    rgba(253, 250, 248, 0) 64%);
}

/* Floating "Transforming Smiles at Every Age" card */
.jpo-hero-card,
.jpr-hero-card {
  padding: 24px 22px;
  background: #fff;
  border: 1px solid rgba(18, 40, 90, 0.1);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(18, 40, 90, 0.08);
}

.jpo-hero-card h4,
.jpr-hero-card h4 {
  margin-bottom: 16px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--secondary-color);
}

.jpo-hero-card ul,
.jpr-hero-card ul { margin: 0; padding: 0; list-style: none; }

.jpo-hero-card li,
.jpr-hero-card li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #46506a;
}

.jpo-hero-card li:last-child,
.jpr-hero-card li:last-child { margin-bottom: 0; }

.jpo-hero-card li i,
.jpr-hero-card li i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 15px;
  color: var(--primary-color);
}

/* --- Hero: responsive ------------------------------------------ */
@media (max-width: 1199px) {
  .jpo-hero-accent,
  .jpr-hero-accent { font-size: 40px; }
}

@media (max-width: 991px) {
  .jpo-hero,
  .jpr-hero { padding-top: 105px; }
  .jpo-hero-title,
  .jpr-hero-title { font-size: 33px; }
  .jpo-hero-accent,
  .jpr-hero-accent { font-size: 37px; }
}

@media (max-width: 767px) {
  .jpo-hero-title,
  .jpr-hero-title { font-size: 27px; }
  .jpo-hero-accent,
  .jpr-hero-accent { font-size: 31px; }
}

/* The hero's left column is narrower than the implant page's, so the four
   USP items need tighter boxes to stay on one row. */
.jpo-hero .jpi-usps,
.jpr-hero .jpi-usps { gap: 18px 16px; }
.jpo-hero .jpi-usp,
.jpr-hero .jpi-usp { max-width: 96px; }

@media (max-width: 767px) {
  .jpo-hero .jpi-usp,
  .jpr-hero .jpi-usp { max-width: 110px; }
}




/* Below lg the columns stack, so the right-hand photo panel would sit on top
   of the text. Spread it across the full hero as a soft watermark instead. */
@media (max-width: 991px) {
  .jpo-hero-bg,
  .jpr-hero-bg { width: 100%; }
  .jpo-hero-bg::after,
  .jpr-hero-bg::after {
    background: linear-gradient(180deg,
      rgba(253, 250, 248, 0.9) 0%,
      rgba(253, 250, 248, 0.94) 60%,
      #fff 100%);
  }
}









/* ===============================================================
 * TMJ & Orofacial Pain landing page  (/services/tmj-orofacial-pain)
 * Markup lives in includes/tmj-landing.php.
 *
 * Reuses the .jpi-* button, usp, check, stat-bar, google, review-slider
 * and form-card components from the implant landing page — the designs
 * share them exactly. Only what differs is defined here, as .jpt-*.
 * =============================================================== */

#solutions, #process, #book {
  scroll-margin-top: 100px;
}

/* --- Hero ------------------------------------------------------ */
.jpt-hero {
  padding: 125px 0 60px;
  background: linear-gradient(180deg, #fdfaf8 0%, #fff 100%);
}

.jpt-hero-title {
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1.2;
  color: var(--secondary-color);
}

.jpt-hero-accent {
  display: block;
  font-size: 52px;
  line-height: 1.05;
  color: var(--primary-color);
}

.jpt-hero-sub {
  display: block;
  font-size: 26px;
  line-height: 1.2;
  color: var(--secondary-color);
}

.jpt-hero-lead {
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: #5a6478;
}

/* The hero art is a transparent cut-out, not a rectangular photo, so it gets
   no frame, no radius and no cover-crop — it sits directly on the page like
   the approved design. Cropping it to a fixed box would slice her shoulder. */
.jpt-hero-media {
  display: flex;
  justify-content: center;
}

.jpt-hero-img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* --- Symptom checklist card ------------------------------------ */
.jpt-symptom-card {
  padding: 26px 26px 12px;
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(23, 36, 74, 0.07);
}

.jpt-symptom-title {
  margin-bottom: 18px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--secondary-color);
}

.jpt-symptom-title span {
  display: block;
  color: var(--primary-color);
}

/* --- Hero alert ------------------------------------------------ */
.jpt-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 20px;
  background: #fff7f2;
  border: 1px solid #ffd9c2;
  border-radius: 12px;
}

.jpt-alert i {
  flex: 0 0 auto;
  font-size: 26px;
  color: var(--primary-color);
}

.jpt-alert p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #46506a;
}

/* --- Shared section furniture ---------------------------------- */
.jpt-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.jpt-title {
  margin-bottom: 16px;
  font-size: 36px;
  line-height: 1.2;
  color: var(--secondary-color);
}

.jpt-title span { color: var(--primary-color); }

.jpt-lead {
  font-size: 15px;
  line-height: 1.7;
  color: #5a6478;
}

.jpt-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.jpt-head .jpt-lead { margin-bottom: 0; }

.jpt-eyebrow-light { color: #ffb37a; }
.jpt-title-light   { color: #fff; }
.jpt-title-light span { color: #ffb37a; }
.jpt-head-light .jpt-lead { color: rgba(255, 255, 255, 0.72); }

/* --- Understanding TMJ ----------------------------------------- */
.jpt-understand {
  padding: 80px 0;
  background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}

.jpt-understand-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(23, 36, 74, 0.12);
}

.jpt-causes { margin-top: 70px; }

.jpt-sub {
  margin-bottom: 26px;
  font-size: 22px;
  text-align: center;
  color: var(--secondary-color);
}

.jpt-cause-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.jpt-cause {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.jpt-cause:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
}

.jpt-cause-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: var(--primary-color);
  background: #fff3ec;
  border-radius: 11px;
}

.jpt-cause-text {
  font-size: 14px;
  line-height: 1.4;
  color: #46506a;
}

/* --- Treatment solutions --------------------------------------- */
.jpt-solutions { padding: 80px 0; }

.jpt-sol {
  position: relative;
  height: 100%;
  padding: 34px 28px 30px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Accent bar wipes in across the top edge on hover. */
.jpt-sol::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.jpt-sol:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(23, 36, 74, 0.12);
}

.jpt-sol:hover::before { transform: scaleX(1); }

.jpt-sol-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #eef2f9;
}

.jpt-sol-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 20px;
  overflow: hidden;
  font-size: 27px;
  color: var(--primary-color);
  background: #fff3ec;
  border-radius: 50%;
}

.jpt-sol-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jpt-sol h4 {
  margin-bottom: 9px;
  font-size: 18px;
  color: var(--secondary-color);
}

.jpt-sol p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: #5a6478;
}

/* --- Care process: vertical timeline ---------------------------- */
.jpt-process {
  padding: 80px 0;
  background: var(--secondary-color);
}

.jpt-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* The rail. Sits down the centre on desktop and slides to the left
   on narrow screens, where the alternating layout collapses. */
.jpt-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.16);
}

.jpt-tl {
  position: relative;
  width: 50%;
  padding: 0 46px 38px 0;
  text-align: right;
}

.jpt-tl:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 38px 46px;
  text-align: left;
}

.jpt-tl:last-child { padding-bottom: 0; }

.jpt-tl-marker {
  position: absolute;
  top: 0;
  right: -27px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 22px;
  color: #fff;
  background: var(--primary-color);
  border: 4px solid var(--secondary-color);
  border-radius: 50%;
}

.jpt-tl:nth-child(even) .jpt-tl-marker {
  right: auto;
  left: -27px;
}

.jpt-tl-step {
  display: block;
  margin-bottom: 4px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffb37a;
}

.jpt-tl h4 {
  margin-bottom: 7px;
  font-size: 19px;
  color: #fff;
}

.jpt-tl p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Why choose us --------------------------------------------- */
.jpt-why { padding: 80px 0 70px; }

.jpt-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}

.jpt-why-card {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpt-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(23, 36, 74, 0.1);
}

.jpt-why-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  font-size: 25px;
  color: #fff;
  background: var(--secondary-color);
  border-radius: 50%;
}

.jpt-why-num {
  display: block;
  margin-bottom: 2px;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-color);
}

.jpt-why-label {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: #46506a;
}

/* --- Reviews ---------------------------------------------------- */
.jpt-reviews {
  padding: 0 0 80px;
}

.jpt-google {
  justify-content: center;
  margin-top: 18px;
}

.jpt-review {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px 28px;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(23, 36, 74, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpt-review:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px rgba(23, 36, 74, 0.12);
}

/* Decorative quote mark, behind the text. */
.jpt-review::before {
  content: "C";
  position: absolute;
  top: 10px;
  right: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 78px;
  line-height: 1;
  color: #eef2f9;
  pointer-events: none;
}

.jpt-review-stars {
  position: relative;
  margin-bottom: 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #fbbc05;
}

/* flex:1 pushes the author row to the bottom, so cards of different
   quote lengths still line their footers up across the row. */
.jpt-review p {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #46506a;
}

.jpt-review-by {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #edf0f6;
}

.jpt-review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--secondary-color);
  border-radius: 50%;
}

.jpt-review-by strong {
  display: block;
  font-size: 14.5px;
  color: var(--secondary-color);
}

.jpt-review-by small {
  font-size: 12.5px;
  color: #8a93a8;
}

.jpt-reviews .jpi-google-more { margin-top: 34px; }

/* --- Book + visit ----------------------------------------------- */
.jpt-book {
  padding: 80px 0;
  background: var(--secondary-color);
}

.jpt-book-lead {
  margin-bottom: 26px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.72);
}

.jpt-call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  padding: 14px 26px 14px 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.jpt-call:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--primary-color);
}

.jpt-call i {
  font-size: 30px;
  color: #25d366;
}

.jpt-call small {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.jpt-call strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 19px;
}

.jpt-visit h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #fff;
}

.jpt-visit h4 i { margin-right: 7px; color: var(--primary-color); }

.jpt-visit p {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.jpt-visit-hours i { margin-right: 6px; color: var(--primary-color); }

.jpt-map {
  display: block;
  width: 100%;
  height: 190px;
  margin: 14px 0 14px;
  border: 0;
  border-radius: 12px;
}

.jpt-directions {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  color: #ffb37a;
}

.jpt-directions:hover { color: var(--primary-color); }

/* Form sits on white so the fields read clearly against the navy band. */
.jpt-form {
  padding: 36px 34px 30px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}

.jpt-form h3 {
  margin-bottom: 4px;
  font-size: 24px;
  color: var(--secondary-color);
}

.jpt-form-note {
  margin-bottom: 22px;
  font-size: 13.5px;
  color: #8a93a8;
}

.jpt-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
}

.jpt-form .form-control {
  height: 50px;
  padding: 0 15px;
  font-size: 14px;
  background: #f7f9fd;
  border: 1px solid #e2e7f1;
  border-radius: 10px;
}

.jpt-form .form-control:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(240, 118, 46, 0.13);
}

.jpt-privacy {
  margin: 16px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: #8a93a8;
}

.jpt-privacy i { margin-right: 5px; color: #2bb673; }

/* --- Responsive -------------------------------------------------- */
@media (max-width: 1199px) {
  .jpt-hero-accent { font-size: 44px; }
}

@media (max-width: 991px) {
  .jpt-hero { padding: 100px 0 45px; }
  .jpt-hero-img { max-width: 400px; }

  .jpt-understand,
  .jpt-solutions,
  .jpt-process,
  .jpt-why,
  .jpt-book { padding: 60px 0; }

  .jpt-title { font-size: 30px; }

  /* Timeline collapses to a single left-hand rail. */
  .jpt-timeline::before { left: 27px; }

  .jpt-tl,
  .jpt-tl:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 34px 78px;
    text-align: left;
  }

  .jpt-tl-marker,
  .jpt-tl:nth-child(even) .jpt-tl-marker { right: auto; left: 0; }
}

@media (max-width: 575px) {
  .jpt-hero-title { font-size: 28px; }
  .jpt-hero-accent { font-size: 38px; }
  .jpt-hero-sub { font-size: 21px; }
  .jpt-symptom-card { padding: 22px 20px 8px; }
  .jpt-title { font-size: 26px; }
  .jpt-form { padding: 28px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .jpt-sol,
  .jpt-cause,
  .jpt-why-card { transition: none; }
  .jpt-sol:hover,
  .jpt-cause:hover,
  .jpt-why-card:hover { transform: none; }
  .jpt-sol::before { transition: none; }
}

/* ===============================================================
 * Implant Dentistry landing page — redesigned body sections
 * Markup lives in includes/implant-landing.php.
 *
 * The hero still uses the original .jpi-* components and is unchanged.
 * Everything below the hero is namespaced .jpd-* rather than restyling
 * .jpi-*, because the orthodontics landing page shares those same
 * .jpi-* rules and must keep rendering exactly as it does today.
 * =============================================================== */

#why { scroll-margin-top: 100px; }

/* --- Shared section furniture ---------------------------------- */
.jpd-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--primary-color);
}

.jpd-title {
  margin-bottom: 16px;
  font-size: 36px;
  line-height: 1.2;
  color: var(--secondary-color);
}

.jpd-title span { color: var(--primary-color); }

.jpd-lead {
  font-size: 15px;
  line-height: 1.7;
  color: #5a6478;
}

.jpd-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.jpd-head .jpd-lead { margin-bottom: 0; }

.jpd-eyebrow-light { color: #ffb37a; }
.jpd-title-light   { color: #fff; }
.jpd-title-light span { color: #ffb37a; }
.jpd-head-light .jpd-lead { color: rgba(255, 255, 255, 0.72); }

/* --- Trust bar --------------------------------------------------- */
.jpd-stats { padding: 70px 0 60px; }

.jpd-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}

.jpd-stat {
  padding: 30px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpd-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(23, 36, 74, 0.1);
}

.jpd-stat-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  font-size: 25px;
  color: #fff;
  background: var(--secondary-color);
  border-radius: 50%;
}

.jpd-stat-num {
  display: block;
  margin-bottom: 2px;
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-color);
}

.jpd-stat-label {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: #46506a;
}

/* --- Implant solutions ------------------------------------------- */
.jpd-solutions {
  padding: 70px 0;
  background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}

.jpd-sol {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.jpd-sol:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(23, 36, 74, 0.13);
}

.jpd-sol-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.jpd-sol-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.jpd-sol:hover .jpd-sol-media img { transform: scale(1.06); }

.jpd-sol-num {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.jpd-sol-body { padding: 22px 22px 26px; }

.jpd-sol-body h4 {
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--secondary-color);
}

.jpd-sol-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #5a6478;
}

/* --- Before / after ---------------------------------------------- */
.jpd-results { padding: 70px 0; }

.jpd-case {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
}

.jpd-case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #e8ecf4;
}

.jpd-case-half {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.jpd-case-half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jpd-case-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 10px;
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(23, 36, 74, 0.82);
  border-radius: 20px;
}

.jpd-case-tag-after { background: var(--primary-color); }

.jpd-case figcaption {
  padding: 15px 18px 18px;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  color: #46506a;
}

.jpd-results .text-center { margin-top: 40px; }

/* --- Process: vertical timeline ---------------------------------- */
.jpd-process {
  padding: 80px 0;
  background: var(--secondary-color);
}

.jpd-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.jpd-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.16);
}

.jpd-tl {
  position: relative;
  width: 50%;
  padding: 0 46px 38px 0;
  text-align: right;
}

.jpd-tl:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 38px 46px;
  text-align: left;
}

.jpd-tl:last-child { padding-bottom: 0; }

.jpd-tl-marker {
  position: absolute;
  top: 0;
  right: -27px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 22px;
  color: #fff;
  background: var(--primary-color);
  border: 4px solid var(--secondary-color);
  border-radius: 50%;
}

.jpd-tl:nth-child(even) .jpd-tl-marker { right: auto; left: -27px; }

.jpd-tl-step {
  display: block;
  margin-bottom: 4px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffb37a;
}

.jpd-tl h4 { margin-bottom: 7px; font-size: 19px; color: #fff; }

.jpd-tl p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Why choose us ----------------------------------------------- */
.jpd-why { padding: 80px 0; }

.jpd-reasons {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px 22px;
}

.jpd-reasons li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #46506a;
}

.jpd-reasons i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 18px;
  color: var(--primary-color);
}

.jpd-why-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(23, 36, 74, 0.13);
}

/* --- Reviews ------------------------------------------------------ */
.jpd-reviews { padding: 0 0 80px; }

.jpd-google { justify-content: center; margin-top: 18px; }

.jpd-review {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px 28px;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(23, 36, 74, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpd-review:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px rgba(23, 36, 74, 0.12);
}

/* Decorative quote mark, behind the text. */
.jpd-review::before {
  content: "C";
  position: absolute;
  top: 10px;
  right: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 78px;
  line-height: 1;
  color: #eef2f9;
  pointer-events: none;
}

.jpd-review-stars {
  position: relative;
  margin-bottom: 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #fbbc05;
}

/* flex:1 pushes the author row to the bottom, so cards of different
   quote lengths still line their footers up across the row. */
.jpd-review p {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #46506a;
}

.jpd-review-by {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #edf0f6;
}

.jpd-review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--secondary-color);
  border-radius: 50%;
}

.jpd-review-by strong { display: block; font-size: 14.5px; color: var(--secondary-color); }
.jpd-review-by small  { font-size: 12.5px; color: #8a93a8; }

.jpd-reviews .jpi-google-more { margin-top: 34px; }

/* --- Book + visit -------------------------------------------------- */
.jpd-book { padding: 80px 0; background: var(--secondary-color); }

.jpd-book-lead {
  margin-bottom: 26px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.72);
}

.jpd-call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  padding: 14px 26px 14px 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.jpd-call:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--primary-color);
}

.jpd-call i { font-size: 30px; color: #25d366; }
.jpd-call small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.jpd-call strong { display: block; font-family: var(--heading-font); font-size: 19px; }

.jpd-visit h4 { margin-bottom: 10px; font-size: 18px; color: #fff; }
.jpd-visit h4 i { margin-right: 7px; color: var(--primary-color); }

.jpd-visit p {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.jpd-visit-hours i { margin-right: 6px; color: var(--primary-color); }

.jpd-map {
  display: block;
  width: 100%;
  height: 190px;
  margin: 14px 0;
  border: 0;
  border-radius: 12px;
}

.jpd-directions {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  color: #ffb37a;
}

.jpd-directions:hover { color: var(--primary-color); }

.jpd-form {
  padding: 36px 34px 30px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}

.jpd-form h3 { margin-bottom: 4px; font-size: 24px; color: var(--secondary-color); }
.jpd-form-note { margin-bottom: 22px; font-size: 13.5px; color: #8a93a8; }

.jpd-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
}

.jpd-form .form-control {
  height: 50px;
  padding: 0 15px;
  font-size: 14px;
  background: #f7f9fd;
  border: 1px solid #e2e7f1;
  border-radius: 10px;
}

.jpd-form .form-control:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(240, 118, 46, 0.13);
}

.jpd-privacy { margin: 16px 0 0; font-size: 12.5px; text-align: center; color: #8a93a8; }
.jpd-privacy i { margin-right: 5px; color: #2bb673; }

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 991px) {
  .jpd-stats,
  .jpd-solutions,
  .jpd-results,
  .jpd-process,
  .jpd-why,
  .jpd-book { padding: 60px 0; }

  .jpd-title { font-size: 30px; }

  .jpd-timeline::before { left: 27px; }

  .jpd-tl,
  .jpd-tl:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 34px 78px;
    text-align: left;
  }

  .jpd-tl-marker,
  .jpd-tl:nth-child(even) .jpd-tl-marker { right: auto; left: 0; }
}

@media (max-width: 575px) {
  .jpd-title { font-size: 26px; }
  .jpd-form { padding: 28px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .jpd-stat,
  .jpd-sol,
  .jpd-sol-media img { transition: none; }
  .jpd-stat:hover,
  .jpd-sol:hover { transform: none; }
  .jpd-sol:hover .jpd-sol-media img { transform: none; }
}

/* --- Results: "what an implant does" (shown until real cases exist) --- */
.jpd-restore {
  height: 100%;
  padding: 32px 26px 28px;
  text-align: center;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpd-restore:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(23, 36, 74, 0.1);
}

.jpd-restore-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  font-size: 26px;
  color: var(--primary-color);
  background: #fff3ec;
  border-radius: 50%;
}

.jpd-restore h4 {
  margin-bottom: 9px;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--secondary-color);
}

.jpd-restore p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #5a6478;
}

.jpd-cases-note {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  margin: 46px auto 0;
  padding: 24px 30px;
  background: #f7f9fd;
  border: 1px solid #e8ecf4;
  border-left: 4px solid var(--primary-color);
  border-radius: 14px;
}

.jpd-cases-note > i {
  flex: 0 0 auto;
  font-size: 32px;
  color: var(--primary-color);
}

.jpd-cases-note p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: #46506a;
}

.jpd-cases-note .jpi-btn { flex: 0 0 auto; }

/* Real case pairs are 2-up now, so the halves can be wider than tall. */
.jpd-results .jpd-case-half { aspect-ratio: 4 / 3; }

@media (max-width: 767px) {
  .jpd-cases-note {
    flex-direction: column;
    text-align: center;
  }
}

/* Review cards gained a hover lift — honour the motion preference. */
@media (prefers-reduced-motion: reduce) {
  .jpd-review,
  .jpt-review { transition: none; }
  .jpd-review:hover,
  .jpt-review:hover { transform: none; }
}

/* --- Implant hero USPs on mobile --------------------------------
 * Four items in a wrapping flex row break 3 + 1 on a phone, leaving the
 * fourth stranded on its own line. A fixed 2x2 grid of small cards keeps
 * them balanced and reads as deliberate.
 *
 * Scoped to .jpi-hero, which only the implant page uses — the bare
 * .jpi-usps rules are shared with the orthodontics and TMJ heroes and
 * must keep behaving as they do today.
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .jpi-hero .jpi-usps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }

  .jpi-hero .jpi-usp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    min-height: 100%;
    padding: 15px 10px 13px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(23, 36, 74, 0.05);
  }

  .jpi-hero .jpi-usp i {
    margin-bottom: 8px;
    font-size: 24px;
    color: var(--primary-color);
  }

  .jpi-hero .jpi-usp span {
    font-size: 11.5px;
    line-height: 1.35;
    color: #46506a;
  }
}

/* ===============================================================
 * Landing page SECTION SYSTEM  (.jpr-*)  —  shared by three pages
 *
 *   includes/ortho-landing.php       /services/orthodontics
 *   includes/pediatric-landing.php   /services/pediatric-dentistry
 *   includes/fmr-landing.php         /services/full-mouth-rehabilitation
 *
 * One set of section components — head, ribbon, stage/option/change cards,
 * tick and pill lists, step rail, FAQ accordion, review cards, booking band
 * — so the three pages read as one family instead of three redesigns. A page
 * that needs something of its own adds it at the end of this block under its
 * own prefix rather than editing a shared rule.
 *
 * Kept separate from .jpi-*, which the implant and TMJ pages still use and
 * which must keep rendering as it does today. Only the buttons (.jpi-btn),
 * the Google rating strip (.jpi-google) and the alert/honeypot helpers are
 * borrowed from there — those are site components, not page styling.
 * =============================================================== */

#ages, #early, #options, #aligners, #results, #process, #faq, #reviews, #book,
#stages, #signs, #services, #includes, #why, #addresses {
  scroll-margin-top: 100px;
}

/* --- Section furniture ------------------------------------------ */
.jpr-sec { padding: 84px 0; background: #fff; }

/* One tinted variant so consecutive white sections do not run together. */
.jpr-sec-tint { background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%); }

.jpr-head {
  max-width: 730px;
  margin: 0 auto 52px;
  text-align: center;
}

.jpr-head .jpr-lead { margin-bottom: 0; }

.jpr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--primary-color);
}

/* Short rule before the label, so the eyebrow reads as a section marker
   rather than a stray line of small caps. */
.jpr-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
}

.jpr-head .jpr-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
}

.jpr-title {
  margin-bottom: 16px;
  font-size: 38px;
  line-height: 1.18;
  color: var(--secondary-color);
}

.jpr-title span { color: var(--primary-color); }

.jpr-lead {
  margin-bottom: 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: #5a6478;
}

.jpr-lead a { color: var(--primary-color); font-weight: 600; }

/* Light variants, for the two dark bands. */
.jpr-eyebrow-light,
.jpr-eyebrow-light::before,
.jpr-eyebrow-light::after { color: #ffb37a; }
.jpr-eyebrow-light::before,
.jpr-eyebrow-light::after { background: #ffb37a; }

.jpr-title-light { color: #fff; }
.jpr-title-light span { color: #ffb37a; }
.jpr-lead-light { color: rgba(255, 255, 255, 0.72); }

/* --- Trust ribbon ------------------------------------------------ */
/* padding:0 is load-bearing — style.css puts 120px on every <section>,
   which would leave this band four times taller than its contents. */
.jpr-ribbon { padding: 0; background: var(--secondary-color); }

.jpr-ribbon-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two of the five items carry a big number and three do not. Centring each
   cell keeps the short ones from stranding their label at the top of the
   row, level with the taller items' figures. */
.jpr-ribbon-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 16px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

.jpr-ribbon-item:first-child { border-left: 0; }

.jpr-ribbon-item i {
  display: block;
  margin-bottom: 10px;
  font-size: 27px;
  color: var(--primary-color);
}

.jpr-ribbon-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.jpr-ribbon-label {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Age stages --------------------------------------------------- */
.jpr-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.jpr-stage:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 52px rgba(18, 40, 90, 0.13);
}

.jpr-stage-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.jpr-stage-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.jpr-stage:hover .jpr-stage-media img { transform: scale(1.06); }

/* Age chip straddling the photo's lower edge. */
.jpr-stage-age {
  position: absolute;
  left: 22px;
  bottom: -15px;
  padding: 8px 18px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-color);
  border-radius: 30px;
  box-shadow: 0 10px 22px rgba(242, 101, 34, 0.32);
}

.jpr-stage-body {
  flex: 1 1 auto;
  padding: 34px 24px 26px;
}

.jpr-stage-body h3 {
  margin-bottom: 9px;
  font-size: 22px;
  color: var(--secondary-color);
}

.jpr-stage-body p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.68;
  color: #5a6478;
}

/* --- Tick list (shared) ------------------------------------------- */
.jpr-ticks {
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid #eef1f7;
}

.jpr-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #46506a;
}

.jpr-ticks li:last-child { margin-bottom: 0; }

.jpr-ticks i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 15px;
  color: var(--primary-color);
}

/* --- Early orthodontics ------------------------------------------- */
.jpr-early-media { position: relative; }

.jpr-early-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

/* Floating "Age 7" marker, overlapping the photo's bottom-right corner. */
.jpr-early-badge {
  position: absolute;
  right: -14px;
  bottom: 26px;
  display: block;
  padding: 16px 22px;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(18, 40, 90, 0.16);
}

.jpr-early-badge strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-color);
}

.jpr-early-badge small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.3;
  color: #7a8296;
}

.jpr-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.jpr-why li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #46506a;
}

.jpr-why-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 19px;
  color: var(--primary-color);
  background: #fff2ea;
  border-radius: 12px;
}

.jpr-signs {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #e3e9f4;
}

.jpr-signs h4 {
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--secondary-color);
}

.jpr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jpr-pills li {
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--secondary-color);
  background: #fff;
  border: 1px solid #dfe6f2;
  border-radius: 30px;
}

/* --- Treatment options -------------------------------------------- */
.jpr-opt {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.jpr-opt:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 50px rgba(18, 40, 90, 0.13);
}

.jpr-opt-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.jpr-opt-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

.jpr-opt:hover .jpr-opt-media img { transform: scale(1.06); }

.jpr-opt-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 13px;
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary-color);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 30px;
}

.jpr-opt-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 22px 22px 24px;
}

.jpr-opt-body h4 {
  margin-bottom: 8px;
  font-size: 17.5px;
  color: var(--secondary-color);
}

.jpr-opt-body > p {
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.62;
  color: #5a6478;
}

/* flex:1 on the description pushes the "best for" strip to the card's
   foot, so it lines up across a row of uneven descriptions. */
.jpr-opt-body > p:not(.jpr-opt-best) { flex: 1 1 auto; }

.jpr-opt-best {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-top: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--secondary-color);
  border-top: 1px solid #eef1f7;
}

.jpr-opt-best i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 14px;
  color: var(--primary-color);
}

/* --- Clear aligners: the dark band -------------------------------- */
.jpr-aligners,
.jpr-band {
  padding: 84px 0;
  background:
    radial-gradient(120% 90% at 88% 12%, rgba(242, 101, 34, 0.22) 0%, rgba(242, 101, 34, 0) 55%),
    var(--secondary-color);
}

.jpr-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.jpr-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.jpr-benefits i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 17px;
  color: #ffb37a;
}

.jpr-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 30px 0 0;
  padding: 12px 20px;
  font-family: var(--heading-font);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

.jpr-brand i { font-size: 19px; color: #ffb37a; }

.jpr-brand-logo { display: block; max-width: 150px; height: auto; margin-top: 20px; }

.jpr-aligner-media { position: relative; padding-bottom: 60px; }

.jpr-aligner-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* Simulation card overlapping the photo, so the two read as one object. */
.jpr-sim {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 42px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28);
}

.jpr-sim img {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 12px;
}

.jpr-sim h4 {
  margin-bottom: 5px;
  font-size: 15.5px;
  color: var(--secondary-color);
}

.jpr-sim p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5a6478;
}

/* --- Results ------------------------------------------------------ */
.jpr-case {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
}

.jpr-case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #e6ebf5;
}

.jpr-case-half {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.jpr-case-half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jpr-case-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 11px;
  font-family: var(--heading-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(18, 40, 90, 0.82);
  border-radius: 20px;
}

.jpr-case-tag-after { background: var(--primary-color); }

.jpr-case figcaption {
  padding: 15px 18px 18px;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--secondary-color);
}

/* What treatment corrects — shown until consented case photos exist. */
.jpr-change {
  height: 100%;
  padding: 34px 26px 30px;
  text-align: center;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpr-change:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px rgba(18, 40, 90, 0.11);
}

.jpr-change-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  font-size: 27px;
  color: var(--primary-color);
  background: #fff2ea;
  border-radius: 50%;
}

.jpr-change h4 {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--secondary-color);
}

.jpr-change p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #5a6478;
}

.jpr-note {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 900px;
  margin: 46px auto 0;
  padding: 24px 30px;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-left: 4px solid var(--primary-color);
  border-radius: 14px;
}

.jpr-note > i {
  flex: 0 0 auto;
  font-size: 32px;
  color: var(--primary-color);
}

.jpr-note p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: #46506a;
}

.jpr-note .jpi-btn { flex: 0 0 auto; }

/* --- Process: horizontal rail -------------------------------------- */
.jpr-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The connecting line. Inset by half a step so it starts and ends under
   the first and last markers rather than running off the row. */
.jpr-rail::before {
  content: "";
  position: absolute;
  top: 33px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    #d9e0ee 0 8px, transparent 8px 16px);
}

.jpr-rail-step {
  position: relative;
  padding: 0 6px;
  text-align: center;
}

.jpr-rail-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  font-size: 26px;
  color: var(--primary-color);
  background: #fff;
  border: 2px solid #e6ebf5;
  border-radius: 50%;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.jpr-rail-step:hover .jpr-rail-dot {
  color: #fff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* Step number, riding the marker's edge. */
.jpr-rail-dot b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: var(--secondary-color);
  border: 2px solid #fff;
  border-radius: 50%;
}

.jpr-rail-step h4 {
  margin-bottom: 8px;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--secondary-color);
}

.jpr-rail-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #5a6478;
}

/* --- FAQ ------------------------------------------------------------ */
.jpr-faq-item {
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 14px;
}

.jpr-faq-item[open] {
  border-color: rgba(242, 101, 34, 0.35);
  box-shadow: 0 16px 36px rgba(18, 40, 90, 0.07);
}

.jpr-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 24px;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary-color);
  cursor: pointer;
  list-style: none;
}

/* Kill the native disclosure triangle in both engines. */
.jpr-faq-item summary::-webkit-details-marker { display: none; }
.jpr-faq-item summary::marker { content: ""; }

.jpr-faq-item summary i {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--primary-color);
  transition: transform 0.25s ease;
}

.jpr-faq-item[open] summary i { transform: rotate(180deg); }

.jpr-faq-body {
  padding: 0 24px 21px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #5a6478;
}

.jpr-faq-body p { margin: 0; }

/* --- Reviews --------------------------------------------------------- */
.jpr-google { justify-content: center; margin: 18px 0 0; }

.jpr-review {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px 28px;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(18, 40, 90, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jpr-review:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px rgba(18, 40, 90, 0.12);
}

/* Decorative quote mark, behind the text. */
.jpr-review::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  right: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 78px;
  line-height: 1;
  color: #eef2f9;
  pointer-events: none;
}

.jpr-review-stars {
  position: relative;
  margin-bottom: 14px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #fbbc05;
}

/* flex:1 pushes the author row to the bottom, so cards of different
   quote lengths still line their footers up across the row. */
.jpr-review p {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #46506a;
}

.jpr-review-by {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #edf0f6;
}

.jpr-review-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--secondary-color);
  border-radius: 50%;
}

.jpr-review-by strong { display: block; font-size: 14.5px; color: var(--secondary-color); }
.jpr-review-by small  { font-size: 12.5px; color: #8a93a8; }

.jpr-reviews .jpi-google-more { margin-top: 34px; }

/* --- Book + visit ----------------------------------------------------- */
.jpr-book { padding: 84px 0; background: var(--secondary-color); }

.jpr-call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 34px;
  padding: 14px 26px 14px 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.jpr-call:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--primary-color);
}

.jpr-call i { font-size: 30px; color: #25d366; }
.jpr-call small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.jpr-call strong { display: block; font-family: var(--heading-font); font-size: 19px; }

.jpr-visit h4 { margin-bottom: 10px; font-size: 18px; color: #fff; }
.jpr-visit h4 i { margin-right: 7px; color: var(--primary-color); }

.jpr-visit p {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.jpr-visit-hours i { margin-right: 6px; color: var(--primary-color); }

.jpr-map {
  display: block;
  width: 100%;
  height: 190px;
  margin: 14px 0;
  border: 0;
  border-radius: 12px;
}

.jpr-directions {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  color: #ffb37a;
}

.jpr-directions:hover { color: var(--primary-color); }

.jpr-form {
  padding: 36px 34px 30px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}

.jpr-form h3 { margin-bottom: 4px; font-size: 24px; color: var(--secondary-color); }
.jpr-form-note { margin-bottom: 22px; font-size: 13.5px; color: #8a93a8; }

.jpr-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-color);
}

.jpr-optional { font-weight: 400; color: #8a93a8; }

.jpr-form .form-control {
  height: 50px;
  padding: 0 15px;
  font-size: 14px;
  color: var(--secondary-color);
  background: #f7f9fd;
  border: 1px solid #e2e7f1;
  border-radius: 10px;
}

.jpr-form .form-control:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.13);
}

.jpr-privacy { margin: 16px 0 0; font-size: 12.5px; text-align: center; color: #8a93a8; }
.jpr-privacy i { margin-right: 5px; color: #2bb673; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1199px) {
  .jpr-title { font-size: 33px; }

  /* Five markers no longer fit across the container — wrap to 3 + 2 and
     drop the rail, which only makes sense on a single row. */
  .jpr-rail { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .jpr-rail::before { display: none; }
}

@media (max-width: 991px) {
  .jpr-sec,
  .jpr-aligners,
  .jpr-band,
  .jpr-book { padding: 64px 0; }

  .jpr-head { margin-bottom: 40px; }

  .jpr-ribbon-list { grid-template-columns: repeat(3, 1fr); }

  /* With three per row the 4th and 5th start a new row, so the left border
     has to be redrawn from the start of each row instead. */
  .jpr-ribbon-item:nth-child(3n + 1) { border-left: 0; }
  .jpr-ribbon-item:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.11); }

  .jpr-early-media img { aspect-ratio: 16 / 10; }
  .jpr-early-badge { right: 20px; bottom: -18px; }
  .jpr-signs { margin-top: 40px; }

  .jpr-aligner-media { padding-bottom: 0; margin-top: 14px; }

  /* Below lg the copy sits above the photo, so an overlapping card would
     collide with the section below. Put it back in normal flow. */
  .jpr-sim {
    position: static;
    margin-top: 16px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 767px) {
  .jpr-title { font-size: 27px; }

  .jpr-ribbon-list { grid-template-columns: repeat(2, 1fr); }
  .jpr-ribbon-item:nth-child(3n + 1) { border-left: 1px solid rgba(255, 255, 255, 0.11); }
  .jpr-ribbon-item:nth-child(2n + 1) { border-left: 0; }
  .jpr-ribbon-item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.11); }

  .jpr-why { grid-template-columns: 1fr; }
  .jpr-benefits { grid-template-columns: 1fr; }
  .jpr-rail { grid-template-columns: repeat(2, 1fr); }

  .jpr-note { flex-direction: column; text-align: center; }
}

@media (max-width: 575px) {
  .jpr-title { font-size: 24px; }
  .jpr-rail { grid-template-columns: 1fr; }
  .jpr-form { padding: 28px 22px 24px; }
  .jpr-sim { flex-direction: column; text-align: center; }
  .jpr-faq-item summary { padding: 16px 18px; font-size: 15px; }
  .jpr-faq-body { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .jpr-stage,
  .jpr-stage-media img,
  .jpr-opt,
  .jpr-opt-media img,
  .jpr-change,
  .jpr-review,
  .jpr-rail-dot,
  .jpr-faq-item summary i { transition: none; }

  .jpr-stage:hover,
  .jpr-opt:hover,
  .jpr-change:hover,
  .jpr-review:hover { transform: none; }

  .jpr-stage:hover .jpr-stage-media img,
  .jpr-opt:hover .jpr-opt-media img { transform: none; }
}

/* --- Shared additions used by the pediatric and full-mouth pages ------ */

/* .jpr-benefits is white-on-navy for the aligner band. On a light section
   it needs the ordinary text colours — same layout, different palette. */
.jpr-benefits-onlight li { color: #46506a; }
.jpr-benefits-onlight i  { color: var(--primary-color); }

.jpr-why-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 24px 50px rgba(18, 40, 90, 0.13);
}

/* Same slot, but holding a designed poster instead of a photo. A 4:3 "cover"
   crop would cut the heading off the top and the phone number off the bottom,
   so this variant keeps the artwork whole at its own ratio. */
.jpr-why-media-poster img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}

/* Four process steps rather than five. Declared here so .jpr-rail's own
   5-column default and its dashed connector both still apply. */
.jpr-rail-4 { grid-template-columns: repeat(4, 1fr); }

/* .jpr-form .form-control pins every field to 50px, which would flatten a
   textarea to a single line. */
.jpr-form .jpr-textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 15px;
  line-height: 1.6;
  resize: vertical;
}

@media (max-width: 1199px) {
  /* The 5-step rail drops its connector and wraps at this width; the 4-step
     one still fits two-by-two, so it keeps a tidy grid instead. */
  .jpr-rail-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .jpr-why-media { margin-top: 10px; }
}

@media (max-width: 575px) {
  .jpr-rail-4 { grid-template-columns: 1fr; }
}

/* --- Shared additions used by the About page -------------------------- */

/* Two photos, the second overlapping the first's lower corner. */
.jpr-duo { position: relative; padding: 0 0 46px 46px; }

.jpr-duo-main {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

.jpr-duo-inset {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(18, 40, 90, 0.16);
}

/* Titled paragraph blocks under the clinic description. */
.jpr-points { margin-top: 28px; }

.jpr-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.jpr-point:last-child { margin-bottom: 0; }

.jpr-point-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 21px;
  color: var(--primary-color);
  background: #fff2ea;
  border-radius: 14px;
}

.jpr-point h4 {
  margin-bottom: 6px;
  font-size: 17px;
  color: var(--secondary-color);
}

.jpr-point p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #5a6478;
}

/* Compact icon-and-line cards — eight of them, so they stay light. */
.jpr-highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jpr-highlight:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(18, 40, 90, 0.1);
}

.jpr-highlight i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--primary-color);
  background: #fff2ea;
  border-radius: 50%;
}

.jpr-highlight span {
  font-size: 13.5px;
  line-height: 1.5;
  color: #46506a;
}

/* Dentist cards. */
.jpr-doc {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.jpr-doc:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 52px rgba(18, 40, 90, 0.14);
}

.jpr-doc-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.jpr-doc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.55s ease;
}

.jpr-doc:hover .jpr-doc-media img { transform: scale(1.05); }

.jpr-doc-body { padding: 22px 24px 26px; text-align: center; }

.jpr-doc-qual {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 14px;
  font-family: var(--heading-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-color);
  background: #fff2ea;
  border-radius: 30px;
}

.jpr-doc-body h3 { margin-bottom: 4px; font-size: 21px; color: var(--secondary-color); }
.jpr-doc-body p  { margin: 0; font-size: 14px; color: #5a6478; }

/* The About page's map is the section's main object, not a footnote. */
.jpr-map-tall { height: 260px; }

/* Contact page — full-width map of the clinic listing. */
.jp-contact-map-head {
  margin-bottom: 18px;
}

.jp-contact-map {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  border-radius: 12px;
}

.jp-contact-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .jp-contact-map { height: 300px; }
  .jp-contact-map-actions .jpi-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 991px) {
  /* No aspect-ratio override here on purpose. The main slot holds a portrait
     4:5 image, and forcing it to a landscape crop on small screens cut the
     top off it. Keeping 4:5 lets it show whole at every width. */
  .jpr-duo { padding: 0 0 40px 40px; }
}

@media (max-width: 575px) {
  .jpr-duo { padding: 0 0 32px 24px; }
  .jpr-duo-inset { width: 62%; border-width: 4px; }
  .jpr-point { gap: 12px; }
  .jpr-map-tall { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .jpr-highlight,
  .jpr-doc,
  .jpr-doc-media img { transition: none; }
  .jpr-highlight:hover,
  .jpr-doc:hover { transform: none; }
  .jpr-doc:hover .jpr-doc-media img { transform: none; }
}

/* ===============================================================
 * About page hero  (.jpa-*)   /about
 * Markup lives in about.php.
 *
 * Deliberately its own thing rather than the shared .jpr-hero. The five
 * treatment pages lead with a warm, light banner selling one treatment;
 * this page is the practice introducing itself, so it leads with a navy
 * panel, the clinic photo held to the right on a clean split, and the
 * facts on a white card straddling the join.
 *
 * The photograph arrives as --jpa-hero-img, set inline on the section, so
 * the stylesheet never hard-codes a filename.
 * =============================================================== */
.jpa-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 155px 0 132px;
  background: var(--secondary-color);
}

.jpa-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 47%;
  background-image: var(--jpa-hero-img);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* A short feather, not the wide dissolve the treatment heroes use — the
   split is meant to read as a deliberate edge. */
.jpa-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--secondary-color) 0%,
    rgba(18, 40, 90, 0.72) 14%,
    rgba(18, 40, 90, 0.18) 38%,
    rgba(18, 40, 90, 0.10) 100%);
}

.jpa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ffb37a;
}

.jpa-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
}

.jpa-title {
  margin-bottom: 16px;
  font-size: 48px;
  line-height: 1.12;
  color: #fff;
}

.jpa-title span { color: #ffb37a; }

.jpa-lead {
  max-width: 520px;
  margin-bottom: 32px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
}

/* A bordered button reads better than the navy one against a navy panel. */
.jpa-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.jpa-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
}

.jpa-crumb {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.jpa-crumb li { display: inline; color: rgba(255, 255, 255, 0.55); }
.jpa-crumb li + li::before { content: "/"; margin: 0 9px; color: rgba(255, 255, 255, 0.3); }
.jpa-crumb a { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.jpa-crumb a:hover { color: var(--primary-color); }

/* --- The facts card -------------------------------------------- */
/* padding:0 is load-bearing — style.css puts 120px on every <section>. */
.jpa-stats {
  position: relative;
  z-index: 2;
  padding: 0;
  margin-top: -74px;
}

.jpa-stat-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(18, 40, 90, 0.18);
}

.jpa-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
  border-left: 1px solid #eef1f7;
}

.jpa-stat:first-child { border-left: 0; }

.jpa-stat i {
  display: block;
  margin-bottom: 10px;
  font-size: 26px;
  color: var(--primary-color);
}

.jpa-stat-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--secondary-color);
}

.jpa-stat-label {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: #5a6478;
}

/* --- Responsive -------------------------------------------------- */
@media (max-width: 1199px) {
  .jpa-title { font-size: 40px; }
  .jpa-hero-photo { width: 42%; }
}

@media (max-width: 991px) {
  .jpa-hero { padding: 120px 0 120px; }
  .jpa-title { font-size: 34px; }

  /* Below lg the copy takes the full width, so the photo becomes a full
     watermark behind it rather than a column that would sit under the text. */
  .jpa-hero-photo { width: 100%; }
  .jpa-hero-photo::after {
    background: linear-gradient(180deg,
      rgba(18, 40, 90, 0.9) 0%,
      rgba(18, 40, 90, 0.88) 55%,
      rgba(18, 40, 90, 0.95) 100%);
  }

  .jpa-stat-card { grid-template-columns: repeat(3, 1fr); }
  .jpa-stat:nth-child(3n + 1) { border-left: 0; }
  .jpa-stat:nth-child(n + 4) { border-top: 1px solid #eef1f7; }
}

@media (max-width: 767px) {
  .jpa-title { font-size: 29px; }
  .jpa-lead { font-size: 15px; }
  .jpa-stats { margin-top: -54px; }
  .jpa-stat-card { grid-template-columns: repeat(2, 1fr); }
  .jpa-stat:nth-child(3n + 1) { border-left: 1px solid #eef1f7; }
  .jpa-stat:nth-child(2n + 1) { border-left: 0; }
  .jpa-stat:nth-child(n + 3) { border-top: 1px solid #eef1f7; }
}

@media (max-width: 575px) {
  .jpa-hero { padding: 105px 0 100px; }
  .jpa-title { font-size: 26px; }
}

/* .jpi-btn-navy puts the phone number on its own line via a display:block
   strong; the ghost variant needs the same or the label and number run
   together into one string. */
.jpa-btn-ghost span strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}