/* =========================================================
   JING REN TANG — GLOBAL RESPONSIVE
   File: 06-responsive.css
   ========================================================= */


/* ---------------------------------------------------------
   01. TABLET — UP TO 980PX
--------------------------------------------------------- */

@media (max-width: 980px) {

  /* Divi legacy page headings */
  .et_pb_section h1,
  .et_pb_fullwidth_header .header-content h1,
  .et_pb_slider .et_pb_slide_title,
  .et_pb_title_container h1,
  h1.entry-title {
    font-size: 44px !important;
    line-height: 1.08;
  }

  /* Global grids */
  .jrt-grid--3,
  .jrt-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Global split layouts */
  .jrt-section-head,
  .jrt-split {
    grid-template-columns: 1fr;
  }

  .jrt-section-head {
    align-items: start;
    gap: 20px;
  }

  .jrt-section-head > p {
    max-width: 680px;
  }
}


/* ---------------------------------------------------------
   02. MOBILE — UP TO 767PX
--------------------------------------------------------- */

@media (max-width: 767px) {

  /* New JRT page typography */
  .jrt-page p {
    font-size: 16px;
  }

  .jrt-page h1 {
    font-size: 38px !important;
    line-height: 1.08;
  }

  .jrt-page h2 {
    font-size: 31px;
    line-height: 1.12;
  }

  .jrt-page h3 {
    font-size: 24px;
    line-height: 1.18;
  }

  .jrt-page h4 {
    font-size: 21px;
  }

  .jrt-page h5 {
    font-size: 18px;
  }

  /* Divi legacy page headings */
  .et_pb_section h1,
  .et_pb_fullwidth_header .header-content h1,
  .et_pb_slider .et_pb_slide_title,
  .et_pb_title_container h1,
  h1.entry-title {
    font-size: 38px !important;
    line-height: 1.08;
  }

  /* Containers */
  .jrt-container {
    width: min(var(--jrt-container), calc(100% - 34px));
  }

  .jrt-container--narrow {
    width: min(var(--jrt-container-narrow), calc(100% - 34px));
  }

  /* Grids */
  .jrt-grid--2,
  .jrt-grid--3,
  .jrt-grid--4 {
    grid-template-columns: 1fr;
  }

  /* Sections */
  .jrt-section {
    padding: 70px 0;
  }

  .jrt-section--small {
    padding: 52px 0;
  }

  .jrt-section--large {
    padding: 84px 0;
  }

  /* Cards */
  .jrt-card,
  .regulation-card {
    padding: 34px 26px;
  }

  /* Split layouts */
  .jrt-split {
    gap: 40px;
  }

  /* Buttons */
  .jrt-btn,
  .regulation-card .et_pb_button {
    min-height: 46px;
    padding: 11px 20px;
  }
}


/* ---------------------------------------------------------
   03. SMALL MOBILE — UP TO 480PX
--------------------------------------------------------- */

@media (max-width: 480px) {

  .jrt-page h1,
  .et_pb_section h1,
  .et_pb_fullwidth_header .header-content h1,
  .et_pb_slider .et_pb_slide_title,
  .et_pb_title_container h1,
  h1.entry-title {
    font-size: 34px !important;
  }

  .jrt-page h2 {
    font-size: 28px;
  }

  .jrt-page h3 {
    font-size: 22px;
  }

  .jrt-container {
    width: min(var(--jrt-container), calc(100% - 28px));
  }

  .jrt-container--narrow {
    width: min(var(--jrt-container-narrow), calc(100% - 28px));
  }

  .jrt-card,
  .regulation-card {
    padding: 30px 22px;
  }
}


