/*
 * Indonesia Yacht Broker — "Registry Ledger" design system.
 *
 * Hand-authored CSS, no build step. The brand is a national brokerage desk,
 * so the page is built like an official registry document rather than a
 * resort brochure: hairline rules instead of cards, mono reference numerals
 * instead of icons-in-circles, square corners, and two deep-hull ink bands
 * carrying a faint sea-chart grid.
 *
 * Palette and type continue the published site (ink #0f1c26, sea #0d5c73,
 * Instrument Serif / Schibsted Grotesk / Spline Sans Mono) at a higher
 * contrast and a wider measure.
 *
 * Deliberately unlike the sibling voa-extension-bali theme: cool instead of
 * warm, square instead of 14px-rounded, rules instead of shadowed cards.
 */

/* ---------------------------------------------------------------- tokens */
:root {
    /* ground + ink */
    --ink: #0b1a23;
    --ink-2: #102935;
    --ink-3: #17384a;
    --paper: #ffffff;
    --bone: #f5f8f9;
    --mist: #eaf0f3;

    /* brand sea */
    --sea: #0d5c73;
    --sea-deep: #0a3d4d;
    --sea-light: #4fb3cf;
    --sea-wash: #e7f1f4;

    /* text */
    --text: #0f1c26;
    --text-soft: #465c69;
    --text-muted: #788d99;
    --on-ink: #e8eef2;
    --on-ink-soft: #a9bcc7;
    --on-ink-muted: #7b919e;

    /* rules */
    --line: #d8e0e6;
    --line-soft: #e6ecef;
    --line-strong: #bcc9d1;
    --line-ink: rgba(232, 238, 242, .18);
    --line-ink-soft: rgba(232, 238, 242, .09);

    /* type */
    --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
    --font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* geometry — square-edged by design */
    --r-xs: 1px;
    --r-sm: 2px;
    --r: 3px;
    --r-pill: 999px;

    --container: 1240px;
    --gutter: 20px;
    --header-h: 70px;

    /* a sea-chart grid, used on ink bands only */
    --chart-grid:
        linear-gradient(to right, rgba(232, 238, 242, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232, 238, 242, .035) 1px, transparent 1px);
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bone);
    /* no 300ms double-tap delay, and a tap flash we chose rather than the OS default */
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--sea) 18%, transparent);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sea); color: #fff; }

:focus-visible {
    outline: 2px solid var(--sea);
    outline-offset: 3px;
}
.jhg-band--ink :focus-visible { outline-color: var(--sea-light); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: 16px; top: -5rem; z-index: 300;
    background: var(--sea); color: #fff; padding: .7rem 1.2rem;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

/* ---------------------------------------------------------------- layout */
.jhg-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
@media (min-width: 640px)  { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 44px; } }

.jhg-band { padding: 58px 0; position: relative; }
@media (min-width: 768px)  { .jhg-band { padding: 86px 0; } }
@media (min-width: 1200px) { .jhg-band { padding: 104px 0; } }

.jhg-band--bone   { background: var(--bone);  color: var(--text); }
.jhg-band--paper  { background: var(--paper); color: var(--text); }
.jhg-band--mist   { background: var(--mist);  color: var(--text); }
.jhg-band--ink    { background: var(--ink);   color: var(--on-ink); }
.jhg-band--ink::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--chart-grid); background-size: 52px 52px;
    pointer-events: none;
}
.jhg-band--ink > * { position: relative; }

/* a hairline between two same-tone bands, so the page never loses its ruling */
.jhg-band--bone + .jhg-band--bone,
.jhg-band--paper + .jhg-band--paper { border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------ typography */
.jhg-mono {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sea);
}
.jhg-band--ink .jhg-mono { color: var(--sea-light); }

/* "Ps. 01" style reference mark + the rule it rides on */
.jhg-ref {
    display: flex; align-items: baseline; gap: 18px;
    margin-bottom: 26px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.jhg-band--ink .jhg-ref { border-top-color: var(--line-ink); }
.jhg-ref__mark {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
    white-space: nowrap;
}
.jhg-band--ink .jhg-ref__mark { color: var(--on-ink-muted); }
.jhg-ref__label {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--sea);
}
.jhg-band--ink .jhg-ref__label { color: var(--sea-light); }

.jhg-h1 {
    text-wrap: balance;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.5rem, 6.4vw, 4.6rem);
    line-height: 1.02; letter-spacing: -.018em; color: var(--text);
}
.jhg-band--ink .jhg-h1 { color: var(--on-ink); }
.jhg-h1 em { font-style: italic; color: var(--sea); }
.jhg-band--ink .jhg-h1 em { color: var(--sea-light); }

.jhg-h2 {
    text-wrap: balance;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.7rem);
    line-height: 1.12; letter-spacing: -.012em; color: var(--text);
}
.jhg-band--ink .jhg-h2 { color: var(--on-ink); }
.jhg-h2 em { font-style: italic; color: var(--sea); }
.jhg-band--ink .jhg-h2 em { color: var(--sea-light); }

.jhg-h3 {
    text-wrap: balance;
    font-family: var(--font-display); font-weight: 400;
    font-size: 1.32rem; line-height: 1.25; letter-spacing: -.005em;
    color: var(--text);
}
.jhg-band--ink .jhg-h3 { color: var(--on-ink); }

.jhg-lede {
    text-wrap: pretty;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.18rem, 2.1vw, 1.6rem);
    line-height: 1.42; color: var(--text-soft); letter-spacing: -.005em;
}
.jhg-band--ink .jhg-lede { color: var(--on-ink-soft); }

.jhg-intro {
    font-size: 1.02rem; line-height: 1.72; color: var(--text-soft);
    margin-top: 16px; max-width: 62ch;
}
.jhg-band--ink .jhg-intro { color: var(--on-ink-soft); }

.jhg-heading-block { max-width: 44rem; }
.jhg-heading-block .jhg-h2 + .jhg-intro { margin-top: 18px; }

/* editorial body copy: one comfortable measure everywhere */
.jhg-prose { max-width: 70ch; }
.jhg-prose p { margin-top: 1.05em; color: var(--text-soft); }
.jhg-prose p:first-child { margin-top: 0; }
.jhg-band--ink .jhg-prose p { color: var(--on-ink-soft); }
.jhg-prose strong { color: var(--text); font-weight: 600; }
.jhg-prose a,
.jhg-link {
    color: var(--sea);
    border-bottom: 1px solid color-mix(in srgb, var(--sea) 35%, transparent);
    transition: border-color .18s ease, color .18s ease;
}
.jhg-prose a:hover, .jhg-link:hover { border-bottom-color: var(--sea); }
.jhg-band--ink .jhg-prose a, .jhg-band--ink .jhg-link {
    color: var(--sea-light);
    border-bottom-color: color-mix(in srgb, var(--sea-light) 40%, transparent);
}
.jhg-band--ink .jhg-prose a:hover, .jhg-band--ink .jhg-link:hover { border-bottom-color: var(--sea-light); }

