/* ==========================================================================
   INVEST LANDS BALI — "Land Survey Prospectus"
   --------------------------------------------------------------------------
   The design language is a printed investment prospectus crossed with a
   cadastral land-survey plat: hairline rules instead of shadows, plat
   corner ticks instead of rounded cards, two-digit index numbers on every
   section, and a high-contrast didone for figures so a yield reads like a
   valuation rather than a dashboard metric.

   Three grounds carry the whole site — bone (paper), sand (warmer paper)
   and ink (basalt). Exactly one accent, jade. Nothing else is coloured.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
    /* ground */
    --bone: #F7F4ED;
    --bone-rgb: 247, 244, 237;
    --sand: #EDE6D8;
    --ink: #0E1715;
    --ink-rgb: 14, 23, 21;
    --ink-soft: #17231F;
    --ink-line: #2A3833;

    /* type — a three-step ramp, every step AA on both paper grounds
       (text 13.5:1, muted 7.1:1, faint 4.7:1 against sand, the tighter
       of the two). The previous faint grey sat at 2.5:1, which is what
       made the small capitalised labels hard to read. */
    --text: #15201C;
    --text-muted: #464C49;
    --text-faint: #5E6762;
    --on-ink: #EFEBE2;
    --on-ink-muted: #A8B3AD;

    /* accent */
    --jade: #0E6450;
    --jade-deep: #0A4A3B;
    --jade-lit: #2E9C80;
    --jade-wash: rgba(14, 100, 80, 0.07);

    /* rules */
    --rule: rgba(21, 32, 28, 0.14);
    --rule-soft: rgba(21, 32, 28, 0.07);
    --rule-strong: rgba(21, 32, 28, 0.3);
    --rule-ink: rgba(239, 235, 226, 0.16);
    --rule-ink-soft: rgba(239, 235, 226, 0.08);

    /* type stacks */
    --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* measure */
    --shell: 1240px;
    --shell-narrow: 880px;
    --gutter: 20px;
    --band-y: clamp(68px, 9vw, 132px);
    --head-h: 78px;

    /* motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.45s;
}

@media (min-width: 768px) {
    :root {
        --gutter: 40px;
    }
}

@media (min-width: 1280px) {
    :root {
        --gutter: 56px;
    }
}

/* ------------------------------------------------------------- 2. baseline */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--bone);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(14, 100, 80, 0.14);
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* Visible focus everywhere, never removed. */
:focus-visible {
    outline: 2px solid var(--jade);
    outline-offset: 3px;
    border-radius: 1px;
}

.ilb-band--ink :focus-visible,
.ilb-foot :focus-visible,
.ilb-drawer :focus-visible {
    outline-color: var(--jade-lit);
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
}

.ilb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- 3. layout grounds */

.ilb-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.ilb-shell--narrow {
    max-width: var(--shell-narrow);
}

.ilb-band {
    position: relative;
    padding-block: var(--band-y);
}

.ilb-band--bone {
    background: var(--bone);
}

.ilb-band--sand {
    background: var(--sand);
}

/* The dark band carries a faint diagonal hatch, the way a survey plat
   hatches a parcel under study. It reads as texture, not pattern. */
.ilb-band--ink {
    background: var(--ink);
    color: var(--on-ink);
}

.ilb-band--ink::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 7px,
        rgba(239, 235, 226, 0.035) 7px 8px
    );
}

.ilb-band--ink > * {
    position: relative;
}

/* A hairline between two same-tone bands keeps the rhythm legible. */
.ilb-band--bone + .ilb-band--bone,
.ilb-band--sand + .ilb-band--sand {
    border-top: 1px solid var(--rule-soft);
}

/* ---------------------------------------------------------- 4. type styles */

.ilb-h1,
.ilb-h2,
.ilb-h3,
.ilb-display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.12;
    text-wrap: balance;
}

.ilb-h1 {
    font-size: clamp(2.3rem, 4.9vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
}

.ilb-h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
}

.ilb-h3 {
    font-size: clamp(1.14rem, 1.55vw, 1.36rem);
    line-height: 1.3;
    letter-spacing: -0.003em;
}

.ilb-h1 em,
.ilb-h2 em {
    font-style: italic;
    color: var(--jade);
    /* The italic's right sidebearing is tight enough that the accent word
       collides with the next one without a hair of padding. */
    padding-right: 0.06em;
}

.ilb-band--ink .ilb-h1 em,
.ilb-band--ink .ilb-h2 em,
.ilb-hero--dark .ilb-h1 em {
    color: var(--jade-lit);
}

.ilb-lede {
    font-size: clamp(1.03rem, 1.35vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 62ch;
    text-wrap: pretty;
}

.ilb-band--ink .ilb-lede {
    color: var(--on-ink-muted);
}

.ilb-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jade);
}

.ilb-band--ink .ilb-eyebrow {
    color: var(--jade-lit);
}

.ilb-note {
    margin-top: 28px;
    font-size: 0.89rem;
    line-height: 1.6;
    color: var(--text-faint);
    max-width: 72ch;
}

.ilb-band--ink .ilb-note {
    color: var(--on-ink-muted);
}

/* Figures: didone, tabular, optically aligned. */
.ilb-figure {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.95;
}

/* ------------------------------------------------- 5. the section rail head
   Every section opens the same way: a two-digit plat index, a hairline that
   runs to the edge of the measure, the eyebrow, then the heading. It is the
   single most repeated gesture on the site and the thing that holds a page
   of otherwise very different sections together.
   ------------------------------------------------------------------------- */

.ilb-rail {
    display: grid;
    gap: 18px;
    margin-bottom: clamp(36px, 5vw, 64px);
}

