/**
 * cassiopeia_reformed - child template styles
 *
 * Layered on top of the parent Cassiopeia stylesheet. Palette and typography
 * custom properties are declared inline by index.php.
 *
 * @copyright  (C) 2026 interGen support
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* -------------------------------------------------------------------------
   0a. Base typography and colour
   Matched to the reference: custom.scss (html/body, headings, links),
   _colors.scss (palette) and styles.yaml (section colours).
   ------------------------------------------------------------------------- */

html,
body {
    font-family: var(--reformed-font-body);
    font-size: 1.1rem;

    /*
     * The reference asks for weight 400 but only ships Poppins Light, so it
     * actually renders at 300. We ship Medium too, and CSS weight matching
     * prefers 500 over 300 when 400 is requested - which would have silently
     * made all body copy heavier than the reference. Hence 300 explicitly.
     */
    font-weight: 300;
    line-height: 1.5;
    color: var(--reformed-base-text-inverse);
    background: var(--reformed-body-bg);
    scroll-behavior: smooth;
}
body {
    overflow-x:hidden;
}
.container-xxl {
    margin-inline:auto !important;
}
.container-bottom-c {
    position:relative;
    z-index:3;
}
.site {
    background: var(--reformed-body-bg);
}

/* Links */
a {
    color: var(--reformed-link);
    text-decoration: none;
}

a:hover,
a:active,
a:focus-visible {
    color: var(--reformed-link-hover);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3 {
    font-family: var(--reformed-font-title);
    font-weight: 700;
    color: var(--reformed-base-text-inverse);
}

h1,
.h1 {
    font-size: clamp(3rem, 5vw, 8rem);
}

h2,
.h2 {
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
}

h3,
.h3 {
    font-size: clamp(1.5rem, 2vw, 2rem);
}

/* Display accent face, used sparingly for script headings. */
.text-display {
    font-family: var(--reformed-font-display);
    font-weight: 400;
}

/* Uppercase tracked-out module titles. */
.moduletable > h3,
.card-header,
.section-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}

/* -------------------------------------------------------------------------
   0b. Container widths and section rhythm
   ------------------------------------------------------------------------- */

/*
 * The cap sits on the grid's children, not the grid itself. Cassiopeia's
 * site-grid already centres content with 1fr side tracks, so leaving it full
 * width lets .full-width items (the hero) span edge to edge without a 100vw
 * breakout - which would count the scrollbar and cause horizontal overflow.
 * The nav is excluded for the same reason.
 */
.site-grid > [class^="container-"]:not(.full-width),
.site-grid > [class*=" container-"]:not(.full-width),
.container-header > .grid-child:not(.container-nav),
.container-footer > .grid-child {
    width: calc(100% - 4rem);
    max-width: var(--reformed-container-width);
    margin-inline: auto;
}

@media (width <= 94.99rem) {
    .site-grid > [class^="container-"]:not(.full-width),
    .site-grid > [class*=" container-"]:not(.full-width),
    .container-header > .grid-child:not(.container-nav),
    .container-footer > .grid-child {
        max-width: var(--reformed-container-width-md);
    }
}

.site-grid > [class^="container-"],
.site-grid > [class*=" container-"] {
    padding-block: 3rem;
}

.container-footer {
    background: var(--reformed-footer-bg);
    color: var(--reformed-footer-text);
    padding-block: 3rem;
}
/* Our Services intro section: decorative waves in the left viewport gutter,
   mirroring the reference #g-intro::before. The card wrapper is centred within
   the content column, so `left: calc(50% - 50vw)` pushes the pseudo-element out
   to the viewport's left edge (where there are no cards to cover). */
.homeIntro {
    position: relative;
    h2 {
        text-align:center;
    }
}

.homeIntro::before {
    content: "";
    position: absolute;
    left: calc(50% - 50vw);
    top: calc(-1rem + -3rem);
    bottom: -100px;
    z-index: 0;
    width: 20vw;
    height: calc(100% + 190px);
    pointer-events: none;
    background-image: url(/images/backgrounds/waves5.svg);
    background-position: left -145px;
    background-repeat: no-repeat;
    background-size: cover;
}

/* No room for the gutter waves once the layout goes single-column. */
@media (width < 768px) {
    .homeIntro::before {
        display: none;
    }
}

/* Hide the "Home" page heading Joomla emits on this raw-URL category view
   (the menu item still resolves to the Home item id). */
.services-cards .page-header {
    display: none;
}

/* "Our Services" section heading — reference style (Montserrat 700, ~32px,
   centred above the grid). It carries .revealLeft so animations.js slides it in
   from the left on scroll, like the reference h2.revealLeft. */
.homeIntro > .revealLeft, .content-bottom-b .revealLeft {
    margin-block: 0 1.5rem;
    font-family: var(--reformed-font-title);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--reformed-white-2);
}
.centered {
    text-align:center;
}
/* -------------------------------------------------------------------------
   0b-i. Features band (.container-bottom-a) — matches the reference #g-features
   (Meet Our Stylists + Products We Use): a darker #111 band with the waves
   decoration mirrored into the RIGHT viewport gutter (rotated 180deg). The
   section is full-width, so `right: 0` lands the pseudo-element in the gutter.
   ------------------------------------------------------------------------- */
.container-bottom-a {
    position: relative;
    z-index: 5;
    padding-block: 3rem;
    background: var(--reformed-black-3);
}

.container-bottom-a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: -100px;
    z-index: 2;
    width: 20vw;
    height: 100%;
    pointer-events: none;
    background-image: url(/images/backgrounds/waves5.svg);
    background-position: left -145px;
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotate(180deg);
}
.container-bottom-b {
    position:relative;
    .moduletable {
        position:relative;
        z-index:3;
        &:first-of-type {
            margin-bottom:6rem;
        }
    }
    &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        bottom: 0px;
        z-index: 2;
        width: 20vw;
        height: calc(100% + 20px);
        background-image: url(/images/backgrounds/waves5.svg);
        background-position: left -145px;
        background-repeat: no-repeat;
        background-size: cover;
    }
}
/* The band holds two modules (Meet Our Stylists + Products We Use); lay them
   side by side like the reference #g-features row. position:relative keeps the
   content above the decorative ::before waves. */