/* --------------------------------------------------------------- buttons */
.jhg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    padding: 14px 24px; border-radius: var(--r-sm);
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    letter-spacing: .01em; line-height: 1; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.jhg-btn i { font-size: 1.15em; }
.jhg-btn--sea { background: var(--sea); color: #fff; }
.jhg-btn--sea:hover { background: var(--sea-deep); }
.jhg-btn--ink { background: var(--ink); color: var(--on-ink); }
.jhg-btn--ink:hover { background: var(--ink-3); }
.jhg-btn--light { background: var(--on-ink); color: var(--ink); }
.jhg-btn--light:hover { background: #fff; }
.jhg-btn--outline { border-color: var(--line-strong); color: var(--text); background: transparent; }
.jhg-btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
/* On a dark ground the outline button has to invert, or it is dark text on
   dark and effectively invisible. The hero, the closing CTA and the inline
   prompt plate all carry .jhg-band--ink for exactly this reason, so every
   on-ink rule in this file reaches them without a parallel selector list. */
.jhg-band--ink .jhg-btn--outline { border-color: var(--line-ink); color: var(--on-ink); background: transparent; }
.jhg-band--ink .jhg-btn--outline:hover { border-color: var(--on-ink); background: var(--on-ink); color: var(--ink); }
.jhg-btn--ghost {
    padding: 0; border: 0; background: none; color: var(--sea);
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 500;
}
.jhg-btn--ghost i { transition: transform .22s ease; }
.jhg-btn--ghost:hover i { transform: translateX(4px); }
.jhg-btn--sm { padding: 11px 18px; font-size: 13px; }

.jhg-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----------------------------------------------------------- scroll-reveal */
.jhg-reveal {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease-out, transform .55s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform;
}
.jhg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .jhg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* Decorative movement only — colour and focus transitions are left alone,
       since those carry state rather than motion. */
    .jhg-post__thumb img,
    .jhg-plate,
    .jhg-btn--ghost i,
    .jhg-plate__go i,
    .jhg-post__more i,
    .jhg-drawer__panel,
    #jhg-back-to-top { transition: none !important; }
    .jhg-post:hover .jhg-post__thumb img,
    a.jhg-plate:hover { transform: none !important; }
}

/* ---------------------------------------------------------- utility bar */
.jhg-utility {
    background: var(--ink); color: var(--on-ink-soft);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    border-bottom: 1px solid var(--line-ink-soft);
}
.jhg-utility__inner {
    max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.jhg-utility__group { display: flex; align-items: center; gap: 20px; }
.jhg-utility a { transition: color .18s ease; }
.jhg-utility a:hover { color: var(--sea-light); }
.jhg-utility i { color: var(--sea-light); margin-right: 5px; }
@media (max-width: 860px) {
    .jhg-utility__inner { justify-content: center; }
    .jhg-hide-mobile { display: none; }
    .jhg-utility__group:first-child { display: none; }
}

/* --------------------------------------------------------------- header */
#jhg-header {
    position: sticky; top: 0; z-index: 120;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.jhg-header__inner {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
    min-height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
}

/* wordmark / logo lockup */
.jhg-logo-img { height: 38px; width: auto; object-fit: contain; }
.jhg-logo-img--lg { height: 46px; }
.jhg-logo-img--invert { filter: brightness(0) invert(1); }

/* the logo never gives up width to the nav, and the name stays on one line */
.jhg-header__inner > a:first-child { flex-shrink: 0; }
.jhg-wordmark { display: inline-flex; align-items: center; gap: 11px; }
.jhg-wordmark__mark {
    display: grid; place-items: center;
    width: 30px; height: 30px; border: 1px solid var(--line-strong);
    border-radius: 50%; color: var(--sea); font-size: 15px;
}
.jhg-wordmark__text {
    font-family: var(--font-display); font-size: 1.22rem; line-height: 1.05; white-space: nowrap;
    letter-spacing: -.01em; color: var(--text);
}
.jhg-wordmark__text em { font-style: italic; color: var(--sea); }
.jhg-wordmark__sub {
    display: block; font-family: var(--font-mono); font-size: 8.5px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted);
    margin-top: 3px;
}
.jhg-wordmark--light .jhg-wordmark__text { color: var(--on-ink); }
.jhg-wordmark--light .jhg-wordmark__text em { color: var(--sea-light); }
.jhg-wordmark--light .jhg-wordmark__mark { border-color: var(--line-ink); color: var(--sea-light); }
.jhg-wordmark--light .jhg-wordmark__sub { color: var(--on-ink-muted); }
.jhg-wordmark--lg .jhg-wordmark__text { font-size: 1.5rem; }
.jhg-wordmark--lg .jhg-wordmark__mark { width: 36px; height: 36px; font-size: 18px; }

/* primary nav — five entries, each a dropdown that opens on its own page */
.jhg-nav { display: none; }
@media (min-width: 1100px) {
    .jhg-nav { display: flex; align-items: center; gap: 2px; }
    .jhg-nav__item { position: relative; }
    .jhg-nav__item > a {
        display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
        padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--text-soft);
        transition: color .18s ease;
    }
    .jhg-nav__item > a:hover, .jhg-nav__item.is-active > a { color: var(--sea); }
    .jhg-nav__item > a i { font-size: 13px; opacity: .6; transition: transform .18s ease; }
    .jhg-nav__item:hover > a i, .jhg-nav__item:focus-within > a i { transform: rotate(180deg); }

    .jhg-nav__dropdown {
        position: absolute; top: calc(100% + 10px); left: 0; z-index: 130;
        width: 340px; padding: 8px;
        background: var(--paper); border: 1px solid var(--line);
        box-shadow: 0 24px 50px -24px rgba(11, 26, 35, .3);
        opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    /* a hover bridge over the gap, so the list stays open on the way down */
    .jhg-nav__dropdown::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
    /* the last list opens leftwards, so it never runs past the viewport */
    .jhg-nav__item:last-child > .jhg-nav__dropdown { left: auto; right: 0; }
    .jhg-nav__item:hover > .jhg-nav__dropdown,
    .jhg-nav__item:focus-within > .jhg-nav__dropdown {
        opacity: 1; visibility: visible; transform: none;
    }
    /* the group's own page comes first, ruled off from the rest */
    .jhg-nav__dropdown > li:first-child { border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; padding-bottom: 4px; }
    .jhg-nav__dropdown a {
        display: grid; gap: 2px; padding: 10px 12px;
        border-left: 2px solid transparent;
        transition: background-color .16s ease, border-color .16s ease;
    }
    .jhg-nav__label { font-size: 13.5px; font-weight: 500; color: var(--text); transition: color .16s ease; }
    .jhg-nav__desc { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
    .jhg-nav__dropdown a:hover, .jhg-nav__dropdown a[aria-current] { background: var(--bone); border-left-color: var(--sea); }
    .jhg-nav__dropdown a:hover .jhg-nav__label, .jhg-nav__dropdown a[aria-current] .jhg-nav__label { color: var(--sea); }
}

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

.jhg-burger {
    display: grid; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--line); color: var(--text); font-size: 20px;
}
.jhg-burger:hover { border-color: var(--ink); }
@media (min-width: 1100px) { .jhg-burger { display: none; } }

/* mobile drawer */
#jhg-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
#jhg-drawer.is-open { pointer-events: auto; }
.jhg-drawer__backdrop {
    position: absolute; inset: 0; background: rgba(11, 26, 35, .55);
    opacity: 0; transition: opacity .25s ease;
}
#jhg-drawer.is-open .jhg-drawer__backdrop { opacity: 1; }
.jhg-drawer__panel {
    position: absolute; inset: 0 0 0 auto; width: min(400px, 88vw);
    background: var(--ink); color: var(--on-ink);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .3s cubic-bezier(.3, .8, .3, 1);
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}
#jhg-drawer.is-open .jhg-drawer__panel { transform: none; }
.jhg-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px var(--gutter); border-bottom: 1px solid var(--line-ink-soft);
}
.jhg-drawer__close { font-size: 22px; color: var(--on-ink-soft); }
.jhg-drawer__close:hover { color: var(--sea-light); }
.jhg-drawer__foot { margin-top: auto; padding: 20px var(--gutter) 28px; border-top: 1px solid var(--line-ink-soft); }
.jhg-drawer__foot .jhg-btn { width: 100%; }

.jhg-mnav { padding: 10px var(--gutter) 20px; }
.jhg-mnav a, .jhg-mnav__link {
    display: block; padding: 13px 0; font-size: 15px; color: var(--on-ink);
    border-bottom: 1px solid var(--line-ink-soft);
}
.jhg-mnav a:hover { color: var(--sea-light); }
.jhg-mnav__group > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 0; font-size: 15px; cursor: pointer; list-style: none;
    border-bottom: 1px solid var(--line-ink-soft);
}
.jhg-mnav__group > summary::-webkit-details-marker { display: none; }
.jhg-mnav__group[open] > summary i { transform: rotate(45deg); }
.jhg-mnav__group > summary i { transition: transform .2s ease; color: var(--sea-light); }
.jhg-mnav__group ul { padding: 4px 0 10px 14px; border-left: 1px solid var(--line-ink-soft); margin-left: 2px; }
.jhg-mnav__group ul a { font-size: 13.5px; color: var(--on-ink-soft); border: 0; padding: 9px 0; }
.jhg-mnav a[aria-current] { color: var(--sea-light); }