.ilb-rail__mark {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ilb-rail__idx {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.ilb-band--ink .ilb-rail__idx {
    color: var(--on-ink-muted);
}

.ilb-rail__line {
    flex: 1 1 auto;
    height: 1px;
    min-width: 0;
    background: var(--rule);
}

.ilb-band--ink .ilb-rail__line {
    background: var(--rule-ink);
}

.ilb-rail__head {
    display: grid;
    gap: 14px;
    max-width: 30ch;
}

.ilb-rail__head .ilb-lede {
    max-width: 58ch;
}

/* Wide variant: heading left, intro right — used where the intro is long
   enough that stacking it would push the content below the fold. */
@media (min-width: 900px) {
    .ilb-rail--wide .ilb-rail__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px clamp(32px, 5vw, 80px);
        align-items: end;
        max-width: none;
    }

    .ilb-rail--wide .ilb-rail__head > .ilb-eyebrow {
        grid-column: 1;
    }

    .ilb-rail--wide .ilb-rail__head > .ilb-h2 {
        grid-column: 1;
        max-width: 22ch;
    }

    .ilb-rail--wide .ilb-rail__head > .ilb-lede {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding-bottom: 6px;
    }
}

/* ------------------------------------------------------------- 6. buttons */

.ilb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid transparent;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.81rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.ilb-btn i {
    font-size: 1.05em;
}

.ilb-btn--jade {
    background: var(--jade);
    border-color: var(--jade);
    color: #FFFFFF;
}

.ilb-btn--jade:hover {
    background: var(--jade-deep);
    border-color: var(--jade-deep);
    transform: translateY(-1px);
}

.ilb-btn--line {
    border-color: var(--rule-strong);
    color: var(--text);
}

.ilb-btn--line:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

.ilb-btn--line-ink {
    border-color: var(--rule-ink);
    color: var(--on-ink);
}

.ilb-btn--line-ink:hover {
    border-color: var(--on-ink);
    background: var(--on-ink);
    color: var(--ink);
}

.ilb-btn--sm {
    padding: 11px 18px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

/* Text link with a rule that draws itself in on hover. */
.ilb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jade);
    background-image: linear-gradient(var(--jade), var(--jade));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ilb-link:hover {
    background-size: 100% 1px;
}

.ilb-link i {
    transition: transform var(--dur) var(--ease);
}

.ilb-link:hover i {
    transform: translateX(4px);
}

.ilb-band--ink .ilb-link {
    color: var(--jade-lit);
    background-image: linear-gradient(var(--jade-lit), var(--jade-lit));
}

.ilb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

@media (max-width: 559px) {
    .ilb-actions .ilb-btn {
        flex: 1 1 100%;
    }
}

/* -------------------------------------------------------------- 7. the top
   Utility strip (hours, languages, direct contact) above a sticky header.
   The header starts transparent over the homepage hero and solidifies on
   scroll; on every other page it is solid from the first paint.
   ------------------------------------------------------------------------- */

.ilb-util {
    background: var(--ink);
    color: var(--on-ink-muted);
    font-size: 0.77rem;
    letter-spacing: 0.04em;
}

.ilb-util__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 38px;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.ilb-util__group {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.ilb-util__group > * {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ilb-util a {
    transition: color var(--dur) var(--ease);
}

.ilb-util a:hover {
    color: var(--on-ink);
}

.ilb-util i {
    color: var(--jade-lit);
    font-size: 0.95rem;
}

/*
 * On a phone the four utility items cannot all fit, and letting them
 * overflow clips the phone number — the one item a mobile visitor is
 * actually there to tap. So below 760px the desk hours and the languages
 * line are dropped and the two contact links take the whole bar.
 */
@media (max-width: 759px) {
    .ilb-util__row {
        justify-content: center;
    }

    .ilb-util__group:first-child {
        display: none;
    }

    .ilb-util__group {
        gap: 18px;
        font-size: 0.7rem;
    }
}

@media (max-width: 1079px) {
    .ilb-util__languages {
        display: none;
    }
}

.ilb-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bone);
    border-bottom: 1px solid var(--rule-soft);
    transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.ilb-head__row {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 44px);
    min-height: var(--head-h);
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.ilb-head__brand {
    flex: 0 0 auto;
    margin-right: auto;
}

/* Transparent-over-hero state, homepage only. */
.ilb-head--float {
    position: fixed;
    inset-inline: 0;
    background: transparent;
    border-color: transparent;
    color: var(--on-ink);
}

.ilb-head--float.is-stuck {
    background: var(--ink);
    border-color: var(--rule-ink-soft);
}

/* ---- wordmark ---- */

.ilb-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

/* A surveyor's benchmark: a filled square turned 45 degrees, inside a
   hairline ring. Drawn in CSS so the mark never 404s. */
.ilb-wordmark__mark {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.85;
}

.ilb-wordmark__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: var(--jade);
    transform: rotate(45deg);
}

.ilb-wordmark--light .ilb-wordmark__mark::after {
    background: var(--jade-lit);
}

.ilb-wordmark__text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    line-height: 1;
}

.ilb-wordmark__text strong {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ilb-wordmark__text span {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 4px;
}

.ilb-wordmark--lg .ilb-wordmark__mark {
    width: 32px;
    height: 32px;
}

.ilb-wordmark--lg .ilb-wordmark__text strong {
    font-size: 1.4rem;
}

/* The logo is sized by its height and left to find its own width, capped
   so an unusually wide file cannot push the navigation off the row. A
   stacked lockup — mark over name over place — gets more height than a
   horizontal wordmark, because the same box that sets a wordmark at a
   comfortable size reduces the bottom line of a lockup to a few pixels.
   PHP measures the uploaded file and adds --stacked; nothing here assumes
   a proportion. */
.ilb-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 40px;
    max-width: 230px;
}

.ilb-logo--lg {
    max-height: 52px;
    max-width: 300px;
}

.ilb-logo--stacked {
    max-height: 52px;
    max-width: 180px;
}

.ilb-logo--lg.ilb-logo--stacked {
    max-height: 76px;
    max-width: 240px;
}

@media (max-width: 560px) {
    .ilb-logo--stacked {
        max-height: 44px;
    }
}

/* ---- desktop nav ---- */

/* ---- desktop nav ----
   Two markups reach these selectors: wp_nav_menu's (li.menu-item,
   ul.sub-menu) when a menu is assigned to the Primary location, and the
   code fallback's (li.ilb-nav__item, ul.ilb-nav__sub) when none is. Every
   rule below therefore names both — targeting only one of them is what
   leaves a dropdown anchored to the header instead of to its own item.

   Scoped to .ilb-nav-primary so the drawer, which renders the same markup
   as a stacked list, keeps its own layout. */

.ilb-nav-primary {
    display: none;
}

@media (min-width: 1080px) {
    .ilb-nav-primary {
        display: flex;
        align-self: stretch;
    }
}

.ilb-nav-primary .ilb-nav {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 2vw, 30px);
}

/* The positioning context for each dropdown. Without this the panel
   resolves against the sticky <header> and lands at the far left. */
.ilb-nav-primary .ilb-nav > li {
    position: relative;
    display: flex;
    align-items: center;
}

.ilb-nav-primary .ilb-nav > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
}

.ilb-nav-primary .ilb-nav > li > a:hover {
    color: var(--jade);
}

.ilb-head--float .ilb-nav-primary .ilb-nav > li > a:hover {
    color: var(--jade-lit);
}

/* Current page gets a jade tick under the label, not a colour change, so
   the nav stays monochrome. current-menu-ancestor marks the parent of the
   page being viewed. */
.ilb-nav-primary .ilb-nav > .current-menu-item > a::before,
.ilb-nav-primary .ilb-nav > .current_page_item > a::before,
.ilb-nav-primary .ilb-nav > .current-menu-ancestor > a::before,
.ilb-nav-primary .ilb-nav > .current-menu-parent > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 1px;
    background: var(--jade);
}

.ilb-head--float .ilb-nav-primary .ilb-nav > .current-menu-item > a::before,
.ilb-head--float .ilb-nav-primary .ilb-nav > .current_page_item > a::before,
.ilb-head--float .ilb-nav-primary .ilb-nav > .current-menu-ancestor > a::before {
    background: var(--jade-lit);
}

/* The fallback markup ships its own chevron glyph; wp_nav_menu ships none,
   so parents there get one drawn from borders — no icon font needed. */
.ilb-nav-primary .ilb-nav > li > a i {
    font-size: 0.85rem;
    opacity: 0.55;
}

.ilb-nav-primary .ilb-nav > .menu-item-has-children > a::after {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-left: 1px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.ilb-nav-primary .ilb-nav > .menu-item-has-children:hover > a::after,
.ilb-nav-primary .ilb-nav > .menu-item-has-children:focus-within > a::after {
    transform: translateY(1px) rotate(225deg);
    opacity: 1;
}

.ilb-nav-primary .ilb-nav__item--parent > a i {
    transition: transform 0.3s var(--ease);
}

.ilb-nav-primary .ilb-nav__item--parent:hover > a i,
.ilb-nav-primary .ilb-nav__item--parent:focus-within > a i {
    transform: rotate(180deg);
}

/* The panel. top: 100% with full-height items means it opens flush with
   the bottom of the header and shares an edge with its trigger — leave a
   gap here and the pointer loses :hover on the way down and the menu
   flickers shut. */
.ilb-nav-primary .ilb-nav__sub,
.ilb-nav-primary .ilb-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    z-index: 5;
    min-width: 290px;
    max-width: min(360px, 90vw);
    padding: 10px 0;
    background: var(--bone);
    border: 1px solid var(--rule);
    box-shadow: 0 20px 44px -26px rgba(14, 23, 21, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

/* A dropdown near the right edge opens leftwards instead of off-screen. */
.ilb-nav-primary .ilb-nav > li:nth-last-child(-n + 2) .ilb-nav__sub,
.ilb-nav-primary .ilb-nav > li:nth-last-child(-n + 2) .sub-menu {
    left: auto;
    right: -20px;
}

.ilb-nav-primary .ilb-nav > li:hover > .ilb-nav__sub,
.ilb-nav-primary .ilb-nav > li:focus-within > .ilb-nav__sub,
.ilb-nav-primary .ilb-nav > li:hover > .sub-menu,
.ilb-nav-primary .ilb-nav > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ilb-nav-primary .ilb-nav__sub a,
.ilb-nav-primary .ilb-nav .sub-menu a {
    display: block;
    padding: 11px 20px;
    font-size: 0.82rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ilb-nav-primary .ilb-nav__sub a:hover,
.ilb-nav-primary .ilb-nav .sub-menu a:hover,
.ilb-nav-primary .ilb-nav .sub-menu .current-menu-item > a {
    color: var(--jade);
    background: var(--jade-wash);
}

.ilb-head__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.ilb-head__cta {
    display: none;
}

@media (min-width: 680px) {
    .ilb-head__cta {
        display: inline-flex;
    }
}

.ilb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rule);
    background: none;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ilb-burger:hover {
    border-color: var(--ink);
}

.ilb-burger i {
    font-size: 1.25rem;
}

.ilb-head--float .ilb-burger {
    border-color: var(--rule-ink);
}

@media (min-width: 1080px) {
    .ilb-burger {
        display: none;
    }
}

/* ---- mobile drawer ---- */

.ilb-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    visibility: hidden;
    pointer-events: none;
}

.ilb-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.ilb-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(14, 23, 21, 0.55);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}

