/*
 * What to Bring Back from Bali — "Editorial Atelier" design system.
 *
 * Hand-authored CSS, no build step. The brand is an independent specialist
 * guide, not a shop, so the visual language is a museum catalogue: hairline
 * rules, numbered plates (/01), a high-contrast display serif at light
 * weights, and generous but disciplined negative space. Batik indigo carries the ink,
 * clay is the single accent, bone is the ground.
 *
 * Deliberately unlike its sibling themes in this folder: no parchment/brass,
 * no dossier panels, no banded card grids. Layout language here is the
 * asymmetric editorial grid — a sticky heading column on the left, content
 * on the right — plus full-bleed plates and hairline-ruled indexes.
 *
 * Sections:
 *   1. tokens        6. hero
 *   2. base          7. section library
 *   3. layout        8. faq
 *   4. type          9. footer
 *   5. header       10. utilities / motion / print
 */

/* ================================================================ 1. tokens */
:root {
    /* ink — batik indigo, not black: warmer under the bone ground */
    --indigo: #1b2434;
    --indigo-2: #232e42;
    --indigo-3: #2e3b52;
    --ink: #161d29;

    /* accent — clay, the single warm note. Used sparingly, never as fill. */
    --clay: #a9552f;
    --clay-soft: #c47a52;
    --clay-wash: #f4e7df;

    /* ground — bone through sand */
    --bone: #fbf9f5;
    --sand: #f2ede4;
    --sand-deep: #e8e0d3;
    --paper: #ffffff;

    /* type */
    --text: #1e2632;
    --text-soft: #4d5867;
    --text-muted: #7d8794;
    --on-dark: #f3efe8;
    --on-dark-soft: #bdc4ce;
    --on-dark-muted: #8b95a3;

    /* lines — hairlines carry this design, so they get their own scale */
    --rule: rgba(27, 36, 52, .14);
    --rule-soft: rgba(27, 36, 52, .08);
    --rule-strong: rgba(27, 36, 52, .28);
    --rule-dark: rgba(243, 239, 232, .18);
    --rule-dark-soft: rgba(243, 239, 232, .09);

    --shadow-plate: 0 1px 1px rgba(22, 29, 41, .03), 0 12px 32px -16px rgba(22, 29, 41, .16);
    --shadow-lift: 0 28px 60px -28px rgba(22, 29, 41, .34);

    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
    --font-body: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* radii stay near-zero: a catalogue is set in rectangles */
    --r-xs: 2px;
    --r-sm: 3px;
    --r: 4px;
    --r-pill: 999px;

    --container: 1240px;
    --measure: 68ch;
    --gutter: clamp(20px, 5vw, 56px);
    --header-h: 74px;

    /* vertical rhythm — one scale, used everywhere. Kept tight enough that
       a band reads as one composition rather than islands in a margin. */
    --space-band: clamp(3.5rem, 6.5vw, 5.5rem);
    --space-lg: clamp(2rem, 3.6vw, 3.25rem);
    --space-md: clamp(1.25rem, 2.4vw, 2rem);

    --ease: cubic-bezier(.22, .61, .36, 1);
    color-scheme: light;
}

/* ================================================================== 2. base */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(169, 85, 47, .14);
}

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}
button {
    background: none;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
}

/* One focus treatment across the whole site, never removed. */
:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}
.jhg-band--indigo :focus-visible,
.jhg-footer :focus-visible,
.jhg-hero--plate :focus-visible { outline-color: var(--clay-soft); }

/* Anchored headings must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }

::selection { background: var(--clay); color: var(--bone); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; left: 1rem; top: -5rem; z-index: 300;
    background: var(--indigo); color: var(--on-dark);
    padding: .8rem 1.4rem; font-size: .8rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    transition: top .18s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

/* ================================================================ 3. layout */
.jhg-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.jhg-band {
    position: relative;
    padding-block: var(--space-band);
}
.jhg-band--bone { background: var(--bone); }
.jhg-band--sand { background: var(--sand); }
.jhg-band--sand-deep { background: var(--sand-deep); }
.jhg-band--indigo {
    background: var(--indigo);
    color: var(--on-dark);
}
.jhg-band--indigo .jhg-h2,
.jhg-band--indigo .jhg-h3 { color: var(--on-dark); }
.jhg-band--indigo .jhg-intro,
.jhg-band--indigo .jhg-body { color: var(--on-dark-soft); }

/*
 * The signature grid: a sticky heading column and a content column. Every
 * section that carries prose uses it, which is what makes the site read as
 * one continuous catalogue rather than a stack of unrelated blocks.
 */
.jhg-editorial {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: start;
}
.jhg-editorial__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
@media (max-width: 960px) {
    .jhg-editorial { grid-template-columns: 1fr; gap: var(--space-md); }
    .jhg-editorial__aside { position: static; }
}

/* A centred heading block, for sections that do not need the aside. */
.jhg-heading-block { max-width: 62ch; margin-bottom: var(--space-lg); }
.jhg-heading-block--center { margin-inline: auto; text-align: center; }

/*
 * On a wide screen a left-set heading that carries an intro splits in two:
 * eyebrow and title on the left, the intro set against a hairline on the
 * right and dropped to the title's last line — so the intro fills the half
 * of the band that a stacked 62ch heading used to leave empty.
 */
@media (min-width: 1000px) {
    .jhg-heading-block:not(.jhg-heading-block--center):has(> .jhg-intro) {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        column-gap: clamp(2.5rem, 6vw, 6rem);
        align-items: end;
        max-width: none;
    }
    .jhg-heading-block:not(.jhg-heading-block--center):has(> .jhg-intro) > * { grid-column: 1; }
    .jhg-heading-block:not(.jhg-heading-block--center):has(> .jhg-intro) > .jhg-intro {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
        padding-left: 1.5rem;
        border-left: 1px solid var(--rule);
    }
    .jhg-band--indigo .jhg-heading-block:has(> .jhg-intro) > .jhg-intro { border-left-color: var(--rule-dark); }
}

/* ================================================================== 4. type */
.jhg-h1, .jhg-h2, .jhg-h3, .jhg-display {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--indigo);
    letter-spacing: -.012em;
    line-height: 1.06;
    text-wrap: balance;
}
.jhg-h1 { font-size: clamp(2.6rem, 6.2vw, 4.7rem); }
.jhg-h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.jhg-h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.18; }

/* Accented phrase inside a display heading: clay, italic, optically lighter. */
.jhg-h1 em, .jhg-h2 em, .jhg-h3 em, .jhg-display em {
    font-style: italic;
    font-weight: 300;
    color: var(--clay);
}
.jhg-band--indigo .jhg-h1 em,
.jhg-band--indigo .jhg-h2 em,
.jhg-hero--plate .jhg-h1 em { color: var(--clay-soft); }

/* The numbered plate mark — "/01" — and the lettered eyebrow above it. */
.jhg-eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.1rem;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--clay);
}
.jhg-eyebrow::before {
    content: '';
    width: 2.2rem; height: 1px;
    background: currentColor;
    flex: none;
}
.jhg-heading-block--center .jhg-eyebrow { justify-content: center; }
.jhg-band--indigo .jhg-eyebrow { color: var(--clay-soft); }