.container-bottom-a .container-xxl {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* Each module is an image + text card (reference RBcard / .jl-grid). The module
   title <h2> is a sibling of .mod-custom, so `display: contents` lifts the image
   and .tm-content up into the .moduletable grid alongside it, letting all three
   place into named areas: a square image column beside the stacked title/content. */
.container-bottom-a .moduletable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "img title"
        "img content";
    column-gap: 1.75rem;
    align-items: center;
}

.container-bottom-a .mod-custom {
    display: contents;
}

.container-bottom-a .moduletable > h2 {
    grid-area: title;
    margin: 0 0 0.5rem;
    font-family: var(--reformed-font-title);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--reformed-white-2);
}

.container-bottom-a .tm-image {
    grid-area: img;
    align-self: center;
    object-fit: cover;
}

.container-bottom-a .tm-content {
    grid-area: content;
    margin-top: 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--reformed-white-2);
}

/* Stylist names (card A) stack as links in the reference's teal, like #g-features.
   The reference has no hover change, so pin teal on hover/focus too — otherwise the
   global `a:hover` (green) would take over. */
.container-bottom-a .tm-content a {
    display: block;
    color: var(--reformed-teal);
    text-decoration: none;
}
.container-bottom-a .tm-content a:hover,
.container-bottom-a .tm-content a:focus-visible {
    color:var(--reformed-accent-1);
}

/* Products list (card B) — disc bullets. */
.container-bottom-a .tm-content ul {
    margin: 0;
    padding-inline-start: 1.5rem;
    list-style: disc;
}

/* Mirror the second card: image on the right, text on the left. */
.container-bottom-a .moduletable:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "title img"
        "content img";
}

@media (width < 768px) {
    .container-bottom-a::before {
        display: none;
    }

    .container-bottom-a .container-xxl {
        grid-template-columns: 1fr;
    }

    /* Stack each card: image on top, then title, then content. */
    .container-bottom-a .moduletable,
    .container-bottom-a .moduletable:nth-child(2) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "img"
            "title"
            "content";
        justify-items: start;
        row-gap: 1rem;
    }
}

/* -------------------------------------------------------------------------
   0c. Extra grid rows
   The parent grid only declares areas through bot-b, so bottom-c and
   bottom-d need adding on both the narrow and wide layouts.
   ------------------------------------------------------------------------- */

@supports (display: grid) {
    .site-grid {
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a top-a top-a top-a ."
            ". top-b top-b top-b top-b ."
            ". comp comp comp comp ."
            ". side-r side-r side-r side-r ."
            ". side-l side-l side-l side-l ."
            ". bot-a bot-a bot-a bot-a ."
            ". bot-b bot-b bot-b bot-b ."
            ". bot-c bot-c bot-c bot-c ."
            ". bot-d bot-d bot-d bot-d .";
    }

    @media (width >= 992px) {
        .site-grid {
            grid-template-areas:
                ". banner banner banner banner ."
                ". top-a top-a top-a top-a ."
                ". top-b top-b top-b top-b ."
                ". side-l comp comp side-r ."
                ". bot-a bot-a bot-a bot-a ."
                ". bot-b bot-b bot-b bot-b ."
                ". bot-c bot-c bot-c bot-c ."
                ". bot-d bot-d bot-d bot-d .";
        }
    }
}
@media (width >= 1400px) {
    .container-xxl {
        max-width: 95rem;
    }
}
.container-bottom-c {
    grid-area: bot-c;
}

.container-bottom-d {
    grid-area: bot-d;
}

.container-bottom-c,
.container-bottom-d {
    position: relative;
}

.container-bottom-c > *,
.container-bottom-d > * {
    flex: 1;
    margin: 0.5em 0;
}
footer .g-grid {
    display:flex;
    justify-content: space-between;
    gap: 2rem;

    .g-logo img {
        max-width: 300px;
        filter: drop-shadow(rgba(255, 255, 255, 0.5) 0px 0.2rem 0.8rem);
    }
}
footer {
    &.container-footer {
        padding-block:0;
    }
    .grid-child {
       margin-inline:0;
    }
    .moduletable {
        width:100%;
    }
}

/* -------------------------------------------------------------------------
   1b. Footer content (logo / address+phone+social / copyright)
   The footer module reuses the reference's Gantry markup (.g-grid, .g-block,
   .topbar, .g-social, .g-copyright), so these rules mirror the reference
   #g-footer: address and phone at 1.1rem, a row of brand icons, and small
   copyright print with teal policy links.
   ------------------------------------------------------------------------- */

.container-footer .topbar {
    font-size: 1.1rem;
    line-height: 1.5;
}

.container-footer .address p {
    margin: 0;
}

/* The phone number is a link but reads as plain text, like the reference. */
.container-footer .number {
    margin-block: 0.35rem 0.85rem;
}

.container-footer .number a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--reformed-footer-text);
    text-decoration: none;
}

.container-footer .number svg {
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

/* Brand icons in a row, matching the reference spacing. */
.container-footer .g-social {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.25rem;
    line-height: 1;
}

.container-footer .g-social a {
    color: var(--reformed-footer-text);
    text-decoration: none;
}

.container-footer .g-social a:hover,
.container-footer .g-social a:focus-visible {
    color: var(--reformed-green);
}

/* Icon-only links keep an accessible label off-screen. */
.container-footer .g-social-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Copyright: small print with teal policy links (reference). */
.container-footer .g-copyright {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--reformed-footer-text);
}

.container-footer .g-copyright a {
    color: var(--reformed-teal);
    text-decoration: none;
}