.ilb-drawer.is-open .ilb-drawer__scrim {
    opacity: 1;
}

.ilb-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--on-ink);
    padding: 24px max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
}

.ilb-drawer.is-open .ilb-drawer__panel {
    transform: translateX(0);
}

.ilb-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule-ink);
}

.ilb-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule-ink);
    background: none;
    cursor: pointer;
}

.ilb-drawer__close i {
    font-size: 1.3rem;
}

.ilb-mnav {
    padding-block: 10px;
    flex: 1 1 auto;
}

.ilb-mnav__link,
.ilb-mnav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid var(--rule-ink-soft);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.ilb-mnav__group > summary::-webkit-details-marker {
    display: none;
}

.ilb-mnav__group > summary i {
    font-size: 1rem;
    color: var(--jade-lit);
    transition: transform 0.3s var(--ease);
}

.ilb-mnav__group[open] > summary i {
    transform: rotate(45deg);
}

.ilb-mnav__group ul {
    padding: 8px 0 14px 2px;
}

.ilb-mnav__group ul a {
    display: block;
    padding: 9px 0;
    font-size: 0.88rem;
    color: var(--on-ink-muted);
    transition: color var(--dur) var(--ease);
}

.ilb-mnav__group ul a:hover {
    color: var(--jade-lit);
}

/* WP-menu markup inside the drawer */
.ilb-drawer .ilb-nav {
    display: block;
}

.ilb-drawer .ilb-nav > li > a {
    display: flex;
    justify-content: space-between;
    padding: 17px 0;
    border-bottom: 1px solid var(--rule-ink-soft);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* In the drawer the same wp_nav_menu markup is a stacked list, so the
   dropdown's positioning, panel and transition are all undone and the
   children are shown inline under their parent, indented behind a rule so
   the hierarchy still reads. */
.ilb-drawer .ilb-nav .sub-menu {
    position: static;
    min-width: 0;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    border-left: 1px solid var(--rule-ink);
    box-shadow: none;
    margin: 10px 0 18px 3px;
    padding: 0 0 0 16px;
}

.ilb-drawer .ilb-nav .sub-menu a {
    display: block;
    padding: 9px 0;
    font-size: 0.88rem;
    color: var(--on-ink-muted);
    transition: color var(--dur) var(--ease);
}

.ilb-drawer .ilb-nav .sub-menu a:hover,
.ilb-drawer .ilb-nav .sub-menu .current-menu-item > a {
    color: var(--jade-lit);
    background: none;
}

/* A parent's own link keeps the rule; its children supply their own. */
.ilb-drawer .ilb-nav > .menu-item-has-children > a {
    border-bottom: 0;
    padding-bottom: 6px;
}

.ilb-drawer .ilb-nav > li:last-child > a {
    border-bottom: 0;
}

.ilb-drawer__foot {
    display: grid;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--rule-ink);
}

.ilb-drawer__foot .ilb-btn {
    width: 100%;
}

.ilb-drawer__contact {
    font-size: 0.8rem;
    color: var(--on-ink-muted);
    display: grid;
    gap: 6px;
}

.ilb-drawer__contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------- 8. breadcrumbs */

.ilb-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-crumbs a:hover {
    color: var(--jade);
}

.ilb-crumbs [aria-current] {
    color: var(--text);
}

.ilb-hero--dark .ilb-crumbs {
    color: var(--on-ink-muted);
}

.ilb-hero--dark .ilb-crumbs [aria-current] {
    color: var(--on-ink);
}

/* ------------------------------------------------------------- 9. the hero
   Asymmetric: an editorial headline on the left seven columns, and a
   "prospectus card" on the right whose figures are the page's own quick
   facts. The plat frame — a hairline inset from the band edge with ticks
   at the corners — is the single detail that identifies the brand.
   ------------------------------------------------------------------------- */

.ilb-hero {
    position: relative;
    padding-block: clamp(44px, 6vw, 76px) clamp(56px, 7vw, 100px);
    background: var(--bone);
    overflow: hidden;
}

.ilb-hero--dark {
    background: var(--ink);
    color: var(--on-ink);
    padding-top: calc(var(--head-h) + clamp(32px, 4vw, 60px));
}

.ilb-hero--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 82% 8%, rgba(46, 156, 128, 0.16), transparent 62%),
        repeating-linear-gradient(-45deg, transparent 0 7px, rgba(239, 235, 226, 0.03) 7px 8px);
}

.ilb-hero > * {
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   Hero photograph.

   The picture is a ground, not a banner: it sits under a heavy wash of the
   same paper (or basalt) the hero would otherwise be, so the headline keeps
   the contrast it was drawn for. The wash is opaque where the text sits and
   thins out towards the far corner, which is the only place the photograph
   is allowed to be itself. Below 980px the grid is one column and the text
   runs the full width, so the wash goes flat and heavy instead.
   ------------------------------------------------------------------------- */

.ilb-hero > .ilb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ilb-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* the site has one accent colour; a photograph left at full saturation
       argues with it, so every hero picture is pulled back a little */
    filter: saturate(0.68) contrast(1.03);
}

.ilb-hero > .ilb-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--bone-rgb), 0.95) 0%,
        rgba(var(--bone-rgb), 0.93) 55%,
        rgba(var(--bone-rgb), 0.88) 100%
    );
}

/* On desktop the hero is two columns: the argument on the left, the
   prospectus card on the right. The card carries its own sand ground, so
   the photograph behind it is hidden anyway — which is what lets the wash
   fall away sharply past the column break and give the picture one third
   of the band to actually be a picture in. */
@media (min-width: 980px) {
    .ilb-hero > .ilb-hero__bg::after {
        background: linear-gradient(
            to right,
            rgba(var(--bone-rgb), 0.96) 0%,
            rgba(var(--bone-rgb), 0.945) 50%,
            rgba(var(--bone-rgb), 0.88) 62%,
            rgba(var(--bone-rgb), 0.62) 74%,
            rgba(var(--bone-rgb), 0.36) 88%,
            rgba(var(--bone-rgb), 0.28) 100%
        );
    }
}

.ilb-hero--dark > .ilb-hero__bg::after {
    background: linear-gradient(
        to bottom,
        rgba(var(--ink-rgb), 0.9) 0%,
        rgba(var(--ink-rgb), 0.86) 55%,
        rgba(var(--ink-rgb), 0.8) 100%
    );
}

