/* =====================================================================
   Emil Skin Care — custom layer on top of the Rixos theme
   Genie Corp. 2026 · loaded AFTER css/style.css
   --------------------------------------------------------------------
   01. Brand tokens
   02. Typography refinements
   03. Logo
   04. Before / After slider
   05. Case grid
   06. Treatment index
   07. Journey timeline
   08. Downtime strip
   09. Facts & figures
   10. Notice / disclaimer
   11. Quote & credential blocks
   12. Booking form
   13. Utilities
   14. Responsive
   ===================================================================== */

/* ======= 01. Brand tokens ======= */
:root {
    --gold: #AA8C55;
    --gold-soft: #C5A778;
    --ink: #2A2825;
    --ink-soft: #5C5851;
    --body: #6B665E;
    --cream: #EFEAE3;
    --cream-2: #E4DED5;
    --line: rgba(42, 40, 37, .12);
    --line-light: rgba(255, 255, 255, .16);
    --shadow-lg: 0 30px 70px rgba(42, 40, 37, .14);
    --shadow-sm: 0 10px 30px rgba(42, 40, 37, .08);
    --radius: 6px;
    --serif: "Gilda Display", Georgia, "Times New Roman", serif;
    --sans: "Urbanist", "Helvetica Neue", Arial, sans-serif;
}

/* ======= 02. Typography refinements ======= */
body { color: var(--body); }
p { color: var(--body); }
.section-subtitle { color: var(--gold); }
.lead {
    font-size: 20px;
    line-height: 34px;
    color: var(--ink-soft);
}
.lead-sm { font-size: 18px; line-height: 32px; color: var(--ink-soft); }
.eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
}
.eyebrow.on-dark { color: var(--gold-soft); }
h2.display, .display {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    font-size: 44px;
    line-height: 1.18;
    letter-spacing: -.01em;
}
.display.white { color: #fff; }
.rule {
    width: 54px;
    height: 1px;
    background: var(--gold);
    display: block;
    margin: 22px 0;
}
.rule.center { margin-left: auto; margin-right: auto; }
.text-gold { color: var(--gold) !important; }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-ink { background: var(--ink); }
.bg-ink p, .bg-ink li { color: rgba(255, 255, 255, .72); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink h5 { color: #fff; }

/* ======= 03. Logo ======= */
.logo .logo-img { height: 52px; width: auto !important; }
.nav-scroll .logo-wrapper .logo-img { height: 46px; width: auto !important; }
.navbar .logo-on-light { display: none; }
.navbar.nav-scroll .logo-on-dark { display: none; }
.navbar.nav-scroll .logo-on-light { display: inline-block; }
.footer .logo img { height: 78px; width: auto; }

/* ======= 04. Before / After slider ======= */
.ba {
    margin: 0;
    position: relative;
}
.ba-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--cream-2);
    box-shadow: var(--shadow-sm);
    touch-action: pan-y;
    isolation: isolate;
    --pos: 50%;
}
.ba-frame img.ba-img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* The reveal is done with two opposing GPU transforms rather than clip-path,
   so dragging never triggers layout or repaint — the after image tracks the
   handle exactly, at any image size. `--pos` is a percentage, and a percentage
   translate resolves against the element's own width, which equals the frame
   width for both the wrapper and the image inside it. */
.ba-reveal {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: translate3d(var(--pos), 0, 0);
    will-change: transform;
    transition: none;
}
.ba-reveal img.ba-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate3d(calc(-1 * var(--pos)), 0, 0);
    will-change: transform;
}
/* The theme puts `transition: all .5s` on every <img>. On the after image that
   made the counter-transform ease into place while the wrapper moved with the
   pointer, so the photograph slid around under the handle. Both halves of the
   pair must move in the same frame, or not at all. */
.ba-frame img.ba-img,
.ba-frame .ba-divider,
.ba-frame .ba-line,
.ba-frame .ba-handle { transition: none; }

/* Tall clinical crops: bias the visible band so the frame lands on the treated
   area rather than on hairline and clothing. */
.ba-frame[data-case="co2-cheek-02"] img.ba-img { object-position: 50% 34%; }
.ba-frame[data-case="rej-peter-03"] img.ba-img { object-position: 50% 45%; }

