/**
 * Just Orthodontics — components.
 *
 * §01  Buttons
 * §02  The bento grid
 * §03  Cards
 * §04  Arch media
 * §05  Clinician flipbox
 * §06  Accordion
 * §07  Filter tabs
 * §08  Panels, chips and tags
 * §09  Embeds and forms
 * §10  Sticky rails
 * §11  Mega menu
 */

/* ═══ §01 Buttons ═════════════════════════════════════════════ */

/**
 * Three hierarchies, from the signed-off Figma: a filled pill, an outlined pill
 * that fills on hover, and a text action with an arrow that grows a pill outline
 * on hover.
 *
 * Every one is 46px tall with a 24px radius, and every one exists in two
 * surfaces — `--on-light` for cream and white grounds, `--on-dark` for navy and
 * photography — because a single set of colours cannot be legible on both.
 */
.jo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--jo-btn-height);
    padding: 0 var(--jo-btn-pad-x);
    border: var(--jo-btn-border) solid transparent;
    border-radius: var(--jo-radius-btn);
    font-family: var(--jo-font-body);
    font-size: var(--jo-btn-font-size);
    font-weight: var(--jo-btn-weight);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--jo-dur-fast) var(--jo-ease),
                border-color var(--jo-dur-fast) var(--jo-ease),
                color var(--jo-dur-fast) var(--jo-ease),
                transform var(--jo-dur-fast) var(--jo-ease);
}

.jo-btn:active { transform: translateY(1px); }

.jo-btn__label strong { font-weight: 700; }

.jo-btn__icon {
    width: 1em;
    height: 1em;
    transition: transform var(--jo-dur) var(--jo-ease);
}

/* ── Primary ──────────────────────────────────────────────── */

.jo-btn--primary.jo-btn--on-light {
    background: var(--jo-navy);
    border-color: var(--jo-navy);
    color: var(--jo-cream);
}

.jo-btn--primary.jo-btn--on-light:hover {
    background: var(--jo-navy-deep);
    border-color: var(--jo-navy-deep);
}

/* On navy or photography the fill inverts: cream ground, navy type. */
.jo-btn--primary.jo-btn--on-dark {
    background: var(--jo-surface);
    border-color: var(--jo-surface);
    color: var(--jo-navy);
}

.jo-btn--primary.jo-btn--on-dark:hover {
    background: var(--jo-white);
    border-color: var(--jo-white);
}

/* ── Secondary ────────────────────────────────────────────── */

/**
 * Outlined at rest, filled on hover — the transition the brief asks for. The
 * border is present in both states, so the button never changes size and the
 * text never moves by a pixel.
 */
.jo-btn--secondary.jo-btn--on-light {
    background: transparent;
    border-color: var(--jo-navy);
    color: var(--jo-navy);
}

.jo-btn--secondary.jo-btn--on-light:hover {
    background: var(--jo-navy);
    color: var(--jo-cream);
}

.jo-btn--secondary.jo-btn--on-dark {
    background: transparent;
    border-color: rgba(var(--jo-cream-rgb), .55);
    color: var(--jo-cream);
}

.jo-btn--secondary.jo-btn--on-dark:hover {
    background: var(--jo-cream);
    border-color: var(--jo-cream);
    color: var(--jo-navy);
}

/* ── Tertiary ─────────────────────────────────────────────── */

/**
 * A text action with an arrow that becomes an outlined pill on hover, so it
 * reads as the secondary button at that moment.
 *
 * The padding it will occupy on hover is part of its resting geometry and is
 * cancelled with an equal negative margin. The text therefore sits exactly where
 * the design puts it, and hovering reveals a border rather than adding size —
 * nothing around it can move.
 */
.jo-btn--tertiary {
    min-height: 0;
    padding: var(--jo-btn-tertiary-pad-y) var(--jo-btn-tertiary-pad-x);
    margin: calc(var(--jo-btn-tertiary-pad-y) * -1) calc(var(--jo-btn-tertiary-pad-x) * -1);
    background: transparent;
    border-color: transparent;
}

/* Restore the row's own spacing, which the negative margin would otherwise eat. */
.jo-btn-row > .jo-btn--tertiary { margin-inline: 0 calc(var(--jo-btn-tertiary-pad-x) * -1); }

.jo-btn--tertiary.jo-btn--on-light { color: var(--jo-navy); }
.jo-btn--tertiary.jo-btn--on-light:hover { border-color: var(--jo-navy); }

.jo-btn--tertiary.jo-btn--on-dark { color: var(--jo-cream); }
.jo-btn--tertiary.jo-btn--on-dark:hover { border-color: rgba(var(--jo-cream-rgb), .55); }

.jo-btn--tertiary:hover .jo-btn__icon { transform: translateX(3px); }

/* ── Rows and round buttons ───────────────────────────────── */

.jo-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jo-space-3);
    margin-top: var(--jo-space-6);
}

.jo-btn-row--centre { justify-content: center; }

.jo-round-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--jo-border);
    color: var(--jo-navy);
    transition: background-color var(--jo-dur-fast) var(--jo-ease),
                border-color var(--jo-dur-fast) var(--jo-ease),
                color var(--jo-dur-fast) var(--jo-ease);
}

.jo-round-btn:hover {
    background: var(--jo-navy);
    border-color: var(--jo-navy);
    color: var(--jo-cream);
}