.container-footer .g-copyright a:hover,
.container-footer .g-copyright a:focus-visible {
    text-decoration: underline;
}
.stylists-page {
    .container-top-a {
        position:relative;
        &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            bottom: -100px;
            z-index: 2;
            width: 20vw;
            height: 100vh !important;
            background-image: url(/images/backgrounds/waves5.svg);
            background-position: left -145px;
            background-repeat: no-repeat;
            background-size: cover;
            opacity:0;
            animation: wavesFade 1s forwards;
        }
    }
    .container-bottom-b {
        position:relative;
        &::before {
            position: absolute;
            content: "";
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 2;
            width: 20vw;
            height: 100%;
            left: calc(100% - 20vw);
            background-image: url(/images/backgrounds/waves5.svg);
            background-repeat: no-repeat;
            background-size: cover;
            transform: rotate(180deg);
            background-position: right;
        }
    }
    .container-component {
        position:relative;
        z-index:3;
        background:#111111;

        &.full-width {
            margin-left: calc(-50vw + 50%) !important;
            margin-right: calc(-50vw + 50%);
            margin-top: 0;
            margin-bottom: 0;
            max-width: 100vw;
            width: 100vw;
        }
    }
}
@keyframes wavesFade {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* Phone and below: the row stacks into a single centred column, like the
   reference (logo, the phone-only CONTACT US button, address+phone+social,
   then the mobile copyright line). */
@media (width < 768px) {
    footer .g-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;
    }

    .container-footer .number a,
    .container-footer .g-social {
        justify-content: center;
    }
}
@media (width <= 991.98px) {
    .container-bottom-c,
    .container-bottom-d {
        flex-direction: column;
    }

    .container-bottom-c > *,
    .container-bottom-d > * {
        flex: 0 auto;
    }
}

/* -------------------------------------------------------------------------
   1. Header / navigation shell
   ------------------------------------------------------------------------- */

.container-header {
    position: relative;
    z-index: 11;
    background: var(--reformed-nav-bg);
    color: var(--reformed-nav-text);
}

/*
 * Home page: the header floats over the full-height hero with no background,
 * so the hero image reaches the top of the viewport and the nav reads against
 * it directly. Taken out of flow, the hero rises to sit beneath the header.
 * This is the pre-headroom.js state; headroom.js will later restore a solid
 * background and reveal-on-scroll behaviour once the hero is scrolled past.
 */
.home-page .container-header {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    background: transparent;
}

/*
 * Headroom states (home page). At the top the header stays transparent and
 * absolute, over the hero. Once scrolled past the top it becomes a solid fixed
 * bar that slides out of view on scroll-down and back in on scroll-up. Classes
 * are toggled by headroom.js (init in reformed.js).
 */
.home-page .container-header.headroom {
    transition: transform 0.25s ease;
    will-change: transform;
}

.home-page .container-header.headroom--not-top {
    position: fixed;
    background: var(--reformed-nav-bg);
}

.home-page .container-header.headroom--not-top.headroom--pinned {
    transform: translateY(0);
}

.home-page .container-header.headroom--not-top.headroom--unpinned {
    transform: translateY(-100%);
}

/*
 * Four column navigation: logo / menu / call-to-action / social.
 * Column widths and every collapse below are taken from the reference
 * menu.scss so the header reflows at exactly the same widths.
 */
.container-header .container-nav {
    display: grid;
    grid-template-columns: 250px 455px 1fr 290px;
    gap: 2rem;
    align-items: center;

    /* The reference nav spans the viewport; only inner sections are capped. */
    width: calc(100% - 4rem);
    margin-inline: auto;

    /* Reference blocks carry an 11px block margin; this reproduces it. */
    padding-block: 11px;
}

.container-header .container-nav > * {
    display: flex;
    align-items: center;
    min-width: 0;
}

/*
 * Collapse the columns that have no module assigned, so an empty position
 * does not leave a reserved gap in the header.
 */
.container-header .container-nav:not(.has-social) {
    grid-template-columns: 250px 455px 1fr;
}

.container-header .container-nav:not(.has-cta):not(.has-social) {
    grid-template-columns: 250px 1fr;
}

.container-header .container-nav:not(.has-brand) {
    grid-template-columns: 455px 1fr 290px;
}

/* Cassiopeia pads the brand by 5.5px top and bottom, which inflates the bar. */
.nav-logo .navbar-brand {
    padding-block: 0;
    margin: 0;
}

.nav-logo .brand-logo img,
.nav-logo .brand-logo svg {
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 0.2rem 0.8rem rgb(255 255 255 / 50%));
}

/* -------------------------------------------------------------------------
   1b. Call to action buttons
   ------------------------------------------------------------------------- */

.nav-cta {
    justify-content: center;
}

.nav-cta > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-inline: 0;
}

.jl-button {
    position: relative;
    display: inline-block;
    padding: 15px;
    font-family: var(--reformed-font-body);
    font-weight: 400;
    line-height: 1;
    color: var(--reformed-white);
    background: transparent;
    border: 1px solid var(--reformed-white);
    border-radius: 0;
    text-decoration: none;
}

.jl-button:hover,
.jl-button:focus-visible {
    color: var(--reformed-white);
}

.jl-btn-text {
    font-size: 1.2rem;
}

/*
 * Two white bars sit in opposite corners and sweep across on hover.
 * Timing and skew are taken from the reference buttonFX mixin.
 */
.jl-button::before,
.jl-button::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    height: 3px;
    background: var(--reformed-white);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.jl-button::before {
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: skewX(-45deg);
}

.jl-button::after {
    inset-block-end: 0;
    inset-inline-start: 0;
    transform: skewX(135deg);
}

.jl-button:hover::before,
.jl-button:focus-visible::before {
    inset-inline-end: 90%;
}

.jl-button:hover::after,
.jl-button:focus-visible::after {
    inset-inline-start: 90%;
}

/* Underlined variant, no sweeping bars. */
.plainButtonLink .jl-button {
    border: none;
    border-block-end: 1px solid var(--reformed-white);
    font-size: 1.2rem;
}

.plainButtonLink .jl-button::before,
.plainButtonLink .jl-button::after {
    display: none;
}

/* -------------------------------------------------------------------------
   1c. Address, phone and social
   ------------------------------------------------------------------------- */