.jhg-plate-no {
    display: block;
    margin-bottom: .9rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.jhg-band--indigo .jhg-plate-no { color: var(--on-dark-muted); }

.jhg-lede {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: -.008em;
    color: var(--text-soft);
    text-wrap: pretty;
}
.jhg-intro {
    margin-top: 1.25rem;
    max-width: var(--measure);
    font-size: 1.02rem;
    color: var(--text-soft);
    text-wrap: pretty;
}
.jhg-body { max-width: var(--measure); color: var(--text-soft); }
.jhg-body p + p { margin-top: 1.1rem; }
.jhg-body a:not(.jhg-btn) {
    color: var(--clay);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
.jhg-body a:not(.jhg-btn):hover { text-decoration-thickness: 2px; }

.jhg-note {
    margin-top: var(--space-md);
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
    font-size: .86rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.jhg-band--indigo .jhg-note { border-top-color: var(--rule-dark); color: var(--on-dark-muted); }

/* A hairline rule with optional label, used to open and close sections. */
.jhg-rule { height: 1px; border: 0; margin: 0; background: var(--rule); }

/* ---- buttons ---- */
.jhg-btn {
    --btn-bg: var(--indigo);
    --btn-fg: var(--on-dark);
    --btn-line: var(--indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-line);
    border-radius: var(--r-sm);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    touch-action: manipulation;
    transition: background-color .22s var(--ease), border-color .22s var(--ease),
                color .22s var(--ease), transform .22s var(--ease);
}
.jhg-btn:hover { transform: translateY(-2px); }
.jhg-btn:active { transform: translateY(0); }
.jhg-btn .ti { font-size: 1.05em; }

.jhg-btn--clay { --btn-bg: var(--clay); --btn-line: var(--clay); --btn-fg: #fff; }
.jhg-btn--clay:hover { --btn-bg: #8e4626; --btn-line: #8e4626; }

.jhg-btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--indigo);
    --btn-line: var(--rule-strong);
}
.jhg-btn--outline:hover { --btn-bg: var(--indigo); --btn-fg: var(--on-dark); --btn-line: var(--indigo); }

.jhg-btn--on-dark {
    --btn-bg: transparent;
    --btn-fg: var(--on-dark);
    --btn-line: var(--rule-dark);
}
.jhg-btn--on-dark:hover { --btn-bg: var(--on-dark); --btn-fg: var(--indigo); --btn-line: var(--on-dark); }

.jhg-btn--sm { padding: .72rem 1.2rem; font-size: .71rem; }
.jhg-btn--block { width: 100%; }

.jhg-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: var(--space-md);
}
/* On a phone the actions run full width, one clean stack instead of two
   buttons of different lengths. */
@media (max-width: 479px) {
    .jhg-cta-row .jhg-btn { flex: 1 1 100%; }
}

/* A text link with a moving rule under it — the quiet secondary action. */
.jhg-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clay);
}
.jhg-link::after {
    content: '';
    width: 1.5rem; height: 1px;
    background: currentColor;
    transition: transform .28s var(--ease);
    transform-origin: left;
}
.jhg-link:hover::after { transform: scaleX(1.7); }

/* ---- breadcrumb ---- */
.jhg-breadcrumb { margin-bottom: var(--space-md); }
.jhg-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.jhg-breadcrumb a:hover { color: var(--clay); }
.jhg-breadcrumb [aria-current] { color: var(--indigo); }
.jhg-hero--plate .jhg-breadcrumb { color: var(--on-dark-muted); }
.jhg-hero--plate .jhg-breadcrumb [aria-current] { color: var(--on-dark); }

/* ================================================================ 5. header */
.jhg-utility {
    background: var(--indigo);
    color: var(--on-dark-soft);
    font-size: .74rem;
    letter-spacing: .03em;
    padding-top: env(safe-area-inset-top, 0);
}
.jhg-utility__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: .55rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.4rem;
}
.jhg-utility__group { display: flex; align-items: center; gap: 1.3rem; min-width: 0; }
.jhg-utility__group > * { display: inline-flex; align-items: center; gap: .4rem; }
.jhg-utility a:hover { color: var(--clay-soft); }
.jhg-utility .ti { color: var(--clay-soft); font-size: .95rem; }

#jhg-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(251, 249, 245, .88);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule-soft);
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
#jhg-header.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 14px 30px -24px rgba(22, 29, 41, .4); }

.jhg-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    min-height: var(--header-h);
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* ---- wordmark ---- */
.jhg-wordmark { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; }
.jhg-wordmark__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.1rem; height: 2.1rem;
    border: 1px solid currentColor;
    font-family: var(--font-display);
    font-size: .92rem;
    letter-spacing: .02em;
    text-transform: lowercase;
    color: var(--clay);
}
.jhg-wordmark__text {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--indigo);
}
.jhg-wordmark__text em { font-style: italic; color: var(--clay); }
.jhg-wordmark--light .jhg-wordmark__text { color: var(--on-dark); }
.jhg-wordmark--light .jhg-wordmark__mark,
.jhg-wordmark--light .jhg-wordmark__text em { color: var(--clay-soft); }
.jhg-wordmark--lg .jhg-wordmark__text { font-size: 1.35rem; }
.jhg-wordmark--lg .jhg-wordmark__mark { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
.jhg-logo-img { width: auto; height: 44px; }

/* ---- primary nav ---- */
.jhg-nav-primary { display: none; }
@media (min-width: 1080px) { .jhg-nav-primary { display: block; } }

.jhg-nav { display: flex; align-items: center; gap: .3rem; }
.jhg-nav__item { position: relative; }
.jhg-nav > li > a,
.jhg-nav__item > a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .8rem;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--text-soft);
    transition: color .18s var(--ease);
}
.jhg-nav__item > a:hover,
.jhg-nav .current-menu-item > a,
.jhg-nav .current_page_item > a { color: var(--clay); }
.jhg-nav__item > a .ti { font-size: .85rem; opacity: .6; }

.jhg-nav__dropdown,
.jhg-nav .sub-menu {
    position: absolute;
    top: calc(100% + .45rem);
    left: 50%;
    transform: translate(-50%, .4rem);
    min-width: 19rem;
    padding: .5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-plate);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.jhg-nav__item:hover > .jhg-nav__dropdown,
.jhg-nav__item:focus-within > .jhg-nav__dropdown,
.jhg-nav li:hover > .sub-menu,
.jhg-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.jhg-nav__dropdown a, .jhg-nav .sub-menu a {
    display: block;
    padding: .62rem .8rem;
    font-size: .83rem;
    color: var(--text-soft);
    border-left: 1px solid transparent;
    transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.jhg-nav__dropdown a:hover, .jhg-nav .sub-menu a:hover {
    color: var(--indigo);
    background: var(--sand);
    border-left-color: var(--clay);
}

.jhg-header__actions { display: flex; align-items: center; gap: .6rem; }
.jhg-header__actions .jhg-btn { display: none; }
@media (min-width: 640px) { .jhg-header__actions .jhg-btn { display: inline-flex; } }

.jhg-burger {
    display: grid;
    place-items: center;
    width: 2.7rem; height: 2.7rem;
    border: 1px solid var(--rule);
    color: var(--indigo);
    font-size: 1.15rem;
    transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.jhg-burger:hover { background: var(--sand); border-color: var(--rule-strong); }
@media (min-width: 1080px) { .jhg-burger { display: none; } }

/* ---- mobile drawer ---- */
#jhg-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
#jhg-drawer.is-open { visibility: visible; }
.jhg-drawer__backdrop {
    position: absolute; inset: 0;
    background: rgba(22, 29, 41, .55);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
#jhg-drawer.is-open .jhg-drawer__backdrop { opacity: 1; }
.jhg-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(92vw, 25rem);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--indigo);
    color: var(--on-dark);
    padding: 1.1rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .34s var(--ease);
}
#jhg-drawer.is-open .jhg-drawer__panel { transform: translateX(0); }
.jhg-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule-dark);
}
.jhg-drawer__close {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--rule-dark);
    color: var(--on-dark);
    font-size: 1.1rem;
}
.jhg-drawer__close:hover { background: rgba(243, 239, 232, .1); }
/* One logo file serves the masthead and the drawer. Its wordmark is dark
   green on transparent, which sinks into the indigo panel, so here it is
   flattened to a white silhouette — the artwork is cut with transparent
   gaps, so the batik basket and the leaves keep their detail. */