/* Uniform framing so a gallery row lines up */
.ba-frame.ba-fixed { aspect-ratio: var(--ar, 4 / 5); }
.ba-frame.ba-fixed img.ba-before {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ba-tag {
    position: absolute;
    top: 16px;
    z-index: 3;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(42, 40, 37, .72);
    padding: 7px 13px;
    border-radius: 3px;
    pointer-events: none;
}
.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; background: rgba(170, 140, 85, .92); }
/* Full-width wrapper, so the percentage translate resolves against the frame
   width — a percentage transform on the 2px line or the 54px handle would
   resolve against their own tiny widths instead. */
.ba-divider {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    transform: translate3d(var(--pos), 0, 0);
    will-change: transform;
}
.ba-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    z-index: 1;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 1px rgba(42, 40, 37, .18);
}
.ba-handle {
    position: absolute;
    top: 50%;
    left: -27px;
    width: 54px;
    height: 54px;
    margin-top: -27px;
    border-radius: 50%;
    background: #fff;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 6px 22px rgba(42, 40, 37, .28);
}
.ba-frame .ba-divider .ba-handle { z-index: 2; }
.ba-frame .ba-divider .ba-handle svg {
    display: block;
    width: 16px;
    height: 16px;
    color: var(--gold);
    stroke: var(--gold);
}
.ba-frame:hover .ba-handle { box-shadow: 0 8px 26px rgba(42, 40, 37, .34); }
.ba-frame:has(.ba-range:focus-visible) .ba-handle,
.ba-frame.is-focused .ba-handle { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gold); }
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 6;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
/* A 1px thumb makes the native range map its value across the full track
   width, so the browser's own drag handling lands on exactly the same value
   as the pointer handler in emil.js. A wide thumb insets the track by half
   its width at each end and the two disagree. */
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100%; background: transparent; }
.ba-range::-moz-range-thumb { width: 1px; height: 100%; border: 0; background: transparent; }
.ba-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ba-range::-moz-range-track { height: 100%; background: transparent; }
.ba-range:focus-visible { outline: none; }
.ba-caption { margin-top: 18px; display: block; }
.ba-caption .area { display: block; margin-bottom: 6px; }
.ba-caption .meta { display: block; margin-bottom: 8px; }
.ba-caption .area {
    font-family: var(--serif);
    font-size: 19px;
    color: var(--ink);
    line-height: 1.4;
}
.ba-caption .meta {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--gold);
    text-transform: uppercase;
    font-weight: 600;
}
.ba-caption .device {
    display: block;
    font-size: 14px;
    color: var(--body);
}
.bg-ink .ba-caption .area { color: #fff; }
.bg-ink .ba-caption .device { color: rgba(255, 255, 255, .58); }
.bg-ink .ba-frame { background: rgba(255, 255, 255, .06); box-shadow: 0 22px 50px rgba(0, 0, 0, .38); }
.ba-hint {
    font-size: 13px;
    color: var(--body);
    letter-spacing: .04em;
}

/* ======= 04b. At-a-glance spec card ======= */
.spec-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 34px 30px;
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.bg-cream .spec-card { background: #fff; }
.spec-card h5 {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 24px;
    text-align: left;
}
.spec-card ul { list-style: none; margin: 0; padding: 0; }
.spec-card li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.spec-card li:first-of-type { border-top: 0; padding-top: 0; }
.spec-card li .ic {
    flex: 0 0 22px;
    font-size: 19px;
    line-height: 1.4;
    color: var(--gold);
    text-align: center;
}
.spec-card li .tx { flex: 1 1 auto; font-size: 15px; line-height: 25px; color: var(--body); }
.spec-card li .tx strong {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 2px;
}

/* ======= 05. Case grid ======= */
.case-grid > [class*="col-"] { margin-bottom: 46px; }


/* ======= 06. Treatment index ======= */
.tx-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 32px 30px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    position: relative;
}
.tx-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(170, 140, 85, .35);
}
.tx-card .icon {
    font-size: 30px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 20px;
}
.tx-card h3 {
    font-family: var(--serif);
    font-size: 23px;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.3;
}
.tx-card h3 a { color: inherit; }
.tx-card h3 a:hover { color: var(--gold); }
.tx-card p { font-size: 16px; line-height: 28px; margin-bottom: 18px; }
.tx-card .tx-meta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}
.tx-card .stretched { position: absolute; inset: 0; border-radius: var(--radius); }