/* ═══ §02 The bento grid ══════════════════════════════════════ */

/**
 * The rule the brief describes: no card is ever left stranded on a short final
 * row. Three across is the base rhythm; when the remainder would leave one or
 * two cards adrift, the survivors expand to fill the row — two become halves,
 * one becomes the full width.
 *
 * Implemented on a twelve-column track, which is the smallest number divisible
 * by two, three, four and six — so every base column count and every remainder
 * lands on a whole number of tracks and nothing has to be approximated.
 *
 *   cols 3:  each spans 4  ·  two left span 6 each  ·  one left spans 12
 *   cols 2:  each spans 6  ·  one left spans 12
 *   cols 4:  each spans 3  ·  three span 4  ·  two span 6  ·  one spans 12
 *
 * PHP contributes only the count and the remainder; the layout itself is CSS.
 */
.jo-grid {
    display: grid;
    gap: var(--jo-card-gap);
}

.jo-grid--bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.jo-grid--bento > * { grid-column: span 4; }

.jo-grid--bento[data-cols="2"] > * { grid-column: span 6; }
.jo-grid--bento[data-cols="3"] > * { grid-column: span 4; }
.jo-grid--bento[data-cols="4"] > * { grid-column: span 3; }
.jo-grid--bento[data-cols="6"] > * { grid-column: span 2; }

/* The last row, filled. */
.jo-grid--bento[data-tail="1"] > :last-child { grid-column: span 12; }

.jo-grid--bento[data-cols="3"][data-tail="2"] > :nth-last-child(-n + 2),
.jo-grid--bento[data-cols="4"][data-tail="2"] > :nth-last-child(-n + 2),
.jo-grid--bento[data-cols="6"][data-tail="2"] > :nth-last-child(-n + 2) { grid-column: span 6; }

.jo-grid--bento[data-cols="4"][data-tail="3"] > :nth-last-child(-n + 3),
.jo-grid--bento[data-cols="6"][data-tail="3"] > :nth-last-child(-n + 3) { grid-column: span 4; }

.jo-grid--bento[data-cols="6"][data-tail="4"] > :nth-last-child(-n + 4) { grid-column: span 3; }

/**
 * A fixed grid opts out entirely.
 *
 * The team and news grids use it: their photography has an intended proportion,
 * and filling a row by enlarging a portrait would distort the very thing the
 * card exists to show. A short final row is left short.
 */
.jo-grid--fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jo-grid--fixed[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jo-grid--fixed[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.jo-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Section-specific gaps taken from the design. */
.jo-grid--tx     { gap: 10px 10px; }
.jo-grid--team   { gap: clamp(16px, 1.7vw, 24px); }
.jo-grid--news   { gap: clamp(16px, 1.7vw, 24px); }
.jo-grid--ways,
.jo-grid--values { gap: clamp(16px, 1.4vw, 20px); }

/* ── Grid responsiveness ──────────────────────────────────── */

/**
 * The grids reflow on available room rather than on device names. Three across
 * stops being comfortable somewhere around 1000px and two around 640px, so
 * that is where each step happens — and the bento rule keeps applying at every
 * step, because the remainder is recomputed against the new column count in CSS
 * rather than being baked into the markup.
 */
@media (max-width: 1000px) {
    .jo-grid--bento > *,
    .jo-grid--bento[data-cols="3"] > *,
    .jo-grid--bento[data-cols="4"] > *,
    .jo-grid--bento[data-cols="6"] > * { grid-column: span 6; }

    .jo-grid--bento[data-cols="3"][data-tail="2"] > :nth-last-child(-n + 2),
    .jo-grid--bento[data-cols="4"][data-tail="2"] > :nth-last-child(-n + 2),
    .jo-grid--bento[data-cols="4"][data-tail="3"] > :nth-last-child(-n + 3),
    .jo-grid--bento[data-cols="6"][data-tail="2"] > :nth-last-child(-n + 2),
    .jo-grid--bento[data-cols="6"][data-tail="3"] > :nth-last-child(-n + 3),
    .jo-grid--bento[data-cols="6"][data-tail="4"] > :nth-last-child(-n + 4) { grid-column: span 6; }

    /* An odd total leaves one card, which takes the row. */
    .jo-grid--bento[data-count="3"] > :last-child,
    .jo-grid--bento[data-count="5"] > :last-child,
    .jo-grid--bento[data-count="7"] > :last-child,
    .jo-grid--bento[data-count="9"] > :last-child,
    .jo-grid--bento[data-count="11"] > :last-child { grid-column: span 12; }

    .jo-grid--fixed,
    .jo-grid--fixed[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jo-grid--halves { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .jo-grid--bento > *,
    .jo-grid--bento[data-cols="2"] > *,
    .jo-grid--bento[data-cols="3"] > *,
    .jo-grid--bento[data-cols="4"] > *,
    .jo-grid--bento[data-cols="6"] > *,
    .jo-grid--bento[data-tail] > :nth-last-child(-n + 4) { grid-column: span 12; }

    .jo-grid--fixed,
    .jo-grid--fixed[data-cols="2"],
    .jo-grid--fixed[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ §03 Cards ═══════════════════════════════════════════════ */

/* ── Feature / reason card ────────────────────────────────── */

.jo-card-feature {
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-3);
    min-height: 176px;
    padding: var(--jo-card-pad);
    background: var(--jo-surface);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    transition: border-color var(--jo-dur) var(--jo-ease),
                box-shadow var(--jo-dur) var(--jo-ease),
                transform var(--jo-dur) var(--jo-ease);
}

.jo-card-feature:hover {
    border-color: var(--jo-pill);
    box-shadow: var(--jo-shadow-md);
    transform: translateY(-2px);
}

.jo-card-feature__title {
    font-family: var(--jo-font-body);
    font-size: var(--jo-h5);
    font-weight: 500;
    line-height: 1.25;
    color: var(--jo-heading);
}

.jo-card-feature__text {
    font-size: var(--jo-card-body);
    line-height: var(--jo-card-body-lh);
    color: var(--jo-body);
}

.jo-chip {
    display: grid;
    place-items: center;
    width: var(--jo-chip-size);
    height: var(--jo-chip-size);
    border-radius: 50%;
    background: var(--jo-navy);
    color: var(--jo-cream);
    margin-bottom: var(--jo-space-1);
}

.jo-chip--sm { width: 34px; height: 34px; }

/* ── Photographic card ────────────────────────────────────── */

.jo-card-photo {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(280px, 26vw, 380px);
    border-radius: var(--jo-radius-md);
    overflow: hidden;
    isolation: isolate;
    color: var(--jo-cream);
}

.jo-card-photo__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.jo-card-photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--jo-dur-slow) var(--jo-ease);
}

.jo-card-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--jo-card-scrim);
}

.jo-card-photo:hover .jo-card-photo__img { transform: scale(1.04); }

.jo-card-photo__body {
    padding: var(--jo-card-pad-lg);
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-3);
}