.jhg-drawer__head .jhg-logo-img {
    height: 46px;
    filter: brightness(0) invert(1);
}
.jhg-drawer__foot { margin-top: auto; padding-top: 1.4rem; }

/*
 * Drawer navigation. Two shapes land here: the code fallback's
 * <details> groups, and a WP menu rendered with .jhg-mnav__list. Both read
 * as the same vertical index — a hairline-ruled list of hubs, each branch
 * folded behind a plus. With JavaScript off no branch is folded and every
 * child is simply on the page, so the drawer never hides a link it cannot
 * open.
 */
.jhg-mnav { flex: 1; min-width: 0; padding-block: .4rem; }

/* Safety net: the masthead's list class must never bring its flex row and
   absolutely-positioned dropdowns into the panel. */
.jhg-mnav .jhg-nav { display: block; }
.jhg-mnav .jhg-nav .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
}

/* ---- top level ---- */
.jhg-mnav__list > li { border-bottom: 1px solid var(--rule-dark-soft); }
.jhg-mnav__list > li:last-child { border-bottom: 0; }

.jhg-mnav__row { display: flex; align-items: center; gap: .4rem; }

.jhg-mnav__list > li > a,
.jhg-mnav__row > a,
.jhg-mnav__link,
.jhg-mnav summary {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: .5rem 0;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--on-dark);
    transition: color .18s var(--ease);
}
.jhg-mnav__list > li > a:hover,
.jhg-mnav__row > a:hover,
.jhg-mnav__link:hover,
.jhg-mnav summary:hover { color: var(--clay-soft); }

/* The hub keeps its own link; only the plus beside it folds the branch,
   so "Souvenirs" still opens the Souvenirs page. */
.jhg-mnav__row > a { flex: 1 1 auto; min-width: 0; }

.jhg-mnav__toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    align-self: stretch;
    margin-right: -.4rem;
    color: var(--on-dark-muted);
    font-size: 1rem;
}
.jhg-mnav__toggle:hover { color: var(--clay-soft); }
.jhg-mnav__toggle .ti { transition: transform .25s var(--ease); }
.jhg-mnav__item.is-open > .jhg-mnav__row > .jhg-mnav__toggle .ti { transform: rotate(45deg); }

/* Collapsing branch. Grid rows animate to the real height, which a
   max-height guess never does once a label wraps. */
.jhg-mnav__item {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows .3s var(--ease);
}
.jhg-mnav__item.is-open { grid-template-rows: auto 1fr; }
.jhg-mnav__item > .sub-menu {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility .3s step-end;
}
.jhg-mnav__item.is-open > .sub-menu { visibility: visible; transition: visibility 0s; }

/* ---- children ---- */
.jhg-mnav__list .sub-menu,
.jhg-mnav details ul {
    padding: .1rem 0 .7rem .95rem;
    border-left: 1px solid var(--rule-dark-soft);
    margin-left: .1rem;
}
.jhg-mnav__list .sub-menu a,
.jhg-mnav details ul a {
    display: flex;
    align-items: center;
    min-height: 2.6rem;
    padding: .35rem 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--on-dark-soft);
    border-bottom: 0;
    transition: color .18s var(--ease);
}
.jhg-mnav__list .sub-menu a:hover,
.jhg-mnav details ul a:hover { color: var(--clay-soft); }

/* ---- current page ---- */
.jhg-mnav__list .current-menu-item > a,
.jhg-mnav__list .current_page_item > a,
.jhg-mnav__list .current-menu-item > .jhg-mnav__row > a,
.jhg-mnav__list .current-menu-ancestor > .jhg-mnav__row > a,
.jhg-mnav__list .current_page_ancestor > .jhg-mnav__row > a { color: var(--clay-soft); }

/* ---- code fallback's <details> groups ---- */
.jhg-mnav__link,
.jhg-mnav summary { border-bottom: 1px solid var(--rule-dark-soft); }
.jhg-mnav summary {
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}
.jhg-mnav summary::-webkit-details-marker { display: none; }
.jhg-mnav summary .ti { transition: transform .22s var(--ease); font-size: .95rem; color: var(--on-dark-muted); }
.jhg-mnav details[open] summary .ti { transform: rotate(45deg); }

/* =================================================================== 6. hero */
.jhg-hero {
    position: relative;
    padding-block: clamp(2.25rem, 5vw, 4.5rem) var(--space-band);
    background: var(--bone);
    overflow: hidden;
}

/*
 * Woven ground: two sets of hairlines crossing at a shallow angle, a nod to
 * batik's wax-resist grid. Pure CSS, so there is no image to load and it
 * scales with the viewport.
 */
.jhg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 3.6rem),
        repeating-linear-gradient(0deg, var(--rule-soft) 0 1px, transparent 1px 3.6rem);
    mask-image: radial-gradient(120% 80% at 82% 12%, #000 0%, transparent 72%);
    pointer-events: none;
}

.jhg-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
}
@media (max-width: 1000px) { .jhg-hero__grid { grid-template-columns: 1fr; } }

.jhg-hero__title { margin-bottom: 1.5rem; }
.jhg-hero__lede { max-width: 40ch; }

/* Quick-facts: a hairline index, numbers in the display serif. */
.jhg-hero__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    margin-top: var(--space-lg);
    border-top: 1px solid var(--rule);
}
.jhg-hero__fact {
    padding: 1.1rem 1.2rem 1.1rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.jhg-hero__fact-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--indigo);
}
.jhg-hero__fact-label {
    display: block;
    margin-top: .45rem;
    font-size: .73rem;
    letter-spacing: .06em;
    color: var(--text-muted);
    text-wrap: pretty;
}

/*
 * The hero's right-hand column: a mosaic of photographic plates with the
 * catalogue card set beneath it. Photographs are mounted, not bled — each
 * sits on a paper margin inside a hairline, the way a plate is tipped into
 * a catalogue, so the pictures join the design language instead of
 * interrupting it.
 *
 * Pictures make the column taller than the headline beside it, so a figured
 * hero centres the headline against it — the difference is split above and
 * below instead of pooling under the quick-facts strip. The type-only hero
 * keeps the original baseline alignment, where the card and the quick-facts
 * strip finish level.
 */
.jhg-hero__aside { position: relative; }
.jhg-hero--figured .jhg-hero__grid { align-items: center; }

.jhg-heroshots {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.15rem;
}
.jhg-heroshots--2,
.jhg-heroshots--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.jhg-heroshots--3 .jhg-heroshot--lead { grid-row: 1 / span 2; }

.jhg-heroshot {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-plate);
}
.jhg-heroshot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--sand);
}
/* The lead plate stretches to the full height of the rows it spans. */
.jhg-heroshots--3 .jhg-heroshot--lead {
    height: 100%;
}
.jhg-heroshots--3 .jhg-heroshot--lead img {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    aspect-ratio: 3 / 4;
}
.jhg-heroshots--1 .jhg-heroshot img { aspect-ratio: 3 / 2; }