/* ---------------------------------------------------------
   04. REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   FASCIAPUNCTURE® GATEWAY — RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .jrt-fp-hero__inner {
    grid-template-columns: minmax(0, 0.7fr) minmax(420px, 1fr);
  }

  .jrt-fp-condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jrt-fp-atlas {
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1fr);
    gap: 65px;
  }

  .jrt-fp-final {
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
  }

}


@media (max-width: 900px) {

  .jrt-fp-hero {
    min-height: auto;
    align-items: flex-end;
  }

  .jrt-fp-hero__media {
    background:
      linear-gradient(
        180deg,
        rgba(244, 239, 227, 0.04) 0%,
        rgba(244, 239, 227, 0.3) 38%,
        rgba(244, 239, 227, 0.92) 68%,
        rgba(244, 239, 227, 1) 100%
      ),
      url("/wp-content/uploads/fasciapuncture-hero.jpg")
        36% center / cover no-repeat;
  }

  .jrt-fp-hero__inner {
    display: block;
  }

  .jrt-fp-hero__content {
    max-width: 680px;
    margin-left: auto;
    padding-top: clamp(360px, 63vw, 520px);
    padding-bottom: 80px;
  }

  .jrt-fp-intro,
  .jrt-fp-section-heading,
  .jrt-fp-atlas,
  .jrt-fp-professional,
  .jrt-fp-final {
    grid-template-columns: 1fr;
  }

  .jrt-fp-intro {
    gap: 52px;
  }

  .jrt-fp-reading {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 45px;
  }

  .jrt-fp-section-heading {
    gap: 10px;
  }

  .jrt-fp-atlas {
    gap: 55px;
  }

  .jrt-fp-atlas__intro {
    position: static;
  }

  .jrt-fp-editorial {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 45px;
  }

  .jrt-fp-editorial__mark {
    font-size: 8rem;
  }

  .jrt-fp-professional {
    gap: 55px;
  }

  .jrt-fp-final {
    gap: 65px;
  }

}


@media (max-width: 680px) {

  .jrt-fp-gateway .jrt-site-container {
    width: min(calc(100% - 36px), var(--jrt-fp-max));
  }

  .jrt-fp-section {
    padding-block: 68px;
  }

  .jrt-fp-hero__content {
    padding-top: clamp(300px, 93vw, 430px);
    padding-bottom: 62px;
  }

  .jrt-fp-hero h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
  }

  .jrt-fp-hero__subtitle {
    font-size: 1.17rem !important;
  }

  .jrt-fp-hero__actions,
  .jrt-fp-editorial__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .jrt-fp-gateway .jrt-btn {
    width: 100%;
  }

  .jrt-fp-reading {
    display: block;
  }

  .jrt-fp-reading__aside {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
  }

  .jrt-fp-reading__number {
    margin: 0;
    font-size: 2.6rem;
  }

  .jrt-fp-reading__aside .jrt-fp-eyebrow {
    margin: 0;
  }

  .jrt-fp-quote {
    padding-left: 20px;
  }

  .jrt-fp-condition-grid,
  .jrt-fp-feature-grid {
    grid-template-columns: 1fr;
  }

  .jrt-fp-condition-card {
    min-height: 145px;
    padding: 24px;
  }

  .jrt-fp-condition-card h3 {
    margin-top: 26px;
  }

  .jrt-fp-feature-card {
    min-height: 360px;
    padding: 30px 25px;
  }

  .jrt-fp-feature-card__label {
    margin-top: 38px;
  }

  .jrt-fp-editorial {
    display: block;
  }

  .jrt-fp-editorial__mark {
    margin-bottom: 42px;
    font-size: 6.7rem;
    line-height: 0.8;
  }

  .jrt-fp-professional__panel {
    padding: 30px 24px;
  }

  .jrt-fp-philosophy {
    text-align: left;
  }

  .jrt-fp-philosophy__quote {
    margin-top: 38px;
  }

  .jrt-fp-final__navigation > a {
    padding-right: 38px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .jrt-fp-gateway *,
  .jrt-fp-gateway *::before,
  .jrt-fp-gateway *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

}

/* =========================================================
   JRT HERO DESIGN SYSTEM — RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

  .jrt-hero__grid,
  .jrt-hero--method .jrt-hero__grid,
  .jrt-hero--condition .jrt-hero__grid,
  .jrt-hero--editorial .jrt-hero__grid,
  .jrt-hero--case .jrt-hero__grid,
  .jrt-hero--atlas .jrt-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.58fr);
    gap: 55px;
  }

  .jrt-hero--method .jrt-hero__title-main,
  .jrt-hero--editorial .jrt-hero__title-main,
  .jrt-hero--atlas .jrt-hero__title-main {
    font-size: clamp(3.8rem, 8vw, 6.4rem);
  }

}


@media (max-width: 850px) {

  .jrt-hero {
    min-height: auto;
  }

  .jrt-hero__grid,
  .jrt-hero--method .jrt-hero__grid,
  .jrt-hero--condition .jrt-hero__grid,
  .jrt-hero--editorial .jrt-hero__grid,
  .jrt-hero--case .jrt-hero__grid,
  .jrt-hero--atlas .jrt-hero__grid {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .jrt-hero__content,
  .jrt-hero--method .jrt-hero__content {
    grid-column: 1;
    max-width: 720px;
    padding-top: 90px;
    padding-bottom: 50px;
  }

  .jrt-hero__visual {
    min-height: 300px;
    margin-bottom: 70px;
  }

  .jrt-hero--editorial .jrt-hero__visual {
    min-height: 0;
    margin: -20px 0 70px;

    font-size: clamp(6rem, 28vw, 11rem);
  }

  .jrt-hero--atlas .jrt-hero__panel {
    margin-bottom: 70px;
  }

}


@media (max-width: 600px) {

  .jrt-hero__container {
    width: calc(100% - 36px);
  }

  .jrt-hero__content {
    padding-top: 72px;
    padding-bottom: 42px;
  }

  .jrt-hero__eyebrow {
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 22px;

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

  .jrt-hero__eyebrow::before {
    width: 24px;
    margin-top: 0.65em;
  }

  .jrt-hero__title-main,
  .jrt-hero--method .jrt-hero__title-main,
  .jrt-hero--condition .jrt-hero__title-main,
  .jrt-hero--editorial .jrt-hero__title-main,
  .jrt-hero--case .jrt-hero__title-main,
  .jrt-hero--atlas .jrt-hero__title-main {
    font-size: clamp(3rem, 15vw, 4.7rem);
    line-height: 0.94;
  }

  .jrt-hero__title-accent,
  .jrt-hero--condition .jrt-hero__title-accent,
  .jrt-hero--case .jrt-hero__title-accent {
    margin-top: 18px;

    font-size: clamp(1.7rem, 8vw, 2.6rem);
    line-height: 1.08;
  }

  .jrt-hero__lead {
    font-size: 1.12rem;
  }

  .jrt-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .jrt-hero__actions .jrt-btn {
    width: 100%;
  }

  .jrt-hero__link {
    justify-content: center;
    width: 100%;
  }

  .jrt-hero__meta {
    display: block;
  }

  .jrt-hero__meta li {
    margin-bottom: 5px;
  }

  .jrt-hero__meta li::after {
    display: none;
  }

  .jrt-hero__panel {
    padding: 28px 22px;
  }

  .jrt-hero__panel-flow li {
    font-size: clamp(1.45rem, 8vw, 2.25rem);
  }

  .jrt-hero__visual {
    min-height: 240px;
    margin-bottom: 55px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .jrt-hero *,
  .jrt-hero *::before,
  .jrt-hero *::after {
    transition-duration: 0.01ms !important;
  }

}

/* =========================================================
   JRT FAQ — RESPONSIVE
========================================================= */