@media (min-width: 980px) {
    .ilb-hero--dark > .ilb-hero__bg::after {
        background: linear-gradient(
            to right,
            rgba(var(--ink-rgb), 0.93) 0%,
            rgba(var(--ink-rgb), 0.91) 50%,
            rgba(var(--ink-rgb), 0.84) 62%,
            rgba(var(--ink-rgb), 0.6) 74%,
            rgba(var(--ink-rgb), 0.4) 88%,
            rgba(var(--ink-rgb), 0.34) 100%
        );
    }
}

/* the hairline that separates a photographed hero from the band under it,
   which a plain paper hero does not need */
.ilb-hero--shot {
    border-bottom: 1px solid var(--rule-soft);

    /* A washed photograph is not flat paper, and the faintest step of the
       text ramp loses about a point of contrast over it — the small
       capitalised labels measured 4.1:1 against the picture where they
       measure 5.3:1 against bone. Inside a photographed hero that step is
       therefore promoted to the muted one, which puts every label back
       above 6:1. Scoped here, so nothing outside the hero changes. */
    --text-faint: var(--text-muted);
}

.ilb-hero--dark.ilb-hero--shot {
    border-bottom-color: var(--rule-ink-soft);
}

.ilb-hero__credit {
    position: relative;
    z-index: 1;
    margin-top: clamp(28px, 4vw, 44px);
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-hero--dark .ilb-hero__credit {
    color: var(--on-ink-muted);
}

/* plat frame */
.ilb-plat {
    position: absolute;
    inset: 18px clamp(10px, 2vw, 26px);
    pointer-events: none;
    border: 1px solid var(--rule-soft);
    z-index: 0;
}

.ilb-hero--dark .ilb-plat {
    border-color: var(--rule-ink-soft);
}

.ilb-plat::before,
.ilb-plat::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border: 1px solid var(--jade);
    opacity: 0.55;
}

.ilb-plat::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.ilb-plat::after {
    right: -1px;
    bottom: -1px;
    border-left: 0;
    border-top: 0;
}

.ilb-hero--dark .ilb-plat::before,
.ilb-hero--dark .ilb-plat::after {
    border-color: var(--jade-lit);
    opacity: 0.8;
}

.ilb-hero__grid {
    display: grid;
    gap: clamp(40px, 5vw, 72px);
    margin-top: clamp(28px, 4vw, 48px);
}

@media (min-width: 980px) {
    .ilb-hero__grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
        align-items: start;
    }
}

.ilb-hero__eyebrow {
    margin-bottom: 22px;
}

.ilb-hero__title {
    margin-bottom: 26px;
}

.ilb-hero__lede {
    max-width: 54ch;
}

.ilb-hero__actions {
    margin-top: 38px;
}

/* Quick-facts strip under the headline: figures separated by hairlines. */
.ilb-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(40px, 5vw, 56px);
    background: var(--rule);
}

@media (min-width: 620px) {
    .ilb-hero__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ilb-hero--dark .ilb-hero__facts {
    background: var(--rule-ink);
}

.ilb-hero__fact {
    padding: 20px 16px 4px 0;
    background: var(--bone);
}

.ilb-hero--dark .ilb-hero__fact {
    background: var(--ink);
}

.ilb-hero__fact:not(:first-child) {
    padding-left: 14px;
}

.ilb-hero__fact-value {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: clamp(1.4rem, 2.25vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.12;
    text-wrap: nowrap;
}

.ilb-hero__fact-label {
    display: block;
    margin-top: 9px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-hero--dark .ilb-hero__fact-label {
    color: var(--on-ink-muted);
}

/* ---- the prospectus card ---- */

.ilb-dossier {
    position: relative;
    padding: 30px 28px 26px;
    background: var(--sand);
    border: 1px solid var(--rule);
}

.ilb-hero--dark .ilb-dossier {
    background: var(--ink-soft);
    border-color: var(--ink-line);
}

.ilb-dossier::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--rule-soft);
    pointer-events: none;
}

.ilb-hero--dark .ilb-dossier::after {
    border-color: var(--rule-ink-soft);
}

.ilb-dossier > * {
    position: relative;
    z-index: 1;
}

.ilb-dossier__cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-hero--dark .ilb-dossier__cap {
    border-color: var(--ink-line);
    color: var(--on-ink-muted);
}

.ilb-dossier__title {
    margin: 22px 0 4px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
}

.ilb-dossier__rows {
    margin-top: 20px;
    display: grid;
    gap: 0;
}

.ilb-dossier__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px dotted var(--rule);
}

.ilb-hero--dark .ilb-dossier__row {
    border-color: var(--ink-line);
}

.ilb-dossier__row dt {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-hero--dark .ilb-dossier__row dt {
    color: var(--on-ink-muted);
}

.ilb-dossier__row dd {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: 1.02rem;
    font-weight: 600;
    text-align: right;
}

.ilb-dossier__seal {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-hero--dark .ilb-dossier__seal {
    border-color: var(--ink-line);
    color: var(--on-ink-muted);
}

.ilb-dossier__seal i {
    color: var(--jade);
    font-size: 1.1rem;
}

.ilb-hero--dark .ilb-dossier__seal i {
    color: var(--jade-lit);
}

/* ----------------------------------------------------------- 10. the answer
   One quotable sentence, set large in the display face, with its
   supporting points as a hairline-separated column beside it. This is the
   block an answer engine lifts, so it is given room and no decoration.
   ------------------------------------------------------------------------- */

.ilb-answer {
    display: grid;
    gap: clamp(32px, 4vw, 64px);
}

@media (min-width: 900px) {
    .ilb-answer {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: start;
    }
}

.ilb-answer__text {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.3vw, 1.9rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.004em;
    text-wrap: pretty;
}

.ilb-answer__text::first-letter {
    color: var(--jade);
}

.ilb-answer__points {
    display: grid;
}

.ilb-answer__point {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    font-size: 0.98rem;
    line-height: 1.55;
}

.ilb-answer__point:last-child {
    border-bottom: 1px solid var(--rule);
}

.ilb-band--ink .ilb-answer__point {
    border-color: var(--rule-ink);
}

.ilb-answer__point i {
    flex: 0 0 auto;
    margin-top: 0.35em;
    font-size: 0.62rem;
    color: var(--jade);
}

.ilb-band--ink .ilb-answer__point i {
    color: var(--jade-lit);
}

/* ------------------------------------------------------------- 11. cards
   Hairline cells on a 1px grid background, so the set reads as one ruled
   table rather than as floating tiles. On hover a jade rule draws across
   the top of the cell.
   ------------------------------------------------------------------------- */

.ilb-cards {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.ilb-band--ink .ilb-cards {
    background: var(--rule-ink);
    border-color: var(--rule-ink);
}

@media (min-width: 720px) {
    .ilb-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1020px) {
    .ilb-cards--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ilb-cards--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ilb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 32px);
    background: var(--bone);
    transition: background-color var(--dur) var(--ease);
}

.ilb-band--sand .ilb-card {
    background: var(--sand);
}

.ilb-band--ink .ilb-card {
    background: var(--ink);
}

.ilb-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--jade);
    transition: width 0.5s var(--ease);
}

.ilb-band--ink .ilb-card::before {
    background: var(--jade-lit);
}

.ilb-card:hover::before {
    width: 100%;
}

.ilb-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 26px;
}