.jo-card-photo__title { color: var(--jo-cream); }

.jo-card-photo__text {
    font-size: var(--jo-card-body);
    line-height: 1.5;
    color: rgba(var(--jo-cream-rgb), .88);
    max-width: 46ch;
}

.jo-card-photo__action { margin-top: var(--jo-space-2); }

.jo-badge {
    align-self: flex-start;
    padding: 5px 12px;
    border: 1px solid rgba(var(--jo-cream-rgb), .45);
    border-radius: var(--jo-radius-sm);
    background: rgba(var(--jo-navy-rgb), .3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    font-weight: 500;
}

/* ── Treatment card ───────────────────────────────────────── */

.jo-card-tx {
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    overflow: hidden;
    transition: border-color var(--jo-dur) var(--jo-ease),
                box-shadow var(--jo-dur) var(--jo-ease),
                transform var(--jo-dur) var(--jo-ease);
}

.jo-card-tx:hover {
    border-color: var(--jo-pill);
    box-shadow: var(--jo-shadow-card);
    transform: translateY(-3px);
}

.jo-card-tx__link { display: block; height: 100%; }

.jo-card-tx__media {
    display: block;
    aspect-ratio: 505 / 240;
    overflow: hidden;
    background: var(--jo-surface);
}

.jo-card-tx__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--jo-dur-slow) var(--jo-ease);
}

.jo-card-tx:hover .jo-card-tx__img { transform: scale(1.04); }

.jo-card-tx__body {
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-2);
    padding: var(--jo-card-pad);
}

.jo-card-tx__title {
    font-family: var(--jo-font-display);
    color: var(--jo-heading);
}

.jo-card-tx__text {
    font-size: var(--jo-card-body);
    line-height: 1.45;
    color: var(--jo-soft);
}

.jo-card-tx__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--jo-space-2);
}

.jo-tag {
    padding: 5px 14px;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-pill);
    font-size: var(--jo-body-sm);
    line-height: 1.4;
    color: var(--jo-muted);
}

/* ── Team card ────────────────────────────────────────────── */

/**
 * Fixed proportions, deliberately. The photography is portrait and framed for
 * it, so this card never joins the bento stretching.
 */
.jo-card-team {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-white);
    overflow: hidden;
    transition: border-color var(--jo-dur) var(--jo-ease),
                box-shadow var(--jo-dur) var(--jo-ease);
}

.jo-card-team:hover { border-color: var(--jo-pill); box-shadow: var(--jo-shadow-md); }

.jo-card-team__link { display: flex; flex-direction: column; height: 100%; }

.jo-card-team__media {
    position: relative;
    display: block;
    aspect-ratio: 496 / 400;
    overflow: hidden;
    background: var(--jo-surface);
}

.jo-card-team__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--jo-dur) var(--jo-ease);
}

.jo-card-team__img--alt {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.jo-card-team.has-alt:hover .jo-card-team__img--alt,
.jo-card-team.has-alt:focus-within .jo-card-team__img--alt { opacity: 1; }

.jo-card-team__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--jo-card-pad);
    text-align: center;
}

.jo-card-team__name {
    font-family: var(--jo-font-display);
    font-size: var(--jo-h4);
    line-height: 1.2;
    color: var(--jo-heading);
}

.jo-card-team__role { font-size: var(--jo-body-sm); color: var(--jo-body); }

.jo-card-team__quals,
.jo-card-team__gdc {
    font-size: var(--jo-body-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--jo-soft);
}

/* ── News card ────────────────────────────────────────────── */

.jo-card-news {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-white);
    overflow: hidden;
    transition: border-color var(--jo-dur) var(--jo-ease),
                box-shadow var(--jo-dur) var(--jo-ease),
                transform var(--jo-dur) var(--jo-ease);
}