/*
 * The reference groups the address and phone in a .topbar wrapper sized at
 * 1rem. Our module markup has no wrapper, so the column sets the size and
 * .g-social opts back up - otherwise the phone line inherits the 1.1rem body
 * size and adds 2.6px to the whole header.
 */
.nav-social {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--reformed-nav-text);
    p, a {
        margin-bottom:0;
        text-decoration:none;
    }
    .address, .social {
        margin-bottom:0;
    }
}

.nav-social > div {
    margin-inline: 0;
}

/* Stands in for the reference .topbar bottom margin. */
.nav-social .number {
    margin-bottom: 10px;
}

.nav-social .address p,
.nav-social .number p {
    margin: 0;
}

.nav-social .number {
    margin-inline-start: -5px;
}

.nav-social .number svg {
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

.nav-social .g-social {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    line-height: 1;
    text-align: start;
}

.nav-social .g-social a {
    color: var(--reformed-white);
    padding: 0;
}

.nav-social .g-social a:hover,
.nav-social .g-social a:focus-visible {
    color: var(--reformed-green);
}

/* Icon-only links keep their label for assistive tech. */
.nav-social .g-social-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   1d. Visibility utilities
   Module content carries these classes - the "Call" button is phone only.
   ------------------------------------------------------------------------- */

.visible-phone {
    display: none;
}

@media (width < 768px) {
    .visible-phone {
        display: inline-block;
    }

    .hidden-phone {
        display: none;
    }
}

/* Social drops out first, and the menu column keeps its width. */
@media (width < 1569px) {
    .container-header .container-nav {
        grid-template-columns: auto 455px 1fr;
    }

    /*
     * Needs the full ancestor chain (0,3,0): the base rule
     * `.container-header .container-nav > * { display: flex }` is (0,2,0) and
     * would otherwise beat a bare `.nav-social`, leaving social visible (it
     * would wrap to a second row and inflate the auto logo column).
     */
    .container-header .container-nav .nav-social {
        display: none;
    }
}

/*
 * The reference narrows the menu column to 322px below 1420, but that rule is
 * dead on the reference: its own `< 1569` rule sets `auto 455px 1fr !important`,
 * which wins. So the reference actually renders a 455px menu column all the way
 * down to 1099 — matched by simply carrying the 455px above down to the 1099
 * breakpoint (no 322px step here).
 */

@media (width < 1160px) {
    .nav-logo .brand-logo img,
    .nav-logo .brand-logo svg {
        max-width: 200px;
    }
}

/* The call to action moves onto its own row. */
@media (width < 1099px) {
    .container-header .container-nav {
        grid-template-columns: 200px 1fr;
        grid-template-rows: 95px auto;
        row-gap: 1rem;
        padding-block: 20px;
    }

    .nav-cta {
        grid-row: 2 / 3;
        grid-column: 1 / -1;
        margin-inline-end: auto;
        justify-content: flex-start;
    }
}

/* Single column: logo, then menu, then call to action. */
@media (width < 768px) {
    .container-header .container-nav {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .nav-logo {
        margin-inline: auto;
        width: auto;
        height: fit-content;
    }

    .nav-logo .brand-logo {
        padding-inline-start: 0;
    }

    .nav-menu {
        grid-row: 2 / 3;
        margin-inline: auto;
        width: auto;
    }

    .nav-menu .reformed-menu > .nav-item > a {
        padding-block: 0;
    }

    .nav-cta {
        grid-row: 3 / 4;
        grid-column: auto;
        margin-inline: auto;
        width: auto;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   2. Top level menu
   ------------------------------------------------------------------------- */

.reformed-menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Cassiopeia sets `.container-header .mod-menu > li + li { margin-left: 1.55em }`,
 * which stacks 30px onto the 20px gap and wrapped the menu onto two lines.
 * Its specificity is (0,2,2), so this selector needs three classes to win.
 */
.container-nav .reformed-menu > .nav-item {
    position: relative;
    margin: 0;
}

.reformed-menu > .nav-item > a,
.reformed-menu > .nav-item > span {
    display: inline-block;
    padding-block: 0.235rem;
    padding-inline: 0;
    font-family: var(--reformed-font-body);
    font-size: 1.2rem;

    /*
     * The reference asks for 400 and, shipping only Poppins Light, renders at
     * 300. We also ship Medium, and CSS prefers 500 over 300 for a 400 request
     * - which set every item a few pixels wider and wrapped the menu onto two
     * lines inside its 455px column. 300 matches the reference metrics.
     */
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--reformed-nav-text);
    transition: color 0.2s ease-out;
}

.reformed-menu > .nav-item > a:hover,
.reformed-menu > .nav-item > a:focus-visible {
    color: var(--reformed-link-hover);
}

.reformed-menu > .nav-item.active > a,
.reformed-menu > .nav-item.current > a {
    color: var(--reformed-accent-1);
}

/* -------------------------------------------------------------------------
   3. Submenu toggle
   The reference hides the parent indicator, so it is visually collapsed but
   kept in the accessibility tree and revealed on keyboard focus.
   ------------------------------------------------------------------------- */

.reformed-menu__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    clip-path: inset(50%);
    white-space: nowrap;
}

.reformed-menu__toggle:focus-visible {
    position: static;
    width: auto;
    height: auto;
    margin-inline-start: 0.35rem;
    overflow: visible;
    clip-path: none;
    outline: 2px solid var(--reformed-accent-1);
    outline-offset: 2px;
}

.reformed-menu__chevron {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
    transition: transform 0.2s ease-out;
}

/* -------------------------------------------------------------------------
   4. Dropdowns - fade animation, matching the reference
   ------------------------------------------------------------------------- */

.reformed-menu__sub {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 100;
    min-width: var(--reformed-menu-dropdown-width);
    margin: 0;
    margin-top: 10px;
    padding: 0.5rem 0;
    list-style: none;
    background: #050505;
    border: 1px solid rgb(241 241 241 / 20%);
    border-radius: 0.25rem;

    /* Hidden resting state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s;
}

/* Bridge the 10px gap so the pointer can travel into the dropdown. */
.reformed-menu__sub::before {
    content: "";
    position: absolute;
    top: -10px;
    inset-inline: 0;
    height: 10px;
}

.reformed-menu > .nav-item:hover > .reformed-menu__sub,
.reformed-menu > .nav-item:focus-within > .reformed-menu__sub,
.reformed-menu > .nav-item.is-open > .reformed-menu__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s;
}

.reformed-menu__sub .nav-item > a,
.reformed-menu__sub .nav-item > span {
    display: block;
    padding: 0.3125rem 0.9375rem;
    font-family: var(--reformed-font-body);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--reformed-nav-text);
    transition: color 0.2s ease-out;
}

.reformed-menu__sub .nav-item > a:hover,
.reformed-menu__sub .nav-item > a:focus-visible {
    color: var(--reformed-accent-1);
}
/* Hero fix */
@media (width < 992px) {
    .hero {
        height: fit-content;
        overflow: hidden;
        min-height: unset !important;
        padding: 4vw;
        .goSouth {
            display:none;
        }
    }
}
/* -------------------------------------------------------------------------
   5. Stacked menu
   Below 768px the reference drops the dropdowns and stacks the nav, so
   submenus become accordions driven by the parent toggle. Hover must not
   open anything here - there is no hover on touch.
   ------------------------------------------------------------------------- */

@media (width < 768px) {
    .reformed-menu {
        align-items: stretch;
        gap: 20px;
    }
    header.header.container-header {
        background: #000;
        padding-bottom: 1rem;
    }

    .reformed-menu > .nav-item {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .reformed-menu > .nav-item > a,
    .reformed-menu > .nav-item > span {
        flex: 1 1 auto;
        padding: 0.75rem 0;
    }

    /* The chevron becomes a real, visible control. */
    .reformed-menu__toggle {
        position: static;
        width: 2.75rem;
        height: 2.75rem;
        overflow: visible;
        clip-path: none;
        color: var(--reformed-nav-text);
        cursor: pointer;
    }

    .reformed-menu__toggle[aria-expanded="true"] .reformed-menu__chevron {
        transform: rotate(-135deg);
    }

    .reformed-menu__sub,
    .reformed-menu > .nav-item:hover > .reformed-menu__sub,
    .reformed-menu > .nav-item:focus-within > .reformed-menu__sub {
        position: static;
        flex: 1 0 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
    }

    .reformed-menu > .nav-item.is-open > .reformed-menu__sub {
        grid-template-rows: 1fr;
    }

    .reformed-menu__sub > * {
        min-height: 0;
        overflow: hidden;
    }

    .reformed-menu__sub .nav-item > a,
    .reformed-menu__sub .nav-item > span {
        padding-inline-start: 1rem;
    }
}

/* -------------------------------------------------------------------------
   6. Hero
   Full-bleed 16:9 stage matching the reference: cover image, 70% black
   overlay, message centred in a capped column, scroll cue at the foot.
   ------------------------------------------------------------------------- */

/* The banner opts out of the standard section rhythm; the grid gives it
   full width via its full-start / full-end span. */
.site-grid > .container-banner {
    padding-block: 0;
    margin-bottom:0;
}

/*
 * Layers stack upwards from the image rather than using negative z-index,
 * which the compositor paints unreliably behind an isolated parent.
 */
.hero {
    position: relative;

    /*
     * A single named cell so the message centres against the whole stage.
     * Without it, the scroll cue would claim a second row and push the
     * message into the top half.
     */
    display: grid;
    grid-template-areas: "stage";
    place-items: center;
    width: 100%;

    /*
     * Fill the viewport. The header overlays the hero on the home page (see
     * .home-page .container-header) rather than sitting above it, so the whole
     * viewport height is the hero's to use and the scroll cue lands just above
     * the fold. Replaces the reference's fixed 16:9 ratio, which overflowed
     * tall on wide screens.
     */
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.hero__content {
    grid-area: stage;
}

.hero__media,
.hero__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.hero__media {
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / 70%);
}

.hero__content,
.goSouth {
    position: relative;
    z-index: 2;
}

/*
 * The message sits on its own plate, as the reference does: an
 * rgba(17,17,17,0.8) panel 1338px wide with 30px of padding, centred in the
 * stage. Spacing inside comes from margins on each element, matching the
 * reference rather than a flex gap.
 */
.hero__content {
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    width: min(100% - 2rem, 1338px);
    margin-inline: auto;
    padding: 30px;
    background: rgb(17 17 17 / 80%);
    text-align: center;
}

.hero__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    font-family: var(--reformed-font-title);
    font-size: clamp(3rem, 5vw, 8rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--reformed-white);
    overflow: hidden;
}

/* Optional script treatment for a word inside the title. */
.hero__title .script {
    font-family: var(--reformed-font-display);
    text-transform: none;
}

.hero__tagline {
    margin: 1rem 0 0;
    font-family: var(--reformed-font-body);
    font-size: 1.5rem;


    /* Held slightly back from the heading, as the reference does. */
    color: rgb(255 255 255 / 80%);
}

.hero__content .jl-button {
    margin-block-start: 20px;
}

/* -------------------------------------------------------------------------
   6b. Scroll cue
   Lifted out of the grid flow and pinned to the foot of the stage.
   ------------------------------------------------------------------------- */

.goSouth {
    position: absolute;
    inset-block-end: 2.5rem;
    inset-inline: 0;

    /*
     * The reference builds the cue by rotating the whole box a quarter turn:
     * the arrow, which points right in its own viewBox, then points down, and
     * the label is counter-rotated back to horizontal beside it. Box size,
     * rotation, grey arrow, bold white label, and the soft glow all track
     * reformedref custom.scss .goSouth. Only the placement is ours — pinned to
     * the foot of the stage above the fold, rather than the reference's
     * top: 75% inside the Gantry slideshow. (The reference's floaty bob is a
     * continuous animation and is deliberately left out for now.)
     */
    display: grid;
    place-content: center;
    gap: 0.5rem;
    width: 125px;
    height: 110px;
    padding: 1rem;
    margin-inline: auto;
    rotate: 90deg;
    color: var(--reformed-white-2);
    filter: drop-shadow(0 0.2rem 0.4rem rgb(255 255 255 / 20%));
}

.goSouth .scroll {
    /* Counter-rotate so the label reads horizontally next to the arrow. */
    rotate: -90deg;
    margin-inline-start: 0.5rem;
    font-family: var(--reformed-font-title);
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--reformed-white);
}