.ilb-card__idx {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

.ilb-band--ink .ilb-card__idx {
    color: var(--on-ink-muted);
}

.ilb-card__icon {
    font-size: 1.3rem;
    color: var(--jade);
    line-height: 1;
}

.ilb-band--ink .ilb-card__icon {
    color: var(--jade-lit);
}

.ilb-card__title {
    margin-bottom: 12px;
}

.ilb-card__text {
    font-size: 0.97rem;
    line-height: 1.62;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

.ilb-band--ink .ilb-card__text {
    color: var(--on-ink-muted);
}

.ilb-card__foot {
    margin-top: auto;
    padding-top: 22px;
}

/* --------------------------------------------------------- 12. the ledger
   The signature figure block: big didone numerals in a ruled row, the way
   a valuation summary is set in print.
   ------------------------------------------------------------------------- */

.ilb-ledger {
    display: grid;
    gap: 1px;
    background: var(--rule);
}

.ilb-band--ink .ilb-ledger {
    background: var(--rule-ink);
}

@media (min-width: 620px) {
    .ilb-ledger {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .ilb-ledger {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ilb-ledger__cell {
    padding: clamp(26px, 3vw, 38px) 24px clamp(24px, 3vw, 34px) 0;
    background: var(--bone);
}

.ilb-band--sand .ilb-ledger__cell {
    background: var(--sand);
}

.ilb-band--ink .ilb-ledger__cell {
    background: var(--ink);
}

@media (min-width: 620px) {
    .ilb-ledger__cell {
        padding-left: 26px;
    }

    .ilb-ledger__cell:first-child {
        padding-left: 0;
    }
}

@media (min-width: 980px) {
    .ilb-ledger__cell:nth-child(4n + 1) {
        padding-left: 0;
    }
}

.ilb-ledger__value {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: clamp(2.3rem, 4.6vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ilb-ledger__unit {
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--jade);
}

.ilb-band--ink .ilb-ledger__unit {
    color: var(--jade-lit);
}

.ilb-ledger__label {
    margin-top: 16px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-band--ink .ilb-ledger__label {
    color: var(--on-ink-muted);
}

.ilb-ledger__note {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.ilb-band--ink .ilb-ledger__note {
    color: var(--on-ink-muted);
}

/* ---------------------------------------------------- 13. zones (locations)
   Each place is a ruled row, not a card: index, name in the display face,
   the description, and its figures right-aligned in a data column. It is
   the layout a land schedule would use, and it scales from four rows to
   twenty without becoming a grid of boxes.
   ------------------------------------------------------------------------- */

.ilb-zones {
    border-top: 1px solid var(--rule);
}

.ilb-band--ink .ilb-zones {
    border-color: var(--rule-ink);
}

.ilb-zone {
    position: relative;
    display: grid;
    gap: 14px;
    padding: clamp(26px, 3vw, 40px) 0;
    border-bottom: 1px solid var(--rule);
}

.ilb-band--ink .ilb-zone {
    border-color: var(--rule-ink);
}

@media (min-width: 860px) {
    .ilb-zone {
        grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(170px, 0.55fr);
        gap: clamp(20px, 3vw, 44px);
        align-items: start;
    }
}

.ilb-zone__idx {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding-top: 0.45em;
}

.ilb-band--ink .ilb-zone__idx {
    color: var(--on-ink-muted);
}

.ilb-zone__name {
    font-family: var(--font-display);
    font-size: clamp(1.28rem, 2vw, 1.66rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.ilb-zone__tag {
    display: block;
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--jade);
}

.ilb-band--ink .ilb-zone__tag {
    color: var(--jade-lit);
}

.ilb-zone__text {
    font-size: 0.99rem;
    line-height: 1.68;
    color: var(--text-muted);
}

.ilb-band--ink .ilb-zone__text {
    color: var(--on-ink-muted);
}

.ilb-zone__data {
    display: grid;
    gap: 12px;
}

@media (min-width: 860px) {
    .ilb-zone__data {
        justify-items: end;
        text-align: right;
    }
}

.ilb-zone__metric dt {
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-band--ink .ilb-zone__metric dt {
    color: var(--on-ink-muted);
}

.ilb-zone__metric dd {
    margin-top: 4px;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ilb-zone__link {
    margin-top: 4px;
}

/* ------------------------------------------------------- 14. matrix (table)
   A real data table for the market-intelligence figures, with tabular
   numerals and a sticky first column on narrow screens.
   ------------------------------------------------------------------------- */

.ilb-matrix {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--rule-ink);
}

.ilb-matrix table {
    min-width: 640px;
    font-size: 0.92rem;
}

.ilb-matrix caption {
    padding: 16px 20px;
    text-align: left;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    border-bottom: 1px solid var(--rule-ink);
}

.ilb-matrix th,
.ilb-matrix td {
    padding: 17px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule-ink-soft);
}

.ilb-matrix thead th {
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--jade-lit);
    border-bottom: 1px solid var(--rule-ink);
    white-space: nowrap;
}

.ilb-matrix tbody th {
    font-weight: 500;
    color: var(--on-ink);
    width: 36%;
}

.ilb-matrix td {
    color: var(--on-ink-muted);
    font-variant-numeric: tabular-nums lining-nums;
}

.ilb-matrix tbody tr:last-child th,
.ilb-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.ilb-matrix tbody tr {
    transition: background-color var(--dur) var(--ease);
}

.ilb-matrix tbody tr:hover {
    background: rgba(46, 156, 128, 0.07);
}

.ilb-matrix strong {
    color: var(--on-ink);
    font-weight: 600;
}

/* -------------------------------------------------- 15. prose (long-form)
   Editorial measure for the research-grade copy. A hanging index in the
   left margin on wide screens keeps the reading column narrow without the
   page feeling empty.
   ------------------------------------------------------------------------- */

.ilb-prose {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 1000px) {
    .ilb-prose {
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
        align-items: start;
    }

    .ilb-prose__aside {
        position: sticky;
        top: calc(var(--head-h) + 32px);
    }
}

.ilb-prose__aside .ilb-h2 {
    max-width: 20ch;
}

.ilb-prose__body {
    max-width: 68ch;
    display: grid;
    gap: 1.35em;
}

.ilb-prose__body > p {
    font-size: 1.01rem;
    line-height: 1.78;
    color: var(--text-muted);
    text-wrap: pretty;
}

.ilb-band--ink .ilb-prose__body > p {
    color: var(--on-ink-muted);
}

/* The opening paragraph gets a didone drop cap — the one typographic
   flourish on the long-form pages. */
.ilb-prose__body--drop > p:first-of-type::first-letter {
    float: left;
    margin: 0.07em 0.09em 0 0;
    font-family: var(--font-display);
    font-size: 3.1em;
    font-weight: 600;
    line-height: 0.92;
    color: var(--jade);
}

.ilb-prose__list {
    display: grid;
    gap: 0;
    margin-top: 0.5em;
}

.ilb-prose__list li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    font-size: 0.99rem;
    line-height: 1.6;
}

.ilb-prose__list li:last-child {
    border-bottom: 1px solid var(--rule);
}

.ilb-band--ink .ilb-prose__list li {
    border-color: var(--rule-ink);
}

.ilb-prose__list i {
    flex: 0 0 auto;
    margin-top: 0.3em;
    font-size: 0.85rem;
    color: var(--jade);
}

.ilb-band--ink .ilb-prose__list i {
    color: var(--jade-lit);
}

.ilb-prose__list strong {
    font-weight: 600;
    color: var(--text);
}

.ilb-band--ink .ilb-prose__list strong {
    color: var(--on-ink);
}

/* Pull-out note, used for the "2027 Note" blocks. */
.ilb-pullout {
    margin-top: 2em;
    padding: 26px 28px;
    background: var(--jade-wash);
    border-left: 2px solid var(--jade);
}

.ilb-band--ink .ilb-pullout {
    background: rgba(46, 156, 128, 0.1);
    border-left-color: var(--jade-lit);
}

.ilb-pullout__label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--jade);
}

.ilb-band--ink .ilb-pullout__label {
    color: var(--jade-lit);
}

.ilb-pullout p {
    font-size: 0.99rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.ilb-band--ink .ilb-pullout p {
    color: var(--on-ink-muted);
}

/* ------------------------------------------------------------- 16. pillars
   Two columns of reasons-to-trust, each a ruled row with an icon. Reads
   as a schedule of terms rather than a feature grid.
   ------------------------------------------------------------------------- */

.ilb-pillars {
    display: grid;
    gap: 0 clamp(32px, 5vw, 76px);
}

@media (min-width: 880px) {
    .ilb-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ilb-pillar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--rule);
}

.ilb-pillar:first-child,
.ilb-pillar:nth-child(2) {
    border-top: 1px solid var(--rule);
}

@media (max-width: 879px) {
    .ilb-pillar:nth-child(2) {
        border-top: 0;
    }
}

.ilb-band--ink .ilb-pillar {
    border-color: var(--rule-ink);
}

.ilb-pillar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    font-size: 1.15rem;
    color: var(--jade);
}

.ilb-band--ink .ilb-pillar__icon {
    border-color: var(--rule-ink);
    color: var(--jade-lit);
}

.ilb-pillar__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 7px;
}

.ilb-pillar__text {
    font-size: 0.97rem;
    line-height: 1.62;
    color: var(--text-muted);
}

.ilb-band--ink .ilb-pillar__text {
    color: var(--on-ink-muted);
}

/* --------------------------------------------------------------- 17. steps
   A numbered horizontal process on wide screens, vertical below. The rule
   above each step is the process line.
   ------------------------------------------------------------------------- */

.ilb-steps {
    display: grid;
    gap: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px);
}

@media (min-width: 760px) {
    .ilb-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .ilb-steps--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ilb-step {
    position: relative;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}

.ilb-band--ink .ilb-step {
    border-color: var(--rule-ink);
}

.ilb-step::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--jade);
}

.ilb-band--ink .ilb-step::before {
    background: var(--jade-lit);
}

.ilb-step__idx {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-faint);
}