/* Compact treatment list */
.tx-list { list-style: none; margin: 0; padding: 0; }
.tx-list li { border-bottom: 1px solid var(--line); }
.tx-list li:first-child { border-top: 1px solid var(--line); }
.tx-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px;
    font-family: var(--serif);
    font-size: 21px;
    color: var(--ink);
    transition: color .25s ease, padding .25s ease;
}
.tx-list a span.desc {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--body);
    flex: 1 1 auto;
    text-align: right;
}
.tx-list a:hover { color: var(--gold); padding-left: 12px; }

/* ======= 07. Journey timeline ======= */
.journey { counter-reset: step; }
.journey .step {
    position: relative;
    padding: 0 0 44px 74px;
}
.journey .step:before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -4px;
    width: 50px;
    height: 50px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 17px;
    color: var(--gold);
    background: transparent;
}
.journey .step:after {
    content: "";
    position: absolute;
    left: 25px;
    top: 50px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
}
.journey .step:last-child { padding-bottom: 0; }
.journey .step:last-child:after { display: none; }
.journey .step h4 {
    font-family: var(--serif);
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 10px;
}
.bg-ink .journey .step:before { border-color: var(--gold-soft); color: var(--gold-soft); }
.bg-ink .journey .step:after { background: rgba(255, 255, 255, .14); }
.bg-ink .journey .step h4 { color: #fff; }

/* ======= 08. Downtime strip ======= */
.downtime { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.downtime figure { margin: 0; }
.downtime img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}
.downtime figcaption {
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ======= 09. Facts & figures ======= */
.facts { display: flex; flex-wrap: wrap; gap: 0; }
.facts .fact {
    flex: 1 1 200px;
    padding: 30px 26px;
    border-left: 1px solid var(--line);
}
.facts .fact:first-child { border-left: 0; padding-left: 0; }
.facts .fact .n {
    font-family: var(--serif);
    font-size: 42px;
    line-height: 1;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
}
.facts .fact .t {
    font-size: 15px;
    line-height: 24px;
    color: var(--ink-soft);
}
.bg-ink .facts .fact { border-color: rgba(255, 255, 255, .14); }
.bg-ink .facts .fact .t { color: rgba(255, 255, 255, .7); }

/* ======= 10. Notice / disclaimer ======= */
.notice {
    border-left: 2px solid var(--gold);
    padding: 6px 0 6px 24px;
    font-size: 15px;
    line-height: 27px;
    color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.med-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 30px 0 4px;
    font-size: 13px;
    line-height: 23px;
    color: rgba(255, 255, 255, .58);
}
.med-disclaimer strong { color: rgba(255, 255, 255, .78); }
.footer .bottom .links ul li a { color: rgba(255, 255, 255, .55); }
.footer .bottom .links ul li a:hover { color: var(--gold-soft); }
.footer .top .item ul.footer-links li a { color: rgba(255, 255, 255, .68); }
.footer .top .item ul.footer-links li a:hover { color: var(--gold-soft); }

/* ======= 11. Quote & credential blocks ======= */
blockquote.pull-quote {
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.45;
    color: var(--ink);
    position: relative;
    padding: 4px 0 4px 34px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}
blockquote.pull-quote:before { content: none; }
.pull-quote:after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--gold);
}
.pull-quote.white, .pull-quote.white p { color: #fff; }
.pull-quote cite {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 22px;
}
.creds { list-style: none; margin: 0; padding: 0; }
.creds li {
    position: relative;
    padding: 0 0 16px 30px;
    font-size: 16px;
    line-height: 28px;
    color: var(--ink-soft);
}
.creds li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(92, 88, 81, .75);
    font-size: 14px;
}
.bg-ink .creds li:before { color: rgba(255, 255, 255, .45); }
.bg-ink .creds li { color: rgba(255, 255, 255, .78); }

/* ======= 12. Booking form ======= */
.booking-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 46px 44px;
}
.booking-card .form-note {
    font-size: 13px;
    line-height: 23px;
    color: var(--body);
    margin-top: 18px;
}
.form2 label.field-label,
.booking-card label.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 8px;
}
.booking-card input[type="text"],
.booking-card input[type="email"],
.booking-card input[type="tel"],
.booking-card select,
.booking-card textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 3px;
    padding: 13px 16px;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    transition: border-color .25s ease;
}
.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus { border-color: var(--gold); outline: none; }
.booking-card .form-group { margin-bottom: 22px; }
.consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 24px;
    color: var(--body);
}
.consent input { margin-top: 5px; flex: 0 0 auto; }

