/* ==========================================================================
   INOSSI — Service Detail Page Template
   Shared stylesheet for every individual treatment page (Services/*.html).
   Loaded after tokens.css / navigation.css / main.css. Page-specific values
   (copy, images, prices) live in the HTML; this file only defines the
   reusable shape so future service pages can reuse it unchanged.
   ========================================================================== */

/* ===== BREADCRUMB ===== */
.breadcrumb {
    width: var(--width-band, min(100% - 40px, 1700px));
    margin: clamp(20px, 3vw, 32px) auto 0;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Was a fixed 0.9rem — never grew past 14.4px even at 4K (PENDING
       5.10c). Floor unchanged so mobile is untouched. */
    font-size: clamp(0.9rem, 1vw, 1.05rem);
    color: var(--color-text-muted, #6b6b6b);
}

.breadcrumb__list li:not(:last-child)::after {
    content: "/";
    margin-left: 0.4rem;
    color: var(--color-text-muted, #6b6b6b);
}

.breadcrumb__link {
    /* PENDING 0.26: was a 17px-tall inline link, below the project's own
       44x44 interactive-target rule (WCAG 2.5.8 target spacing technically
       still passed via the gap between crumbs, but this brings it in line
       with the internal standard too). min-height on an inline-flex box
       grows the tap target without changing the visible text size. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text-muted, #6b6b6b);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb__current {
    color: var(--color-ink, #000);
}

/* ===== SERVICE HERO ===== */
.service-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: var(--width-band, min(100% - 40px, 1700px));
    margin: clamp(20px, 4vw, 40px) auto 0;
}

.service-hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 5px);
}

/* Real-photo variant — locks every hero photo (all 12 services as of
   08.08.2026) to Facial Massage's own hero ratio (1035:821) via
   object-fit:cover, so hero height stays consistent page-to-page regardless
   of the source photo's native orientation (landscape, portrait, whatever
   the source is). Use the img's inline object-position to set the focal
   point on photos that need cropping (per CLAUDE.md's "focal-point-aware
   object-position" rule) — each value was chosen by rendering candidate
   crops and comparing them, not guessed.
   The decorative line-art icon placeholder and its plain width:100%/
   height:auto rule above are retired now that every service page has a real
   photo; left in place only in case a future 13th service needs it again. */
.service-hero__image--photo {
    aspect-ratio: 1035 / 821;
    object-fit: cover;
    object-position: center;
}