/* The arrow fills grey so it sits back from the white label, as the reference does. */
.goSouth svg {
    width: 100%;
    height: 100%;
}

.goSouth svg path {
    fill: var(--reformed-grey-4);
}

/*
 * The reference gives the cue a gentle 1s bob. rotate: 90deg above and this
 * animated transform are independent transform properties, so the box stays
 * turned while it drifts. Only declared when the viewer welcomes motion.
 */
@keyframes floaty {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .goSouth {
        animation: floaty 1s infinite;
    }
}

@media (width < 768px) {
    .hero__content {
        padding: 2.5rem 1.5rem;
    }

    .hero__title {
        font-size: clamp(2rem, 5vw, 8rem);
    }
}

/* -------------------------------------------------------------------------
   7. Top-a — Mission statement
   Full-bleed dark band below the hero. A centred heading sits above a
   two-column row: the compass mark on the left, the statement on the right.
   Ported from the reference home.scss #g-mission and scoped to the top-a
   position, so the section owns its background in one place — matching the
   fluid, full-width section model this template uses.
   ------------------------------------------------------------------------- */

/* Selector carries two classes so it wins over the shared section padding
   (.site-grid > [class^="container-"]) and can set the reference's 2rem/3rem. */
.site-grid > .container-top-a {
    padding-block: 3rem 3rem;
    background: var(--reformed-black-3);
    color: var(--reformed-white-2);
}