.jo-card-news:hover {
    border-color: var(--jo-pill);
    box-shadow: var(--jo-shadow-card);
    transform: translateY(-3px);
}

.jo-card-news__link { display: flex; flex-direction: column; height: 100%; }

.jo-card-news__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--jo-surface);
}

.jo-card-news__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--jo-dur-slow) var(--jo-ease);
}

.jo-card-news:hover .jo-card-news__img { transform: scale(1.04); }

.jo-card-news__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-2);
    padding: var(--jo-card-pad);
}

.jo-card-news__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    color: var(--jo-soft);
}

.jo-card-news__dot { opacity: .6; }

.jo-card-news__title {
    font-family: var(--jo-font-display);
    color: var(--jo-heading);
}

.jo-card-news__text {
    font-size: var(--jo-card-body);
    line-height: 1.5;
    color: var(--jo-soft);
}

.jo-card-news__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: var(--jo-space-3);
    font-size: var(--jo-body-sm);
    font-weight: 500;
    color: var(--jo-navy);
}

.jo-card-news:hover .jo-card-news__more .jo-btn__icon { transform: translateX(3px); }

/* ── Review card ──────────────────────────────────────────── */

.jo-card-review {
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-4);
    padding: var(--jo-card-pad-lg);
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
}

.jo-stars { display: flex; gap: 3px; color: var(--jo-star); }
.jo-stars__star { width: 14px; height: 14px; }

.jo-card-review__quote { flex: 1 1 auto; }

.jo-card-review__quote p {
    font-size: var(--jo-card-body);
    line-height: 1.6;
    color: var(--jo-body);
}

.jo-card-review__by { display: grid; gap: 2px; }
.jo-card-review__name { font-weight: 600; color: var(--jo-heading); font-size: var(--jo-body-sm); }
.jo-card-review__context { font-size: var(--jo-body-sm); color: var(--jo-soft); }

/* ── Quick link ───────────────────────────────────────────── */

.jo-ql {
    display: flex;
    align-items: center;
    gap: var(--jo-space-4);
    padding: var(--jo-card-pad);
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    transition: border-color var(--jo-dur) var(--jo-ease),
                box-shadow var(--jo-dur) var(--jo-ease);
}

a.jo-ql:hover { border-color: var(--jo-pill); box-shadow: var(--jo-shadow-md); }

.jo-ql__copy { flex: 1 1 auto; min-width: 0; }

.jo-ql__title {
    display: block;
    font-weight: 500;
    color: var(--jo-heading);
    font-size: var(--jo-body-lg);
}

.jo-ql__text { display: block; font-size: var(--jo-body-sm); color: var(--jo-soft); }

/* The card's closing action — the text-and-arrow style, drawn inside the card
   rather than floated to its right edge. */
.jo-ql__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-size: var(--jo-body-sm);
    font-weight: 500;
    color: var(--jo-navy);
}

.jo-ql__arrow {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--jo-navy);
    transition: transform var(--jo-dur) var(--jo-ease);
}

a.jo-ql:hover .jo-ql__arrow { transform: translateX(3px); }

/* ── Step ─────────────────────────────────────────────────── */

.jo-step {
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-2);
    padding: var(--jo-card-pad);
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
}

.jo-step__number {
    font-family: var(--jo-font-display);
    font-size: var(--jo-h4);
    color: var(--jo-soft);
    line-height: 1;
    margin-bottom: var(--jo-space-2);
}

.jo-step__title {
    font-family: var(--jo-font-body);
    font-size: var(--jo-h5);
    font-weight: 500;
    color: var(--jo-heading);
}

.jo-step__text {
    font-size: var(--jo-card-body);
    line-height: 1.45;
    color: var(--jo-soft);
}

/* ═══ §04 Arch media ══════════════════════════════════════════ */

/**
 * The distinctive arched frame.
 *
 * The photograph inside stays an ordinary rectangular JPEG or WebP — the shape
 * is applied by this container and never baked into the file, so the same asset
 * can be reused unmasked elsewhere.
 *
 * The geometry is measured from Figma: a 560 × 692 frame with a 280px top radius
 * (exactly half its width, so the head is a true semicircle) and a 12px foot.
 * Expressed as percentages so it stays a semicircle at any width.
 *
 * TODO(arch-svg): when the final arch SVG is supplied, this one rule becomes
 * `mask-image: var(--jo-arch-shape)` with the radii removed. Nothing else on the
 * site refers to the shape, so that is the only edit.
 */
.jo-arch {
    position: relative;
    aspect-ratio: var(--jo-arch-ratio);
    border-radius: var(--jo-arch-radius-top);
    border-bottom-left-radius: var(--jo-arch-radius-foot);
    border-bottom-right-radius: var(--jo-arch-radius-foot);
    overflow: hidden;
    background: var(--jo-surface);
}

.jo-arch__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The name plate on the corner of the photograph. */
.jo-arch__caption,
.jo-flip__caption {
    position: absolute;
    /* Figma: flush to the right edge of the arch, floating clear of its base. */
    right: 0;
    bottom: 30px;
    padding: 14px 26px;
    background: var(--jo-surface);
    border-top-left-radius: var(--jo-radius-md);
    border-bottom-left-radius: var(--jo-radius-md);
    font-size: var(--jo-body-sm);
    font-weight: 600;
    color: var(--jo-navy);
}