/* ============================================================== HOME HERO */
/*
 * Full-bleed ink plate. Oversized Instrument Serif headline on the left of a
 * 12-column grid, a hairline-divided meta rail spanning the full width below.
 * No floating card — the sibling theme uses one, and the registry reads
 * better as a single ruled sheet.
 */
.jhg-hero { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; }
.jhg-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--chart-grid); background-size: 52px 52px;
}
/* a faint sea glow, bottom-right, so the plate is not flat black */
.jhg-hero::after {
    content: ''; position: absolute; right: -12%; bottom: -30%;
    width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
    background: radial-gradient(circle, color-mix(in srgb, var(--sea) 42%, transparent) 0%, transparent 68%);
    opacity: .5; pointer-events: none;
}
.jhg-hero > * { position: relative; z-index: 1; }

/* Background photograph. The ink gradient is heaviest on the left, under the
   headline and lede, and along the bottom under the rail; the photo shows
   through on the right. The chart grid is redrawn over it, and the glow is
   dropped — the photo carries the light. */
.jhg-hero > .jhg-hero__bg { position: absolute; inset: 0; z-index: 0; }
.jhg-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; }
.jhg-hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        var(--chart-grid),
        linear-gradient(to top, rgba(11, 26, 35, .9) 0%, rgba(11, 26, 35, 0) 38%),
        linear-gradient(90deg, rgba(11, 26, 35, .86) 0%, rgba(11, 26, 35, .52) 50%, rgba(11, 26, 35, .3) 100%);
    background-size: 52px 52px, 52px 52px, auto, auto;
}
/* Desktop: a taller plate with the rail pinned to the bottom, so the photo's
   subject gets the open water between the buttons and the rail instead of
   sitting behind them. */
@media (min-width: 900px) {
    .jhg-hero--photo { display: flex; flex-direction: column; min-height: min(88svh, 900px); }
    .jhg-hero--photo .jhg-hero__inner { flex: 1; display: flex; flex-direction: column; width: 100%; }
    .jhg-hero--photo .jhg-hero__grid { margin-bottom: 44px; }
    .jhg-hero--photo .jhg-hero__rail { margin-top: auto; }
}
@media (max-width: 899px) {
    .jhg-hero__bg::after {
        background-image: var(--chart-grid), linear-gradient(rgba(11, 26, 35, .58), rgba(11, 26, 35, .9) 70%);
        background-size: 52px 52px, 52px 52px, auto;
    }
}
.jhg-hero--photo::before,
.jhg-hero--photo::after { display: none; }
/* the soft on-ink grey drops below 4.5:1 where the body runs over sunlit rock */
.jhg-hero--photo .jhg-hero__body { color: var(--on-ink); }

.jhg-hero__inner { padding-top: 46px; }
@media (min-width: 768px)  { .jhg-hero__inner { padding-top: 76px; } }
@media (min-width: 1200px) { .jhg-hero__inner { padding-top: 104px; } }

.jhg-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.jhg-hero__eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line-ink); max-width: 180px; }

.jhg-hero__title {
    font-family: var(--font-display); font-weight: 400; color: var(--on-ink);
    font-size: clamp(2.9rem, 8.4vw, 6.1rem);
    line-height: .98; letter-spacing: -.025em;
    max-width: 17ch;
}
.jhg-hero__title em { font-style: italic; color: var(--sea-light); }

.jhg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 26px; }
@media (min-width: 900px) {
    .jhg-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
}
.jhg-hero__lede {
    font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.78rem);
    line-height: 1.38; color: var(--on-ink); letter-spacing: -.008em;
}
.jhg-hero__body { font-size: 1rem; line-height: 1.75; color: var(--on-ink-soft); margin-top: 20px; }
.jhg-hero__cta { margin-top: 30px; }

/* meta rail — the hero's "ledger line" */
.jhg-hero__rail {
    margin-top: 44px; border-top: 1px solid var(--line-ink);
    display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .jhg-hero__rail { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .jhg-hero__rail { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.jhg-hero__rail-cell {
    padding: 20px 18px 24px 0; border-right: 1px solid var(--line-ink-soft);
    border-bottom: 1px solid var(--line-ink-soft);
}
@media (min-width: 1024px) {
    .jhg-hero__rail-cell { border-bottom: 0; padding-bottom: 30px; }
    .jhg-hero__rail-cell:last-child { border-right: 0; }
}
.jhg-hero__rail-cell:nth-child(2n) { border-right: 0; }
@media (min-width: 640px) {
    .jhg-hero__rail-cell:nth-child(2n) { border-right: 1px solid var(--line-ink-soft); }
    .jhg-hero__rail-cell:nth-child(3n) { border-right: 0; }
}
@media (min-width: 1024px) {
    .jhg-hero__rail-cell:nth-child(2n), .jhg-hero__rail-cell:nth-child(3n) { border-right: 1px solid var(--line-ink-soft); }
    .jhg-hero__rail-cell:last-child { border-right: 0; }
}
.jhg-hero__rail-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--on-ink-muted);
}
.jhg-hero__rail-value {
    font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3;
    color: var(--on-ink); margin-top: 8px;
}

/* The hero ends on its rail; the band after it is always a light one, so the
   plate closes there instead of running on into the next section. */
.jhg-hero__inner { padding-bottom: 8px; }
@media (min-width: 768px) { .jhg-hero__inner { padding-bottom: 18px; } }

/* ========================================================= PAGE HEADER */
/*
 * Inner pages: centred eyebrow, rule, H1, dek, and a mono byline rail —
 * the published site's "Updated 18 Aug 2026 · Desk" line, formalised.
 */
.jhg-pagehead {
    background: var(--paper); border-bottom: 1px solid var(--line-soft);
    padding: 34px 0 44px;
}
@media (min-width: 768px) { .jhg-pagehead { padding: 46px 0 62px; } }
.jhg-pagehead__inner { max-width: 60rem; margin: 0 auto; text-align: center; }
.jhg-pagehead__eyebrow { display: inline-flex; margin-bottom: 20px; }
.jhg-pagehead .jhg-h1 { margin-bottom: 20px; }
.jhg-pagehead__dek {
    font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.42rem);
    line-height: 1.45; color: var(--text-soft); max-width: 48rem; margin: 0 auto;
}
.jhg-pagehead__byline {
    margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
}
.jhg-pagehead__byline span {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--text-muted);
}
.jhg-pagehead__byline strong { color: var(--text); font-weight: 500; }

/* breadcrumb */
.jhg-breadcrumb { margin-bottom: 22px; }
.jhg-breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--text-muted);
}
.jhg-pagehead .jhg-breadcrumb ol { justify-content: center; }
.jhg-breadcrumb a { color: var(--text-muted); transition: color .18s ease; }
.jhg-breadcrumb a:hover { color: var(--sea); }
.jhg-breadcrumb li[aria-current] { color: var(--text); }
.jhg-band--ink .jhg-breadcrumb ol, .jhg-band--ink .jhg-breadcrumb a { color: var(--on-ink-muted); }

/* ======================================================== ABSTRACT BLOCK */
/* The summary paragraph each inner page opens with, set as a ruled abstract. */
.jhg-abstract {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px;
    border-left: 2px solid var(--sea); padding-left: clamp(18px, 4vw, 38px);
}
@media (min-width: 900px) { .jhg-abstract { grid-template-columns: minmax(0, 1fr) 232px; gap: 48px; } }
.jhg-abstract__text {
    font-family: var(--font-display); font-size: clamp(1.1rem, 1.9vw, 1.38rem);
    line-height: 1.52; color: var(--text);
}
.jhg-abstract__meta { display: grid; gap: 14px; align-content: start; }
.jhg-abstract__meta div { border-top: 1px solid var(--line); padding-top: 10px; }
.jhg-abstract__meta dt {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--text-muted);
}
.jhg-abstract__meta dd { margin: 5px 0 0; font-size: 13.5px; color: var(--text); }