/* The band stays full width; its content is capped and centred. */
.container-top-a .moduletable {
    max-width: 1000px;
    margin-inline: auto;
}

.container-top-a .revealLeft {
    margin-block: 1em;
    font-family: var(--reformed-font-title);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--reformed-white-2);
}

.missionStatementWrap {
    display: grid;
    grid-template-columns: calc(20% - 1rem) calc(80% - 1rem);
    gap: 2rem;
    align-items: center;
}

.missionStatementWrap .compass {
    width: 100%;
}

/* width:100% + height:auto scales the 48x48 compass up to fill the column.
   Cassiopeia has no `svg { height: auto }` reset (the reference framework does),
   so without this the SVG's height="48" attribute pins it to 48px tall and it
   sits tiny in a wide column. */
.missionStatementWrap .compass svg {
    width: 100%;
    height: auto;
}

.missionStatementVerbiage p {
    margin-block: 0 1.1rem;
    font-family: var(--reformed-font-body);
    font-size: 1.1rem;
    line-height: 1.5;
}

.missionStatementVerbiage p:last-child {
    margin-block-end: 0;
}

/* Narrow screens: stack the mark above the statement. */
@media (width < 768px) {
    .missionStatementWrap {
        grid-template-columns: 1fr;
        gap: 1rem;
        justify-items: center;
    }

    .missionStatementWrap .compass {
        width: 6rem;
    }
}

/* -------------------------------------------------------------------------
   7a-ii. Inner-page hero (.ourStylistsHero .heroSvg) — the "Our Stylists" /
   "Our Services" page title. The reference renders it in the Breathing script
   face, centred and large, and animates it in per character (animations.js
   heroSvgEntrance). It shares the container-top-a position with the home
   mission, so these rules are scoped to the hero's own wrapper.
   ------------------------------------------------------------------------- */

/* The inner-page hero band sits on the body colour (reference #g-intro = #222),
   not the mission's darker #111; :has keeps the home mission untouched. */
.site-grid > .container-top-a:has(.ourStylistsHero) {
    background: var(--reformed-black-2);
}

.ourStylistsHero {
    text-align: center;
}

/* Breathing script face at the reference's ~64px, overriding the .h1 defaults
   (Montserrat 700 / clamp) this element also carries. */
.container-top-a .heroSvg {
    font-family: var(--reformed-font-display);
    font-weight: 400;
    /*font-size: clamp(2.5rem, 7vw, 3.65rem);*/
    line-height: 2;
    color: var(--reformed-white-2);
}
.container-top-a {
    .container-xxl {
        margin-block:0;
        padding-block:0;
    }
}


/* -------------------------------------------------------------------------
   7b. Our Services — category card grid (layout=services)
   The Our Services category rendered as bordered cards: image on the left,
   heading + intro + action buttons on the right. Mirrors the reference
   .introGridCards.ourServices layout. The two buttons come from each article's
   custom fields (rendered in html/com_content/category/services_item.php).
   For an even grid, the menu should use 0 leading articles and 2 columns.
   ------------------------------------------------------------------------- */

/* One column by default; two-up only at wide widths, matching the reference
   .introGridCards.ourServices (jl-child-width-1-1, 1-2@l). */
.services-cards .blog-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 0;
}

.services-cards .blog-items + .blog-items {
    margin-block-start: 1.5rem;
}

/* Bordered card: image on the left, content on the right. Colours, border and
   padding mirror the reference card (#222 bg, 0.8px #444 border, 1.1rem pad). */
.services-cards .blog-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.1rem;
    background: var(--reformed-black-2);
    border: 1px solid var(--reformed-grey-1);
    padding: 1.1rem;
    /* Only the hover colours transition — NOT `all`, which would also ease the
       transform/opacity that blogItemsReveal() animates each frame and make the
       scroll reveal stutter (CSS transition chasing GSAP's per-frame values). */
    transition: border-color 0.2s, background-color 0.2s;
    z-index:2;
    &:hover {
        border: solid 1px #666;
        background: #3a3a3a;
    }
}