.service-hero__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-hero__eyebrow {
    margin: 0;
    font-family: var(--font-accent, 'tyScript', 'classicaOne', cursive);
    font-size: clamp(1.9rem, 3.8vw, 2.6rem);
    color: var(--color-accent-text, #856828);
}

.service-hero__heading {
    margin: 0;
    text-align: left;
    /* Was clamp(1.25rem, 3.5vw, 2.6rem) — floor 20px, cap 41.6px, both
       BELOW the editorial section H2 (33.6–48px): the page title read as
       the least important heading on the page (PENDING 5.10a). Floor
       raised to match the H2 floor (service-page--editorial
       .service-section__heading, clamp(2.1rem, 4vw, 3rem)) — measured in
       Chrome this is the largest size that still wraps the title to 2
       lines at 320px rather than 3 (2-line ceiling there is 35px; 3rem+
       floors all wrap to 3). Cap raised further above the H2 cap so H1
       reads as the senior heading once space allows. At the narrowest QA
       widths this wraps to two lines — checked, no overflow — matching how
       the sitewide h1 (main.css, clamp(2rem, 4vw, 4rem)) already wraps on
       phones; a forced single line was never a project requirement. */
    font-size: clamp(2.15rem, 4.3vw, 3.25rem);
    font-weight: 400;
    line-height: var(--line-height-heading, 1.2);
}

.service-hero__tagline {
    margin: 0;
    font-family: var(--font-accent, 'tyScript', 'classicaOne', cursive);
    font-weight: 400;
    color: var(--color-ink, #000);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.service-hero__subtitle {
    max-width: 34rem;
    margin: 0;
    color: var(--color-text-muted, #6b6b6b);
}

.service-hero__glance {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin: 0.5rem 0 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-accent-soft, #ddcdbc);
    border-bottom: 1px solid var(--color-accent-soft, #ddcdbc);
}

.service-hero__glance-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.service-hero__glance-label {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #6b6b6b);
}

.service-hero__glance-value {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ink, #000);
}

.service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Two-column hero begins at 1024, not 768: on tablets the 1.2fr text column
   came out ~390-450px wide, too narrow for the service name to stay on one
   line. Below this the photo stacks above the text at full width. */
@media (min-width: 1024px) {
    .service-hero {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        align-items: center;
        gap: clamp(2rem, 5vw, 3rem);
    }

    /* Wide enough for the full service name to stay on one line — "INOSSI
       Signature Facial Massage" wrapped at the old 34rem cap on every
       viewport. */
    .service-hero__content {
        max-width: 44rem;
        margin: 0 auto;
    }
}

/* ===== SERVICE SECTION (prose: overview / who it's for / what to expect / aftercare) ===== */
/* Same band as .breadcrumb, .service-hero and .service-results, so every
   heading on the page starts at one left edge and the copy runs the full
   width of the page rather than sitting in a column. */
.service-section {
    width: var(--width-band, min(100% - 40px, 1700px));
    margin: clamp(60px, 9vw, 130px) auto 0;
}

.service-section__heading {
    font-family: var(--font-body, 'Lato', sans-serif);
    text-align: left;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 400;
    color: var(--color-ink, #000);
    margin: 0 0 1rem;
}

/* Gold micro-label above a section heading. Structural signposting only
   ("Included", "The Visit") — never a claim about the treatment. */
.service-section__kicker {
    margin: 0 0 0.4rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    /* Was a fixed 0.78rem — never grew past 12.48px even at 4K (PENDING
       5.10c). Floor unchanged so mobile is untouched. */
    font-size: clamp(0.78rem, 0.9vw, 0.95rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent-text, #856828);
}

/* Copy is inset from the heading on the left and pulled back from the right
   so it lands roughly where the hero's gold price/location rules end.
   That right edge cannot be matched with a constant: .service-hero__content
   uses `margin: 0 auto`, which makes the column shrink-to-fit its widest
   line — the service name — so it measures 600px at 1440 and 738px at 4K.
   The calc below tracks the measured gap (30px at 1280 → 659px at 3840) to
   within ~35px across that range; it clamps to 0 below ~1160px, where the
   hero is a single column and the rules already span the full band.
   If the service name or the heading scale changes, re-measure. */
.service-section__intro,
.service-section__list {
    margin-left: clamp(1.25rem, 3vw, 5rem);
    margin-right: clamp(0px, calc(24.5vw - 284px), 660px);
}

.service-section__intro {
    margin-bottom: 1rem;
    color: var(--color-text, #111);
}

.service-section__intro:last-child {
    margin-bottom: 0;
}

/* A paragraph that follows a list had no gap above it — the list carries only
   an inter-item gap, and .service-section__intro only sets margin-bottom. */
.service-section__list + .service-section__intro {
    margin-top: 1.25rem;
}

/* margin-top/bottom only — the shorthand would reset the left/right insets
   set above. */
.service-section__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

/* main.css sets font-size/line-height on <p> only, so list items were falling
   back to the browser default — 16px with `line-height: normal` next to an
   18.4px paragraph at 1440px, and not scaling with the viewport at all.
   Stated here so bullets and paragraphs read as the same body text. */
.service-section__list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--font-size-body, clamp(1rem, 1.4vw, 1.15rem));
    line-height: var(--line-height-body, 1.7);
    color: var(--color-text, #111);
}

.service-section__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle, 50%);
    background-color: var(--color-accent, #d2ab66);
}

/* Nested sub-list: a set of named options under one parent <li> (Chemical
   Peels page — the eight peel types under "Customized Professional Chemical
   Peel"). A dedicated class rather than reusing .service-section__list on the
   inner <ul>, because that class also carries the section-level left/right
   inset (.service-section__intro, .service-section__list rule above) — class
   selectors don't respect nesting, so a second .service-section__list here
   would apply that inset again on top of the parent <li>'s own padding-left.
   The softer-toned, smaller dot (vs. the parent list's gold dot) is the
   visual signal that these lines are one level down; no extra indent is
   added because the parent <li>'s padding-left already shifts this nested
   list's box with it. Font-size is intentionally NOT reduced below the
   parent list's — a smaller multiplier (e.g. 0.92em) would drop under the
   16px body-text floor at the 320px clamp minimum (1rem), which
   projects/1-site/CLAUDE.md's Responsive Design rules forbid ("no text
   smaller than 16px for normal body content"). Muted colour alone carries
   the sub-level distinction. */
.service-section__sublist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.service-section__sublist li {
    position: relative;
    padding-left: 1.2rem;
    font-size: var(--font-size-body, clamp(1rem, 1.4vw, 1.15rem));
    line-height: var(--line-height-body, 1.7);
    color: var(--color-text-muted, #6b6b6b);
}

.service-section__sublist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-circle, 50%);
    background-color: var(--color-accent-soft, #ddcdbc);
}

/* Paired-columns variant: two related lists under one heading (results after
   one treatment vs. after a course; before the visit vs. aftercare). Keeps a
   pair of ideas visually linked without spending two more full-width sections
   on it. Stacks on mobile, so the reading order stays left-column-first. */
.service-section__cols {
    display: grid;
    gap: clamp(2rem, 4vw, 2.5rem);
    margin-top: 1.5rem;
    /* Matches .service-section__intro's own inset on mobile (stacked
       columns) so "After one treatment" / "With consistent treatments" line
       up with the body copy in the sections above (e.g. The Experience),
       instead of sitting flush with the kicker/heading edge. Reset to 0 at
       768px below, where the 2cm-per-column inset takes over instead. */
    margin-left: clamp(1.25rem, 3vw, 5rem);
}

.service-section__col {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* .service-section__intro/.service-section__list normally get the
   heading-relative inset (margin-left/right above) meant for full-width body
   copy under a section heading. Inside a grid column that inset is wrong —
   it pushed the list text ~43px right of .service-section__subheading above
   it instead of lining up with it, and needlessly narrowed the column. */
.service-section__col .service-section__list {
    margin-left: 0;
    margin-right: 0;
}

/* Gold divider between paired columns. Horizontal above the second column
   while stacked on mobile; becomes a vertical rule once .service-section__cols
   switches to two side-by-side tracks at 768px below. */
.service-section__col:not(:first-child) {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-accent, #d2ab66);
}

/* Body face stated explicitly: the global h2/h3 rule in main.css hands every
   h3 the decorative accent face, and uppercase + letter-spacing in a script
   face is unreadable. Project typography rules keep the accent for short
   decorative labels only, never for structural headings. */
.service-section__subheading {
    margin: 0;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink, #000);
}

@media (min-width: 768px) {
    /* gap: 0 is deliberate — with two equal 1fr tracks that puts the column
       boundary (and the divider on it) at exactly the 50% midpoint of the
       block. A nonzero gap would shift the line off-centre by half the gap. */
    .service-section__cols {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin-left: 0;
    }

    /* 2cm inset for each column from its own reference edge: the block's
       left edge for the first column, the divider for the second — same
       value, different reference point, per spec. */
    .service-section__col {
        padding-left: 2cm;
    }

    .service-section__col:not(:first-child) {
        padding-top: 0;
        border-top: none;
        border-left: 1px solid var(--color-accent, #d2ab66);
    }
}

/* ===== SERVICE RESULTS (before / after) ===== */
.service-results {
    width: var(--width-band, min(100% - 40px, 1700px));
    margin: clamp(60px, 9vw, 130px) auto 0;
}

.service-results__heading {
    font-family: var(--font-body, 'Lato', sans-serif);
    text-align: left;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 400;
    color: var(--color-ink, #000);
    margin: 0 0 0.5rem;
}

.service-results__intro {
    max-width: 44rem;
    margin: 0 0 2rem;
    color: var(--color-text-muted, #6b6b6b);
}

/* Auto-scrolling before/after ribbon (opalya.ca-style marquee). One track
   holds two identical image sets; translateX(-50%) advances exactly one set,
   so the loop is seamless. The global prefers-reduced-motion reset in
   navigation.css halts the animation; the reduced-motion rule below then
   turns the ribbon into a manually swipeable strip. Same behaviour on mobile
   (just a shorter image height) — a continuous ribbon reads better on a
   narrow screen than a cramped 3-up grid, and never overflows the document
   because the motion lives inside an overflow-hidden track.

   PENDING 5.12 / WCAG 2.2.2 (Pause, Stop, Hide): the ribbon runs longer than
   5s and used to pause only on :hover/:focus-within — no mechanism at all
   for touch input. .marquee-wrap adds an explicit .marquee__pause button
   (main.js) that toggles .is-paused, which this rule also freezes. */
.marquee-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.marquee-wrap .marquee {
    width: 100%;
    margin-top: 0;
}

.marquee__pause {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--color-accent-soft, #ddcdbc);
    border-radius: 999px;
    background-color: var(--color-bg, #fff);
    cursor: pointer;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    color: var(--color-text, #111);
    transition: border-color var(--duration-base, 0.25s) var(--ease-standard, ease);
}

.marquee__pause:hover,
.marquee__pause:focus-visible {
    border-color: var(--color-accent, #d2ab66);
}

/* The global a:focus-visible ring (navigation.css) only reaches anchors, so
   this <button> needs its own outline the same way .btn-book does. */
.marquee__pause:focus-visible {
    outline: 2px solid var(--color-focus, #d2ab66);
    outline-offset: 2px;
}

.marquee__pause-icon--play {
    display: none;
}

.marquee__pause[aria-pressed="true"] .marquee__pause-icon--pause {
    display: none;
}

.marquee__pause[aria-pressed="true"] .marquee__pause-icon--play {
    display: inline-block;
}

/* Nothing left to pause once the global reduced-motion reset (navigation.css)
   has already stopped the animation. */
@media (prefers-reduced-motion: reduce) {
    .marquee__pause {
        display: none;
    }
}

.marquee {
    margin-top: 0.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: marquee-scroll 45s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    flex: 0 0 auto;
    margin-right: 1.25rem;
}

.marquee__image {
    display: block;
    height: clamp(220px, 26vw, 380px);
    width: auto;
    border-radius: var(--radius-sm, 5px);
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Single-photo variant: used when only one confirmed before/after photo
   exists for a treatment (a marquee loop of one real + one duplicate image
   would just sit still, which reads as broken rather than as a ribbon). */
.service-results__single {
    margin-top: 0.5rem;
}

.service-results__single-image {
    display: block;
    height: clamp(220px, 26vw, 380px);
    width: auto;
    border-radius: var(--radius-sm, 5px);
}

.service-results__disclaimer {
    margin: 1.5rem 0 0;
    /* Was a fixed 0.9rem — never grew past 14.4px even at 4K (PENDING
       5.10c). Floor unchanged so mobile is untouched. */
    font-size: clamp(1rem, 1vw, 1.05rem);
    color: var(--color-text-muted, #6b6b6b);
}

/* Caption under the After one treatment / With consistent treatments columns.
   Same type as the list items above it (not the muted, smaller
   .service-results__disclaimer) and capped to a reading measure instead of
   the full band width, so it reads as body copy anchored left rather than a
   full-bleed line spanning both columns. */
.service-results__note {
    margin: 1.5rem auto 0;
    max-width: 44rem;
    text-align: center;
    font-size: var(--font-size-body, clamp(1rem, 1.4vw, 1.15rem));
    line-height: var(--line-height-body, 1.7);
    color: var(--color-text, #111);
}

/* The photo-evidence block ("Before & After" / "Real Clients. Real Results.")
   is a second subsection inside the same .service-results element, so it never
   picked up the section-level top margin and sat directly under the results
   list. Matches the gap between sections instead. */
.service-results .service-section__kicker:not(:first-child) {
    margin-top: clamp(60px, 9vw, 130px);
}

.service-page--editorial .service-results .service-section__kicker:not(:first-child) {
    margin-top: 1.5cm;
}

.service-results__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.5rem;
    color: var(--color-ink, #000);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .marquee {
        overflow-x: auto;
    }
}

@media (max-width: 650px) {
    .breadcrumb,
    .service-hero,
    .service-section,
    .service-results {
        width: var(--width-container-mobile, min(100% - 30px, 1200px));
    }

}

/* ==========================================================================
   EDITORIAL HEADINGS — opt-in per page via .service-page--editorial
   Serif section headings, currently on facial-massage.html and
   carboxytherapy.html. Scoped to the modifier rather than .service-page
   because the other 9 service pages have not adopted this look yet, and
   because .services-carousel__heading / .faq__heading / .promo__heading are
   shared with the homepage and the rest of the site — restyling them
   unscoped would repaint every page.
   The serif carries heading hierarchy; --font-accent (the script face) stays
   banned here per the typography rules in projects/1-site/CLAUDE.md.
   Cormorant runs small at a given px, so sizes are raised to match the
   optical weight of the Lato headings they replace.
   ========================================================================== */
.service-page--editorial .service-section__heading,
.service-page--editorial .service-results__heading,
.service-page--editorial .services-carousel__heading,
.service-page--editorial .faq__heading,
.service-page--editorial .promo__heading {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-weight: 400;
}

/* Section rhythm tightened on editorial pages only: hero→Included, Included→The
   Visit and The Visit→Results were clamp(60px, 9vw, 130px) (.service-section/
   .service-results below), Results→You May Also Like was clamp(70px, 10vw,
   160px) (.services in main.css, shared with the homepage — not overridden
   there). Desktop and mobile both use the same fixed 1.5cm here, replacing
   the viewport-scaled gap, per Pasha. Scoped to --editorial so the other 9
   service pages and the homepage keep their existing rhythm. */
.service-page--editorial .service-section,
.service-page--editorial .service-results,
.service-page--editorial .services {
    margin-top: 1.5cm;
}

.service-page--editorial .service-section__heading,
.service-page--editorial .service-results__heading {
    font-size: clamp(2.1rem, 4vw, 3rem);
}

.service-page--editorial .services-carousel__heading {
    font-size: clamp(2rem, 3.8vw, 2.7rem);
}

.service-page--editorial .faq__heading,
.service-page--editorial .promo__heading {
    font-size: clamp(2.2rem, 4.2vw, 3.1rem);
}

/* ===== LARGE-SCREEN TYPOGRAPHY (2K/4K) ===== */
/* On very wide monitors the content bands and images cap out (--width-band
   maxes at 1700px) while clamp()-based text also caps, leaving copy looking
   small next to the large imagery. Scoped to .service-page so the approved
   homepage is untouched; carried by this shared file to every future service
   page. */
@media (min-width: 2200px) {
    .service-page .service-hero__eyebrow {
        font-size: 3rem;
    }

    /* 3.3rem (was 3.2rem) — the facial-massage.html H1 clamp now caps at
       3.25rem/52px (see .service-hero__heading above); 3.2rem would have
       shrunk it slightly at ≥2200px, repeating the same regression pattern
       as the editorial headings below. Still a real boost for the other 10
       pages, whose H1 clamp caps at 2.6rem/41.6px. */
    .service-page .service-hero__heading {
        font-size: 3.3rem;
    }

    /* 2.1rem — clamp cap above is 2rem/32px; keep growing past it rather than
       repeating the 5.10b shrink bug. */
    .service-page .service-hero__tagline {
        font-size: 2.1rem;
    }

    .service-page .service-hero__subtitle {
        font-size: 1.3rem;
        max-width: 40rem;
    }

    /* The heading grows to 3.2rem here, so the column has to grow with it or
       the service name wraps again. */
    .service-page .service-hero__content {
        max-width: 52rem;
    }

    .service-page .service-hero__glance-value {
        font-size: 1.35rem;
    }

    .service-page .service-hero__glance-label {
        font-size: 0.95rem;
    }

    .service-page .service-section__heading,
    .service-page .service-results__heading {
        font-size: 2.7rem;
    }

    /* No per-element max-width here any more: .service-section is the reading
       measure now, so capping the text again would re-create the narrow
       column inside it. .service-results__intro still lives in the wide
       results band, so it keeps its own cap. */
    .service-page .service-section__intro,
    .service-page .service-section__list li,
    .service-page .service-results__note {
        font-size: 1.3rem;
    }

    .service-page .service-results__intro {
        font-size: 1.3rem;
        max-width: 52rem;
    }

    /* Keeps the Chemical Peels nested peel-type list growing in step with
       .service-section__list li above (both share the same base clamp,
       which caps at 1.15rem/18.4px — without this override the sub-list
       would stay capped there while the rest of the page's body copy grows
       to 1.3rem/20.8px at this breakpoint). */
    .service-page .service-section__sublist li {
        font-size: 1.3rem;
    }

    .service-page .service-section__subheading {
        font-size: 1.15rem;
    }

    .service-page .services-carousel__heading {
        font-size: 2.3rem;
    }

    .service-page .services-carousel__name {
        font-size: 1.35rem;
    }

    .service-page .services-carousel__meta {
        font-size: 1.2rem;
    }

    .service-page .faq__heading,
    .service-page .promo__heading {
        font-size: 2.7rem;
    }

    .service-page .faq__trigger {
        font-size: 1.45rem;
    }

    .service-page .promo__text {
        font-size: 1.3rem;
        max-width: 46rem;
    }

    /* Editorial override (facial-massage.html and carboxytherapy.html — the
       only pages with both classes on the same element, so this compound
       selector always wins over the generic .service-page rules above
       regardless of source order). Without this, the block above SHRINKS
       the five headings the
       .service-page--editorial rule (lines ~405–426) already grew past
       their own clamp cap: section/results 48px→43.2px, carousel
       43.2px→36.8px, faq/promo 49.6px→43.2px (PENDING 5.10b). Values below
       keep every heading at or above its editorial clamp cap. faq__answer p
       is added here too — it isn't in the generic list above, so on this
       page it stayed on the base `p` clamp (18.4px cap) while
       .service-section__intro right next to it already got 1.3rem/20.8px;
       scoped to editorial only, the shared FAQ block elsewhere is untouched. */
    .service-page.service-page--editorial .service-section__heading,
    .service-page.service-page--editorial .service-results__heading {
        font-size: 3.3rem;
    }

    .service-page.service-page--editorial .services-carousel__heading {
        font-size: 2.95rem;
    }

    .service-page.service-page--editorial .faq__heading,
    .service-page.service-page--editorial .promo__heading {
        font-size: 3.4rem;
    }

    .service-page.service-page--editorial .faq__answer p {
        font-size: 1.3rem;
    }
}