.ilb-band--ink .ilb-step__idx {
    color: var(--on-ink-muted);
}

.ilb-step__window {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jade);
}

.ilb-band--ink .ilb-step__window {
    color: var(--jade-lit);
}

.ilb-step__title {
    margin: 12px 0 10px;
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.26;
}

.ilb-step__text {
    font-size: 0.97rem;
    line-height: 1.64;
    color: var(--text-muted);
}

.ilb-band--ink .ilb-step__text {
    color: var(--on-ink-muted);
}

/* ---------------------------------------------------------- 18. directory */

.ilb-directory {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 720px) {
    .ilb-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .ilb-directory {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ilb-dir {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 16px;
    align-items: start;
    padding: 26px 22px 26px 0;
    background: var(--bone);
    transition: background-color var(--dur) var(--ease);
}

.ilb-band--sand .ilb-dir {
    background: var(--sand);
}

@media (min-width: 720px) {
    .ilb-dir {
        padding-left: 22px;
    }
}

.ilb-dir:hover {
    background: var(--jade-wash);
}

.ilb-dir__icon {
    font-size: 1.2rem;
    color: var(--jade);
    line-height: 1.3;
}

.ilb-dir__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.26;
    margin-bottom: 6px;
}

.ilb-dir__text {
    display: block;
    font-size: 0.93rem;
    line-height: 1.58;
    color: var(--text-muted);
}

.ilb-dir__arrow {
    font-size: 1rem;
    color: var(--text-faint);
    line-height: 1.5;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ilb-dir:hover .ilb-dir__arrow {
    transform: translateX(4px);
    color: var(--jade);
}

/* ------------------------------------------------------------ 19. checklist
   The "include this in your enquiry" list on the contact page: a numbered
   schedule with the label and the explanation on one ruled row.
   ------------------------------------------------------------------------- */

.ilb-checklist {
    border-top: 1px solid var(--rule);
}

.ilb-check {
    display: grid;
    gap: 6px 22px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 720px) {
    .ilb-check {
        grid-template-columns: 48px minmax(0, 0.7fr) minmax(0, 1.5fr);
        align-items: baseline;
    }
}

.ilb-check__idx {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.ilb-check__label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.ilb-check__text {
    font-size: 0.97rem;
    line-height: 1.62;
    color: var(--text-muted);
}

/* ------------------------------------------------------------- 20. contact */

.ilb-contact {
    display: grid;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

@media (min-width: 900px) {
    .ilb-contact {
        grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.85fr);
    }
}

.ilb-methods {
    border-top: 1px solid var(--rule);
}

.ilb-method {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--rule);
}

.ilb-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rule);
    font-size: 1.2rem;
    color: var(--jade);
}

.ilb-method__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.ilb-method__text {
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

.ilb-method__action {
    margin-top: 12px;
}

.ilb-panel {
    padding: clamp(28px, 3vw, 38px) clamp(24px, 3vw, 32px);
    background: var(--ink);
    color: var(--on-ink);
}

.ilb-panel h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.ilb-panel__rows {
    display: grid;
}

.ilb-panel__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px dotted var(--ink-line);
    font-size: 0.88rem;
}

.ilb-panel__row dt {
    color: var(--on-ink-muted);
}

.ilb-panel__row dd {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ilb-panel__address {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ink-line);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--on-ink-muted);
}

.ilb-panel__address a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: var(--jade-lit);
}

.ilb-panel__address a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------- 21. FAQ */

.ilb-faq {
    border-top: 1px solid var(--rule);
    max-width: 72ch;
}

.ilb-band--ink .ilb-faq {
    border-color: var(--rule-ink);
}

.ilb-faq--wide {
    max-width: none;
}

.ilb-faq__item {
    border-bottom: 1px solid var(--rule);
}

.ilb-band--ink .ilb-faq__item {
    border-color: var(--rule-ink);
}

.ilb-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1.06rem, 1.4vw, 1.2rem);
    font-weight: 500;
    line-height: 1.45;
    transition: color var(--dur) var(--ease);
}

.ilb-faq__q::-webkit-details-marker {
    display: none;
}

.ilb-faq__q:hover {
    color: var(--jade);
}

.ilb-band--ink .ilb-faq__q:hover {
    color: var(--jade-lit);
}

.ilb-faq__q i {
    flex: 0 0 auto;
    margin-top: 0.22em;
    font-size: 0.9rem;
    color: var(--jade);
    transition: transform 0.35s var(--ease);
}

.ilb-band--ink .ilb-faq__q i {
    color: var(--jade-lit);
}

.ilb-faq__item[open] .ilb-faq__q i {
    transform: rotate(45deg);
}

.ilb-faq__item[open] .ilb-faq__q {
    color: var(--jade);
}

.ilb-band--ink .ilb-faq__item[open] .ilb-faq__q {
    color: var(--jade-lit);
}

.ilb-faq__a {
    padding: 0 48px 24px 0;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--text-muted);
    text-wrap: pretty;
}

.ilb-band--ink .ilb-faq__a {
    color: var(--on-ink-muted);
}

/* ---- categorised hub ---- */

.ilb-faqg {
    display: grid;
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
}

@media (min-width: 980px) {
    .ilb-faqg {
        grid-template-columns: minmax(230px, 0.4fr) minmax(0, 1.6fr);
    }
}

.ilb-faqg__nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
}

@media (min-width: 980px) {
    .ilb-faqg__nav {
        position: sticky;
        top: calc(var(--head-h) + 28px);
        display: block;
        overflow: visible;
        border-bottom: 0;
        border-left: 1px solid var(--rule);
    }
}

.ilb-faqg__nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 18px 13px 16px;
    white-space: nowrap;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text-muted);
    border-left: 2px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        background-color var(--dur) var(--ease);
}

@media (max-width: 979px) {
    .ilb-faqg__nav a {
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
}

.ilb-faqg__nav a:hover {
    color: var(--text);
    background: var(--jade-wash);
}

.ilb-faqg__nav a.is-active {
    color: var(--jade);
    border-color: var(--jade);
    font-weight: 600;
}

.ilb-faqg__nav i {
    font-size: 1rem;
    opacity: 0.75;
}

.ilb-faqg__count {
    margin-left: auto;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
}

.ilb-faqg__group + .ilb-faqg__group {
    margin-top: clamp(40px, 5vw, 64px);
}

.ilb-faqg__title {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule-strong);
}

.ilb-faqg__title i {
    font-size: 1.15rem;
    color: var(--jade);
}

.ilb-faqg__title span {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
}