.jhg-heroshot__caption {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding: .55rem .25rem .15rem;
    font-size: .68rem;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--text-muted);
    text-wrap: pretty;
}
.jhg-heroshot__plate {
    flex: none;
    font-family: var(--font-display);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--clay);
}

.jhg-heroshots__credit {
    margin-top: .9rem;
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--text-muted);
}

/*
 * Below 1000px the hero grid is one column, so the mosaic has the full
 * measure to itself and no longer needs a tall lead to fill a neighbouring
 * column: it lies down into a single row of plates.
 */
@media (min-width: 561px) and (max-width: 1000px) {
    .jhg-heroshots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jhg-heroshots--3 .jhg-heroshot--lead { grid-row: auto; height: auto; }
    .jhg-heroshots--3 .jhg-heroshot--lead img {
        flex: none;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

/*
 * Narrow viewports: the mosaic turns on its side — the lead plate runs
 * across the top, the smaller two share the row beneath it — so no
 * photograph is ever reduced to a thumbnail on a phone.
 */
@media (max-width: 560px) {
    .jhg-heroshots--2,
    .jhg-heroshots--3 { grid-template-columns: 1fr 1fr; }
    .jhg-heroshots--3 .jhg-heroshot--lead,
    .jhg-heroshots--2 .jhg-heroshot--lead { grid-row: auto; grid-column: 1 / -1; height: auto; }
    .jhg-heroshots--3 .jhg-heroshot--lead img {
        flex: none;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/*
 * The hero's catalogue card: the brief in five lines. It carries the page
 * on a hero with no photographs, and captions the mosaic on one that has.
 */
.jhg-plate {
    position: relative;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-plate);
}
.jhg-plate::after {
    content: '';
    position: absolute;
    inset: .5rem;
    border: 1px solid var(--rule-soft);
    pointer-events: none;
}
.jhg-plate__label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--clay);
}
.jhg-plate__title {
    margin-top: .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    line-height: 1.12;
    color: var(--indigo);
}
.jhg-plate__title em { font-style: italic; color: var(--clay); }
.jhg-plate__rule { height: 1px; background: var(--rule); margin: 1.1rem 0 .4rem; }
.jhg-plate__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .85rem;
}
.jhg-plate__row:last-of-type { border-bottom: none; }
.jhg-plate__row dt { color: var(--text-muted); letter-spacing: .04em; }
.jhg-plate__row dd {
    margin: 0;
    font-weight: 500;
    color: var(--indigo);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/*
 * The seal is stamped in the card's upper-right corner, beside the label
 * and title, which hold back enough room for it. Parked at the foot it
 * needed a strip of its own below the last row — dead space in the card.
 */
.jhg-plate:has(.jhg-plate__seal) .jhg-plate__label,
.jhg-plate:has(.jhg-plate__seal) .jhg-plate__title { padding-right: 5.25rem; }
.jhg-plate__seal {
    position: absolute;
    top: clamp(1.35rem, 2.6vw, 2rem);
    right: clamp(1.35rem, 2.6vw, 2rem);
    width: 4.4rem; height: 4.4rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: .6rem;
    line-height: 1.25;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ====================================================== 7. section library */

/* ---- answer: heading beside the quotable short answer, points beneath ---- */
.jhg-answer {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-md) clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
@media (max-width: 960px) { .jhg-answer { grid-template-columns: 1fr; } }

.jhg-answer__text {
    padding-left: clamp(1.1rem, 2.4vw, 2rem);
    border-left: 2px solid var(--clay);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 300;
    line-height: 1.34;
    letter-spacing: -.01em;
    color: var(--indigo);
    text-wrap: pretty;
}
.jhg-band--indigo .jhg-answer__text { color: var(--on-dark); border-left-color: var(--clay-soft); }

/* Points: a ruled list on a phone, a row of numbered columns from a tablet up. */
.jhg-answer__points {
    display: grid;
    margin-top: var(--space-lg);
    border-top: 1px solid var(--rule);
}
.jhg-answer__point {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: .6rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .95rem;
    color: var(--text-soft);
    text-wrap: pretty;
}
.jhg-answer__point span:first-child {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--clay);
}
@media (min-width: 700px) {
    .jhg-answer__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem clamp(1.5rem, 3vw, 2.5rem);
        border-top: 0;
    }
    .jhg-answer__point {
        grid-template-columns: 1fr;
        align-content: start;
        gap: .45rem;
        padding: 1rem 0 0;
        border-top: 1px solid var(--rule-strong);
        border-bottom: 0;
    }
    .jhg-answer__point span:first-child { font-size: 1.35rem; line-height: 1; }
}
@media (min-width: 1000px) {
    .jhg-answer__points { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.jhg-band--indigo .jhg-answer__points { border-top-color: var(--rule-dark); }
.jhg-band--indigo .jhg-answer__point { border-color: var(--rule-dark-soft); color: var(--on-dark-soft); }

/* ---- cards: a numbered catalogue of plates ---- */
.jhg-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.jhg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: clamp(1.4rem, 2.4vw, 2rem);
    background: var(--paper);
    transition: background-color .24s var(--ease), transform .24s var(--ease);
}
.jhg-card:hover { background: var(--bone); transform: translateY(-2px); }
.jhg-band--sand .jhg-card { background: var(--bone); }
.jhg-band--sand .jhg-card:hover { background: var(--paper); }
.jhg-band--indigo .jhg-cards { background: var(--rule-dark); border-color: var(--rule-dark); }
.jhg-band--indigo .jhg-card { background: var(--indigo-2); }
.jhg-band--indigo .jhg-card:hover { background: var(--indigo-3); }

.jhg-card__icon {
    font-size: 1.35rem;
    color: var(--clay);
    line-height: 1;
}
.jhg-card__title {
    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1.2;
    color: var(--indigo);
}
a.jhg-card .jhg-card__title { padding-right: 1.4rem; }

/* A linked card or related item says so in its corner: a quiet arrow that
   warms to clay and nudges outward on hover. */
.jhg-card__go,
.jhg-related__item .ti.jhg-related__go {
    position: absolute;
    top: clamp(1.3rem, 2.3vw, 1.85rem);
    right: clamp(1.3rem, 2.3vw, 1.85rem);
    font-size: 1.05rem;
    color: var(--text-muted);
    opacity: .6;
    transition: color .22s var(--ease), opacity .22s var(--ease), transform .22s var(--ease);
}
a.jhg-card:hover .jhg-card__go,
.jhg-related__item:hover .jhg-related__go {
    color: var(--clay);
    opacity: 1;
    transform: translate(2px, -2px);
}
.jhg-band--indigo .jhg-card__go { color: var(--on-dark-muted); }

/* On a phone the icon moves up beside the title, saving a line per card. */
@media (max-width: 639px) {
    .jhg-card:has(> .jhg-card__icon) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .75rem;
        row-gap: .5rem;
        align-items: center;
    }
    .jhg-card:has(> .jhg-card__icon) > :not(.jhg-card__icon):not(.jhg-card__title):not(.jhg-card__go) { grid-column: 1 / -1; }
}
.jhg-band--indigo .jhg-card__title { color: var(--on-dark); }
.jhg-card__text { font-size: .93rem; color: var(--text-soft); text-wrap: pretty; }
.jhg-band--indigo .jhg-card__text { color: var(--on-dark-soft); }
.jhg-card__meta {
    margin-top: auto;
    padding-top: .9rem;
    font-size: .76rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- showcase: photographs framed as catalogue plates ---- */
.jhg-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
}
.jhg-showcase__plate {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--paper);
    /* The hairline rides on each plate rather than on the grid behind it.
       A row that does not fill then ends in band, not in a grey cell —
       which matters here because the lead plate takes two tracks and the
       count of photographs is whatever an editor typed. Adjacent shadows
       meet inside the 1px gap and read as one rule. */
    box-shadow: 0 0 0 1px var(--rule);
    transition: background-color .24s var(--ease);
}
.jhg-band--sand .jhg-showcase__plate { background: var(--bone); }
.jhg-band--indigo .jhg-showcase__plate {
    background: var(--indigo-2);
    box-shadow: 0 0 0 1px var(--rule-dark);
}