/* ========================================================= ANSWER BLOCK */
/* The "Answer first:" section. Dropcap, wide measure, isolated. */
.jhg-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 1000px) { .jhg-answer { grid-template-columns: 300px minmax(0, 1fr); gap: 60px; } }
.jhg-answer__aside { align-content: start; display: grid; gap: 14px; }
.jhg-answer__body > p:first-of-type::first-letter {
    float: left; font-family: var(--font-display); font-size: 3.5em;
    line-height: .82; padding: .06em .12em 0 0; color: var(--sea);
}
.jhg-answer__points { margin-top: 26px; display: grid; gap: 1px; background: var(--line-soft); }
.jhg-answer__point {
    background: var(--paper); padding: 14px 18px;
    display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--text-soft);
}
.jhg-band--ink .jhg-answer__points { background: var(--line-ink-soft); }
.jhg-band--ink .jhg-answer__point { background: var(--ink); color: var(--on-ink-soft); }
.jhg-answer__point i { color: var(--sea); font-size: 10px; }
.jhg-band--ink .jhg-answer__point i { color: var(--sea-light); }

/* ============================================================ PROSE RUN */
/* A sequence of H2 + paragraphs, each introduced by its own hairline rule. */
.jhg-run { display: grid; gap: 52px; }
@media (min-width: 768px) { .jhg-run { gap: 68px; } }
.jhg-run__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 1000px) {
    .jhg-run__item { grid-template-columns: 112px minmax(0, 1fr); gap: 42px; align-items: start; }
}
.jhg-run__num {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-muted);
    border-top: 1px solid var(--line); padding-top: 12px;
}
.jhg-band--ink .jhg-run__num { color: var(--on-ink-muted); border-top-color: var(--line-ink); }
.jhg-run__h { margin-bottom: 18px; }
.jhg-run__subs { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
@media (min-width: 760px) { .jhg-run__subs--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .jhg-run__subs--3 { grid-template-columns: repeat(3, 1fr); } }
.jhg-run__sub { background: var(--bone); padding: 24px 22px; }
.jhg-band--paper .jhg-run__sub { background: var(--paper); }
.jhg-band--ink .jhg-run__subs { background: var(--line-ink-soft); }
.jhg-band--ink .jhg-run__sub { background: var(--ink-2); }
.jhg-run__sub-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sea); display: block; margin-bottom: 12px;
}
.jhg-band--ink .jhg-run__sub-label { color: var(--sea-light); }
.jhg-run__sub p { margin-top: 10px; font-size: 14.5px; line-height: 1.68; color: var(--text-soft); }
.jhg-band--ink .jhg-run__sub p { color: var(--on-ink-soft); }

/* ============================================================== MANDATES */
/*
 * The four mandates / service plates. Full-width ruled rows rather than a
 * card grid: mono index, serif title, body, arrow. The row is the link.
 */
.jhg-plates { border-top: 1px solid var(--line); }
.jhg-band--ink .jhg-plates { border-top-color: var(--line-ink); }
.jhg-plate {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 28px; padding: 28px 0;
    border-bottom: 1px solid var(--line);
    transition: background-color .22s ease, padding-left .22s ease;
}
.jhg-band--ink .jhg-plate { border-bottom-color: var(--line-ink); }
@media (min-width: 860px) {
    .jhg-plate { grid-template-columns: 168px minmax(0, 1fr) 190px; align-items: start; padding: 34px 0; }
}
a.jhg-plate:hover { background: var(--paper); padding-left: 16px; }
.jhg-band--ink a.jhg-plate:hover { background: var(--ink-2); }
.jhg-plate__label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sea); padding-top: 6px;
}
.jhg-band--ink .jhg-plate__label { color: var(--sea-light); }
.jhg-plate__title { margin-bottom: 10px; }
.jhg-plate__text { font-size: 15px; line-height: 1.7; color: var(--text-soft); }
.jhg-band--ink .jhg-plate__text { color: var(--on-ink-soft); }
.jhg-plate__go {
    display: inline-flex; align-items: center; gap: 8px; align-self: center;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--sea); white-space: nowrap;
}
.jhg-band--ink .jhg-plate__go { color: var(--sea-light); }
.jhg-plate__go i { transition: transform .22s ease; }
a.jhg-plate:hover .jhg-plate__go i { transform: translateX(5px); }

/* ================================================================ FIGURE */
/*
 * A photograph plate. Square-edged and hairline-framed like everything else;
 * the caption is a registry line — mono figure label, caption, credit pushed
 * right. Letterboxed 21:9 on desktop, 3:2 on a phone so the vessel is not a
 * sliver.
 */
.jhg-figure__frame {
    aspect-ratio: 3 / 2; overflow: hidden;
    background: var(--mist); border: 1px solid var(--line);
}
@media (min-width: 768px) { .jhg-figure__frame { aspect-ratio: 21 / 9; } }
.jhg-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.jhg-band--ink .jhg-figure__frame { background: var(--ink-2); border-color: var(--line-ink); }

.jhg-figure__cap {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-size: 14px; line-height: 1.55; color: var(--text-soft);
}
.jhg-figure__ref {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sea);
}
.jhg-figure__credit {
    margin-left: auto; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.jhg-band--ink .jhg-figure__cap { color: var(--on-ink-soft); border-bottom-color: var(--line-ink); }
.jhg-band--ink .jhg-figure__ref { color: var(--sea-light); }
.jhg-band--ink .jhg-figure__credit { color: var(--on-ink-muted); }

/* Directly under a page header, the plate is that header's lead photograph:
   no rule between them. */
.jhg-pagehead:has(+ .jhg-band--figure) { border-bottom: 0; padding-bottom: clamp(26px, 3.4vw, 44px); }
.jhg-pagehead + .jhg-band--figure { padding-top: 0; }

/* =============================================================== GALLERY */
/*
 * Photo cards in a ruled grid — the gap is the rule, as in the prose-run
 * cards. Photos crop to 4:3; a linked card zooms its photo slightly on hover.
 */
.jhg-gallery {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 640px)  { .jhg-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jhg-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px)  { .jhg-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.jhg-gallery__item { display: flex; flex-direction: column; background: var(--bone); transition: background-color .22s ease; }
.jhg-band--bone .jhg-gallery__item { background: var(--paper); }
a.jhg-gallery__item:hover { background: var(--sea-wash); }
.jhg-gallery__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.jhg-gallery__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
a.jhg-gallery__item:hover .jhg-gallery__media img { transform: scale(1.04); }
a.jhg-gallery__item:hover .jhg-h3 { color: var(--sea); }
a.jhg-gallery__item:hover .jhg-plate__go i { transform: translateX(5px); }

.jhg-gallery__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; }
.jhg-gallery__ref {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sea);
}
.jhg-gallery__text { font-size: 14.5px; line-height: 1.68; color: var(--text-soft); }
.jhg-gallery__body .jhg-plate__go { margin-top: auto; padding-top: 6px; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
    .jhg-gallery__media img { transition: none !important; }
    a.jhg-gallery__item:hover .jhg-gallery__media img { transform: none !important; }
}