.ilb-faqg__title .ilb-faqg__count {
    margin-left: auto;
}

/* ----------------------------------------------------------------- 22. CTA */

.ilb-cta {
    position: relative;
    padding-block: clamp(64px, 8vw, 116px);
    background: var(--ink);
    color: var(--on-ink);
    overflow: hidden;
}

.ilb-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 120% at 15% 0%, rgba(46, 156, 128, 0.18), transparent 60%),
        repeating-linear-gradient(-45deg, transparent 0 7px, rgba(239, 235, 226, 0.03) 7px 8px);
}

.ilb-cta > * {
    position: relative;
}

.ilb-cta__grid {
    display: grid;
    gap: clamp(30px, 4vw, 60px);
    align-items: end;
}

@media (min-width: 900px) {
    .ilb-cta__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
    }
}

.ilb-cta__eyebrow {
    margin-bottom: 18px;
}

.ilb-cta__body {
    margin-top: 20px;
    max-width: 50ch;
}

.ilb-cta__actions {
    display: grid;
    gap: 12px;
    justify-items: stretch;
}

@media (min-width: 560px) and (max-width: 899px) {
    .ilb-cta__actions {
        grid-auto-flow: column;
        justify-content: start;
    }
}

/* -------------------------------------------------------------- 23. footer */

.ilb-foot {
    background: var(--ink);
    color: var(--on-ink-muted);
    border-top: 1px solid var(--ink-line);
    font-size: 0.93rem;
}

.ilb-foot__top {
    display: grid;
    gap: clamp(34px, 4vw, 56px);
    padding-block: clamp(50px, 6vw, 82px) clamp(34px, 4vw, 52px);
}

@media (min-width: 760px) {
    .ilb-foot__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .ilb-foot__top {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    }
}

.ilb-foot__brand p {
    margin-top: 22px;
    max-width: 38ch;
    line-height: 1.7;
}

.ilb-foot__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 9px 15px;
    border: 1px solid var(--ink-line);
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--on-ink);
}

.ilb-foot__badge i {
    color: var(--jade-lit);
    font-size: 1rem;
}

.ilb-foot h2 {
    margin-bottom: 20px;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--on-ink);
}

.ilb-foot__links {
    display: grid;
    gap: 11px;
}

.ilb-foot__links a {
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.ilb-foot__links a:hover {
    color: var(--jade-lit);
    padding-left: 5px;
}

.ilb-foot__contact {
    display: grid;
    gap: 18px;
}

.ilb-foot__contact-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
}

.ilb-foot__contact-item i {
    color: var(--jade-lit);
    font-size: 1.05rem;
    line-height: 1.5;
}

.ilb-foot__contact-item strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 3px;
}

.ilb-foot__contact-item a:hover {
    color: var(--jade-lit);
}

.ilb-foot__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding-block: 22px;
    border-top: 1px solid var(--ink-line);
    font-size: 0.78rem;
}

.ilb-foot__group > span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-foot__group a:hover {
    color: var(--jade-lit);
}

.ilb-foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding-block: 24px max(24px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ink-line);
    font-size: 0.78rem;
}

.ilb-foot__bottom p {
    max-width: 78ch;
}

.ilb-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.ilb-foot__legal a:hover {
    color: var(--jade-lit);
}

/* ------------------------------------------------------ 24. floating / misc */

.ilb-fab {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 54px;
    padding-inline: 16px;
    background: var(--jade);
    color: #FFFFFF;
    box-shadow: 0 10px 28px rgba(14, 23, 21, 0.26);
    transition: background-color var(--dur) var(--ease), gap 0.4s var(--ease),
        padding-inline 0.4s var(--ease);
}

.ilb-fab i {
    font-size: 1.6rem;
}

.ilb-fab__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: max-width 0.4s var(--ease);
}

.ilb-fab:hover,
.ilb-fab:focus-visible {
    background: var(--jade-deep);
    gap: 10px;
    padding-inline: 18px 22px;
}

.ilb-fab:hover .ilb-fab__label,
.ilb-fab:focus-visible .ilb-fab__label {
    max-width: 140px;
}

#ilb-top {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 65;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rule-strong);
    background: var(--bone);
    color: var(--text);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
        visibility 0.35s, background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

#ilb-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#ilb-top:hover {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

/* ---------------------------------------------------- 25. journal & search */

.ilb-posts {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

@media (min-width: 760px) {
    .ilb-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .ilb-posts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ilb-post {
    display: flex;
    flex-direction: column;
    background: var(--bone);
    transition: background-color var(--dur) var(--ease);
}

.ilb-post:hover {
    background: var(--sand);
}

.ilb-post__media {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--sand);
}

.ilb-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}

.ilb-post:hover .ilb-post__media img {
    transform: scale(1.04);
}

.ilb-post__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    padding: 26px 24px 28px;
}

.ilb-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-post__title {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.26;
    text-wrap: balance;
}

.ilb-post:hover .ilb-post__title {
    color: var(--jade);
}

.ilb-post__excerpt {
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ilb-post__more {
    margin-top: auto;
    padding-top: 8px;
}

.ilb-empty {
    padding: clamp(40px, 6vw, 72px) 0;
    border-block: 1px solid var(--rule);
    text-align: center;
}

.ilb-empty p {
    max-width: 50ch;
    margin-inline: auto;
    color: var(--text-muted);
}

.ilb-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(36px, 4vw, 56px);
}

.ilb-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 12px;
    border: 1px solid var(--rule);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.ilb-pager .page-numbers:hover,
.ilb-pager .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}

/* ---- single article ---- */

.ilb-article {
    max-width: 70ch;
    margin-inline: auto;
}

.ilb-article__media {
    margin-bottom: clamp(32px, 4vw, 52px);
}

.ilb-article__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ilb-entry {
    font-size: 1.03rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.ilb-entry > * + * {
    margin-top: 1.3em;
}

.ilb-entry h2,
.ilb-entry h3,
.ilb-entry h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
    margin-top: 2em;
}

.ilb-entry h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
}

.ilb-entry h3 {
    font-size: 1.28rem;
}

.ilb-entry a {
    color: var(--jade);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ilb-entry ul,
.ilb-entry ol {
    padding-left: 1.3em;
    display: grid;
    gap: 0.6em;
}

.ilb-entry ul li {
    list-style: none;
    position: relative;
}

.ilb-entry ul li::before {
    content: "";
    position: absolute;
    left: -1.1em;
    top: 0.72em;
    width: 5px;
    height: 5px;
    background: var(--jade);
    transform: rotate(45deg);
}

.ilb-entry ol {
    list-style: decimal;
}

.ilb-entry blockquote {
    padding: 4px 0 4px 26px;
    border-left: 2px solid var(--jade);
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--text);
}

.ilb-entry img {
    width: 100%;
}

.ilb-entry code {
    padding: 2px 6px;
    background: var(--sand);
    font-size: 0.9em;
}

.ilb-entry table {
    font-size: 0.92rem;
}

.ilb-entry th,
.ilb-entry td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

/* ---- search form ---- */

.ilb-search {
    display: flex;
    gap: 10px;
    max-width: 480px;
}

.ilb-search__field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--rule-strong);
    background: var(--bone);
    font: inherit;
    font-size: 0.92rem;
    color: var(--text);
}

.ilb-search__field::placeholder {
    color: var(--text-faint);
}

.ilb-search__field:focus-visible {
    border-color: var(--jade);
}

/* ------------------------------------------------------------ 26. 404 page */

.ilb-404 {
    display: grid;
    place-items: center;
    min-height: 62vh;
    padding-block: clamp(60px, 8vw, 120px);
    text-align: center;
}

.ilb-404__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--jade);
    opacity: 0.22;
}

.ilb-404 .ilb-h1 {
    margin-top: -0.2em;
}

.ilb-404 .ilb-lede {
    margin: 22px auto 34px;
}