/* The lead plate takes two tracks and a wider crop — on one column it
   simply falls back into line with the rest. */
@media (min-width: 640px) {
    .jhg-showcase__plate--lead { grid-column: span 2; }
}

/* The frame reserves its own height, so nothing shifts while the picture
   loads and no plate collapses if one fails. */
.jhg-showcase__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sand-deep);
}

/* Tablet: two columns, and a plate that runs the full row — the lead, or a
   last plate widened to close the grid — takes a banner crop. */
@media (min-width: 640px) and (max-width: 999px) {
    .jhg-showcase__frame { aspect-ratio: 3 / 2; }
    .jhg-showcase__plate--lead .jhg-showcase__frame,
    .jhg-showcase.is-fill-md > :last-child .jhg-showcase__frame { aspect-ratio: 5 / 2; }
}

/* Wide: every plate in a row shares one picture height — a double-width
   plate just gets a wider crop — so the captions all start on one line. */
@media (min-width: 1000px) {
    .jhg-showcase__frame { aspect-ratio: auto; height: clamp(14rem, 18vw, 16.5rem); }
    .jhg-showcase.is-cols-3 .jhg-showcase__frame { height: clamp(15rem, 21vw, 19rem); }
}

/*
 * Phone: a swipeable rail instead of a column of full-width photographs
 * several screens long. Each plate is a little narrower than the screen so
 * the next one shows at the edge, which is the cue that the row scrolls.
 */
@media (max-width: 639px) {
    .jhg-showcase {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        gap: .75rem;
        margin-inline: calc(var(--gutter) * -1);
        padding: 1px var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .jhg-showcase::-webkit-scrollbar { display: none; }
    .jhg-showcase__plate { scroll-snap-align: start; }
    /* Plates beyond the edge would otherwise sit blank until swiped in. */
    .jhg-showcase .jhg-reveal { opacity: 1; transform: none; }
}
.jhg-showcase__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.jhg-showcase__plate:hover .jhg-showcase__frame img { transform: scale(1.035); }

.jhg-showcase__caption {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    align-items: start;
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
.jhg-showcase__index {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    color: var(--clay);
    letter-spacing: .04em;
    padding-top: .18rem;
}
.jhg-showcase__body { display: grid; gap: .4rem; }
.jhg-showcase__title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.2;
    color: var(--indigo);
}
.jhg-band--indigo .jhg-showcase__title { color: var(--on-dark); }
.jhg-showcase__text {
    font-size: .91rem;
    color: var(--text-soft);
    text-wrap: pretty;
}
.jhg-band--indigo .jhg-showcase__text { color: var(--on-dark-soft); }
.jhg-showcase__meta {
    font-size: .77rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.jhg-band--indigo .jhg-showcase__meta { color: var(--on-dark-muted); }

/* Credit stays deliberately quiet but never hidden — several of these
   pictures are licensed and have to name their source. */
.jhg-showcase__credit {
    font-size: .7rem;
    color: var(--text-muted);
    padding-top: .25rem;
    border-top: 1px solid var(--rule-soft);
    margin-top: .1rem;
}
.jhg-band--indigo .jhg-showcase__credit {
    color: var(--on-dark-muted);
    border-top-color: var(--rule-dark-soft);
}

@media (prefers-reduced-motion: reduce) {
    .jhg-showcase__frame img,
    .jhg-showcase__plate:hover .jhg-showcase__frame img { transition: none; transform: none; }
}

/* ---- split: prose beside a bullet index ---- */
.jhg-split__list {
    display: grid;
    gap: .1rem;
    margin-top: var(--space-md);
    border-top: 1px solid var(--rule);
}
.jhg-split__list li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: .7rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .93rem;
    color: var(--text-soft);
}
.jhg-split__list .ti { color: var(--clay); font-size: 1rem; margin-top: .22rem; }
.jhg-split__figure {
    position: relative;
    margin: 0;
    border: 1px solid var(--rule);
    background: var(--sand);
}
.jhg-split__figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* ---- steps: a numbered vertical ladder ---- */
.jhg-steps { counter-reset: step; border-top: 1px solid var(--rule); }
.jhg-step {
    counter-increment: step;
    display: grid;
    grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.2rem) 0;
    border-bottom: 1px solid var(--rule-soft);
}
.jhg-step__no {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: .9;
    font-variant-numeric: tabular-nums;
    color: var(--clay);
}
.jhg-step__no::before { content: '/' counter(step, decimal-leading-zero); }
.jhg-step__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.2;
    color: var(--indigo);
}
.jhg-step__window {
    display: inline-block;
    margin-top: .5rem;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.jhg-step__text { margin-top: .7rem; max-width: var(--measure); color: var(--text-soft); }
.jhg-band--indigo .jhg-steps { border-top-color: var(--rule-dark); }
.jhg-band--indigo .jhg-step { border-color: var(--rule-dark-soft); }
.jhg-band--indigo .jhg-step__title { color: var(--on-dark); }
.jhg-band--indigo .jhg-step__text { color: var(--on-dark-soft); }
@media (max-width: 640px) {
    .jhg-step { grid-template-columns: 1fr; gap: .5rem; }
}

/*
 * From a tablet up the ladder lies down: two steps a row, then — on a wide
 * screen — every step in one row, each column opened by its own rule and
 * numeral. The same four or five steps then take one band-height instead
 * of a screen and a half.
 */
@media (min-width: 641px) {
    .jhg-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem clamp(1.5rem, 3vw, 2.75rem);
        border-top: 0;
    }
    .jhg-step {
        grid-template-columns: 1fr;
        align-content: start;
        gap: .9rem;
        padding: 1.3rem 0 0;
        border-top: 1px solid var(--rule-strong);
        border-bottom: 0;
    }
    .jhg-band--indigo .jhg-step { border-top-color: var(--rule-dark); }
    .jhg-step__text { font-size: .95rem; }
}
@media (min-width: 1000px) {
    .jhg-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/*
 * ---- tiers: the price index, a ruled list of rows ----
 * Each row sets name and price on one line with the note beneath, and a
 * wide screen runs the index in two columns — a price list, read across.
 */
.jhg-tiers {
    display: grid;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    border-top: 1px solid var(--rule-strong);
}
@media (min-width: 900px) { .jhg-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jhg-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "text text";
    gap: .55rem clamp(1rem, 2.5vw, 2rem);
    align-items: baseline;
    align-content: start;
    padding: clamp(1.1rem, 2vw, 1.4rem) 0;
    border-bottom: 1px solid var(--rule-soft);
    transition: background-color .2s var(--ease);
}
.jhg-tier__name { grid-area: name; }
.jhg-tier__text { grid-area: text; max-width: var(--measure); }
.jhg-tier__price { grid-area: price; }
a.jhg-tier:hover { background: var(--paper); }
.jhg-band--sand a.jhg-tier:hover { background: var(--bone); }
.jhg-tier__name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.1vw, 1.5rem);
    line-height: 1.16;
    color: var(--indigo);
}
.jhg-tier__badge {
    display: inline-block;
    margin-left: .6rem;
    padding: .18rem .5rem;
    border: 1px solid var(--clay);
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clay);
    vertical-align: middle;
}
.jhg-tier__text { font-size: .93rem; color: var(--text-soft); text-wrap: pretty; }
.jhg-tier__price {
    text-align: right;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--clay);
    white-space: nowrap;
}
.jhg-tier__price span {
    display: block;
    margin-top: .3rem;
    font-family: var(--font-body);
    font-size: .71rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: normal;
}