/* =============================================================== STEPPER */
/* The 01-06 transaction rail. Horizontal on desktop, stacked on mobile. */
.jhg-stepper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line-ink-soft); }
@media (min-width: 560px) { .jhg-stepper { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .jhg-stepper { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .jhg-stepper { grid-template-columns: repeat(6, 1fr); } }
.jhg-step {
    background: var(--ink); padding: 24px 20px 28px;
    position: relative; transition: background-color .22s ease;
}
.jhg-step:hover { background: var(--ink-2); }
.jhg-step__num {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sea-light);
    display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
}
.jhg-step__num::after { content: ''; flex: 1; height: 1px; background: var(--line-ink); }
.jhg-step__title {
    font-family: var(--font-display); font-size: 1.12rem; line-height: 1.22;
    color: var(--on-ink); margin-bottom: 8px;
}
.jhg-step__text { font-size: 13.5px; line-height: 1.6; color: var(--on-ink-muted); }
/* light-band variant, used by the process page */
.jhg-band--bone .jhg-stepper, .jhg-band--paper .jhg-stepper { background: var(--line); }
.jhg-band--bone .jhg-step, .jhg-band--paper .jhg-step { background: var(--paper); }
.jhg-band--bone .jhg-step:hover, .jhg-band--paper .jhg-step:hover { background: var(--sea-wash); }
.jhg-band--bone .jhg-step__num, .jhg-band--paper .jhg-step__num { color: var(--sea); }
.jhg-band--bone .jhg-step__num::after, .jhg-band--paper .jhg-step__num::after { background: var(--line); }
.jhg-band--bone .jhg-step__title, .jhg-band--paper .jhg-step__title { color: var(--text); }
.jhg-band--bone .jhg-step__text, .jhg-band--paper .jhg-step__text { color: var(--text-soft); }

/* ================================================================ LEDGER */
/*
 * Registry tables: commission bands, import cost layers, document lists.
 * Hairline rows, mono figures right-aligned, serif first column.
 */
.jhg-ledger { margin-top: 36px; }
.jhg-ledger__caption {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--text-muted);
    padding-bottom: 12px; border-bottom: 1px solid var(--ink); text-align: left;
}
.jhg-band--ink .jhg-ledger__caption { color: var(--on-ink-muted); border-bottom-color: var(--on-ink-soft); }
.jhg-ledger table { font-size: 15px; }
.jhg-ledger thead th {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-muted); font-weight: 500;
    text-align: left; padding: 14px 18px 12px 0; border-bottom: 1px solid var(--line);
    vertical-align: bottom;
}
.jhg-band--ink .jhg-ledger thead th { color: var(--on-ink-muted); border-bottom-color: var(--line-ink); }
.jhg-ledger tbody td {
    padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line-soft);
    color: var(--text-soft); line-height: 1.65; vertical-align: top;
}
.jhg-band--ink .jhg-ledger tbody td { border-bottom-color: var(--line-ink-soft); color: var(--on-ink-soft); }
.jhg-ledger tbody tr:hover td { background: color-mix(in srgb, var(--sea) 4%, transparent); }
.jhg-ledger tbody td:last-child { padding-right: 0; }
.jhg-ledger__key {
    font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3;
    color: var(--text); white-space: nowrap;
}
.jhg-band--ink .jhg-ledger__key { color: var(--on-ink); }
.jhg-ledger__fig {
    font-family: var(--font-mono); font-size: 14px; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text); text-align: right; white-space: nowrap;
}
.jhg-band--ink .jhg-ledger__fig { color: var(--sea-light); }
.jhg-ledger th.jhg-ledger__fig, .jhg-ledger thead th:last-child { text-align: right; }
.jhg-ledger__note {
    margin-top: 22px; font-size: 13.5px; line-height: 1.7; color: var(--text-muted);
    max-width: 72ch; padding-left: 16px; border-left: 1px solid var(--line-strong);
}
.jhg-band--ink .jhg-ledger__note { color: var(--on-ink-muted); border-left-color: var(--line-ink); }
/* total row emphasis */
.jhg-ledger tbody tr.is-total td { border-bottom-width: 0; border-top: 1px solid var(--ink); font-weight: 500; }
.jhg-band--ink .jhg-ledger tbody tr.is-total td { border-top-color: var(--on-ink-soft); }
.jhg-ledger tbody tr.is-total .jhg-ledger__key,
.jhg-ledger tbody tr.is-total .jhg-ledger__fig { color: var(--sea); }
.jhg-band--ink .jhg-ledger tbody tr.is-total .jhg-ledger__key { color: var(--on-ink); }

@media (max-width: 720px) {
    .jhg-ledger thead { display: none; }
    .jhg-ledger tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 18px 0; }
    .jhg-ledger tbody tr:hover td { background: none; }
    .jhg-ledger tbody td { display: block; border: 0; padding: 0; }
    .jhg-ledger tbody td + td { margin-top: 8px; }
    .jhg-ledger tbody td[data-th]::before {
        content: attr(data-th); display: block; margin-bottom: 4px;
        font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
        text-transform: uppercase; color: var(--text-muted);
    }
    .jhg-ledger__fig { text-align: left; }
    .jhg-ledger__key { white-space: normal; }
}

/* ============================================================== Q&A SET */
/* Three open questions, always visible (the home page's foreign-buyer block). */
.jhg-qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); margin-top: 36px; }
@media (min-width: 900px) { .jhg-qa { grid-template-columns: repeat(3, 1fr); } }
.jhg-band--ink .jhg-qa { background: var(--line-ink-soft); }
.jhg-qa__item { background: var(--paper); padding: 28px 24px; }
.jhg-band--bone .jhg-qa__item { background: var(--bone); }
.jhg-band--ink .jhg-qa__item { background: var(--ink-2); }
.jhg-qa__q {
    font-family: var(--font-display); font-size: 1.14rem; line-height: 1.32;
    color: var(--text); margin-bottom: 12px; display: flex; gap: 10px;
}
.jhg-band--ink .jhg-qa__q { color: var(--on-ink); }
.jhg-qa__q::before {
    content: 'Q.'; font-family: var(--font-mono); font-size: 11px; color: var(--sea);
    letter-spacing: .08em; padding-top: .35em;
}
.jhg-band--ink .jhg-qa__q::before { color: var(--sea-light); }
.jhg-qa__a { font-size: 14.5px; line-height: 1.7; color: var(--text-soft); }
.jhg-band--ink .jhg-qa__a { color: var(--on-ink-soft); }

/* ======================================================= FAQ (ACCORDION) */
.jhg-faq { border-top: 1px solid var(--line); }
.jhg-band--ink .jhg-faq { border-top-color: var(--line-ink); }
.jhg-faq-item { border-bottom: 1px solid var(--line); }
.jhg-band--ink .jhg-faq-item { border-bottom-color: var(--line-ink); }
.jhg-faq-item__q {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
    padding: 21px 0; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: 1.12rem; line-height: 1.36;
    color: var(--text); transition: color .18s ease;
}
.jhg-band--ink .jhg-faq-item__q { color: var(--on-ink); }
.jhg-faq-item__q::-webkit-details-marker { display: none; }
.jhg-faq-item__q:hover { color: var(--sea); }
.jhg-band--ink .jhg-faq-item__q:hover { color: var(--sea-light); }
.jhg-faq-item__q i {
    flex: none; margin-top: .22em; font-size: 15px; color: var(--sea);
    transition: transform .25s ease;
}
.jhg-band--ink .jhg-faq-item__q i { color: var(--sea-light); }
.jhg-faq-item[open] .jhg-faq-item__q i { transform: rotate(45deg); }
.jhg-faq-item[open] .jhg-faq-item__q { color: var(--sea); }
.jhg-band--ink .jhg-faq-item[open] .jhg-faq-item__q { color: var(--sea-light); }
.jhg-faq-item__a {
    padding: 0 60px 24px 0; font-size: 15px; line-height: 1.75; color: var(--text-soft);
    max-width: 76ch;
}
.jhg-band--ink .jhg-faq-item__a { color: var(--on-ink-soft); }
@media (max-width: 640px) { .jhg-faq-item__a { padding-right: 0; } }

/* ================================================== FAQ HUB (CATEGORIES) */
/*
 * Tab pills + one panel per category. The sibling theme uses a sticky side
 * column, so this one navigates horizontally and shows a single set at a time.
 */