/* ======= 12c. Home page ======= */
/* Hero */
.parallax-header[data-overlay-dark] h1,
.parallax-header h1 {
    text-transform: none;
    font-size: 64px;
    line-height: 1.08;
    letter-spacing: -.012em;
}
.parallax-header[data-overlay-dark] .hero-lead,
.parallax-header .hero-lead {
    font-family: var(--sans);
    font-size: 21px;
    line-height: 34px;
    color: rgba(255, 255, 255, .84);
    max-width: 400px;
    margin: 26px 0 0;
}
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
.button-ghost {
    display: inline-block;
    padding: 12px 27px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 5px;
    color: #fff;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 30px;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.button-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 14px;
    z-index: 4;
}
.scroll-cue span {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .85);
    animation: cue 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 0 } 30% { opacity: 1 } 70% { transform: translateY(15px); opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none } }

/* Hero — a directional scrim keeps the headline on clear ground whatever the
   viewport crops away, and lets the photograph stay bright on the right. */
.parallax-header.bg-img { background-position: 66% center; }
.parallax-header:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(96deg, rgba(22, 20, 18, .92) 0%, rgba(22, 20, 18, .76) 26%,
                        rgba(22, 20, 18, .34) 54%, rgba(22, 20, 18, .10) 74%, rgba(22, 20, 18, .34) 100%),
        linear-gradient(180deg, rgba(22, 20, 18, .55) 0%, rgba(22, 20, 18, 0) 26%,
                        rgba(22, 20, 18, 0) 70%, rgba(22, 20, 18, .5) 100%);
}
.parallax-header .container { position: relative; z-index: 2; }
.parallax-header .scroll-cue { z-index: 3; }
@media screen and (max-width: 991px) {
    .parallax-header:after {
        background: linear-gradient(180deg, rgba(22, 20, 18, .82) 0%, rgba(22, 20, 18, .55) 45%, rgba(22, 20, 18, .82) 100%);
    }
}

/* Hero eyebrow — the middot is dropped on small screens rather than stranded */
@media screen and (max-width: 767px) {
    .hero-eyebrow .sep { display: none; }
    .hero-eyebrow { font-size: 12px; letter-spacing: .18em; }
}

/* Credential row — three quiet claims, no stat furniture */
.cred-strip { background: var(--ink); padding: 44px 0; }

/* Proof inset in the hero */
.hero-proof { max-width: 360px; margin-left: auto; }
.hero-proof .ba-caption { margin-top: 14px; }
.hero-proof .ba-caption .area,
.hero-proof .ba-caption .meta { display: none; }
.hero-proof .ba-caption .device {
    display: block;
    font-size: 12px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}
.hero-proof .ba-frame { box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
@media screen and (max-width: 991px) {
    /* The comparison is the most persuasive thing on the page, so it stays on
       small screens — just smaller, centred, and below the call to action. */
    .hero-proof {
        max-width: 320px;
        margin: 44px auto 0;
    }
    .hero-proof .ba-caption { text-align: center; }
}

/* Stacked intro images */
/* Full-bleed split — image to the viewport edge, text on a comfortable measure */
.split-bleed {
    display: grid;
    grid-template-columns: 45fr 55fr;
    align-items: center;
    grid-auto-rows: minmax(640px, auto);
}
.split-bleed .media { position: relative; align-self: stretch; overflow: hidden; }
.split-bleed .media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
}
.split-bleed .text { padding: 130px 9vw 130px 6vw; }
.split-bleed .text .inner { max-width: 560px; }
.split-bleed.flip { grid-template-columns: 55fr 45fr; }
.split-bleed.flip .media { order: 2; }
.split-bleed.flip .text { order: 1; padding: 130px 6vw 130px 9vw; }
.split-bleed.flip .text .inner { margin-left: auto; }
@media screen and (max-width: 991px) {
    .split-bleed, .split-bleed.flip { grid-template-columns: 1fr; }
    .split-bleed .media, .split-bleed.flip .media { order: 1; }
    .split-bleed .text, .split-bleed.flip .text { order: 2; padding: 64px 24px; }
    .split-bleed { grid-auto-rows: auto; }
    .split-bleed .media { height: 380px; }
    .split-bleed .text .inner { max-width: none; margin: 0; }
}

/* Pillar cards */
.pillar {
    position: relative;
    display: block;
    height: 100%;
    min-height: 460px;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}