/* ---- compare: a two-column ruled comparison ---- */
.jhg-compare { width: 100%; border-collapse: collapse; font-size: .93rem; }
.jhg-compare caption { text-align: left; padding-bottom: 1rem; color: var(--text-muted); font-size: .85rem; }
.jhg-compare th, .jhg-compare td {
    padding: 1rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}
.jhg-compare thead th {
    border-bottom: 1px solid var(--rule-strong);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--indigo);
}
.jhg-compare tbody th { font-weight: 500; color: var(--indigo); }
.jhg-compare td { color: var(--text-soft); }
.jhg-compare td:last-child { color: var(--indigo); background: var(--clay-wash); }
.jhg-compare__wrap { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---- stats: display numerals on a hairline grid ---- */
.jhg-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}
.jhg-stat { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--bone); }
.jhg-band--sand .jhg-stat { background: var(--sand); }
.jhg-band--indigo .jhg-stats { background: var(--rule-dark); border-block-color: var(--rule-dark); }
.jhg-band--indigo .jhg-stat { background: var(--indigo); }
.jhg-stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: .95;
    font-variant-numeric: tabular-nums;
    color: var(--indigo);
}
.jhg-stat__value span { color: var(--clay); }
.jhg-band--indigo .jhg-stat__value { color: var(--on-dark); }
.jhg-band--indigo .jhg-stat__value span { color: var(--clay-soft); }
.jhg-stat__label {
    margin-top: .8rem;
    font-size: .82rem;
    color: var(--text-muted);
    text-wrap: pretty;
}
.jhg-band--indigo .jhg-stat__label { color: var(--on-dark-muted); }
/* Stats run two up even on a phone — a figure and a caption fit a half
   column — so an odd count widens its first figure there too. */
@media (max-width: 639px) {
    .jhg-stats.is-fill-md > :first-child { grid-column: span 2; }
}

/* ---- directory: a ruled index of linked pages ---- */
.jhg-directory { border-top: 1px solid var(--rule-strong); }
.jhg-directory__item {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 1rem clamp(1rem, 2.5vw, 2rem);
    align-items: center;
    padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
    border-bottom: 1px solid var(--rule-soft);
    transition: transform .26s var(--ease), background-color .2s var(--ease);
}
.jhg-directory__item:hover { transform: translateX(.5rem); background: var(--paper); }
.jhg-band--sand .jhg-directory__item:hover { background: var(--bone); }
.jhg-directory__icon { font-size: 1.2rem; color: var(--clay); }
.jhg-directory__title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.18;
    color: var(--indigo);
}
.jhg-directory__text { margin-top: .3rem; font-size: .9rem; color: var(--text-soft); text-wrap: pretty; }
.jhg-directory__arrow { color: var(--text-muted); font-size: 1.1rem; transition: transform .26s var(--ease), color .2s var(--ease); }
.jhg-directory__item:hover .jhg-directory__arrow { transform: translateX(.3rem); color: var(--clay); }
@media (max-width: 600px) {
    .jhg-directory__item { grid-template-columns: 2rem 1fr; }
    .jhg-directory__arrow { display: none; }
}

/* ---- support: points with a closing note ---- */
.jhg-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.5rem, 3.5vw, 3rem);
}
.jhg-support__item { padding-top: 1.1rem; border-top: 1px solid var(--rule-strong); }
.jhg-support__item .ti { font-size: 1.25rem; color: var(--clay); }
.jhg-support__title {
    margin-top: .7rem;
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.2;
    color: var(--indigo);
}
.jhg-support__text { margin-top: .5rem; font-size: .92rem; color: var(--text-soft); text-wrap: pretty; }
.jhg-band--indigo .jhg-support__item { border-top-color: var(--rule-dark); }
.jhg-band--indigo .jhg-support__title { color: var(--on-dark); }
.jhg-band--indigo .jhg-support__text { color: var(--on-dark-soft); }

/* ---- contact ---- */
.jhg-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (max-width: 900px) { .jhg-contact { grid-template-columns: 1fr; } }
.jhg-contact__methods { border-top: 1px solid var(--rule-strong); }
.jhg-contact__method {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: .9rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.jhg-contact__method .ti { font-size: 1.25rem; color: var(--clay); }
.jhg-contact__method h3 {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.jhg-contact__method p { margin-top: .35rem; color: var(--text-soft); font-size: .93rem; }
.jhg-contact__hours {
    margin-top: var(--space-md);
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
}
.jhg-contact__hours h3 {
    font-size: .74rem; font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: .7rem;
}
.jhg-contact__hours-row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; font-size: .9rem; color: var(--text-soft);
    border-bottom: 1px solid var(--rule-soft);
    font-variant-numeric: tabular-nums;
}

/* ---- form ---- */
.jhg-form { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--paper); border: 1px solid var(--rule); }
.jhg-band--sand .jhg-form { background: var(--bone); }
.jhg-form__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.16;
    color: var(--indigo);
    margin-bottom: 1.4rem;
}
.jhg-field { margin-bottom: 1.1rem; }
.jhg-field label {
    display: block;
    margin-bottom: .4rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.jhg-field input, .jhg-field textarea, .jhg-field select {
    width: 100%;
    padding: .8rem .9rem;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    font-size: .95rem;
    color: var(--text);
    transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.jhg-band--sand .jhg-field input,
.jhg-band--sand .jhg-field textarea,
.jhg-band--sand .jhg-field select { background: var(--paper); }
.jhg-field input::placeholder, .jhg-field textarea::placeholder { color: var(--text-muted); }
.jhg-field input:hover, .jhg-field textarea:hover { border-color: var(--rule-strong); }
.jhg-field textarea { min-height: 8rem; resize: vertical; }
.jhg-form__note { margin-top: 1rem; font-size: .8rem; color: var(--text-muted); }

/* ---- cta: full-bleed indigo plate ---- */
.jhg-cta {
    position: relative;
    padding-block: var(--space-band);
    background: var(--indigo);
    color: var(--on-dark);
    overflow: hidden;
}
.jhg-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, var(--rule-dark-soft) 0 1px, transparent 1px 3.6rem),
        repeating-linear-gradient(0deg, var(--rule-dark-soft) 0 1px, transparent 1px 3.6rem);
    mask-image: radial-gradient(90% 90% at 12% 100%, #000 0%, transparent 70%);
    pointer-events: none;
}
.jhg-cta__inner { position: relative; max-width: 58ch; }

/* Wide: the pitch on the left, the two actions stacked on the right behind
   a hairline, so the band is used across its width. */
@media (min-width: 900px) {
    .jhg-cta__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: clamp(2.5rem, 7vw, 7rem);
        align-items: center;
        max-width: none;
    }
    .jhg-cta__inner > * { grid-column: 1; max-width: 58ch; }
    .jhg-cta__inner > .jhg-cta-row {
        grid-column: 2;
        grid-row: 1 / span 3;
        flex-direction: column;
        margin-top: 0;
        padding-left: clamp(2rem, 4vw, 3.5rem);
        border-left: 1px solid var(--rule-dark);
    }
}
.jhg-cta .jhg-h2 { color: var(--on-dark); }
.jhg-cta .jhg-h2 em { color: var(--clay-soft); }
.jhg-cta__body { margin-top: 1.1rem; color: var(--on-dark-soft); text-wrap: pretty; }
.jhg-cta .jhg-eyebrow { color: var(--clay-soft); }