.jhg-faqg { margin-top: 38px; }
.jhg-faqg__tabs {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
    border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.jhg-band--ink .jhg-faqg__tabs { border-bottom-color: var(--line-ink); }
.jhg-faqg__tab {
    display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    padding: 13px 18px; margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 13.5px; font-weight: 500; color: var(--text-muted);
    transition: color .18s ease, border-color .18s ease;
}
.jhg-faqg__tab i { font-size: 15px; }
.jhg-faqg__tab:hover { color: var(--text); }
.jhg-faqg__tab.is-active { color: var(--sea); border-bottom-color: var(--sea); }
.jhg-band--ink .jhg-faqg__tab.is-active { color: var(--sea-light); border-bottom-color: var(--sea-light); }
.jhg-faqg__count {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
    color: var(--text-muted); padding: 2px 6px; border: 1px solid var(--line);
}
.jhg-faqg__tab.is-active .jhg-faqg__count { border-color: var(--sea); color: var(--sea); }
.jhg-faqg__panel { display: none; padding-top: 10px; }
.jhg-faqg__panel.is-active { display: block; }
/* no-JS fallback: without the tab script every panel stays open */
.no-js .jhg-faqg__panel { display: block; }
.jhg-faqg__panel-head {
    display: flex; align-items: center; gap: 12px; padding: 24px 0 4px;
}
.jhg-faqg__panel-head i { color: var(--sea); font-size: 17px; }
.jhg-band--ink .jhg-faqg__panel-head i { color: var(--sea-light); }
.jhg-faqg__panel-head span {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--text-muted);
}
.jhg-band--ink .jhg-faqg__panel-head span { color: var(--on-ink-muted); }

/* ============================================================ INLINE CTA */
/* The mid-article prompt: "Ready to list? …" with WhatsApp + email. */
.jhg-inlinecta {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px clamp(20px, 4vw, 38px);
    background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden;
}
.jhg-inlinecta::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--chart-grid); background-size: 44px 44px;
}
.jhg-inlinecta > * { position: relative; }
@media (min-width: 880px) {
    .jhg-inlinecta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 44px; }
}
.jhg-inlinecta__text {
    font-family: var(--font-display); font-size: clamp(1.1rem, 1.9vw, 1.38rem);
    line-height: 1.46; color: var(--on-ink);
}
.jhg-inlinecta__note {
    margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-muted);
    line-height: 1.7;
}
.jhg-inlinecta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================== JOURNAL */
/* "From the Journal:" — a ruled line of outbound reading. */
.jhg-journal {
    margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line);
    display: grid; gap: 14px;
}
.jhg-band--ink .jhg-journal { border-top-color: var(--line-ink); }
.jhg-journal__label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--text-muted);
}
.jhg-band--ink .jhg-journal__label { color: var(--on-ink-muted); }
.jhg-journal__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 760px) { .jhg-journal__links { grid-template-columns: repeat(2, 1fr); gap: 10px 32px; } }
.jhg-journal__links a {
    display: flex; gap: 10px; align-items: baseline; font-size: 14.5px;
    color: var(--text-soft); transition: color .18s ease;
}
.jhg-journal__links a i { font-size: 12px; color: var(--sea); }
.jhg-journal__links a:hover { color: var(--sea); }
.jhg-band--ink .jhg-journal__links a { color: var(--on-ink-soft); }
.jhg-band--ink .jhg-journal__links a i { color: var(--sea-light); }
.jhg-band--ink .jhg-journal__links a:hover { color: var(--sea-light); }

/* ============================================================ DISCLOSURE */
/* "Who you are contracting with." + the group's entity list. */
.jhg-disclosure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 980px) { .jhg-disclosure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.jhg-disclosure__block {
    border-top: 1px solid var(--line-strong); padding-top: 20px;
}
.jhg-band--ink .jhg-disclosure__block { border-top-color: var(--line-ink); }
.jhg-disclosure__label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--sea); margin-bottom: 14px; display: block;
}
.jhg-band--ink .jhg-disclosure__label { color: var(--sea-light); }
.jhg-disclosure__text { font-size: 14.5px; line-height: 1.72; color: var(--text-soft); }
.jhg-band--ink .jhg-disclosure__text { color: var(--on-ink-soft); }
.jhg-disclosure__list { margin-top: 16px; display: grid; gap: 11px; }
.jhg-disclosure__list li {
    display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 12px;
    font-size: 13.5px; line-height: 1.65; color: var(--text-soft);
}
.jhg-band--ink .jhg-disclosure__list li { color: var(--on-ink-soft); }
.jhg-disclosure__list li::before {
    content: ''; width: 7px; height: 1px; background: var(--sea); margin-top: .72em;
}
.jhg-band--ink .jhg-disclosure__list li::before { background: var(--sea-light); }
.jhg-disclosure__kicker {
    margin-top: 20px; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.8;
}
.jhg-band--ink .jhg-disclosure__kicker { color: var(--on-ink-muted); }

/* ================================================================== TOC */
.jhg-toc {
    border: 1px solid var(--line); background: var(--paper);
    padding: 26px clamp(20px, 3vw, 32px);
}
.jhg-band--paper .jhg-toc { background: var(--bone); }
.jhg-toc__label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; display: block;
}
.jhg-toc ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line-soft); counter-reset: jhg-toc; }
@media (min-width: 820px) { .jhg-toc ol { grid-template-columns: repeat(2, 1fr); } }
.jhg-toc li { background: var(--paper); counter-increment: jhg-toc; }
.jhg-band--paper .jhg-toc li { background: var(--bone); }
.jhg-toc a {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
    padding: 12px 14px 12px 0; font-size: 14px; color: var(--text-soft);
    transition: color .18s ease;
}
.jhg-toc a::before {
    content: counter(jhg-toc, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
    color: var(--sea); padding-top: .2em;
}
.jhg-toc a:hover { color: var(--sea); }

/* ============================================================ CONTACT */
.jhg-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 980px) { .jhg-contact { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 60px; } }
.jhg-contact__methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); }
.jhg-band--ink .jhg-contact__methods { background: var(--line-ink-soft); }
.jhg-contact__method {
    background: var(--paper); padding: 22px 24px;
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px;
    transition: background-color .2s ease;
}
.jhg-band--bone .jhg-contact__method { background: var(--bone); }
.jhg-band--ink .jhg-contact__method { background: var(--ink-2); }
.jhg-contact__method:hover { background: var(--sea-wash); }
.jhg-band--ink .jhg-contact__method:hover { background: var(--ink-3); }
.jhg-contact__method > i { font-size: 20px; color: var(--sea); margin-top: 3px; }
.jhg-band--ink .jhg-contact__method > i { color: var(--sea-light); }
.jhg-contact__method h3 { margin-bottom: 6px; }
.jhg-contact__method p { font-size: 14px; line-height: 1.68; color: var(--text-soft); }
.jhg-band--ink .jhg-contact__method p { color: var(--on-ink-soft); }
.jhg-contact__method a.jhg-btn--ghost { margin-top: 12px; }
.jhg-contact__panel {
    border: 1px solid var(--line); background: var(--paper); padding: 28px clamp(20px, 3vw, 32px);
    align-content: start; display: grid; gap: 22px;
}
.jhg-band--ink .jhg-contact__panel { border-color: var(--line-ink); background: var(--ink-2); }
.jhg-contact__rows { display: grid; gap: 0; }
.jhg-contact__row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
    padding: 11px 0; border-bottom: 1px dotted var(--line-strong); font-size: 14px;
}
.jhg-band--ink .jhg-contact__row { border-bottom-color: var(--line-ink); color: var(--on-ink-soft); }
.jhg-contact__row:last-child { border-bottom: 0; }
.jhg-contact__row span:last-child { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.jhg-band--ink .jhg-contact__row span:last-child { color: var(--sea-light); }
.jhg-contact__address { font-size: 14px; line-height: 1.7; color: var(--text-soft); }
.jhg-band--ink .jhg-contact__address { color: var(--on-ink-soft); }

/* ============================================================= DIRECTORY */
.jhg-directory { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
@media (min-width: 700px) { .jhg-directory { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .jhg-directory { grid-template-columns: repeat(3, 1fr); } }
.jhg-band--ink .jhg-directory, .jhg-band--ink .jhg-directory { background: var(--line-ink-soft); border-top-color: var(--line-ink); }
.jhg-directory__item {
    background: var(--paper); padding: 24px 22px 26px;
    display: grid; gap: 12px; align-content: start;
    transition: background-color .2s ease, transform .2s ease;
}
.jhg-band--bone .jhg-directory__item { background: var(--bone); }
.jhg-band--ink .jhg-directory__item { background: var(--ink-2); }
.jhg-directory__item:hover { background: var(--sea-wash); }
.jhg-band--ink .jhg-directory__item:hover { background: var(--ink-3); }
.jhg-directory__icon { font-size: 19px; color: var(--sea); }
.jhg-band--ink .jhg-directory__icon { color: var(--sea-light); }
.jhg-directory__title {
    font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3; color: var(--text);
}
.jhg-band--ink .jhg-directory__title { color: var(--on-ink); }
.jhg-directory__text { font-size: 13.5px; line-height: 1.65; color: var(--text-soft); }
.jhg-band--ink .jhg-directory__text { color: var(--on-ink-soft); }

/* ============================================================ CLOSING CTA */
.jhg-cta { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; }
.jhg-cta::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--chart-grid); background-size: 52px 52px;
}
.jhg-cta::after {
    content: ''; position: absolute; left: -10%; top: -40%;
    width: 50vw; height: 50vw; max-width: 640px; max-height: 640px;
    background: radial-gradient(circle, color-mix(in srgb, var(--sea) 38%, transparent) 0%, transparent 70%);
    opacity: .45; pointer-events: none;
}
.jhg-cta > * { position: relative; z-index: 1; }
.jhg-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 940px) { .jhg-cta__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 68px; align-items: end; } }
.jhg-cta__title { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.jhg-cta__body { margin-top: 20px; font-size: 1.02rem; line-height: 1.75; color: var(--on-ink-soft); max-width: 54ch; }
.jhg-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.jhg-cta__ledger { border-top: 1px solid var(--line-ink); }
.jhg-cta__ledger a, .jhg-cta__ledger div {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px;
    padding: 15px 0; border-bottom: 1px solid var(--line-ink-soft);
    font-size: 14.5px; color: var(--on-ink); align-items: baseline;
}
.jhg-cta__ledger a:hover { color: var(--sea-light); }
.jhg-cta__ledger dt, .jhg-cta__ledger-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .17em;
    text-transform: uppercase; color: var(--on-ink-muted);
}
.jhg-cta__fineprint {
    margin-top: 26px; font-size: 12.5px; line-height: 1.75; color: var(--on-ink-muted);
    max-width: 90ch;
}