.pillar .img { position: absolute; inset: 0; }
.pillar .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.pillar:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 26, 24, .18) 0%, rgba(28, 26, 24, .62) 48%, rgba(28, 26, 24, .9) 100%);
    z-index: 1;
    transition: opacity .5s ease;
}
.pillar:hover .img img { transform: scale(1.07); }
.pillar .cont { position: relative; z-index: 2; padding: 46px 42px 40px; margin-top: auto; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.pillar h3 {
    font-family: var(--serif);
    font-size: 31px;
    line-height: 1.24;
    color: #fff;
    margin: 0 0 14px;
}
.pillar p { color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 27px; margin-bottom: 20px; max-width: 430px; }
.pillar .more {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-soft);
}
.pillar .more i { margin-left: 8px; transition: transform .35s ease; display: inline-block; }
.pillar:hover .more i { transform: translateX(6px); }

/* Quiet section link — replaces the repeated gold pill buttons */
.link-more {
    display: inline-block;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid rgba(170, 140, 85, .35);
    padding-bottom: 4px;
    transition: color .3s ease, border-color .3s ease;
}
.link-more i { margin-left: 8px; transition: transform .35s ease; display: inline-block; }
.link-more:hover { color: var(--ink); border-color: var(--ink); }
.link-more:hover i { transform: translateX(6px); }
.bg-ink .link-more { color: var(--gold-soft); border-color: rgba(197, 167, 120, .4); }
.bg-ink .link-more:hover { color: #fff; border-color: #fff; }

/* Specialist */
.specialist .portrait { box-shadow: 0 30px 70px rgba(0, 0, 0, .38); }
.specialist .portrait img { width: 100%; height: auto; display: block; }

/* Treatment mosaic */
.facilities .item .overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(28, 26, 24, .05) 30%, rgba(28, 26, 24, .78) 100%);
}
.facilities .item .cont i { font-size: 30px; margin-bottom: 10px; color: var(--gold-soft); }
.facilities .item .cont h4 { font-size: 23px; }
.facilities .item .cont p { font-size: 15px; color: rgba(255, 255, 255, .72); }
.facilities .item .stretched { position: absolute; inset: 0; z-index: 4; }
.facilities .item { min-height: 300px; }
.facilities .item .img { height: 100%; }
.facilities .item .img img { height: 300px; object-fit: cover; }

/* Close band + typographic treatment grid */
.cta-close { position: relative; }
.cta-close .close-note {
    margin-top: 34px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}
.cta-close:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 72% 62% at 50% 46%,
            rgba(22, 20, 18, .68) 0%, rgba(22, 20, 18, .34) 70%, rgba(22, 20, 18, .22) 100%),
        linear-gradient(180deg, rgba(22, 20, 18, .62) 0%, rgba(22, 20, 18, .44) 45%,
            rgba(22, 20, 18, .74) 100%);
}
.cta-close .container { position: relative; z-index: 2; }

.tx-grid .tx-card { background: #fff; border-color: rgba(42, 40, 37, .10); padding: 40px 34px 34px; }
.tx-grid .tx-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(170, 140, 85, .3); }

/* Interlude — one passage that sells nothing */
.interlude { padding: 190px 0; }
.interlude blockquote {
    font-family: var(--serif);
    font-size: 52px;
    line-height: 1.28;
    color: #fff;
    text-align: center;
    text-wrap: balance;
    max-width: 840px;
    margin: 0 auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}
.interlude blockquote:before { content: none; }
.interlude cite:before { content: none; }
.interlude cite {
    display: block;
    padding-left: 0;
    font-family: var(--sans);
    font-style: normal;
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-top: 40px;
}

/* Results — the page's peak */
.results h2.display { font-size: 56px; }

/* Journey, four across */
.step-card { position: relative; padding: 8px 20px 0 0; }
.step-card .n {
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1;
    color: var(--gold);
    display: block;
    margin-bottom: 18px;
    letter-spacing: 0;
}
.step-card h4 { font-family: var(--serif); font-size: 23px; color: var(--ink); margin-bottom: 10px; }
.step-card p { font-size: 16px; line-height: 27px; margin-bottom: 0; }