/* ═══ §05 Clinician flipbox ═══════════════════════════════════ */

/**
 * The rotating clinician panels.
 *
 * Every frame is in the markup and stacked in the same box; rotating is a class
 * change and a cross-fade. That means no layout movement whatsoever between
 * clinicians, no request mid-transition, and — with JavaScript off — the first
 * frame simply stays, which is a correct page rather than a broken one.
 *
 * The dwell and the fade are single tokens (`--jo-flip-hold`, `--jo-flip-dur`)
 * shared by both variants and by the script, so the pace of the site's rotating
 * imagery is one number.
 */
.jo-flip {
    position: relative;
    display: grid;
}

.jo-flip__frame {
    grid-area: 1 / 1;
    position: relative;
    margin: 0;
    opacity: 0;
    transition: opacity var(--jo-flip-dur) var(--jo-ease);
}

.jo-flip__frame.is-active { opacity: 1; }

/* Inactive frames must not be reachable or announced. */
.jo-flip__frame:not(.is-active) { pointer-events: none; }

.jo-flip__img { width: 100%; height: 100%; object-fit: cover; }

/* The small glass card beside the hero. */
.jo-flip--card {
    aspect-ratio: 278 / 260;
    border-radius: var(--jo-radius-sm);
    overflow: hidden;
}

/* The large arched panel. */
.jo-flip--arch {
    aspect-ratio: var(--jo-arch-ratio);
    border-radius: var(--jo-arch-radius-top);
    border-bottom-left-radius: var(--jo-arch-radius-foot);
    border-bottom-right-radius: var(--jo-arch-radius-foot);
    overflow: hidden;
    background: var(--jo-surface);
}

.jo-flip--arch .jo-flip__frame { height: 100%; }

/* Only the active frame's caption is drawn, so the name always matches the face. */
.jo-flip__frame:not(.is-active) .jo-flip__caption { opacity: 0; }
.jo-flip__caption { transition: opacity var(--jo-flip-dur) var(--jo-ease); }

/* ═══ §06 Accordion ═══════════════════════════════════════════ */

/**
 * Real buttons inside real headings, with `aria-expanded` and `aria-controls`.
 *
 * The panels are open in the markup and closed by the script on start, so a
 * visitor without JavaScript reads every answer instead of none.
 */
.jo-accordion {
    display: grid;
    gap: 10px;
}

.jo-accordion__item {
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-white);
    overflow: hidden;
    transition: border-color var(--jo-dur) var(--jo-ease);
}

.jo-accordion__item.is-open { border-color: var(--jo-pill); }

.jo-accordion__heading { margin: 0; }

.jo-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jo-space-4);
    padding: clamp(16px, 1.5vw, 22px) var(--jo-card-pad);
    text-align: left;
    font-family: var(--jo-font-body);
    font-size: var(--jo-body-lg);
    font-weight: 500;
    color: var(--jo-heading);
    transition: background-color var(--jo-dur-fast) var(--jo-ease);
}

.jo-accordion__trigger:hover { background: var(--jo-surface); }

.jo-accordion__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--jo-navy);
    transition: transform var(--jo-dur) var(--jo-ease);
}

.jo-accordion__trigger[aria-expanded="true"] .jo-accordion__icon { transform: rotate(180deg); }

/**
 * The panel animates open on `grid-template-rows`, not `max-height`, so a long
 * answer and a short one open at the same speed rather than the long one
 * appearing to lag behind.
 *
 * That means overriding what `hidden` normally does — `display: none` cannot be
 * transitioned. The override is only safe because `visibility` takes over the
 * job `display` was doing: a collapsed panel is genuinely hidden from screen
 * readers and genuinely out of the tab order, not merely clipped to nothing.
 * Without it, every closed answer on the page would still be read out and every
 * link inside one would still be reachable by Tab.
 *
 * Visibility flips instantly on the way open and waits for the transition on the
 * way closed, so the content is never invisible while it is still moving.
 */
.jo-accordion__panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--jo-dur) var(--jo-ease);
}

.jo-accordion__panel[hidden] {
    display: grid;
    grid-template-rows: 0fr;
}

.jo-accordion__panel > * {
    overflow: hidden;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.jo-accordion__panel[hidden] > * {
    visibility: hidden;
    transition: visibility 0s linear var(--jo-dur);
}

.jo-accordion__body {
    padding: 0 var(--jo-card-pad) clamp(16px, 1.5vw, 22px);
    font-size: var(--jo-card-body);
}

.jo-faq__footnote {
    text-align: center;
    margin-top: var(--jo-space-7);
    font-family: var(--jo-font-display);
    font-style: italic;
    font-size: var(--jo-h4);
    color: var(--jo-muted);
}

/* ═══ §07 Filter tabs ═════════════════════════════════════════ */

/**
 * The filter buttons.
 *
 * Outlined at rest; the active one is filled. Hovering an inactive tab shows the
 * same filled treatment as the active one, so the interaction previews exactly
 * what selecting it will look like.
 *
 * They are real links to real filtered URLs — the page works without JavaScript,
 * a filtered view can be linked to, and the script only upgrades them.
 */
.jo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(24px, 2.6vw, 40px);
}

.jo-filter {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-pill);
    background: var(--jo-white);
    color: var(--jo-body);
    font-size: var(--jo-body-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--jo-dur-fast) var(--jo-ease),
                border-color var(--jo-dur-fast) var(--jo-ease),
                color var(--jo-dur-fast) var(--jo-ease);
}