/* ================================================================ FOOTER */
.jhg-footer { background: var(--ink-2); color: var(--on-ink-soft); position: relative; }
.jhg-footer::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--chart-grid); background-size: 60px 60px; pointer-events: none;
}
.jhg-footer > * { position: relative; }
.jhg-footer__top { padding-top: 64px; }
@media (min-width: 1080px) { .jhg-footer__top { padding-top: 84px; } }

.jhg-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
.jhg-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .jhg-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
    .jhg-footer__grid { grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr)); gap: 56px; }
    .jhg-footer__brand { grid-column: auto; }
}
.jhg-footer__brand .jhg-logo-img { height: 60px; }
.jhg-footer__brand p {
    margin-top: 22px; font-size: 14.5px; line-height: 1.75; color: var(--on-ink-soft); max-width: 44ch;
}
.jhg-footer__badge {
    display: inline-flex; align-items: flex-start; gap: 9px; margin-top: 22px;
    padding: 9px 14px; border: 1px solid var(--line-ink); max-width: 100%;
    font-family: var(--font-mono); font-size: 10px; line-height: 1.6; letter-spacing: .12em;
    text-transform: uppercase; color: var(--on-ink-soft);
}
.jhg-footer__badge i { color: var(--sea-light); font-size: 14px; flex: none; }
.jhg-footer h2 {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--sea-light); font-weight: 500;
    padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-ink);
}
.jhg-footer__links { display: grid; gap: 12px; }
.jhg-footer__links a { font-size: 14px; line-height: 1.45; color: var(--on-ink-soft); display: inline-block; transition: color .18s ease, transform .18s ease; }
.jhg-footer__links a:hover { color: var(--sea-light); transform: translateX(4px); }

/* enquiries: one full-width strip under the link columns */
.jhg-footer__contact {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px;
    margin-top: 52px; padding: 26px 0 52px; border-top: 1px solid var(--line-ink);
}
.jhg-footer__contact h2 { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 2px; }
@media (min-width: 640px)  { .jhg-footer__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .jhg-footer__contact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 40px; } }
.jhg-footer__contact-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; font-size: 14px; line-height: 1.55; }
.jhg-footer__contact-item i {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--line-ink); color: var(--sea-light); font-size: 17px;
}
.jhg-footer__contact-item strong {
    display: block; font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: .17em; text-transform: uppercase; color: var(--on-ink-muted);
    font-weight: 500; margin-bottom: 5px;
}
.jhg-footer__contact-item div > a { color: var(--on-ink); font-weight: 500; transition: color .18s ease; }
.jhg-footer__contact-item div > a:hover { color: var(--sea-light); }

.jhg-footer__entities { padding: 30px 0; border-top: 1px solid var(--line-ink-soft); }
.jhg-footer__entities-title { border: 0 !important; padding: 0 !important; margin: 0 0 16px !important; }
.jhg-footer__entities-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .jhg-footer__entities-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.jhg-footer__entities-list li {
    display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 12px;
    font-size: 13px; line-height: 1.7; color: var(--on-ink-muted);
}
.jhg-footer__entities-list li::before { content: ''; width: 7px; height: 1px; background: var(--sea-light); margin-top: .85em; }
.jhg-footer__entities-kicker {
    font-family: var(--font-mono); font-size: 10px; line-height: 1.7; letter-spacing: .16em;
    text-transform: uppercase; color: var(--on-ink-soft); margin-top: 20px;
}

.jhg-footer__group {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
    padding: 22px 0; border-top: 1px solid var(--line-ink-soft);
}
.jhg-footer__group > span {
    flex-basis: 100%;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--on-ink-muted);
}
@media (min-width: 640px) { .jhg-footer__group > span { flex-basis: auto; margin-right: 8px; } }
.jhg-footer__group a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--on-ink-soft); transition: color .18s ease; }
.jhg-footer__group a i { font-size: 13px; color: var(--on-ink-muted); transition: color .18s ease; }
.jhg-footer__group a:hover, .jhg-footer__group a:hover i { color: var(--sea-light); }

.jhg-footer__bottom {
    padding: 24px 0 36px; border-top: 1px solid var(--line-ink-soft);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 26px;
}
.jhg-footer__copy { font-size: 13px; color: var(--on-ink-soft); }
.jhg-footer__note { flex-basis: 100%; font-size: 12px; line-height: 1.7; color: var(--on-ink-muted); max-width: 110ch; }
.jhg-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.jhg-footer__legal a {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--on-ink-muted);
}
.jhg-footer__legal a:hover { color: var(--sea-light); }