@media (max-width: 767px) {

  .jrt-faq {
    margin-top: 30px;
  }

  .jrt-faq__summary {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 18px;

    min-height: 68px;
    padding-block: 20px;
  }

  .jrt-faq__question {
    font-size: clamp(1.06rem, 5vw, 1.25rem);
  }

  .jrt-faq__icon {
    width: 28px;
    height: 28px;
  }

  .jrt-faq__content {
    max-width: none;

    padding:
      0
      4px
      28px;
  }

}


@media (max-width: 479px) {

  .jrt-faq__summary {
    grid-template-columns: minmax(0, 1fr) 27px;
    gap: 14px;
  }

  .jrt-faq__icon {
    width: 26px;
    height: 26px;
  }

  .jrt-faq__icon::before,
  .jrt-faq__icon::after {
    width: 10px;
  }

}


/* =========================================================
   JRT ORIENTATION PAGE — RESPONSIVE
========================================================= */


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

@media (max-width: 980px) {

  .jrt-orientation-grid {
    grid-template-columns: 1fr;
  }

  .jrt-orientation-feature {
    grid-template-columns: 1fr;
  }

  .jrt-orientation-feature__content {
    max-width: 760px;
  }

  .jrt-orientation-quote {
    max-width: 680px;
  }

  .jrt-orientation-steps {
    grid-template-columns: 1fr;
  }

  .jrt-orientation-step {
    min-height: auto;
  }

  .jrt-orientation-step__number {
    margin-bottom: 1.2rem;
  }

  .jrt-orientation-safety__grid {
    grid-template-columns: 1fr;
  }

  .jrt-orientation-safety__heading {
    position: static;
  }

  .jrt-orientation-safety__title {
    max-width: 14em;
  }

  .jrt-orientation-methods {
    grid-template-columns: 1fr;
  }

  .jrt-orientation-method {
    min-height: 420px;
  }

  .jrt-orientation-cta {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .jrt-orientation-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .jrt-orientation-cta__actions .jrt-btn {
    width: auto;
  }

}


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

@media (max-width: 767px) {

  .jrt-orientation--consult .jrt-hero--orientation {
    --jrt-hero-min-height: auto;
  }

  .jrt-orientation--consult
  .jrt-hero--orientation
  .jrt-hero__media {
    min-height: 46vh;
  }

  .jrt-orientation--consult
  .jrt-hero--orientation
  .jrt-hero__media img {
    object-position: 62% center;
  }

  .jrt-orientation-card {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 26px 22px;
  }

  .jrt-orientation-card__number {
    padding-top: 0;
  }

  .jrt-orientation-card__title {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
  }

  .jrt-orientation-card__links {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .jrt-orientation-quote {
    padding: 42px 26px;
  }

  .jrt-orientation-steps {
    border-left: 0;
    border-right: 0;
  }

  .jrt-orientation-step {
    padding: 28px 22px;
  }

  .jrt-orientation-safety__list li {
    padding-right: 0;
  }

  .jrt-orientation-method {
    min-height: 0;
    padding: 36px 24px;
  }

  .jrt-orientation-method__content {
    min-height: 360px;
  }

  .jrt-orientation-method__title {
    max-width: 12em;
  }

  .jrt-orientation-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .jrt-orientation-cta__actions .jrt-btn {
    width: 100%;
  }

}


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

@media (max-width: 479px) {

  .jrt-orientation-card {
    padding-inline: 19px;
  }

  .jrt-orientation-quote {
    padding-inline: 22px;
  }

  .jrt-orientation-method {
    padding-inline: 21px;
  }

  .jrt-orientation-safety__notice {
    padding: 20px;
  }

}

/* =========================================================
   JRT HERO PHOTOGRAPHY STYLE GUIDE — RESPONSIVE
========================================================= */


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

@media (max-width: 980px) {

  .jrt-hero--photo {
    --jrt-hero-photo-position-x:
      var(--jrt-hero-photo-position-mobile-x);

    --jrt-hero-photo-position-y:
      var(--jrt-hero-photo-position-mobile-y);
  }

  .jrt-hero--photo .jrt-hero__media::after {
    background:
      linear-gradient(
        90deg,
        rgba(246, 241, 231, 0.96) 0%,
        rgba(246, 241, 231, 0.78) 48%,
        rgba(246, 241, 231, 0.18) 100%
      );
  }

}


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

@media (max-width: 767px) {

  .jrt-hero--photo {
    display: block;
    min-height: auto;

    --jrt-hero-photo-scale: 1;
  }

  /*
   * On mobile the photograph becomes an upper visual area.
   * The content remains readable below or over the lower fade.
   */

  .jrt-hero--photo .jrt-hero__media {
    position: relative;
    inset: auto;

    width: 100%;
    min-height: clamp(340px, 62vh, 520px);
  }

  .jrt-hero--photo .jrt-hero__media img {
    position: absolute;
    inset: 0;
  }

  .jrt-hero--photo .jrt-hero__media::after {
    background:
      linear-gradient(
        180deg,
        rgba(246, 241, 231, 0.02) 0%,
        rgba(246, 241, 231, 0.08) 45%,
        rgba(246, 241, 231, 0.96) 100%
      );
  }

  .jrt-hero--photo .jrt-hero__container {
    position: relative;
    z-index: 2;
  }

  .jrt-hero--photo .jrt-hero__content {
    padding-top: clamp(38px, 9vw, 60px);
    padding-bottom: clamp(62px, 13vw, 90px);
  }

}


/* =========================================================
   MOBILE — PANEL OVER IMAGE
   Add .jrt-hero--mobile-panel-overlap only when desired.
========================================================= */

@media (max-width: 767px) {

  .jrt-hero--mobile-panel-overlap
  .jrt-hero__container {
    margin-top: clamp(-100px, -16vw, -72px);
  }

  .jrt-hero--mobile-panel-overlap
  .jrt-hero__panel {
    box-shadow:
      0 24px 60px rgba(23, 60, 53, 0.15);
  }

}


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

@media (max-width: 479px) {

  .jrt-hero--photo .jrt-hero__media {
    min-height: 320px;
  }

  .jrt-hero--focus-far-right {
    --jrt-hero-photo-position-mobile-x: 67%;
  }

}

/* =========================================================
   JRT PRACTITIONER PAGE — MOBILE FINAL
   Rencontrer votre thérapeute

   File: 06-responsive.css
   Place at the very end of the file.
========================================================= */


/* =========================================================
   01 — TABLET
========================================================= */

@media (max-width: 980px) {

  /* -------------------------------------------------------
     PAGE CONTAINER
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-site-container {
    width: min(calc(100% - 48px), 760px);
  }


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

  #main-content.jrt-practitioner
  .jrt-practitioner-hero {
    --jrt-hero-min-height: auto;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__content {
    max-width: 650px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__visual {
    display: none;
  }


  /* -------------------------------------------------------
     ALL TWO-COLUMN PRACTITIONER SECTIONS
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-practitioner-observation,

  #main-content.jrt-practitioner
  .jrt-practitioner-editorial,

  #main-content.jrt-practitioner
  .jrt-practitioner-origin,

  #main-content.jrt-practitioner
  .jrt-practitioner-values {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(38px, 7vw, 64px);
  }


  /* -------------------------------------------------------
     OBSERVATION
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-practitioner-observation__media {
    width: min(100%, 620px);
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-observation__media img {
    aspect-ratio: 4 / 3;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-observation__content {
    max-width: 720px;
  }


  /* -------------------------------------------------------
     ORIGIN QUOTE
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-practitioner-origin
  .jrt-orientation-quote {
    width: min(100%, 620px);
  }


  /* -------------------------------------------------------
     TIMELINE
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-practitioner-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* -------------------------------------------------------
     VALUES
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-practitioner-values__media {
    width: min(100%, 620px);
  }

}


/* =========================================================
   02 — MOBILE
========================================================= */

@media (max-width: 767px) {

  /* -------------------------------------------------------
     GLOBAL MOBILE WIDTH
  ------------------------------------------------------- */

  #main-content.jrt-practitioner
  .jrt-site-container {
    width: min(calc(100% - 36px), 620px);
  }

  #main-content.jrt-practitioner
  .jrt-fp-section {
    padding-block: clamp(58px, 15vw, 82px);
  }


  /* =======================================================
     HERO — PHOTO ABOVE, CONTENT BELOW
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-hero {
    display: flex;
    min-height: 0;
    flex-direction: column;

    background: #f4efe3;
  }

  /*
   * The portrait becomes a clean upper image on mobile.
   * This prevents text from sitting over the face.
   */

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__media {
    position: relative;
    inset: auto;
    z-index: 0;

    width: 100%;
    height: clamp(360px, 104vw, 520px);

    overflow: hidden;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 72% 34%;

    filter:
      brightness(1)
      contrast(1)
      saturate(0.96);

    transform: none;
  }

  /*
   * Remove the desktop horizontal ivory veil.
   * Keep only a gentle fade at the bottom.
   */

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__media::before {
    display: none;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__media::after {
    background:
      linear-gradient(
        180deg,
        rgba(244, 239, 227, 0) 0%,
        rgba(244, 239, 227, 0.03) 68%,
        rgba(244, 239, 227, 0.96) 100%
      );
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 36px), 620px);
    margin-top: -34px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__grid {
    display: block;
    min-height: 0;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__content {
    max-width: none;
    padding:
      42px
      0
      66px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__eyebrow {
    margin-bottom: 20px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  h1.jrt-hero__title {
    max-width: 9em;
    margin-bottom: 22px;

    font-size: clamp(2.85rem, 13vw, 4.15rem);
    line-height: 0.98;
    letter-spacing: -0.052em;
    text-wrap: balance;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__subtitle {
    max-width: 19em;
    margin-bottom: 20px;

    font-size: clamp(1.3rem, 5.8vw, 1.65rem);
    line-height: 1.36;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__text {
    max-width: 100%;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__text p {
    font-size: 1rem;
    line-height: 1.72;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    margin-top: 28px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__actions
  .jrt-btn {
    width: 100%;
  }


  /* =======================================================
     MOBILE SECTION TYPOGRAPHY
  ======================================================= */

  #main-content.jrt-practitioner
  :is(
    .jrt-practitioner-observation__content,
    .jrt-practitioner-editorial__heading,
    .jrt-practitioner-values__content,
    .jrt-practitioner-reading
  )
  h2 {
    max-width: 100%;

    font-size: clamp(2.25rem, 10.8vw, 3.35rem);
    line-height: 1.055;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin__content h2 {
    max-width: 100%;

    font-size: clamp(2.25rem, 10.8vw, 3.35rem);
    line-height: 1.055;
    letter-spacing: -0.04em;
  }

  #main-content.jrt-practitioner
  .jrt-fp-eyebrow {
    margin-bottom: 14px;
    line-height: 1.45;
  }


  /* =======================================================
     OBSERVATION
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-observation {
    gap: 36px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-observation__media {
    width: 100%;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-observation__media img {
    width: 100%;
    aspect-ratio: 4 / 5;

    object-position: center;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-prose {
    margin-top: 26px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-question {
    margin: 24px 0;
    padding-left: 18px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-question p {
    font-size: clamp(1.35rem, 6.2vw, 1.75rem);
    line-height: 1.38;
  }


  /* =======================================================
     WHY I PRACTICE DIFFERENTLY
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-editorial {
    gap: 26px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-editorial__content
  .jrt-fp-lead {
    font-size: 1.18rem !important;
    line-height: 1.6 !important;
  }


  /* =======================================================
     FASCIAPUNCTURE ORIGIN — DARK SECTION
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-origin {
    gap: 38px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin__content {
    max-width: none;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin
  .jrt-orientation-quote {
    width: 100%;
    padding: 38px 26px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin
  .jrt-orientation-quote::after {
    inset: 10px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin
  .jrt-orientation-quote__mark {
    font-size: 4.6rem;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin
  .jrt-orientation-quote
  blockquote p {
    font-size: clamp(1.35rem, 6vw, 1.7rem);
    line-height: 1.36;
  }


  /* =======================================================
     SECTION HEADING
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-section-heading {
    margin-bottom: 36px;
    text-align: left;
  }

  #main-content.jrt-practitioner
  .jrt-section-heading--center {
    text-align: left;
  }

  #main-content.jrt-practitioner
  .jrt-section-heading__intro {
    margin-inline: 0;
  }

  #main-content.jrt-practitioner
  .jrt-section-heading__title {
    max-width: 100%;

    font-size: clamp(2.2rem, 10.4vw, 3.3rem);
    line-height: 1.06;
  }


  /* =======================================================
     TIMELINE
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-timeline {
    display: grid;
    grid-template-columns: 1fr;

    margin-top: 36px;

    border-top: 1px solid rgba(23, 61, 56, 0.16);
    border-right: 1px solid rgba(23, 61, 56, 0.16);
    border-bottom: 0;
    border-left: 1px solid rgba(23, 61, 56, 0.16);
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-timeline__item {
    min-height: 0;
    padding: 30px 24px 34px;

    border-right: 0;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-timeline__index {
    margin-bottom: 24px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-timeline__item h3 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }


  /* =======================================================
     VALUES
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-values {
    gap: 40px;
  }

  /*
   * On mobile, the consultation photo comes first.
   * It creates a softer entry before the long values text.
   */

  #main-content.jrt-practitioner
  .jrt-practitioner-values__media {
    order: -1;
    width: 100%;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-values__media img {
    width: 100%;
    aspect-ratio: 4 / 5;

    object-position: center;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-values__list {
    gap: 14px;
    margin-top: 26px;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-values__list li {
    padding-left: 24px;
    line-height: 1.58;
  }

  /*
   * Use a CSS escape instead of a literal symbol.
   * This prevents encoding errors such as “â—”.
   */

  #main-content.jrt-practitioner
  .jrt-practitioner-values__list li::before {
    content: "\25CB";
    top: 0.02em;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-values__statement {
    margin-top: 28px;

    font-size: clamp(1.35rem, 6.2vw, 1.8rem);
    line-height: 1.4;
  }


  /* =======================================================
     TRAINING AND ETHICS
  ======================================================= */

  #main-content.jrt-practitioner
  .jrt-practitioner-reading {
    max-width: none;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-reading__body {
    margin-top: 26px;
  }


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

  #main-content.jrt-practitioner
  .jrt-faq {
    margin-top: 28px;
  }

  #main-content.jrt-practitioner
  summary.jrt-faq__question {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 16px;

    min-height: 78px;
    padding: 21px 0;

    font-size: clamp(1.25rem, 5.9vw, 1.55rem);
    line-height: 1.32;
  }

  #main-content.jrt-practitioner
  summary.jrt-faq__question::after {
    width: 32px;
    height: 32px;
  }

  #main-content.jrt-practitioner
  .jrt-faq__answer {
    padding:
      0
      0
      28px;
  }


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

  #main-content.jrt-practitioner
  .jrt-orientation-cta {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }

  #main-content.jrt-practitioner
  .jrt-orientation-cta__title {
    max-width: 100%;

    font-size: clamp(2.3rem, 10.8vw, 3.45rem);
    line-height: 1.055;
  }

  #main-content.jrt-practitioner
  .jrt-orientation-cta__actions {
    width: 100%;
  }

  #main-content.jrt-practitioner
  .jrt-orientation-cta__actions
  .jrt-btn {
    width: 100%;
  }

}


/* =========================================================
   03 — SMALL MOBILE
========================================================= */

@media (max-width: 479px) {

  #main-content.jrt-practitioner
  .jrt-site-container {
    width: calc(100% - 30px);
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__media {
    height: clamp(330px, 112vw, 445px);
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__media img {
    object-position: 73% 32%;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  .jrt-hero__container {
    width: calc(100% - 30px);
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-hero
  h1.jrt-hero__title {
    font-size: clamp(2.65rem, 13.7vw, 3.65rem);
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-observation__media img,

  #main-content.jrt-practitioner
  .jrt-practitioner-values__media img {
    aspect-ratio: 4 / 5;
  }

  #main-content.jrt-practitioner
  .jrt-practitioner-origin
  .jrt-orientation-quote {
    padding: 34px 22px;
  }

}