/* ======= 12b. Reveal on scroll ======= */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }
[data-reveal][data-delay="1"] { transition-delay: .12s; }
[data-reveal][data-delay="2"] { transition-delay: .24s; }
[data-reveal][data-delay="3"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ======= 13. Utilities ======= */
.img-frame { border-radius: var(--radius); overflow: hidden; }
.img-frame img { width: 100%; height: auto; display: block; }
.mb-50 { margin-bottom: 50px; }
.mt-50 { margin-top: 50px; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-40 { padding-bottom: 40px !important; }
.maxw-720 { max-width: 720px; }
.maxw-820 { max-width: 820px; }
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--ink);
    color: #fff;
    padding: 12px 20px;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ======= 14. Responsive ======= */
@media screen and (max-width: 991px) {
    h2.display, .display { font-size: 34px; }
    .results h2.display { font-size: 38px; }
    .parallax-header { padding: 126px 0 80px; min-height: 0; }
    .interlude { padding: 110px 0; }
    .interlude blockquote { font-size: 32px; }
    .bleed-left .img-frame { margin-left: 0; border-radius: var(--radius); }
    .pillar { min-height: 400px; }
    .pillar .cont { padding: 34px 28px 30px; }
    .pillar h3 { font-size: 26px; }
    .pull-quote { font-size: 24px; }
    .downtime { grid-template-columns: repeat(3, 1fr); }
    .facts .fact { border-left: 0; padding-left: 0; }
}

@media screen and (max-width: 767px) {
    .container { padding-left: 22px; padding-right: 22px; }
    h2.display, .display { font-size: 29px; }
    .results h2.display { font-size: 32px; }
    .interlude { padding: 80px 0; }
    .interlude blockquote { font-size: 26px; }
    .parallax-header { padding: 122px 0 76px; min-height: 0; }
    .parallax-header h1 { font-size: 38px; line-height: 46px; }
    .parallax-header h1 br { display: none; }
    .parallax-header .hero-lead { font-size: 18px; line-height: 30px; max-width: none; }
    .hero-actions { gap: 10px; flex-direction: column; align-items: stretch; }
    .hero-actions a { width: 100%; text-align: center; }
    .scroll-cue { display: none; }
    .cred-strip { padding: 34px 0; }
    .pillar { min-height: 340px; }
    .step-card { padding-right: 0; }
    .lead { font-size: 18px; line-height: 31px; }
    .booking-card { padding: 32px 24px; }
    .downtime { grid-template-columns: repeat(2, 1fr); }
    .ba-handle { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 14px; }
    .tx-list a { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 19px; }
    .tx-list a span.desc { text-align: left; }
    .journey .step { padding-left: 62px; }
    .journey .step:before { width: 42px; height: 42px; font-size: 15px; }
    .journey .step:after { left: 21px; top: 44px; }
}

/* Credential row — three claims, hairline-separated, so a separator can never
   be left dangling at the end of a wrapped line. */
.cred-row {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    align-items: center;
    list-style: none;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.cred-row li {
    position: relative;
    padding: 0 34px;
    text-align: center;
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}
.cred-row li + li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 46px;
    margin-top: -23px;
    background: rgba(197, 167, 120, .5);
}
@media (max-width: 991px) {
    .cred-row { grid-template-columns: 1fr 1.3fr 1fr; }
    .cred-row li { padding: 0 22px; font-size: 19px; }
}
@media (max-width: 767px) {
    .cred-row { grid-template-columns: 1fr; gap: 26px; }
    .cred-row li { padding: 0; font-size: 19px; }
    .cred-row li br { display: none; }
    /* This card's photograph blows out exactly under the eyebrow at phone
       width, where there is no vertical slack to reframe. Deeper scrim on
       this one card only. */
    .pillar-bright:after {
        background: linear-gradient(180deg,
            rgba(28, 26, 24, .34) 0%,
            rgba(28, 26, 24, .68) 26%,
            rgba(28, 26, 24, .86) 62%,
            rgba(28, 26, 24, .94) 100%);
    }
    .pillar h3 br { display: none; }
    .pillar h3 { text-wrap: balance; }
    .cred-row li + li:before {
        left: 50%;
        top: -13px;
        margin: 0 0 0 -13px;
        width: 26px;
        height: 1px;
    }
}

/* The theme fixes the dropdown at 220px with 25px of side padding, which
   leaves 170px for labels like "Skin rejuvenation — overview". Bootstrap keeps
   those on one line, so they ran out of the white box. Let the panel size to
   its content instead. */
@media screen and (min-width: 992px) {
    .navbar .dropdown-menu {
        width: auto;
        min-width: 230px;
        max-width: 340px;
    }
}