/* ===================================================== FLOATING ELEMENTS */
.jhg-fab {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 150;
    display: grid; place-items: center; width: 52px; height: 52px;
    border-radius: 50%; font-size: 25px;
    box-shadow: 0 14px 30px -10px rgba(11, 26, 35, .45);
    transition: transform .2s ease;
}
.jhg-fab:hover { transform: translateY(-3px); }
.jhg-fab--wa { background: #1f7a4d; color: #fff; }
#jhg-back-to-top {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 150;
    display: grid; place-items: center; width: 42px; height: 42px;
    background: var(--paper); border: 1px solid var(--line); color: var(--text);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#jhg-back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#jhg-back-to-top:hover { border-color: var(--sea); color: var(--sea); }

/* ================================================= JOURNAL (BLOG) LAYOUT */
.jhg-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
@media (min-width: 700px)  { .jhg-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .jhg-posts { grid-template-columns: repeat(3, 1fr); } }
.jhg-post {
    background: var(--paper); display: grid; align-content: start;
    transition: background-color .2s ease;
}
.jhg-post:hover { background: var(--sea-wash); }
.jhg-post__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.jhg-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.jhg-post:hover .jhg-post__thumb img { transform: scale(1.04); }
.jhg-post__body { padding: 24px 22px 28px; display: grid; gap: 12px; }
.jhg-post__meta {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-muted);
    display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.jhg-post__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.24; color: var(--text); }
.jhg-post:hover .jhg-post__title { color: var(--sea); }
.jhg-post__excerpt { font-size: 14px; line-height: 1.68; color: var(--text-soft); }
.jhg-post__more {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--sea);
    display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
}
.jhg-post__more i { transition: transform .22s ease; }
.jhg-post:hover .jhg-post__more i { transform: translateX(4px); }

.jhg-empty {
    border: 1px dashed var(--line-strong); padding: 54px 28px; text-align: center;
    display: grid; gap: 16px; justify-items: center;
}
.jhg-empty i { font-size: 30px; color: var(--text-muted); }
.jhg-empty p { font-size: 15px; color: var(--text-soft); max-width: 48ch; }

.jhg-pagination {
    margin-top: 44px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.jhg-pagination .page-numbers {
    display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px;
    color: var(--text-soft);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.jhg-pagination .page-numbers:hover { border-color: var(--sea); color: var(--sea); }
.jhg-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* single post */
.jhg-article { max-width: 46rem; margin: 0 auto; }
.jhg-article__hero { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 38px; background: var(--mist); }
.jhg-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.jhg-article__body { font-size: 1.04rem; line-height: 1.78; color: var(--text-soft); }
.jhg-article__body > * + * { margin-top: 1.15em; }
.jhg-article__body h2 {
    font-family: var(--font-display); font-weight: 400; font-size: 1.85rem; line-height: 1.2;
    color: var(--text); margin-top: 2em; letter-spacing: -.01em;
}
.jhg-article__body h3 {
    font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.26;
    color: var(--text); margin-top: 1.7em;
}
.jhg-article__body a { color: var(--sea); border-bottom: 1px solid color-mix(in srgb, var(--sea) 35%, transparent); }
.jhg-article__body a:hover { border-bottom-color: var(--sea); }
.jhg-article__body ul, .jhg-article__body ol { padding-left: 1.3em; display: grid; gap: .5em; }
.jhg-article__body ul { list-style: none; }
.jhg-article__body ul li { position: relative; }
.jhg-article__body ul li::before {
    content: ''; position: absolute; left: -1.3em; top: .78em;
    width: 8px; height: 1px; background: var(--sea);
}
.jhg-article__body ol { list-style: decimal; }
.jhg-article__body ol li::marker { font-family: var(--font-mono); font-size: .85em; color: var(--sea); }
.jhg-article__body blockquote {
    margin: 1.6em 0; padding-left: 24px; border-left: 2px solid var(--sea);
    font-family: var(--font-display); font-size: 1.28rem; line-height: 1.5; color: var(--text);
}
.jhg-article__body img { margin: 1.6em 0; }
.jhg-article__body table { margin: 1.6em 0; font-size: .95em; }
.jhg-article__body th, .jhg-article__body td {
    padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top;
}
.jhg-article__body th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.jhg-article__body code {
    font-family: var(--font-mono); font-size: .88em; background: var(--mist);
    padding: 2px 6px; color: var(--text);
}
.jhg-article__body figcaption {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted); margin-top: 10px;
}

/* ====================================================== SEARCH FORM / 404 */
.jhg-searchform { display: flex; gap: 8px; max-width: 480px; }
.jhg-searchform input[type="search"] {
    flex: 1; padding: 13px 16px; border: 1px solid var(--line); background: var(--paper);
    font: inherit; font-size: 14.5px; color: var(--text); border-radius: var(--r-sm);
}
.jhg-searchform input[type="search"]:focus { outline: 2px solid var(--sea); outline-offset: -1px; border-color: var(--sea); }

.jhg-404 { text-align: center; max-width: 44rem; margin: 0 auto; display: grid; gap: 22px; justify-items: center; }
.jhg-404__code {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--sea);
}

/* ================================================================= PRINT */
@media print {
    .jhg-utility, #jhg-header, #jhg-drawer, .jhg-fab, #jhg-back-to-top,
    .jhg-footer__group, .jhg-cta__actions { display: none !important; }
    .jhg-faqg__panel { display: block !important; }
    .jhg-faq-item__a { display: block !important; }
    .jhg-band, .jhg-hero, .jhg-cta, .jhg-footer { background: #fff !important; color: #000 !important; padding: 18px 0 !important; }
    .jhg-band--ink::before, .jhg-hero::before, .jhg-hero::after, .jhg-cta::before, .jhg-cta::after, .jhg-footer::before { display: none !important; }
    .jhg-reveal { opacity: 1 !important; transform: none !important; }
    a { text-decoration: underline; }
}

/* ================================================= INLINE LINKS IN COPY */
/*
 * Body copy may contain [text](/slug/) links (see fp_inline). Every container
 * that renders through it gets the same underline treatment, so a cross-link
 * reads the same wherever it appears.
 */
.jhg-intro a,
.jhg-ledger__note a,
.jhg-ledger tbody td a,
.jhg-plate__text a,
.jhg-qa__a a,
.jhg-faq-item__a a,
.jhg-abstract__text a,
.jhg-run__sub p a,
.jhg-step__text a,
.jhg-disclosure__text a,
.jhg-cta__body a,
.jhg-cta__fineprint a,
.jhg-inlinecta__text a,
.jhg-contact__method p a {
    color: var(--sea);
    border-bottom: 1px solid color-mix(in srgb, var(--sea) 35%, transparent);
    transition: border-color .18s ease;
}
.jhg-intro a:hover,
.jhg-ledger__note a:hover,
.jhg-ledger tbody td a:hover,
.jhg-plate__text a:hover,
.jhg-qa__a a:hover,
.jhg-faq-item__a a:hover,
.jhg-abstract__text a:hover,
.jhg-run__sub p a:hover,
.jhg-step__text a:hover,
.jhg-disclosure__text a:hover,
.jhg-cta__body a:hover,
.jhg-cta__fineprint a:hover,
.jhg-inlinecta__text a:hover,
.jhg-contact__method p a:hover { border-bottom-color: var(--sea); }

.jhg-band--ink .jhg-intro a,
.jhg-band--ink .jhg-ledger__note a,
.jhg-band--ink .jhg-ledger tbody td a,
.jhg-band--ink .jhg-plate__text a,
.jhg-band--ink .jhg-qa__a a,
.jhg-band--ink .jhg-faq-item__a a,
.jhg-band--ink .jhg-run__sub p a,
.jhg-band--ink .jhg-step__text a,
.jhg-band--ink .jhg-disclosure__text a,
.jhg-cta__body a,
.jhg-cta__fineprint a,
.jhg-inlinecta__text a {
    color: var(--sea-light);
    border-bottom-color: color-mix(in srgb, var(--sea-light) 40%, transparent);
}
.jhg-cta__body a:hover, .jhg-cta__fineprint a:hover, .jhg-inlinecta__text a:hover,
.jhg-band--ink .jhg-intro a:hover, .jhg-band--ink .jhg-qa__a a:hover,
.jhg-band--ink .jhg-faq-item__a a:hover { border-bottom-color: var(--sea-light); }

/* the active entry in "On this page", driven by the scroll observer */
.jhg-toc a.is-active { color: var(--sea); background: var(--sea-wash); }
.jhg-toc a.is-active::before { color: var(--sea-deep); }