/* Fixed 270px square image filling the left column. Absolute positioning keeps
   the photo's intrinsic size from dictating the card height (content does). */
.services-cards .item-image {
    position: relative;
    flex: 0 0 270px;
    align-self: stretch;
    min-height: 240px;
    margin: 0;
    overflow: hidden;
}

.services-cards .item-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-cards .item-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

/* The default article info block (Category: …) is not wanted on the cards. */
.services-cards .article-info {
    display: none;
}

.services-cards .item-content h2 {
    margin-block: 0;
    font-family: var(--reformed-font-title);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--reformed-white-2);
}

.services-cards .item-content h2 a {
    color: var(--reformed-white-2);
    text-decoration: none;
}

.services-cards .item-content p {
    margin-block: 0.625rem 1.1rem;
    font-family: var(--reformed-font-body);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--reformed-white-2);
}

.services-cards .service-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Match the reference service-card buttons (15px text, wider side padding). */
.services-cards .service-buttons .jl-button {
    padding: 10px 30px;
}

.services-cards .service-buttons .jl-btn-text {
    font-size: 15px;
}

/* Two-up on wide screens (reference switches at its @l breakpoint ~1200px). */
@media (width >= 1200px) {
    .services-cards .blog-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Narrow screens: image stacked above the content. */
@media (width < 768px) {
    .services-cards .blog-item {
        flex-direction: column;
        align-items: stretch;
    }

    .services-cards .item-image {
        flex-basis: auto;
        align-self: auto;
        height: 220px;
        min-height: 0;
    }
}

/* -------------------------------------------------------------------------
   7c. Our Stylists — stylist cards (category layout=stylists)
   Mirrors the reference #g-features on /our-stylists: a full-bleed #111 band
   with the waves in the right gutter; each article becomes a card — portrait
   image left, name / role / bio / action buttons right. The buttons come from
   each article's custom fields (book-online-*, details-*), rendered in
   stylists_item.php.
   ------------------------------------------------------------------------- */

/* Full-bleed band; :has scopes it to the stylists category so the other
   component pages keep the plain body background. */
.container-component:has(.stylistCards) {
    position: relative;
    background: var(--reformed-black-3);
}

.container-component:has(.stylistCards)::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 20vw;
    height: 100%;
    pointer-events: none;
    background-image: url(/images/backgrounds/waves5.svg);
    background-position: left -145px;
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotate(180deg);
}

/* Stack the cards; keep content above the decorative waves. */
.stylistCards .blog-items {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin: 0 0 2rem;
}

/* Each article: portrait image left, text right (reference .el-item row). */
.stylistCards .blog-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

.stylistCards .item-image {
    margin: 0;
}

.stylistCards .item-image img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    object-position: center top;
    max-height: 500px;
}

.stylistCards .tm-title {
    margin: 0;
    font-family: var(--reformed-font-title);
    font-size: 1.36rem;
    font-weight: 700;
    color: var(--reformed-white-2);
}

/* Role line under the name (the "tagline" custom field). */
.stylistCards .tm-meta {
    margin: 0.75rem 0 0;
    font-family: var(--reformed-font-body);
    font-size: 0.8rem;
    color: var(--reformed-grey-4);
}

.stylistCards .tm-content {
    position:relative;
    margin-top: 1rem;
    z-index:2;
   /* &::after {
        content: "";
        position: absolute;
        top:-20px;
        bottom:-20px;
        left:auto;
        width:300px;
        right:-50px;
        background: linear-gradient(134deg,rgba(17, 17, 17, 1) 1%, rgba(17, 17, 17, 0.87) 100%);
        z-index:-1;
    }*/
}

.stylistCards .tm-content p {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--reformed-white-2);
}

.stylistCards .stylist-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5rem;
}

.stylistCards .stylist-buttons .jl-button {
    padding: 10px 30px;
}

.stylistCards .stylist-buttons .jl-btn-text {
    font-size: 15px;
}

/* Narrow screens: image stacked above the text, no gutter waves. */
@media (width < 768px) {
    .stylistCards .blog-item {
        grid-template-columns: 1fr;
    }

    .stylistCards .item-image img {
        height: auto;
        max-height: 420px;
    }

    .container-component:has(.stylistCards)::before {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   7d. Services Offered — detailed cards (category layout=servicesoffered)
   Mirrors the reference #g-features .introGridCards.servicesGrid: a
   full-width bordered row per service, fixed-width photo on the left,
   title + intro copy + price columns + note + buttons on the right.
   Values below were read from the reference's computed styles at 1512px
   (root font-size 17.6px, same as here, so rem transfers directly). The
   Treatments card additionally nests the rb-accordion module (baseline
   styling in media/mod_accordion/css/accordion.css); refined here to match
   the reference's row-list look (top rule per row, Poppins body type).
   ------------------------------------------------------------------------- */

.services-offered .blog-items {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin: 0;
}

/* Bordered card row: photo left, content right. Colours/border mirror the
   reference (#222 bg, 0.8px #444 border) and the services-cards / stylist
   cards already built (7b/7c). template.css's .blog-item{flex-direction:
   column} carries specificity 0,1,0 - this selector (0,2,0) must override
   it explicitly, or the column layout wins on this page too. */
.services-offered .blog-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
    background: var(--reformed-black-2);
    border: 1px solid var(--reformed-grey-1);
    padding: 1.1rem;
    z-index:2;
}

/* Fixed 270px image column stretched to the row's full height (reference:
   img width 270px, height = row height via object-fit: cover). */
.services-offered .item-image {
    flex: 0 0 270px;
    align-self: stretch;
    margin: 0;
    overflow: hidden;
}

.services-offered .item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-offered .item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.services-offered .service-title {
    margin: 0 0 0.6rem;
    font-family: var(--reformed-font-title);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--reformed-white-2);
}

.services-offered .item-content p {
    margin: 0 0 1.1rem;
    font-family: var(--reformed-font-body);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--reformed-white-2);
}