/* ---- related ---- */
.jhg-related {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.jhg-related__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.3rem, 2.4vw, 1.8rem);
    background: var(--paper);
    transition: background-color .22s var(--ease);
}
.jhg-band--sand .jhg-related__item { background: var(--bone); }
.jhg-related__item:hover { background: var(--clay-wash); }
.jhg-related__item .ti { font-size: 1.2rem; color: var(--clay); }
.jhg-related__title {
    padding-right: 1.4rem;
    font-family: var(--font-display);
    font-size: 1.16rem;
    line-height: 1.2;
    color: var(--indigo);
}
.jhg-related__text { font-size: .88rem; color: var(--text-soft); text-wrap: pretty; }

/* On a phone the related icon moves up beside the title, as on the cards. */
@media (max-width: 639px) {
    .jhg-related__item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .75rem;
        row-gap: .5rem;
        align-items: center;
    }
    .jhg-related__item > .jhg-related__text { grid-column: 1 / -1; }
}

/* ---- grid fit ----
 * Column counts and span rules for the hairline grids — cards, related,
 * showcase and stats. jhg_grid_classes() (inc/helpers.php) picks the classes from the
 * item count, so a row never ends in an empty cell: one column on a phone,
 * two on a tablet, three or four on a wide screen, with spare tracks taken
 * up by double-width items at the head (cards) or tail (showcase).
 *
 * Kept after the base rules of all four grids, which set their phone
 * columns and would otherwise win on source order.
 */
@media (min-width: 640px) {
    .jhg-cards, .jhg-related, .jhg-showcase, .jhg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .is-fill-md.is-fill-head > :first-child,
    .is-fill-md:not(.is-fill-head) > :last-child { grid-column: span 2; }
}
@media (min-width: 1000px) {
    .jhg-cards.is-cols-3, .jhg-related.is-cols-3, .jhg-showcase.is-cols-3, .jhg-stats.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jhg-cards.is-cols-4, .jhg-related.is-cols-4, .jhg-showcase.is-cols-4, .jhg-stats.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .is-fill-md.is-fill-head > :first-child,
    .is-fill-md:not(.is-fill-head) > :last-child { grid-column: auto; }
    .is-fill-head.is-fill-1 > :first-child,
    .is-fill-head.is-fill-2 > :nth-child(-n+2),
    .is-fill-1:not(.is-fill-head) > :last-child,
    .is-fill-2:not(.is-fill-head) > :nth-last-child(-n+2) { grid-column: span 2; }
    .is-fill-head.is-fill-row > :first-child,
    .is-fill-row:not(.is-fill-head) > :last-child { grid-column: 1 / -1; }
}
.is-cols-1 > * { grid-column: 1 / -1; }

/*
 * A card widened to close a row is set as the feature: a larger title and
 * a longer measure, so the extra width reads as emphasis rather than as a
 * box with room to spare.
 */
@media (min-width: 640px) and (max-width: 999px) {
    .is-fill-md.is-fill-head > .jhg-card:first-child .jhg-card__title { font-size: 1.55rem; }
    .is-fill-md.is-fill-head > .jhg-card:first-child .jhg-card__text { max-width: 60ch; font-size: .98rem; }
}
@media (min-width: 1000px) {
    .is-fill-head.is-fill-1 > .jhg-card:first-child,
    .is-fill-head.is-fill-2 > .jhg-card:nth-child(-n+2) { background: var(--paper); }
    .is-fill-head.is-fill-1 > .jhg-card:first-child .jhg-card__icon,
    .is-fill-head.is-fill-2 > .jhg-card:nth-child(-n+2) .jhg-card__icon { font-size: 1.7rem; }
    .is-fill-head.is-fill-1 > .jhg-card:first-child .jhg-card__title,
    .is-fill-head.is-fill-2 > .jhg-card:nth-child(-n+2) .jhg-card__title { font-size: clamp(1.5rem, 2.2vw, 1.85rem); }
    .is-fill-head.is-fill-1 > .jhg-card:first-child .jhg-card__text,
    .is-fill-head.is-fill-2 > .jhg-card:nth-child(-n+2) .jhg-card__text {
        max-width: 46ch;
        font-family: var(--font-display);
        font-size: clamp(1.12rem, 1.5vw, 1.3rem);
        line-height: 1.45;
        color: var(--text);
    }

    /* A photograph widened at the tail of the showcase lies on its side —
       picture left, caption right — and so fills the full row height. */
    .is-fill-1:not(.is-fill-head) > .jhg-showcase__plate:last-child,
    .is-fill-2:not(.is-fill-head) > .jhg-showcase__plate:nth-last-child(-n+2) { flex-direction: row; }
    .is-fill-1:not(.is-fill-head) > .jhg-showcase__plate:last-child .jhg-showcase__frame,
    .is-fill-2:not(.is-fill-head) > .jhg-showcase__plate:nth-last-child(-n+2) .jhg-showcase__frame {
        flex: 0 0 52%;
        height: auto;
        min-height: 16rem;
    }
    .is-fill-1:not(.is-fill-head) > .jhg-showcase__plate:last-child .jhg-showcase__caption,
    .is-fill-2:not(.is-fill-head) > .jhg-showcase__plate:nth-last-child(-n+2) .jhg-showcase__caption { flex: 1; align-self: center; }
}


/* ==================================================================== 8. faq */
.jhg-faq { border-top: 1px solid var(--rule-strong); }
.jhg-faq-item { border-bottom: 1px solid var(--rule-soft); }
.jhg-faq-item__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.9vw, 1.32rem);
    line-height: 1.28;
    color: var(--indigo);
    transition: color .18s var(--ease);
}
.jhg-faq-item__q::-webkit-details-marker { display: none; }
.jhg-faq-item__q:hover { color: var(--clay); }
.jhg-faq-item__q .ti {
    flex: none;
    margin-top: .25rem;
    font-size: 1rem;
    color: var(--clay);
    transition: transform .26s var(--ease);
}
.jhg-faq-item[open] .jhg-faq-item__q .ti { transform: rotate(45deg); }
.jhg-faq-item__a {
    padding: 0 3rem 1.5rem 0;
    max-width: var(--measure);
    color: var(--text-soft);
    font-size: .96rem;
    text-wrap: pretty;
}
.jhg-band--indigo .jhg-faq { border-top-color: var(--rule-dark); }
.jhg-band--indigo .jhg-faq-item { border-bottom-color: var(--rule-dark-soft); }
.jhg-band--indigo .jhg-faq-item__q { color: var(--on-dark); }
.jhg-band--indigo .jhg-faq-item__a { color: var(--on-dark-soft); }

/* ---- grouped FAQ hub: sticky category index + accordion groups ---- */
.jhg-faqg {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
@media (max-width: 960px) { .jhg-faqg { grid-template-columns: 1fr; } }

.jhg-faqg__nav {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    border-top: 1px solid var(--rule-strong);
}
@media (max-width: 960px) { .jhg-faqg__nav { position: static; } }
.jhg-faqg__nav a {
    display: grid;
    grid-template-columns: 1.6rem 1fr auto;
    gap: .7rem;
    align-items: center;
    padding: .85rem .2rem;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .9rem;
    color: var(--text-soft);
    transition: color .18s var(--ease), transform .22s var(--ease);
}
.jhg-faqg__nav a:hover, .jhg-faqg__nav a.is-active { color: var(--clay); transform: translateX(.4rem); }
.jhg-faqg__nav .ti { font-size: 1.05rem; color: var(--clay); }
.jhg-faqg__nav-count {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.jhg-faqg__group + .jhg-faqg__group { margin-top: var(--space-lg); }
.jhg-faqg__group-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--clay);
}
.jhg-faqg__group-title .ti { font-size: 1.05rem; }

