:root {
  --jf-black: #12110f;
  --jf-camel: #987957;
  --jf-beige: #dfccb1;
  --jf-ivory: #f7f1e8;
  --jf-gold: #c7a15b;
  --jf-lavender: #b6a5c8;
  --jf-lavender-soft: #eee8f4;
  --jf-ink-muted: #655e56;
  --jf-line: rgba(152, 121, 87, .25);
  --jf-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --jf-sans: "Manrope", "Montserrat", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body.storefront-okb {
  background: var(--jf-ivory) !important;
  color: var(--jf-black) !important;
  font-family: var(--jf-sans) !important;
}
body.storefront-okb main { padding-inline: 0 !important; }
h1, h2, h3, .jf-serif { font-family: var(--jf-serif) !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--jf-gold) !important; outline-offset: 3px; }
.jf-container { width: min(100% - 2rem, 1180px); margin-inline: auto; }
.jf-section { padding-block: clamp(4rem, 8vw, 7rem); }
.jf-eyebrow { color: var(--jf-camel); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.jf-title { font-size: clamp(2.35rem, 5vw, 4.75rem); font-weight: 500; letter-spacing: -.035em; line-height: .98; }
.jf-subtitle { color: var(--jf-ink-muted); font-size: clamp(.95rem, 1.4vw, 1.12rem); line-height: 1.75; }
.jf-btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; border-radius: .55rem; padding: .75rem 1.25rem; font-size: .83rem; font-weight: 800; transition: .2s ease; }
.jf-btn:hover { transform: translateY(-2px); }
.jf-btn--gold { background: var(--jf-gold); color: var(--jf-black) !important; }
.jf-btn--dark { background: var(--jf-black); color: white !important; }
.jf-btn--lavender { background: var(--jf-lavender); color: var(--jf-black) !important; }
.jf-btn--outline { border-color: var(--jf-camel); color: var(--jf-camel) !important; background: transparent; }
.jf-card { overflow: hidden; border: 1px solid var(--jf-line); border-radius: .75rem; background: rgba(255,255,255,.7); box-shadow: 0 12px 30px rgba(18,17,15,.05); }
.jf-card img { width: 100%; height: 230px; object-fit: cover; background: #eee5d8; }
.jf-empty-image { display: grid; min-height: 230px; place-items: center; background: linear-gradient(135deg, #eadfce, #f9f4ed); color: var(--jf-camel); }
.jf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.jf-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; }
.jf-notice { border-left: 3px solid var(--jf-gold); background: rgba(199,161,91,.12); padding: 1rem 1.15rem; color: var(--jf-ink-muted); }

.jf-header { position: fixed; inset: 0 0 auto; z-index: 1000; background: rgba(18,17,15,.97); color: white; border-bottom: 1px solid rgba(199,161,91,.28); backdrop-filter: blur(16px); }
.jf-header__row { min-height: 82px; display: flex; align-items: center; gap: 1.5rem; }
.jf-logo { min-width: 150px; display: inline-flex; flex-direction: column; color: var(--jf-gold) !important; line-height: .9; text-align: center; }
.jf-logo strong { font-family: var(--jf-serif); font-size: 2.2rem; font-weight: 600; letter-spacing: .08em; }
.jf-logo small { margin-top: .42rem; font-size: .52rem; letter-spacing: .25em; text-transform: uppercase; }
.jf-nav { margin-left: auto; display: flex; align-items: center; gap: 1.3rem; }
.jf-nav a { color: rgba(255,255,255,.88) !important; font-size: .75rem; font-weight: 700; }
.jf-nav a:hover, .jf-nav a[aria-current="page"] { color: var(--jf-gold) !important; }
.jf-account-link, .jf-cart-link { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white !important; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.jf-account-link:hover, .jf-cart-link:hover { border-color: var(--jf-gold); background: rgba(199,161,91,.1); color: var(--jf-gold) !important; }
.jf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.jf-cart-count { position: absolute; top: -5px; right: -4px; min-width: 19px; height: 19px; padding-inline: 4px; display: grid; place-items: center; border-radius: 999px; background: var(--jf-lavender); color: var(--jf-black); font-size: .64rem; font-weight: 900; }
.jf-menu-button { display: none; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: .4rem; color: white; }
.jf-mobile { display: none; padding: 0 1rem 1rem; }
.jf-mobile a { display: block; min-height: 44px; padding: .75rem; color: white !important; border-bottom: 1px solid rgba(255,255,255,.1); }

.jf-hero { position: relative; min-height: 760px; padding-top: 82px; display: grid; align-items: center; overflow: hidden; background: linear-gradient(100deg, #efe3d3 0 52%, #cbb699 52%); }
.jf-hero::before { content: ""; position: absolute; inset: 82px 0 0 52%; background: radial-gradient(circle at 55% 35%, rgba(247,241,232,.85), transparent 20%), linear-gradient(145deg, rgba(18,17,15,.02), rgba(18,17,15,.24)); }
.jf-hero__content { position: relative; z-index: 2; max-width: 620px; padding-block: 5rem; }
.jf-hero__title { font-size: clamp(3rem, 6.3vw, 6rem); font-weight: 500; line-height: .92; letter-spacing: -.045em; }
.jf-hero__title em { color: var(--jf-camel); font-weight: 500; }
.jf-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.jf-hero__trust { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.25rem; font-size: .72rem; color: var(--jf-ink-muted); }
.jf-hero__visual { position: absolute; inset: 82px 0 0 52%; display: grid; place-items: center; color: rgba(18,17,15,.55); text-align: center; }
.jf-hero__visual picture, .jf-hero__visual img { display: block; width: 100%; height: 100%; }
.jf-hero__visual img { object-fit: cover; object-position: center; }
.jf-hero__visual i { display: block; color: var(--jf-gold); font-size: 4rem; margin-bottom: 1rem; }

.jf-paths { margin-top: -3rem; position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.jf-path { position: relative; isolation: isolate; min-height: 340px; overflow: hidden; padding: 2.2rem; border-radius: .75rem; display: flex; flex-direction: column; justify-content: flex-end; }
.jf-path::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.jf-path--treatment::after { background: linear-gradient(180deg, rgba(18,17,15,.05), rgba(18,17,15,.82)); }
.jf-path--shop::after { background: linear-gradient(180deg, rgba(247,241,232,.12), rgba(238,232,244,.94)); }
.jf-path__image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.75,.25,1); }
.jf-path:hover .jf-path__image { transform: scale(1.035); }
.jf-path__content { position: relative; z-index: 2; }
.jf-path > :not(.jf-path__image):not(.jf-path__content) { position: relative; z-index: 2; }
.jf-path--treatment { background: linear-gradient(135deg, #a88761, #745638); color: white; }
.jf-path--shop { background: linear-gradient(135deg, var(--jf-lavender-soft), #d9cde4); color: var(--jf-black); }
.jf-path h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; }
.jf-path p { max-width: 35rem; margin-top: .65rem; line-height: 1.65; opacity: .85; }
.jf-path a { margin-top: 1.4rem; align-self: flex-start; }

.jf-dark-section { background: var(--jf-black); color: white; }
.jf-home-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.jf-home-result-card { display: block; min-width: 0; overflow: hidden; border: 1px solid rgba(199,161,91,.3); border-radius: .9rem; background: rgba(255,255,255,.045); color: #fff !important; box-shadow: 0 18px 45px rgba(0,0,0,.18); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.jf-home-result-card:hover { border-color: rgba(199,161,91,.7); color: #fff !important; transform: translateY(-5px); box-shadow: 0 26px 60px rgba(0,0,0,.28); }
.jf-home-result-card__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #28241f; }
.jf-home-result-card__media figure { position: relative; min-width: 0; margin: 0; overflow: hidden; }
.jf-home-result-card__media figure + figure { border-left: 1px solid rgba(255,255,255,.45); }
.jf-home-result-card__media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.jf-home-result-card:hover .jf-home-result-card__media img { transform: scale(1.035); }
.jf-home-result-card__media figcaption { position: absolute; bottom: .7rem; left: .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(18,17,15,.78); padding: .35rem .58rem; color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.jf-home-result-card__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; }
.jf-home-result-card__body h3 { color: #fff; font-size: clamp(1.45rem, 2.5vw, 1.9rem); font-weight: 500; }
.jf-home-result-card__body span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .55rem; color: var(--jf-gold); font-size: .7rem; font-weight: 900; }
.jf-home-result-card__body i { transition: transform .25s ease; }
.jf-home-result-card:hover .jf-home-result-card__body i { transform: translateX(5px); }
.jf-lavender-section { background: linear-gradient(135deg, #f6f0f8, #e5dced); }
.jf-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.jf-split--editorial { align-items: center; }
.jf-editorial-media { min-height: 420px; overflow: hidden; margin: 0; border: 1px solid var(--jf-line); border-radius: 1rem; background: #e9dfd1; box-shadow: 0 24px 65px rgba(18,17,15,.1); }
.jf-editorial-media img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.jf-editorial-media--portrait { min-height: 580px; border-radius: 48% 48% .9rem .9rem; }
.jf-editorial-media--portrait img { min-height: 580px; }
.jf-about-values { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.jf-about-values span { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--jf-line); border-radius: 999px; background: rgba(255,255,255,.65); padding: .65rem .85rem; color: var(--jf-ink-muted); font-size: .72rem; font-weight: 800; }
.jf-about-values i { color: var(--jf-camel); }
.jf-credentials-card { margin-top: 2rem; border: 1px solid var(--jf-line); border-radius: .8rem; background: rgba(255,255,255,.7); padding: 1.25rem; color: var(--jf-ink-muted); font-size: .82rem; line-height: 1.65; }
.jf-contact-line { display: flex; gap: .8rem; margin-top: 1.2rem; color: var(--jf-ink-muted); line-height: 1.6; }
.jf-contact-line i { margin-top: .25rem; color: var(--jf-camel); }
.jf-contact-line span { display: grid; }
.jf-contact-line strong { color: var(--jf-black); }
.jf-about-preparation { background: #fffaf4; }
.jf-image-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.jf-image-duo figure { overflow: hidden; margin: 0; border: 1px solid var(--jf-line); border-radius: .9rem; background: #fff; box-shadow: 0 18px 50px rgba(18,17,15,.08); }
.jf-image-duo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.jf-image-duo figcaption { padding: 1rem 1.1rem; color: var(--jf-camel); font-family: var(--jf-serif); font-size: 1.35rem; }
.jf-about-media { min-height: 480px; border-radius: 50% 50% 1rem 1rem; overflow: hidden; background: #d9c5aa; }
.jf-about-media img { width: 100%; height: 100%; object-fit: cover; }
.jf-contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; }
.jf-contact-details { align-self: start; border: 1px solid var(--jf-line); border-radius: .9rem; background: rgba(255,255,255,.62); padding: clamp(1.4rem,3vw,2rem); box-shadow: 0 16px 42px rgba(18,17,15,.06); }
.jf-contact-details .jf-title { margin-top: .5rem; font-size: clamp(2.3rem,4.6vw,4rem); }
.jf-contact-details__list { display: grid; gap: .75rem; margin-top: 1.75rem; }
.jf-contact-detail { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: .8rem; align-items: center; border: 1px solid var(--jf-line); border-radius: .65rem; background: #fff; padding: .9rem; color: var(--jf-ink-muted) !important; font-size: .82rem; line-height: 1.5; }
.jf-contact-detail > i:first-child { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(199,161,91,.15); color: var(--jf-camel); }
.jf-contact-detail > i:last-child { color: var(--jf-camel); font-size: .7rem; }
.jf-contact-detail span { display: grid; gap: .15rem; }
.jf-contact-detail strong { color: var(--jf-black); }
.jf-contact-details__note { margin-top: 1.25rem; color: var(--jf-ink-muted); font-size: .78rem; line-height: 1.65; }
.jf-contact-presence { background: linear-gradient(145deg, #eadfce, #f7f1e8); border-top: 1px solid var(--jf-line); }
.jf-contact-presence .jf-section-heading .jf-subtitle { max-width: 720px; margin-top: 1rem; }
.jf-contact-presence__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 1.25rem; align-items: start; margin-top: 2.5rem; }
.jf-location-card, .jf-instagram-card { min-width: 0; overflow: hidden; border: 1px solid rgba(152,121,87,.3); border-radius: 1rem; background: #fff; box-shadow: 0 22px 58px rgba(18,17,15,.1); }
.jf-location-card__map { height: 430px; overflow: hidden; background: #ded4c6; }
.jf-location-card__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.jf-location-card__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem; }
.jf-location-card__body h3 { margin-top: .25rem; font-size: clamp(1.45rem,2.4vw,1.9rem); font-weight: 600; line-height: 1.05; }
.jf-location-card__body .jf-btn { flex: 0 0 auto; }
.jf-instagram-card { background: var(--jf-black); color: #fff; }
.jf-instagram-card__image { position: relative; display: block; overflow: hidden; background: #fff; }
.jf-instagram-card__image::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid rgba(199,161,91,.3); pointer-events: none; }
.jf-instagram-card__image img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.jf-instagram-card__image:hover img { transform: scale(1.02); }
.jf-instagram-card__body { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; padding: 1.4rem; }
.jf-instagram-card__icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(199,161,91,.38); border-radius: 50%; background: rgba(199,161,91,.12); color: var(--jf-gold); font-size: 1.25rem; }
.jf-instagram-card__body h3 { margin-top: .25rem; color: #fff; font-family: var(--jf-sans) !important; font-size: 1.45rem; }
.jf-instagram-card__body p:not(.jf-eyebrow) { margin-top: .5rem; color: #bfb7ae; font-size: .78rem; line-height: 1.65; }
.jf-instagram-card__body .jf-btn { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; }
.jf-form { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--jf-line); border-radius: .75rem; background: white; }
.jf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.jf-field { display: grid; gap: .4rem; }
.jf-field--full { grid-column: 1 / -1; }
.jf-field label { font-size: .75rem; font-weight: 800; }
.jf-field input:not([type="checkbox"]), .jf-field select, .jf-field textarea { width: 100%; border: 1px solid #d9cdbd; border-radius: .4rem; background: white; padding: .8rem .9rem; color: var(--jf-black); }
.jf-field input:focus, .jf-field select:focus, .jf-field textarea:focus { border-color: var(--jf-camel); box-shadow: 0 0 0 3px rgba(152,121,87,.14); outline: none; }
.jf-errors { color: #8f2d2d; font-size: .76rem; }
.jf-message { width: min(100% - 2rem, 1180px); margin: 1rem auto; border-radius: .5rem; padding: 1rem; background: #e8f5e9; color: #245d2b; }

.jf-treatment-hero { padding: 10rem 0 5rem; background: linear-gradient(110deg, var(--jf-black), #2b251f); color: white; }
.jf-treatment-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.jf-treatment-hero h1 { max-width: 13ch; font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 500; line-height: .92; }
.jf-treatment-hero h1 em { color: var(--jf-gold); }
.jf-treatment-hero__image { min-height: 460px; overflow: hidden; border-radius: 50% 50% .75rem .75rem; background: linear-gradient(135deg, #574637, #a48664); }
.jf-treatment-hero__image picture { display: block; width: 100%; height: 100%; min-height: 460px; }
.jf-treatment-hero__image img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: center; }
.jf-treatment-hero--capilar { background: radial-gradient(circle at 74% 36%, rgba(199,161,91,.12), transparent 28%), linear-gradient(112deg, #0b0b0a, #28221c); }
.jf-treatment-hero--detail { background: radial-gradient(circle at 72% 32%, rgba(152,121,87,.18), transparent 30%), linear-gradient(112deg, #0b0b0a, #28221c); }
.jf-treatment-hero__lead { max-width: 620px; margin: 1.25rem 0 1.6rem; color: #d9d2ca; font-size: 1rem; line-height: 1.8; }
.jf-treatment-hero__meta { margin-top: 1rem; color: #c7beb5; font-size: .78rem; }
.jf-treatment-hero__quote { margin-top: 1rem; color: var(--jf-gold); font-family: var(--jf-serif); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.1; }
.jf-treatment-hero__placeholder { min-height: 460px; background: linear-gradient(135deg, #3a3028, #9a7b59); color: #d8b56f; }
.jf-section--compact { padding-block: clamp(3rem, 6vw, 5rem); }
.jf-section--sand { background: #eadfce; }
.jf-section-heading { max-width: 760px; }
.jf-section-heading--center { margin-inline: auto; text-align: center; }
.jf-section-heading .jf-subtitle { margin-top: 1rem; }
.jf-concern-grid, .jf-process { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.jf-concern-grid { margin-top: 2rem; }
.jf-concern, .jf-step { padding: 1.5rem; border: 1px solid var(--jf-line); border-radius: .7rem; background: rgba(255,255,255,.62); text-align: center; }
.jf-concern i, .jf-step i { color: var(--jf-camel); font-size: 1.8rem; }
.jf-concern h3 { margin-top: .75rem; font-size: 1.55rem; }
.jf-concern p { margin-top: .35rem; color: var(--jf-ink-muted); font-size: .84rem; line-height: 1.55; }
.jf-diagnosis-block { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin-top: 2rem; border: 1px solid rgba(152,121,87,.3); border-radius: .8rem; background: #fff; padding: 1.5rem; box-shadow: 0 14px 34px rgba(18,17,15,.06); }
.jf-diagnosis-block__icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: var(--jf-black); color: var(--jf-gold); }
.jf-diagnosis-block h3 { margin-top: .3rem; font-size: 1.8rem; }
.jf-diagnosis-block p { margin-top: .25rem; color: var(--jf-ink-muted); line-height: 1.6; }
.jf-diagnosis-block a { display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem; color: var(--jf-camel); font-size: .82rem; font-weight: 800; }
.jf-treatment-grid { margin-top: 2rem; }
.jf-landing-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; }
.jf-landing-grid .jf-notice, .jf-landing-grid .jf-subtitle + .jf-notice, .jf-landing-grid .jf-list, .jf-landing-grid > div > .jf-subtitle { margin-top: 1.25rem; }
.jf-list { display: grid; gap: .75rem; margin-top: 1.25rem; }
.jf-list li { display: flex; gap: .7rem; line-height: 1.6; }
.jf-list li::before { content: "✦"; color: var(--jf-gold); }
.jf-method-section { background: radial-gradient(circle at 92% 10%, rgba(199,161,91,.12), transparent 24%), var(--jf-black); color: #fff; }
.jf-method-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: end; }
.jf-method-intro > p { color: #c9c1b8; line-height: 1.8; }
.jf-method-steps { margin-top: 2.5rem; }
.jf-method-steps .jf-step { position: relative; border-color: rgba(199,161,91,.28); background: rgba(255,255,255,.035); color: #fff; }
.jf-method-steps .jf-step > span { display: inline-grid; min-width: 38px; height: 38px; place-items: center; border: 1px solid var(--jf-gold); border-radius: 50%; color: var(--jf-gold); font-size: .72rem; font-weight: 900; }
.jf-method-steps .jf-step i { display: block; margin: 1rem auto .65rem; color: var(--jf-gold); }
.jf-method-steps .jf-step h3 { margin-top: .8rem; color: #fff; font-size: 1.5rem; }
.jf-method-steps .jf-step p { margin-top: .45rem; color: #bfb7ae; font-size: .82rem; line-height: 1.6; }
.jf-method-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; margin-top: 2.75rem; }
.jf-method-gallery figure { overflow: hidden; border: 1px solid rgba(199,161,91,.25); border-radius: .7rem; background: #1c1a17; }
.jf-method-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.jf-method-gallery figcaption { display: grid; gap: .15rem; padding: .9rem; }
.jf-method-gallery figcaption strong { font-family: var(--jf-serif); font-size: 1rem; }
.jf-method-gallery figcaption span { color: #bdb4aa; font-size: .68rem; line-height: 1.4; }
.jf-method-results { margin-top: 4rem; border-top: 1px solid rgba(199,161,91,.3); padding-top: 3rem; }
.jf-method-results h3 { margin-top: .3rem; font-size: clamp(2rem,4vw,3.5rem); }
.jf-method-results .jf-grid-3 { margin-top: 1.5rem; }
.jf-method-disclaimer { margin-top: 1rem; color: #a9a197; font-size: .72rem; line-height: 1.6; }
.jf-info-panel { border: 1px solid var(--jf-line); border-radius: .8rem; background: #fff; padding: 1.5rem; box-shadow: 0 14px 34px rgba(18,17,15,.06); }
.jf-info-panel h3 { font-size: 1.7rem; }
.jf-info-panel dl { display: grid; gap: 1.2rem; margin-top: 1rem; }
.jf-info-panel dd { margin-top: .35rem; color: var(--jf-ink-muted); line-height: 1.65; }
.jf-treatment-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.jf-treatment-gallery figure { overflow: hidden; border: 1px solid var(--jf-line); border-radius: .75rem; background: #fff; }
.jf-treatment-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.jf-treatment-gallery figcaption { padding: .85rem 1rem; color: var(--jf-ink-muted); font-size: .75rem; line-height: 1.5; }
.jf-faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; align-items: start; }
.jf-faq { border-top: 1px solid var(--jf-line); }
.jf-faq details { border-bottom: 1px solid var(--jf-line); padding: 1rem 0; }
.jf-faq summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.jf-faq summary::after { content: "+"; color: var(--jf-camel); }
.jf-faq details[open] summary::after { content: "−"; }
.jf-faq details p { padding-top: .8rem; color: var(--jf-ink-muted); line-height: 1.7; }
.jf-result-pair { display: grid; grid-template-columns: 1fr 1fr; }
.jf-result-pair figure { position: relative; }
.jf-result-pair img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.jf-result-pair figcaption { position: absolute; left: .55rem; bottom: .55rem; padding: .25rem .5rem; background: rgba(18,17,15,.78); color: white; font-size: .65rem; text-transform: uppercase; }
.jf-treatment-cta { background: var(--jf-beige); }
.jf-treatment-cta .jf-container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.jf-treatment-cta p:not(.jf-eyebrow) { max-width: 720px; margin-top: 1rem; color: #5f574f; line-height: 1.7; }
.jf-diagnosis-strip { padding-block: 3.5rem; background: #f2e8da; border-block: 1px solid var(--jf-line); }
.jf-diagnosis-strip h2 { margin-top: .4rem; font-size: clamp(2rem,4vw,3.4rem); }
.jf-diagnosis-strip__items { display: grid; gap: .75rem; margin-top: 1.5rem; }
.jf-diagnosis-strip__items a { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; border: 1px solid var(--jf-line); border-radius: .7rem; background: #fff; padding: 1rem 1.2rem; }
.jf-diagnosis-strip__items span { color: var(--jf-camel); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.jf-footer { background: var(--jf-black); color: white; border-top: 1px solid rgba(199,161,91,.35); }
.jf-footer__grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1fr; gap: 2rem; padding-block: 4rem; }
.jf-footer h2 { color: var(--jf-gold); font-family: var(--jf-sans) !important; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.jf-footer a, .jf-footer p { color: rgba(255,255,255,.72) !important; font-size: .82rem; line-height: 1.8; }
.jf-footer__links { display: grid; gap: .2rem; margin-top: 1rem; }
.jf-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.3rem; }

/* Shop pages: lavender is the purchase cue. */
.jf-shop-hero { margin-top: 82px; padding: clamp(4rem, 8vw, 7rem) 0; background: linear-gradient(100deg, var(--jf-ivory), var(--jf-lavender-soft)); }
.okb-product-card, .producto-card { border-color: rgba(182,165,200,.5) !important; }
.okb-product-card button, .okb-product-card .okb-btn-primary { background: var(--jf-lavender) !important; color: var(--jf-black) !important; }
.okb-cart-page, .okb-checkout { --color-accent: var(--jf-lavender) !important; }

@media (max-width: 980px) {
  .jf-header__row { gap: .55rem; }
  .jf-logo { min-width: 120px; margin-right: auto; }
  .jf-nav { display: none; }
  .jf-menu-button { display: grid; place-items: center; margin-left: 0; }
  .jf-mobile[aria-hidden="false"] { display: block; }
  .jf-header__row > .jf-btn { display: none; }
  .jf-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .jf-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .jf-contact-grid, .jf-footer__grid { grid-template-columns: 1fr 1fr; }
  .jf-method-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jf-treatment-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .jf-container { width: min(100% - 1.25rem, 1180px); }
  .jf-header__row { min-width: 0; gap: .4rem; }
  .jf-logo { width: 100px; min-width: 100px; flex: 0 0 100px; }
  .jf-logo strong { font-size: 1.9rem; }
  .jf-logo small { font-size: .42rem; letter-spacing: .15em; }
  .jf-account-link, .jf-cart-link, .jf-menu-button { width: 40px; height: 40px; flex: 0 0 40px; }
  .jf-hero { min-height: 900px; background: linear-gradient(180deg, #efe3d3 0 72%, #cbb699 72%); align-items: start; }
  .jf-hero::before { inset: 72% 0 0; }
  .jf-hero__content { padding-top: 4rem; }
  .jf-hero__title { font-size: clamp(3rem, 14vw, 4.6rem); }
  .jf-hero__visual { inset: 72% 0 0; }
  .jf-hero__visual p { display: none; }
  .jf-hero__visual i { font-size: 2.8rem; }
  .jf-paths { grid-template-columns: 1fr; margin-top: 0; }
  .jf-path { min-height: 290px; }
  .jf-grid-3, .jf-grid-4, .jf-split, .jf-contact-grid, .jf-treatment-hero__grid, .jf-landing-grid, .jf-footer__grid, .jf-concern-grid, .jf-process, .jf-method-intro, .jf-faq-layout, .jf-home-results-grid, .jf-contact-presence__grid { grid-template-columns: minmax(0, 1fr); }
  .jf-treatment-hero__grid > *, .jf-landing-grid > *, .jf-method-intro > * { min-width: 0; }
  .jf-treatment-hero__lead, .jf-treatment-hero__image { width: 100%; max-width: 100%; }
  .jf-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
  .jf-card img, .jf-empty-image { min-height: 180px; height: 180px; }
  .jf-treatment-hero { padding-top: 8rem; }
  .jf-treatment-hero__image, .jf-treatment-hero__image img, .jf-treatment-hero__placeholder { min-height: 320px; }
  .jf-method-gallery, .jf-treatment-gallery { grid-template-columns: 1fr; }
  .jf-method-gallery img, .jf-treatment-gallery img { aspect-ratio: 16/10; }
  .jf-diagnosis-block { grid-template-columns: 1fr; }
  .jf-treatment-cta .jf-container { align-items: flex-start; flex-direction: column; }
  .jf-diagnosis-strip__items a { grid-template-columns: 1fr auto; }
  .jf-diagnosis-strip__items span { grid-column: 1/-1; }
  .jf-form-grid { grid-template-columns: 1fr; }
  .jf-field--full { grid-column: auto; }
  .jf-location-card__map { height: 320px; }
  .jf-location-card__body { align-items: flex-start; flex-direction: column; }
  .jf-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   Treatment experience v2
   Clear paths, premium cards and accessible motion.
   ========================================================= */
html { scroll-padding-top: 142px; }
[id] { scroll-margin-top: 142px; }
.jf-grid-empty { grid-column: 1 / -1; }
.jf-btn--ghost { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.04); color: #fff !important; }
.jf-btn--ghost:hover { border-color: var(--jf-gold); background: rgba(199,161,91,.12); color: #fff !important; }
.jf-text-link { display: inline-flex; align-items: center; gap: .65rem; color: var(--jf-camel) !important; font-size: .82rem; font-weight: 800; }
.jf-text-link i { transition: transform .25s ease; }
.jf-text-link:hover i { transform: translateX(5px); }

.jf-scroll-progress { position: fixed; z-index: 1200; inset: 0 0 auto; height: 3px; pointer-events: none; }
.jf-scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--jf-gold), #efd89d); box-shadow: 0 0 14px rgba(199,161,91,.6); }

.jf-breadcrumb { display: flex; max-width: 100%; align-items: center; gap: .55rem; margin-bottom: 1.6rem; overflow: hidden; color: var(--jf-ink-muted); font-size: .68rem; font-weight: 700; }
.jf-breadcrumb a, .jf-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-breadcrumb i { flex: 0 0 auto; font-size: .48rem; opacity: .55; }
.jf-breadcrumb--dark { color: rgba(255,255,255,.62); }
.jf-breadcrumb--dark a { color: rgba(255,255,255,.76) !important; }
.jf-breadcrumb--dark a:hover { color: var(--jf-gold) !important; }

.jf-treatment-hero { min-height: min(830px, 94svh); overflow: hidden; }
.jf-treatment-hero__copy { position: relative; z-index: 2; min-width: 0; }
.jf-treatment-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.jf-hero-proof { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.5rem; color: #c8c0b7; font-size: .72rem; }
.jf-hero-proof li { display: inline-flex; align-items: center; gap: .45rem; }
.jf-hero-proof i { color: var(--jf-gold); }
.jf-treatment-hero__image { position: relative; isolation: isolate; box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.jf-treatment-hero__image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(18,17,15,.28)); pointer-events: none; }
.jf-treatment-hero__image img { transition: transform 1.2s cubic-bezier(.2,.75,.25,1); }
.jf-treatment-hero__image:hover img { transform: scale(1.025); }
.jf-treatment-hero--overview { background: radial-gradient(circle at 75% 30%, rgba(199,161,91,.16), transparent 26%), linear-gradient(112deg, #090908, #30271f); }
.jf-treatment-hero--overview .jf-treatment-hero__image img { object-position: 58% center; }
.jf-treatment-hero__placeholder { display: grid; align-content: center; justify-items: center; gap: 1rem; }
.jf-treatment-hero__placeholder span { color: var(--jf-gold); font-family: var(--jf-serif); font-size: 4.5rem; letter-spacing: .12em; }
.jf-hero-floating-note { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; display: flex; width: min(310px, calc(100% - 2rem)); align-items: center; gap: .8rem; border: 1px solid rgba(255,255,255,.25); border-radius: .65rem; background: rgba(18,17,15,.84); padding: .9rem 1rem; color: #fff; box-shadow: 0 20px 45px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
.jf-hero-floating-note > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: rgba(199,161,91,.16); color: var(--jf-gold); }
.jf-hero-floating-note span { display: grid; gap: .1rem; font-size: .68rem; line-height: 1.45; }
.jf-hero-floating-note strong { font-size: .76rem; }

.jf-section-nav { position: sticky; z-index: 900; top: 82px; border-bottom: 1px solid var(--jf-line); background: rgba(247,241,232,.94); box-shadow: 0 12px 30px rgba(18,17,15,.05); backdrop-filter: blur(16px); }
.jf-section-nav .jf-container { display: flex; align-items: center; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.jf-section-nav .jf-container::-webkit-scrollbar { display: none; }
.jf-section-nav a { position: relative; flex: 0 0 auto; padding: 1rem .85rem; color: #5e554c !important; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.jf-section-nav a::after { content: ""; position: absolute; right: .85rem; bottom: .55rem; left: .85rem; height: 2px; background: var(--jf-gold); transform: scaleX(0); transition: transform .25s ease; }
.jf-section-nav a:hover, .jf-section-nav a.is-active { color: var(--jf-black) !important; }
.jf-section-nav a:hover::after, .jf-section-nav a.is-active::after { transform: scaleX(1); }
.jf-section-nav .jf-section-nav__cta { margin-left: auto; border-radius: .35rem; background: var(--jf-black); padding: .62rem 1rem; color: #fff !important; }
.jf-section-nav .jf-section-nav__cta::after { display: none; }

.jf-route-section { background: linear-gradient(180deg, #fffaf4, var(--jf-ivory)); }
.jf-route-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 2.5rem; }
.jf-route-card { position: relative; display: grid; min-height: 370px; align-content: end; overflow: hidden; border: 1px solid var(--jf-line); border-radius: .9rem; padding: 2rem; color: #fff !important; box-shadow: 0 22px 55px rgba(18,17,15,.12); transition: transform .35s ease, box-shadow .35s ease; }
.jf-route-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.16), transparent 24%), linear-gradient(135deg, rgba(18,17,15,.12), rgba(18,17,15,.78)); transition: transform .6s ease; }
.jf-route-card:hover { color: #fff !important; transform: translateY(-7px); box-shadow: 0 30px 75px rgba(18,17,15,.2); }
.jf-route-card:hover::before { transform: scale(1.04); }
.jf-route-card--hair { background: linear-gradient(135deg, #957452, #433325); }
.jf-route-card--face { background: linear-gradient(135deg, #dac4a5, #8e6b4c); }
.jf-route-card > * { position: relative; z-index: 2; }
.jf-route-card > .jf-route-card__image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.jf-route-card:hover > .jf-route-card__image { transform: scale(1.045); }
.jf-route-card > i { position: absolute; top: 1.8rem; right: 1.8rem; color: rgba(255,255,255,.78); font-size: 3rem; }
.jf-route-card__number { position: absolute; top: 1.8rem; left: 2rem; font-size: .7rem; font-weight: 900; letter-spacing: .18em; }
.jf-route-card p { font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .75; }
.jf-route-card h3 { max-width: 9ch; margin-top: .45rem; font-size: clamp(2.3rem,4vw,3.8rem); font-weight: 500; line-height: .9; }
.jf-route-card div > span { display: block; margin-top: .8rem; font-size: .75rem; opacity: .76; }
.jf-route-card > strong { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: 1rem; font-size: .78rem; }
.jf-route-card > strong i { transition: transform .25s ease; }
.jf-route-card:hover > strong i { transform: translateX(6px); }

.jf-treatment-catalogue { background: #fffdf9; }
.jf-treatment-catalogue--sand { background: linear-gradient(145deg, #eadfce, #f4ebde); }
.jf-catalogue-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.jf-catalogue-heading > div { max-width: 760px; }
.jf-catalogue-heading .jf-subtitle, .jf-catalogue-heading > div > p:not(.jf-eyebrow) { margin-top: .8rem; }
.jf-catalogue-heading > p, .jf-method-section .jf-catalogue-heading > p { max-width: 370px; color: #bfb7ae; font-size: .82rem; line-height: 1.7; }

.jf-treatment-card { min-width: 0; height: 100%; overflow: hidden; border: 1px solid rgba(152,121,87,.22); border-radius: .85rem; background: rgba(255,255,255,.9); box-shadow: 0 16px 42px rgba(18,17,15,.075); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.jf-treatment-card:hover { border-color: rgba(152,121,87,.52); transform: translateY(-8px); box-shadow: 0 28px 65px rgba(18,17,15,.15); }
.jf-treatment-card__link { display: flex; height: 100%; flex-direction: column; color: var(--jf-black) !important; }
.jf-treatment-card__media { position: relative; min-height: 245px; overflow: hidden; background: #e9dfd1; }
.jf-treatment-card__media picture { display: block; width: 100%; height: 245px; }
.jf-treatment-card__media img { width: 100%; height: 245px; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .35s ease; }
.jf-treatment-card:hover .jf-treatment-card__media img { transform: scale(1.055); filter: saturate(1.04); }
.jf-treatment-card__placeholder { position: relative; display: grid; height: 245px; place-items: center; overflow: hidden; background: radial-gradient(circle at 70% 25%, rgba(199,161,91,.32), transparent 28%), linear-gradient(140deg, #e7d8c4, #9c7c5b); color: rgba(255,255,255,.9); }
.jf-treatment-card__placeholder::after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; transform: translate(38%,-35%); }
.jf-treatment-card__placeholder i { font-size: 2rem; }
.jf-treatment-card__monogram { position: absolute; left: 1rem; bottom: .75rem; color: rgba(255,255,255,.26); font-family: var(--jf-serif); font-size: 4rem; }
.jf-treatment-card__tag { position: absolute; top: .85rem; left: .85rem; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(18,17,15,.72); padding: .4rem .65rem; color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.jf-treatment-card__arrow { position: absolute; top: .85rem; right: .85rem; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(247,241,232,.92); color: var(--jf-black); opacity: 0; transform: translateY(5px); transition: opacity .25s ease, transform .25s ease; }
.jf-treatment-card:hover .jf-treatment-card__arrow { opacity: 1; transform: translateY(0); }
.jf-treatment-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }
.jf-treatment-card__category { color: var(--jf-camel); font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.jf-treatment-card__body h3 { margin-top: .4rem; font-size: clamp(1.55rem,2vw,1.9rem); font-weight: 600; line-height: 1; }
.jf-treatment-card__body > p:not(.jf-treatment-card__category) { display: -webkit-box; margin-top: .7rem; overflow: hidden; color: var(--jf-ink-muted); font-size: .8rem; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.jf-treatment-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.2rem; color: var(--jf-camel); font-size: .75rem; font-weight: 900; }
.jf-treatment-card__cta i { transition: transform .25s ease; }
.jf-treatment-card:hover .jf-treatment-card__cta i { transform: translateX(5px); }
.jf-treatment-card--diagnosis { border-style: dashed; }

.jf-concern { position: relative; display: grid; min-height: 250px; align-content: center; color: var(--jf-black) !important; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
.jf-concern > span { position: absolute; top: 1rem; left: 1rem; color: var(--jf-camel); font-size: .62rem; font-weight: 900; }
.jf-concern > strong { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1rem; color: var(--jf-camel); font-size: .68rem; }
.jf-concern:hover { background: #fff; color: var(--jf-black) !important; transform: translateY(-5px); box-shadow: 0 20px 45px rgba(18,17,15,.09); }
.jf-diagnosis-block { grid-template-columns: auto minmax(0,1fr) auto; }
.jf-diagnosis-block__badge { border-radius: 999px; background: #f3eadf; padding: .5rem .75rem; color: var(--jf-camel); font-size: .62rem; font-weight: 900; white-space: nowrap; }
.jf-diagnosis-strip__layout { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem,6vw,6rem); align-items: center; }
.jf-diagnosis-strip__layout > div:first-child > p:not(.jf-eyebrow) { margin-top: .8rem; color: var(--jf-ink-muted); line-height: 1.7; }

.jf-quick-facts { border-bottom: 1px solid var(--jf-line); background: #fffaf4; }
.jf-quick-facts .jf-container { display: grid; grid-template-columns: repeat(3,1fr); }
.jf-quick-facts article { display: flex; align-items: center; gap: .8rem; border-right: 1px solid var(--jf-line); padding: 1.4rem; }
.jf-quick-facts article:first-child { border-left: 1px solid var(--jf-line); }
.jf-quick-facts i { color: var(--jf-camel); font-size: 1.3rem; }
.jf-quick-facts span { display: grid; gap: .12rem; color: var(--jf-ink-muted); font-size: .7rem; }
.jf-quick-facts strong { color: var(--jf-black); font-size: .75rem; }
.jf-section-kicker { max-width: 34rem; margin-top: 1rem; color: var(--jf-camel); font-family: var(--jf-serif); font-size: 1.35rem; line-height: 1.25; }
.jf-safety-note { display: flex; gap: .75rem; margin-top: 1.2rem; border-radius: .6rem; background: rgba(199,161,91,.13); padding: 1rem; color: #5d554d; font-size: .78rem; line-height: 1.65; }
.jf-safety-note i { margin-top: .18rem; color: var(--jf-camel); }
.jf-benefit-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.jf-benefit-panel { position: relative; min-height: 390px; overflow: hidden; border: 1px solid var(--jf-line); border-radius: .85rem; background: rgba(255,255,255,.7); padding: clamp(1.5rem,4vw,2.8rem); }
.jf-benefit-panel::after { content: ""; position: absolute; right: -90px; bottom: -100px; width: 230px; height: 230px; border: 1px solid rgba(152,121,87,.16); border-radius: 50%; }
.jf-benefit-panel__icon { display: grid; width: 52px; height: 52px; margin-bottom: 2rem; place-items: center; border-radius: 50%; background: var(--jf-black); color: var(--jf-gold); }
.jf-benefit-panel h2 { max-width: 12ch; font-size: clamp(2rem,4vw,3.2rem); font-weight: 500; line-height: .95; }
.jf-procedure-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,6vw,6rem); align-items: start; }
.jf-info-panel { position: relative; overflow: hidden; padding: clamp(1.5rem,3vw,2.2rem); }
.jf-info-panel::after { content: "JF"; position: absolute; right: -1rem; bottom: -2.3rem; color: rgba(152,121,87,.07); font-family: var(--jf-serif); font-size: 8rem; }
.jf-info-panel__label { display: inline-flex; border-radius: 999px; background: #f3eadf; padding: .4rem .7rem; color: var(--jf-camel); font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.jf-info-panel dt { display: flex; align-items: center; gap: .55rem; color: var(--jf-camel); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.jf-treatment-video { position: relative; overflow: hidden; background: var(--jf-black); color: #fff; }
.jf-treatment-video::before { content: ""; position: absolute; top: -16rem; left: -12rem; width: 36rem; height: 36rem; border: 1px solid rgba(199,161,91,.16); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(199,161,91,.025), 0 0 0 10rem rgba(199,161,91,.018); pointer-events: none; }
.jf-treatment-video__layout { position: relative; display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); gap: clamp(2rem,6vw,6rem); align-items: center; }
.jf-treatment-video__copy { max-width: 31rem; }
.jf-treatment-video .jf-title { color: #fff; }
.jf-treatment-video .jf-subtitle { margin-top: 1.15rem; color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.75; }
.jf-treatment-video__points { display: grid; gap: .75rem; margin-top: 1.7rem; }
.jf-treatment-video__points li { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.86); font-size: .75rem; }
.jf-treatment-video__points i { color: var(--jf-gold); }
.jf-treatment-video__frame { position: relative; overflow: hidden; border: 1px solid rgba(199,161,91,.42); border-radius: 1rem; background: #080807; box-shadow: 0 30px 85px rgba(0,0,0,.44); }
.jf-treatment-video__frame video { display: block; width: 100%; max-height: 72svh; aspect-ratio: 16/9; background: #080807; object-fit: contain; }
.jf-treatment-video__frame video:focus-visible { outline: 3px solid var(--jf-gold); outline-offset: -3px; }
.jf-treatment-video__badge { position: absolute; z-index: 2; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(18,17,15,.78); padding: .52rem .75rem; color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; backdrop-filter: blur(12px); }
.jf-treatment-video__badge i { color: var(--jf-gold); }

.jf-treatment-visuals { background: #fffaf4; border-block: 1px solid var(--jf-line); }
.jf-treatment-visuals .jf-catalogue-heading > p { color: var(--jf-ink-muted); }
.jf-treatment-visuals__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 1rem; margin-top: 2rem; align-items: start; }
.jf-treatment-visual { overflow: hidden; margin: 0; border: 1px solid var(--jf-line); border-radius: 1rem; background: #fff; box-shadow: 0 20px 55px rgba(18,17,15,.09); }
.jf-treatment-visual img { display: block; width: 100%; object-fit: cover; }
.jf-treatment-visual--editorial img { aspect-ratio: 4/5; }
.jf-treatment-visual--concept img { aspect-ratio: 1/1; }
.jf-treatment-visual figcaption { display: grid; gap: .25rem; padding: 1rem 1.15rem; }
.jf-treatment-visual figcaption strong { font-family: var(--jf-serif); font-size: 1.3rem; font-weight: 600; }
.jf-treatment-visual figcaption span { color: var(--jf-ink-muted); font-size: .7rem; line-height: 1.55; }

.jf-filter-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0; }
.jf-grid-empty { grid-column: 1/-1; }
.jf-results-disclaimer { display: flex; gap: .65rem; margin-top: 2rem; border: 1px solid var(--jf-line); border-radius: .7rem; background: rgba(255,255,255,.65); padding: 1rem 1.15rem; color: var(--jf-ink-muted); font-size: .78rem; line-height: 1.6; }
.jf-results-disclaimer i { margin-top: .15rem; color: var(--jf-camel); }

.jf-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 4rem; border-top: 1px solid rgba(199,161,91,.28); padding-top: 3rem; }
.jf-gallery-heading h3 { margin-top: .3rem; font-size: clamp(2rem,4vw,3.4rem); }
.jf-gallery-heading > p, .jf-gallery-hint { color: #bdb4aa; font-size: .72rem; }
.jf-treatment-catalogue--sand .jf-gallery-hint { color: var(--jf-ink-muted); }
.jf-method-gallery, .jf-treatment-gallery { align-items: stretch; }
.jf-gallery-item { position: relative; display: block; width: 100%; overflow: hidden; border: 1px solid rgba(199,161,91,.22); border-radius: .75rem; background: #1b1916; color: #fff; cursor: zoom-in; text-align: left; box-shadow: 0 15px 35px rgba(0,0,0,.12); }
.jf-treatment-gallery .jf-gallery-item { background: #fff; color: var(--jf-black); }
.jf-gallery-item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .65s cubic-bezier(.2,.75,.25,1), filter .3s ease; }
.jf-gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(18,17,15,.82)); pointer-events: none; }
.jf-gallery-item:hover img { transform: scale(1.055); filter: saturate(1.05); }
.jf-gallery-item__zoom { position: absolute; z-index: 2; top: .8rem; right: .8rem; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(247,241,232,.92); color: var(--jf-black); opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .25s ease; }
.jf-gallery-item:hover .jf-gallery-item__zoom, .jf-gallery-item:focus-visible .jf-gallery-item__zoom { opacity: 1; transform: scale(1); }
.jf-gallery-item__caption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; gap: .2rem; padding: 1rem; color: #fff; }
.jf-gallery-item__caption strong { font-family: var(--jf-serif); font-size: 1.1rem; }
.jf-gallery-item__caption small { color: rgba(255,255,255,.68); font-size: .65rem; line-height: 1.4; }
.jf-gallery-dialog { width: min(960px, calc(100% - 2rem)); max-width: 960px; overflow: visible; border: 0; border-radius: .8rem; background: var(--jf-black); padding: 0; color: #fff; box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.jf-gallery-dialog::backdrop { background: rgba(10,9,8,.86); backdrop-filter: blur(8px); }
.jf-gallery-dialog__close { position: absolute; z-index: 3; top: .75rem; right: .75rem; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(18,17,15,.75); color: #fff; }
.jf-gallery-dialog img { display: block; width: 100%; max-height: 78svh; border-radius: .8rem .8rem 0 0; object-fit: contain; background: #080807; }
.jf-gallery-dialog p { padding: 1rem 1.25rem; color: #d3cbc2; font-size: .78rem; }

.jf-faq-intro { position: sticky; top: 165px; }
.jf-faq details { padding: 0; }
.jf-faq summary { min-height: 64px; align-items: center; padding: 1rem .2rem; }
.jf-faq summary::after { display: none; }
.jf-faq__icon { position: relative; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--jf-line); border-radius: 50%; }
.jf-faq__icon::before, .jf-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: var(--jf-camel); transform: translate(-50%,-50%); transition: transform .25s ease; }
.jf-faq__icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.jf-faq details[open] .jf-faq__icon::after { transform: translate(-50%,-50%) rotate(0deg); }
.jf-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.jf-faq details[open] .jf-faq__answer { grid-template-rows: 1fr; }
.jf-faq__answer p { min-height: 0; overflow: hidden; padding: 0 2.8rem 1.1rem 0; }
.jf-faq-intro .jf-text-link { margin-top: 1.3rem; }

.jf-evaluation-cta { background: linear-gradient(135deg, var(--jf-beige), #f2e8da); }
.jf-evaluation-cta .jf-container { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1.5rem; border: 1px solid rgba(152,121,87,.2); border-radius: .9rem; background: rgba(255,255,255,.48); padding: clamp(1.5rem,4vw,2.7rem); box-shadow: 0 25px 65px rgba(18,17,15,.08); }
.jf-evaluation-cta__icon { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid var(--jf-camel); border-radius: 50%; color: var(--jf-camel); font-size: 1.7rem; }
.jf-evaluation-cta h2 { margin-top: .25rem; font-size: clamp(2rem,4vw,3.5rem); font-weight: 500; line-height: .95; }
.jf-evaluation-cta p:not(.jf-eyebrow) { max-width: 680px; margin-top: .6rem; color: var(--jf-ink-muted); font-size: .82rem; line-height: 1.65; }
.jf-related-treatments { background: #fffdf9; border-top: 1px solid var(--jf-line); }
.jf-mobile-treatment-cta { display: none; }

/* Reveal motion is progressive enhancement: content stays visible without JS. */
.treatment-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.treatment-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .jf-section-nav .jf-section-nav__cta { display: none; }
  .jf-route-card { min-height: 330px; }
  .jf-catalogue-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .jf-diagnosis-strip__layout { grid-template-columns: 1fr; }
  .jf-quick-facts article { padding: 1.1rem .8rem; }
  .jf-procedure-layout { grid-template-columns: 1fr; }
  .jf-treatment-video__layout { grid-template-columns: 1fr; }
  .jf-treatment-video__copy { max-width: 42rem; }
  .jf-treatment-visuals__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 130px; }
  [id] { scroll-margin-top: 130px; }
  .jf-treatment-hero { min-height: auto; padding: 7.4rem 0 3rem; }
  .jf-treatment-hero__grid { display: flex; flex-direction: column; gap: 2.2rem; }
  .jf-treatment-hero h1 { max-width: 100%; font-size: clamp(2.8rem,13.5vw,4rem); overflow-wrap: anywhere; }
  .jf-treatment-hero__lead { font-size: .92rem; line-height: 1.68; }
  .jf-treatment-hero__actions { align-items: stretch; flex-direction: column; }
  .jf-treatment-hero__actions .jf-btn { width: 100%; }
  .jf-hero-proof { align-items: flex-start; flex-direction: column; }
  .jf-treatment-hero__image, .jf-treatment-hero__image picture, .jf-treatment-hero__image img, .jf-treatment-hero__placeholder { min-height: 340px; }
  .jf-treatment-hero__image { border-radius: 44% 44% .7rem .7rem; }
  .jf-hero-floating-note { right: .65rem; bottom: .65rem; left: .65rem; width: auto; }
  .jf-breadcrumb { margin-bottom: 1.2rem; }
  .jf-section-nav { top: 82px; }
  .jf-section-nav a { padding: .85rem .72rem; }
  .jf-route-grid, .jf-benefit-layout { grid-template-columns: 1fr; }
  .jf-route-card { min-height: 310px; padding: 1.4rem; }
  .jf-route-card > i { top: 1.35rem; right: 1.35rem; }
  .jf-route-card__number { top: 1.4rem; left: 1.4rem; }
  .jf-treatment-card__media, .jf-treatment-card__media picture, .jf-treatment-card__media img, .jf-treatment-card__placeholder { min-height: 220px; height: 220px; }
  .jf-treatment-card__arrow { opacity: 1; transform: none; }
  .jf-concern { min-height: 220px; }
  .jf-diagnosis-block { grid-template-columns: 1fr; }
  .jf-diagnosis-block__badge { justify-self: start; }
  .jf-quick-facts .jf-container { grid-template-columns: 1fr; }
  .jf-quick-facts article, .jf-quick-facts article:first-child { border-right: 0; border-bottom: 1px solid var(--jf-line); border-left: 0; }
  .jf-benefit-panel { min-height: auto; padding: 1.5rem; }
  .jf-treatment-video__frame { border-radius: .65rem; }
  .jf-treatment-video__frame video { max-height: 66svh; aspect-ratio: 9/16; }
  .jf-treatment-video__badge { top: .55rem; left: .55rem; }
  .jf-treatment-visuals__grid, .jf-image-duo { grid-template-columns: 1fr; }
  .jf-treatment-visual--editorial img, .jf-treatment-visual--concept img { aspect-ratio: 4/5; }
  .jf-editorial-media, .jf-editorial-media img { min-height: 340px; }
  .jf-editorial-media--portrait, .jf-editorial-media--portrait img { min-height: 470px; }
  .jf-gallery-heading { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .jf-faq-intro { position: static; }
  .jf-evaluation-cta { padding-bottom: 6.5rem; }
  .jf-evaluation-cta .jf-container { grid-template-columns: 1fr; }
  .jf-evaluation-cta__icon { width: 58px; height: 58px; }
  .jf-evaluation-cta .jf-btn { width: 100%; }
  .jf-mobile-treatment-cta { position: fixed; z-index: 1050; right: .7rem; bottom: .7rem; left: .7rem; display: flex; min-height: 52px; align-items: center; justify-content: center; gap: .6rem; border: 1px solid rgba(255,255,255,.15); border-radius: .55rem; background: rgba(18,17,15,.95); color: #fff !important; font-size: .78rem; font-weight: 900; box-shadow: 0 18px 45px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(130%); transition: opacity .3s ease, transform .3s ease; backdrop-filter: blur(14px); }
  .jf-mobile-treatment-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .jf-mobile-treatment-cta i { color: var(--jf-gold); }
}

@media (prefers-reduced-motion: reduce) {
  .treatment-motion [data-reveal], .treatment-motion [data-reveal].is-visible { opacity: 1; transform: none; }
  .jf-treatment-hero__image img, .jf-treatment-card__media img, .jf-gallery-item img, .jf-path__image, .jf-route-card__image { transition: none; }
}