/* Price columns (reference g-grid: 1rem row gap / 2rem column gap). Two
   shapes exist in the article data:
   - a plain list of one or two <ul>s (Haircutting, Curly, Waxing's first
     list) - side by side via flex, one <ul> just grows to fill the row.
   - a repeating <h4> + <ul>/<p> sequence (Haircoloring, Perms, Waxing's
     second list) - flexbox can't keep a full-width h4 glued to the text
     that follows it, so :has(h4) switches that case to a 2-column flow
     instead, where break-inside: avoid keeps each heading with its list. */
.services-offered .price-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0 0 1.1rem;
}

.services-offered .price-cols > ul,
.services-offered .price-cols > p {
    flex: 1 1 220px;
    margin: 0;
}

.services-offered .price-cols > ul:only-child,
.services-offered .price-cols > p:only-child {
    flex-basis: 100%;
}

.services-offered .price-cols ul {
    padding-inline-start: 1.7rem;
    list-style: disc;
}

.services-offered .price-cols li {
    font-family: var(--reformed-font-body);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--reformed-white-2);
}

.services-offered .price-cols:has(h4) {
    display: block;
    columns: 2;
    column-gap: 2rem;
}

.services-offered .price-cols:has(h4) > * {
    break-inside: avoid;
}

/* Sub-headings: font/colour apply everywhere in the card (Perms also pairs
   a bare h4 + p outside any price-cols group), but vertical rhythm is
   overridden below for the price-cols case, where columns: 2 needs a
   tighter, self-contained margin instead of a big top gap. */
.services-offered .item-content h4 {
    margin: 1.1rem 0 0.6rem;
    font-family: var(--reformed-font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--reformed-white-2);
}

.services-offered .item-content h4:first-child {
    margin-top: 0;
}

.services-offered .price-cols h4 {
    margin: 0 0 0.6rem;
}

.services-offered .price-cols h4:not(:first-child) {
    margin-top: 1.1rem;
}

.services-offered .note {
    margin-top: 1.1rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--reformed-grey-4);
}

.services-offered .service-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5rem;
}

.services-offered .service-buttons .jl-button {
    padding: 10px 30px;
}

.services-offered .service-buttons .jl-btn-text {
    font-size: 15px;
}

/* Treatments card accordion refinements layered on accordion.css's
   baseline: a top rule per row (reference .jl-accordion .tm-item) instead
   of the module default's border-bottom-only, and Poppins body type
   (17.6px / 1rem) instead of the module default's font-title. */
.services-offered .rb-accordion {
    margin-top: 1.1rem;
}

.services-offered .rb-accordion__item {
    border-top: 1px solid var(--reformed-grey-1);
    border-bottom: 0;
}

/* Rule only BETWEEN items: first item has no top rule, last has no bottom
   (matches the reference's :nth-child(n+2) border-top). */
.services-offered .rb-accordion__item:first-child {
    border-top: 0;
}

.services-offered .rb-accordion__header {
    padding: 0.85rem 0;
    font-family: var(--reformed-font-body);
    font-size: 1rem;
    font-weight: 400;
}

.services-offered .rb-accordion__panel {
    font-size: 1.1rem;
    line-height: 1.65;
}

/* Narrow screens: image stacked above the content, single price column.
   The two/three-way price-cols split (flex row on wide screens, columns:2
   for the h4-grouped cards) only reads cleanly with room to breathe - below
   768px everything stacks to one column instead. Nested flex/multicol
   children fighting for a shrink-to-fit width is also what caused blog-item
   itself to overflow the viewport here before this was added. */
@media (width < 768px) {
    .services-offered .blog-item {
        flex-direction: column;
    }

    .services-offered .item-image {
        flex-basis: auto;
        height: 260px;
    }

    .services-offered .price-cols,
    .services-offered .price-cols:has(h4) {
        display: block;
        columns: 1;
    }

    .services-offered .price-cols > ul,
    .services-offered .price-cols > p {
        flex: none;
        margin: 0 0 1rem;
    }

    .services-offered .price-cols > ul:last-child,
    .services-offered .price-cols > p:last-child {
        margin-bottom: 0;
    }
}

/* -------------------------------------------------------------------------
   8. Entrance-animation initial states
   These hold the animated elements hidden until animations.js reveals them,
   so there is no flash of the final layout before the deferred script runs.
   They sit behind prefers-reduced-motion: no-preference, so reduced-motion
   users never see them; the <noscript> block in index.php lifts them when
   JavaScript is off. animations.js reveals with autoAlpha, whose inline styles
   override these rules.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .home-page .hero__content,
    .home-page .hero__title,
    .home-page .hero__tagline,
    .home-page .hero__content .jl-button,
    .home-page .goSouth,
    .container-top-a .revealLeft,
    .homeIntro > .revealLeft,
    .container-top-a .heroSvg {
        opacity: 0;
    }

    /* Header blocks: hidden + shifted left, then staggered in by navEntrance()
       on every page (reference `.pop-one`: translateX(-30px) + opacity 0). */
    .nav-logo,
    .nav-menu,
    .nav-cta,
    .nav-social {
        opacity: 0;
        transform: translateX(-30px);
    }

    /* Blog/article cards: hidden + shifted down, then faded up and staggered as
       they scroll into view by blogItemsReveal() (reference `.el-item` AOS
       fade-up = translate3d(0,100px,0) + opacity 0). Site-wide. */
    .blog-item {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
}

/* -------------------------------------------------------------------------
   9. Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        scroll-behavior: auto;
    }

    .reformed-menu > .nav-item > a,
    .reformed-menu__sub,
    .reformed-menu > .nav-item:hover > .reformed-menu__sub,
    .reformed-menu > .nav-item:focus-within > .reformed-menu__sub,
    .reformed-menu > .nav-item.is-open > .reformed-menu__sub,
    .reformed-menu__sub .nav-item > a,
    .reformed-menu__chevron {
        transition-duration: 0.01ms;
    }

    /* Headroom still toggles solid/fixed, but without the sliding transition. */
    .home-page .container-header.headroom {
        transition: none;
    }
}