/* ================================================================= 9. footer */
.jhg-footer {
    background: var(--indigo);
    color: var(--on-dark-soft);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.jhg-footer__top { padding-block: var(--space-band) var(--space-lg); }
.jhg-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 1000px) { .jhg-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jhg-footer__grid { grid-template-columns: 1fr; } }

.jhg-footer__brand p {
    margin-top: 1.2rem;
    max-width: 42ch;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--on-dark-muted);
    text-wrap: pretty;
}
.jhg-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.3rem;
    padding: .5rem .9rem;
    border: 1px solid var(--rule-dark);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--on-dark);
}
.jhg-footer__badge .ti { color: var(--clay-soft); }

.jhg-footer h2 {
    margin-bottom: 1.1rem;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--clay-soft);
}
.jhg-footer__links li { border-bottom: 1px solid var(--rule-dark-soft); }
.jhg-footer__links a {
    display: block;
    padding: .55rem 0;
    font-size: .89rem;
    color: var(--on-dark-soft);
    transition: color .18s var(--ease), transform .22s var(--ease);
}
.jhg-footer__links a:hover { color: var(--clay-soft); transform: translateX(.3rem); }

.jhg-footer__contact-item {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: .7rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--rule-dark-soft);
    font-size: .89rem;
}
.jhg-footer__contact-item .ti { color: var(--clay-soft); font-size: 1.05rem; margin-top: .15rem; }
.jhg-footer__contact-item strong {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
    margin-bottom: .2rem;
}
.jhg-footer__contact-item a:hover { color: var(--clay-soft); }

.jhg-footer__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
    padding-block: 1.4rem;
    border-top: 1px solid var(--rule-dark-soft);
    font-size: .8rem;
}
.jhg-footer__group > span {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--clay-soft);
}
.jhg-footer__group a { color: var(--on-dark-muted); }
.jhg-footer__group a:hover { color: var(--on-dark); }

.jhg-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--rule-dark-soft);
    font-size: .8rem;
    color: var(--on-dark-muted);
}
.jhg-footer__bottom p { max-width: 80ch; text-wrap: pretty; }
.jhg-footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.jhg-footer__legal a:hover { color: var(--clay-soft); }

/* ================================== 10. utilities / motion / print / blog */

/* Floating WhatsApp action. Label reveals on pointer devices only. */
.jhg-fab {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0));
    z-index: 130;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.1rem;
    background: var(--indigo);
    color: var(--on-dark);
    border: 1px solid var(--indigo);
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    box-shadow: var(--shadow-lift);
    transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.jhg-fab:hover { background: var(--clay); border-color: var(--clay); transform: translateY(-2px); }
.jhg-fab .ti { font-size: 1.3rem; }
.jhg-fab__label { display: none; }
@media (hover: hover) and (min-width: 640px) { .jhg-fab__label { display: inline; } }

#jhg-back-to-top {
    position: fixed;
    left: clamp(1rem, 3vw, 1.75rem);
    bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0));
    z-index: 125;
    display: grid;
    place-items: center;
    width: 2.8rem; height: 2.8rem;
    background: var(--bone);
    color: var(--indigo);
    border: 1px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
#jhg-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#jhg-back-to-top:hover { border-color: var(--clay); color: var(--clay); }

/* Scroll reveal. Sections start slightly low and fade up, once. */
.jhg-reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.jhg-reveal.is-in { opacity: 1; transform: none; }

/* ---- blog / journal ---- */
.jhg-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: clamp(1.5rem, 3.5vw, 3rem);
}
.jhg-post { padding-top: 1.2rem; border-top: 1px solid var(--rule-strong); }
.jhg-post__thumb { margin: 0 0 1.1rem; border: 1px solid var(--rule); background: var(--sand); }
.jhg-post__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.jhg-post__meta {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.jhg-post__title {
    margin-top: .6rem;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.1vw, 1.55rem);
    line-height: 1.18;
    color: var(--indigo);
}
.jhg-post:hover .jhg-post__title { color: var(--clay); }
.jhg-post__excerpt { margin-top: .6rem; font-size: .92rem; color: var(--text-soft); text-wrap: pretty; }
.jhg-post__link { margin-top: 1rem; }

.jhg-prose { max-width: var(--measure); color: var(--text-soft); }
.jhg-prose > * + * { margin-top: 1.15rem; }
.jhg-prose h2, .jhg-prose h3 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--indigo);
    line-height: 1.16;
    margin-top: var(--space-md);
}
.jhg-prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.jhg-prose h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.jhg-prose a {
    color: var(--clay);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.jhg-prose ul, .jhg-prose ol { padding-left: 1.3rem; }
.jhg-prose ul { list-style: none; }
.jhg-prose ul li { position: relative; padding-left: .3rem; }
.jhg-prose ul li::before {
    content: '';
    position: absolute;
    left: -1rem; top: .72em;
    width: .4rem; height: 1px;
    background: var(--clay);
}
.jhg-prose ol { list-style: decimal; }
.jhg-prose li + li { margin-top: .5rem; }
.jhg-prose blockquote {
    padding-left: 1.4rem;
    border-left: 2px solid var(--clay);
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-style: italic;
    color: var(--indigo);
}
.jhg-prose img { border: 1px solid var(--rule); }
.jhg-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.jhg-prose th, .jhg-prose td { padding: .75rem .9rem; border-bottom: 1px solid var(--rule-soft); text-align: left; }

.jhg-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
}
.jhg-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 2.5rem; height: 2.5rem;
    padding-inline: .6rem;
    border: 1px solid var(--rule);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
    transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.jhg-pagination .page-numbers:hover { border-color: var(--clay); color: var(--clay); }
.jhg-pagination .page-numbers.current { background: var(--indigo); border-color: var(--indigo); color: var(--on-dark); }

.jhg-empty {
    padding: var(--space-lg);
    border: 1px solid var(--rule);
    background: var(--paper);
    text-align: center;
    color: var(--text-soft);
}

.jhg-searchform { display: flex; gap: .5rem; max-width: 30rem; }
.jhg-searchform input {
    flex: 1;
    min-width: 0;
    padding: .8rem .9rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    font-size: .95rem;
}
.jhg-searchform input:hover { border-color: var(--rule-strong); }

.jhg-hide-mobile { display: none; }
@media (min-width: 880px) { .jhg-hide-mobile { display: inline-flex; } }

/* Respect the user's motion preference: no transforms, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .jhg-reveal { opacity: 1; transform: none; }
    .jhg-btn:hover, .jhg-card:hover, .jhg-fab:hover,
    .jhg-directory__item:hover, .jhg-faqg__nav a:hover, .jhg-faqg__nav a.is-active,
    .jhg-footer__links a:hover { transform: none; }
}

@media print {
    .jhg-utility, #jhg-header, #jhg-drawer, .jhg-fab, #jhg-back-to-top, .jhg-cta-row { display: none !important; }
    body { background: #fff; color: #000; }
    .jhg-band, .jhg-cta, .jhg-footer { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
    .jhg-reveal { opacity: 1 !important; transform: none !important; }
}