.jo-filter:hover,
.jo-filter.is-active {
    background: var(--jo-navy);
    border-color: var(--jo-navy);
    color: var(--jo-cream);
}

.jo-filters__empty {
    text-align: center;
    color: var(--jo-soft);
    padding-block: var(--jo-space-8);
}

/* A card filtered out is removed from the flow entirely, so the grid re-packs
   and the bento rule still applies to whatever is left. */
.jo-card-tx.is-filtered,
.jo-card-news.is-filtered { display: none; }

/* ═══ §08 Panels, chips and tags ══════════════════════════════ */

.jo-panel {
    display: flex;
    flex-direction: column;
    gap: var(--jo-space-4);
    padding: var(--jo-card-pad-lg);
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
}

/* Kept as an opt-in for an editor-chosen warm panel; the frame does not
   use one, so nothing requests it by default. */
.jo-panel--cream { background: var(--jo-band); }

.jo-panel__title { color: var(--jo-heading); }

.jo-panel__label {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--jo-soft);
}

.jo-panel__text { font-size: var(--jo-card-body); line-height: 1.6; color: var(--jo-body); }
.jo-panel__note { font-size: var(--jo-body-sm); color: var(--jo-soft); }

.jo-panel__address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--jo-body-sm);
    color: var(--jo-body);
}

.jo-panel__address .jo-icon { margin-top: .3em; color: var(--jo-navy); }

/* Opening hours — one shape, used by the footer, Visiting Us and Contact. */
.jo-hours { display: grid; gap: 0; width: 100%; }

.jo-hours__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--jo-space-4);
    padding-block: 9px;
    border-bottom: 1px solid var(--jo-border);
}

.jo-hours__row:last-child { border-bottom: 0; }
.jo-hours dt { color: var(--jo-body); }
.jo-hours dd { color: var(--jo-muted); }

.jo-hours--footer .jo-hours__row { border-color: var(--jo-line-on-navy); padding-block: 7px; }
.jo-hours--footer dt { color: rgba(var(--jo-cream-rgb), .8); }
.jo-hours--footer dd { color: rgba(var(--jo-cream-rgb), .8); }

.jo-hours--mnav .jo-hours__row { border-color: var(--jo-line-on-navy); }
.jo-hours--mnav dt, .jo-hours--mnav dd { color: rgba(var(--jo-cream-rgb), .82); }

/**
 * The benefit list in a treatment hero.
 *
 * Figma marks these with a small soft dot, not a tick — a tick reads as a
 * checklist of things already done, and these are characteristics of the
 * treatment. The dot is drawn rather than a list-style marker so it can be
 * aligned to the first line's optical centre at any type size.
 */
.jo-points { display: grid; gap: 10px; margin-top: var(--jo-space-5); list-style: none; }

.jo-points li {
    position: relative;
    padding-left: 22px;
    font-size: var(--jo-card-body);
    line-height: 1.45;
    color: rgba(var(--jo-cream-rgb), .92);
}

.jo-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--jo-cream-rgb), .62);
}

/* ═══ §09 Embeds and forms ════════════════════════════════════ */

.jo-embed { width: 100%; }

.jo-embed iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--jo-radius-sm);
}

.jo-embed--map iframe { aspect-ratio: 4 / 3; height: auto; min-height: 240px; }
.jo-embed--reviews { min-height: 200px; }

/**
 * The editors-only note shown where an integration is still awaited.
 *
 * A visitor never sees this — the section simply appears without the embed, and
 * nothing is invented to fill the space.
 */
.jo-embed--empty {
    padding: var(--jo-card-pad-lg);
    border: 1px dashed var(--jo-pill);
    border-radius: var(--jo-radius-md);
    background: var(--jo-surface);
    color: var(--jo-muted);
    font-size: var(--jo-body-sm);
    text-align: center;
}

.jo-embed--empty p + p { margin-top: 6px; }
.jo-embed--empty strong { color: var(--jo-heading); }

.jo-form-wrap { width: 100%; }

.jo-form-note {
    padding: 12px 16px;
    border: 1px dashed var(--jo-pill);
    border-radius: var(--jo-radius-sm);
    background: var(--jo-surface);
    font-size: var(--jo-body-sm);
    color: var(--jo-muted);
    margin-bottom: var(--jo-space-5);
}

.jo-form-fallback__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jo-space-3);
    margin-top: var(--jo-space-4);
}

/**
 * WPForms, restyled to the design system.
 *
 * WPForms' own stylesheet is switched off in its settings, so this is the only
 * thing dressing the forms — no overriding, no specificity race. It is scoped
 * inside `.jo-form-wrap` and written against WPForms' stable class names, never
 * its generated ids, so rebuilding a form does not break its appearance.
 *
 * The two forms are deliberately different in the design: Contact uses
 * sentence-case labels over softly rounded fields, Refer a Patient uses eyebrow
 * labels over pill fields. Both are expressed as tokens on the form root so a
 * field rule never has to know which form it is in.
 */
.jo-form-wrap {
    /* --jo-field-radius is a system token; a form only names it to differ. */
    --jo-field-height: 52px;
    --jo-field-bg: #FAF8F4;
    --jo-field-gap: var(--jo-space-4);
    --jo-label-transform: none;
    --jo-label-size-form: var(--jo-body-sm);
    --jo-label-tracking-form: 0;
    --jo-label-colour: var(--jo-body);
}