.ilb-404 .ilb-actions {
    justify-content: center;
}

/* ------------------------------------------------------- 27. scroll reveal */

/*
 * Gated behind .ilb-js, which the inline script in the header adds to
 * <html> before first paint. Without JavaScript the class is never set,
 * the rules below never match, and every section renders at full opacity
 * — rather than a site that is blank for anyone whose script fails.
 */
.ilb-js .ilb-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.ilb-js .ilb-reveal.is-in {
    opacity: 1;
    transform: none;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ilb-js .ilb-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------- 28. plates (photographs)

   A prospectus binds its photographs in as numbered plates, so they are
   framed by the same hairline grid as everything else: 1px gutters on a
   rule-coloured bed, a plate number in the corner, a ruled caption bar.
   No rounded corners and no shadow — the image sits in the document, it
   does not float above it.
   ------------------------------------------------------------------------ */

.ilb-plates {
    display: grid;
    gap: 1px;
    margin-top: clamp(30px, 4vw, 48px);
    background: var(--rule);
    border: 1px solid var(--rule);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ilb-plates--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ilb-plates--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ilb-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--bone);
}

.ilb-band--sand .ilb-plate {
    background: var(--sand);
}

/* The jade rule that draws itself across the top on hover is the same
   signal the cards use, so a plate and a card answer to the pointer in
   the same way. */
.ilb-plate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
    height: 2px;
    background: var(--jade);
    transition: width 0.5s var(--ease);
}

.ilb-plate:hover::before {
    width: 100%;
}

.ilb-plate__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ink-soft);
}

.ilb-plate__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slightly desaturated at rest so the photographs sit with the paper
       grounds rather than shouting over them; full colour on hover. */
    filter: saturate(0.88) contrast(1.02);
    transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

.ilb-plate:hover .ilb-plate__img {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.02);
}

.ilb-plate__idx {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--on-ink);
    background: rgba(14, 23, 21, 0.72);
}

.ilb-plate__cap {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
    border-top: 1px solid var(--rule-soft);
}

.ilb-plate__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text);
}

.ilb-plate__note {
    margin: 7px 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.ilb-plate__metric {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule-soft);
}

.ilb-plate__metric dt {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-plate__metric dd {
    margin: 3px 0 0;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.ilb-plates__note {
    margin-top: 22px;
}

@media (max-width: 900px) {
    .ilb-plates,
    .ilb-plates--3,
    .ilb-plates--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ilb-plates,
    .ilb-plates--3,
    .ilb-plates--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   The plate: one photograph, set inside the shell with its caption in the
   column alongside.

   It ran bleed to bleed at 21:9 until it was measured against a real
   photograph: that ratio is a cinema frame, and cover-cropping an ordinary
   landscape into it throws away the top and bottom of the picture while
   stretching what is left past its own pixel width. The Lovina dawn on the
   homepage came out as a strip of open water with the boats and the sky
   cut off above it.

   Contained, the photograph is about 760px wide on a 1240px shell instead
   of the full 1920, so a 1500px plate is close to twice oversampled, and
   3:2 keeps the whole frame. The caption moves out from under the picture
   into its own column, set in the display serif, where it reads as the
   note written beside a plate rather than a stranded line of small print.
   ------------------------------------------------------------------------- */

.ilb-fold {
    margin: 0;
    display: grid;
    gap: clamp(24px, 3.2vw, 44px);
}

@media (min-width: 980px) {
    .ilb-fold {
        grid-template-columns: minmax(0, 1.68fr) minmax(230px, 1fr);
        align-items: start;
    }
}

.ilb-fold__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--ink-soft);
    border: 1px solid var(--rule);
}

.ilb-fold__frame .ilb-plate__img {
    filter: saturate(0.9) contrast(1.03);
}

/* The same plat frame the hero carries — hairline inset from the edge
   with a tick at two corners — so the photograph reads as a plate in
   this document and not as a stock banner. */
/* Not --rule-ink-soft: at 8% white that hairline was readable over the old
   bleed band, which was mostly dark water and sky, and vanishes over a
   bright plate like the Lovina dawn. Its own value, held just under a
   third, carries on both. */
.ilb-fold__plat {
    position: absolute;
    inset: clamp(10px, 1.3vw, 18px);
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.ilb-fold__plat::before,
.ilb-fold__plat::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border: 1px solid var(--jade-lit);
    opacity: 0.8;
}

.ilb-fold__plat::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.ilb-fold__plat::after {
    right: -1px;
    bottom: -1px;
    border-left: 0;
    border-top: 0;
}

.ilb-fold__place {
    position: absolute;
    right: clamp(18px, 2.2vw, 28px);
    bottom: clamp(18px, 2.2vw, 28px);
    padding: 7px 12px;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-ink);
    background: rgba(14, 23, 21, 0.68);
}

.ilb-fold__cap {
    margin: 0;
    padding: 0;
}

/* the same index-and-hairline mark every other section opens with */
.ilb-fold__mark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(16px, 1.8vw, 22px);
}

.ilb-fold__idx {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.ilb-fold__line {
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: var(--rule);
}

.ilb-fold__text {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 1.35vw, 1.22rem);
    line-height: 1.58;
    color: var(--text);
}

.ilb-fold__credit {
    margin: clamp(18px, 2vw, 24px) 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ---- showcase: alternating plate-and-text rows ---- */

.ilb-showcase {
    margin-top: clamp(30px, 4vw, 48px);
    border-top: 1px solid var(--rule);
}

.ilb-show {
    display: grid;
    gap: clamp(22px, 3.5vw, 54px);
    padding-block: clamp(28px, 4vw, 52px);
    border-bottom: 1px solid var(--rule);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.ilb-show--notext {
    grid-template-columns: minmax(0, 1fr);
}

.ilb-show__plate {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--ink-soft);
}

/* Every other row sends the photograph to the right. The figure stays
   first in the document either way, so a screen reader always meets the
   picture before the text it belongs to, and only the visual order
   alternates. */
.ilb-show--flip .ilb-show__plate {
    order: 2;
}

.ilb-show__plate .ilb-plate__img {
    filter: saturate(0.88) contrast(1.02);
}

.ilb-show:hover .ilb-plate__img {
    transform: scale(1.03);
    filter: saturate(1) contrast(1.02);
}

.ilb-show__idx {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--on-ink);
    background: rgba(14, 23, 21, 0.72);
}

.ilb-show__tag {
    margin: 0 0 10px;
}

.ilb-show__title {
    margin: 0;
}

.ilb-show__text {
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 54ch;
}

.ilb-show__data {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule-soft);
}

.ilb-show__metric {
    margin: 0;
}

.ilb-show__metric dt {
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ilb-show__metric dd {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

@media (max-width: 820px) {
    .ilb-show,
    .ilb-show--notext {
        gap: 20px;
        grid-template-columns: minmax(0, 1fr);
    }

    .ilb-show--flip .ilb-show__plate {
        order: 0;
    }
}

/* -------------------------------------------------------------- 29. print */

@media print {
    .ilb-util,
    .ilb-head,
    .ilb-drawer,
    .ilb-fab,
    #ilb-top,
    .ilb-cta,
    .ilb-foot {
        display: none !important;
    }

    body {
        background: #FFFFFF;
        color: #000000;
    }

    .ilb-band {
        padding-block: 24px;
        background: #FFFFFF !important;
        color: #000000 !important;
    }

    .ilb-faq__item {
        break-inside: avoid;
    }

    .ilb-faq__a {
        display: block !important;
    }

    /* A plate is a unit: never split the picture from its caption. */
    .ilb-plate,
    .ilb-show {
        break-inside: avoid;
    }

    .ilb-plates,
    .ilb-plates--3,
    .ilb-plates--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ilb-plate__img {
        filter: none;
    }

    .ilb-fold__frame {
        aspect-ratio: 3 / 2;
    }

    .ilb-fold__plat,
    .ilb-fold__place {
        display: none;
    }
}