/* Refer a Patient: eyebrow labels, pill fields. */
.jo-form-wrap .jo-form--referral {
    --jo-field-radius: var(--jo-radius-pill);
    --jo-field-height: 46px;
    --jo-label-transform: uppercase;
    --jo-label-size-form: var(--jo-label-size);
    --jo-label-tracking-form: var(--jo-label-tracking);
    --jo-label-colour: var(--jo-soft);
}

.jo-form-wrap .wpforms-form { margin: 0; }

/**
 * Two columns.
 *
 * WPForms lays every field out in a single column, so the pairing comes from
 * the classes the form definition gives each field. A grid on the form itself
 * keeps the two columns aligned even when one field wraps to two lines and its
 * neighbour does not.
 */
.jo-form-wrap .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(16px, 2.2vw, 36px);
}

.jo-form-wrap .wpforms-field {
    grid-column: 1 / -1;
    padding: 0 0 var(--jo-field-gap);
    min-width: 0;
}

.jo-form-wrap .wpforms-field.jo-f-half { grid-column: span 1; }

@media (max-width: 600px) {
    .jo-form-wrap .wpforms-field.jo-f-half { grid-column: 1 / -1; }
}

/* The consent group sits tighter to the boxes above it. */
.jo-form-wrap .wpforms-field.jo-f-check { padding-bottom: 10px; }
.jo-form-wrap .wpforms-field.jo-f-consent { padding-bottom: var(--jo-space-5); }

.jo-form-wrap .wpforms-field-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--jo-label-size-form);
    letter-spacing: var(--jo-label-tracking-form);
    text-transform: var(--jo-label-transform);
    font-weight: 500;
    color: var(--jo-label-colour);
}

/* The one Contact label the design sets as an eyebrow. */
.jo-form-wrap .jo-f-label-eyebrow .wpforms-field-label {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    color: var(--jo-soft);
}

/**
 * The referral form's section headings.
 *
 * Printed by the theme before the field that opens each group, because the free
 * WPForms has no content field to hold them. They are grid children like the
 * fields, so they span the full width and keep the two columns intact.
 */
.jo-form__fieldset-heading {
    grid-column: 1 / -1;
    margin: var(--jo-space-3) 0 var(--jo-space-4);
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--jo-heading);
}

.jo-form__fieldset-heading:first-child { margin-top: 0; }

.jo-form-wrap input[type="text"],
.jo-form-wrap input[type="email"],
.jo-form-wrap input[type="tel"],
.jo-form-wrap input[type="url"],
.jo-form-wrap input[type="number"],
.jo-form-wrap input[type="date"],
.jo-form-wrap select,
.jo-form-wrap textarea,
.jo-input-front {
    width: 100%;
    min-height: var(--jo-field-height);
    padding: 11px 18px;
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-field-radius);
    background: var(--jo-field-bg);
    color: var(--jo-heading);
    font-family: var(--jo-font-body);
    font-size: var(--jo-body-size);
    transition: border-color var(--jo-dur-fast) var(--jo-ease),
                box-shadow var(--jo-dur-fast) var(--jo-ease),
                background-color var(--jo-dur-fast) var(--jo-ease);
}

/* A select needs its own arrow once the browser's is suppressed. */
.jo-form-wrap select {
    appearance: none;
    padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--jo-soft) 50%),
                      linear-gradient(135deg, var(--jo-soft) 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.jo-form-wrap input:focus,
.jo-form-wrap select:focus,
.jo-form-wrap textarea:focus,
.jo-input-front:focus {
    outline: none;
    border-color: var(--jo-navy);
    background: var(--jo-white);
    box-shadow: 0 0 0 3px rgba(var(--jo-navy-rgb), .12);
}

.jo-form-wrap textarea {
    min-height: 130px;
    border-radius: var(--jo-field-radius-block);
    resize: vertical;
}

.jo-form-wrap ::placeholder { color: var(--jo-soft); opacity: 1; }

/* The design shows no asterisks; required-ness is announced, not decorated. */
.jo-form-wrap .wpforms-required-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

.jo-form-wrap .wpforms-error { border-color: #B3261E !important; }

.jo-form-wrap label.wpforms-error {
    display: block;
    margin-top: 5px;
    border: 0;
    color: #B3261E;
    font-size: var(--jo-body-sm);
}

/**
 * Checkbox and radio groups.
 *
 * WPForms wraps them in a real <fieldset> with a <legend>, which is right for a
 * screen reader and wrong for every browser's default border and indent. The
 * semantics stay; only the decoration goes. A legend WPForms has marked as
 * hidden is taken out of view but left in the accessibility tree, so the group
 * is still announced with its name.
 */
.jo-form-wrap .wpforms-field fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.jo-form-wrap .wpforms-field legend.wpforms-field-label { padding: 0; }

.jo-form-wrap .wpforms-field-label.wpforms-label-hide {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

.jo-form-wrap .wpforms-field-checkbox ul,
.jo-form-wrap .wpforms-field-radio ul { margin: 0; padding: 0; }

.jo-form-wrap .wpforms-field-checkbox li,
.jo-form-wrap .wpforms-field-radio li { list-style: none; margin-bottom: 8px; }

.jo-form-wrap .wpforms-field-checkbox label.wpforms-field-label-inline,
.jo-form-wrap .wpforms-field-radio label.wpforms-field-label-inline,
.jo-form-wrap .wpforms-field-checkbox li > label,
.jo-form-wrap .wpforms-field-radio li > label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: var(--jo-body-sm);
    line-height: 1.55;
    color: var(--jo-body);
    cursor: pointer;
}

.jo-form-wrap li > label.wpforms-field-label-inline {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* The choice input sits inside the label's flex row, not above it. */
.jo-form-wrap .wpforms-field-checkbox li,
.jo-form-wrap .wpforms-field-radio li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.jo-form-wrap input[type="checkbox"],
.jo-form-wrap input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .12em;
    border-radius: var(--jo-radius-xs);
    accent-color: var(--jo-navy);
}

.jo-form-wrap .wpforms-submit-container { grid-column: 1 / -1; padding-top: var(--jo-space-2); }

.jo-form-wrap .wpforms-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--jo-btn-height);
    padding: 0 var(--jo-btn-pad-x);
    border: var(--jo-btn-border) solid var(--jo-navy);
    border-radius: var(--jo-radius-btn);
    background: var(--jo-navy);
    color: var(--jo-cream);
    font-family: var(--jo-font-body);
    font-size: var(--jo-btn-font-size);
    font-weight: var(--jo-btn-weight);
    cursor: pointer;
    transition: background-color var(--jo-dur-fast) var(--jo-ease);
}

.jo-form-wrap .wpforms-submit:hover { background: var(--jo-navy-deep); }
.jo-form-wrap .wpforms-submit:disabled { opacity: .6; cursor: default; }

.jo-form-wrap .wpforms-confirmation-container-full,
.jo-form-wrap .wpforms-confirmation-container {
    padding: var(--jo-card-pad);
    border: 1px solid var(--jo-border);
    border-radius: var(--jo-radius-md);
    background: var(--jo-surface);
    color: var(--jo-heading);
}

/* WPForms' own honeypot and anti-spam inputs must never be visible or focusable. */
.jo-form-wrap .wpforms-field-hp,
.jo-form-wrap .wpforms-field.wpforms-field-hidden { display: none !important; }

/* The postcode → directions form on Visiting Us. */
.jo-directions { display: grid; gap: 7px; }

.jo-directions__label {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--jo-soft);
}

.jo-directions__row { display: flex; gap: 8px; }
.jo-directions__row .jo-btn { flex: 0 0 auto; }

/* ═══ §10 Sticky rails ════════════════════════════════════════ */

/**
 * One sticky offset for the whole site.
 *
 * `--jo-sticky-offset` is the sum of the WordPress toolbar, the sticky header
 * and a deliberate gap, so anything that has to come to rest below the header
 * reads one value and no component carries a `top` of its own. It is correct
 * logged in and logged out, and the article rail and the legal navigation use
 * exactly the same rule.
 */
.jo-sticky {
    position: sticky;
    top: var(--jo-sticky-offset);
}

/* Below the two-column breakpoint a sticky rail has nowhere to stick to. */
@media (max-width: 1000px) {
    .jo-sticky { position: static; }
}

/* ═══ §11 Mega menu ═══════════════════════════════════════════ */

/**
 * Deliberately forgiving of the pointer.
 *
 * The panel is a child of the same list item as its trigger, and the gap between
 * them is that item's own padding rather than empty page — so travelling from
 * the word down to the panel never crosses a region where neither is hovered.
 * The script adds a close delay on top, which covers the diagonal path towards a
 * link in the panel's far corner.
 */
.jo-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    z-index: 10;
    width: min(880px, calc(100vw - (var(--jo-gutter) * 2)));
    margin-top: 14px;
    padding: clamp(20px, 2vw, 30px);
    border-radius: var(--jo-radius-lg);
    background: var(--jo-white);
    border: 1px solid var(--jo-border);
    box-shadow: var(--jo-shadow-card);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--jo-dur) var(--jo-ease),
                transform var(--jo-dur) var(--jo-ease),
                visibility var(--jo-dur);
}

/* The bridge: an invisible strip filling the gap the pointer has to cross. */
.jo-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
}

.jo-nav__item[data-mega].is-open .jo-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.jo-mega[hidden] { display: block; }   /* visibility does the hiding, so it can animate */

.jo-mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(20px, 2vw, 32px);
}

.jo-mega__intro { font-size: var(--jo-body-sm); color: var(--jo-body); }
.jo-mega__intro .jo-btn { margin-top: var(--jo-space-4); }

.jo-mega__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--jo-space-5);
}

.jo-mega__col-title {
    font-size: var(--jo-label-size);
    letter-spacing: var(--jo-label-tracking);
    text-transform: uppercase;
    color: var(--jo-soft);
    margin-bottom: 10px;
}

.jo-mega__col ul { display: grid; gap: 7px; }

.jo-mega__col a {
    font-size: var(--jo-body-sm);
    color: var(--jo-body);
    transition: color var(--jo-dur-fast) var(--jo-ease);
}

.jo-mega__col a:hover { color: var(--jo-navy); }

.jo-mega__media { display: none; }

@media (min-width: 1280px) {
    .jo-mega__media { display: block; }
    .jo-mega__img { border-radius: var(--jo-radius-md); }
}