/* public/css/knowledge.css */

/* ============================================================================
   KNOWLEDGE CENTRE — TYPE AND SPACING SCALE
   ----------------------------------------------------------------------------
   One scale for every section on the page. Before this, each block carried its
   own numbers: the Guides section used 1rem card titles, Explore by Jurisdiction
   used .92rem, Insights used 1.02rem, and the three intro paragraphs ran at
   1.05rem, 1rem and inherited-default respectively. Nothing was wrong with any
   one of them individually, which is exactly why they drifted — there was no
   value to be wrong against.

   The whole scale sits ~12% below where those numbers were. Because every rule
   below now reads a token, changing that proportion again is an edit to this
   block rather than a search through 880 lines.

   Sizes step by roughly 1.12×, so adjacent levels are distinguishable without
   any two being close enough to look like a mistake.
   ========================================================================== */
:root {
    /* Type */
    --kc-fs-display: var(--cx-fs-hero); /* featured editorial headlines */
    --kc-fs-h2: var(--cx-fs-body);   /* Insight card titles */
    --kc-fs-h3: var(--cx-fs-card-title);   /* Guide card titles — also matches .hp-card on the homepage */
    --kc-fs-lead: var(--cx-fs-body);   /* section intros and standfirsts */
    --kc-fs-body: var(--cx-fs-xs);   /* running copy, deks */
    --kc-fs-link: var(--cx-fs-meta);   /* "View all" links and CTAs */
    --kc-fs-eyebrow: var(--cx-fs-label);   /* gold uppercase section labels */
    --kc-fs-meta: var(--cx-fs-label);   /* dates, reading time, editions */
    --kc-fs-micro: var(--cx-fs-micro);   /* small uppercase labels */
    --kc-fs-label: var(--cx-fs-micro);   /* smallest uppercase labels and counts */

    /* Space */
    --kc-space-section: var(--cx-section-standard);
    --kc-gap-xs: .45rem;
    --kc-gap-sm: var(--cx-space-2);
    --kc-gap-md: var(--cx-space-4);
    --kc-gap-lg: var(--cx-space-6);
    --kc-gap-xl: var(--cx-space-8);

    /* Radii — three values, so a card and a pill can't quietly diverge. */
    --kc-radius-sm: var(--cx-radius-sm);
    --kc-radius: var(--cx-radius);
    --kc-radius-lg: var(--cx-radius-lg);
}

/* ============================================================================
   KNOWLEDGE CENTRE
   ----------------------------------------------------------------------------
   Loaded only on /knowledge-centre. Self-contained so it cannot affect the
   marketplace, and namespaced under .kc so nothing here leaks into tl.css.

   THE PROBLEM THIS SOLVES
   An article rendered in the listing template reads as a product: a card with an
   image, a badge, a price and an Enquire button. "Why Social Media Should Be a
   Business Priority" arrived on site priced Price on Application. Nobody enquires
   about a blog post.

   So the fix is not cosmetic. Cards, badges and prices are the vernacular of
   shopping; a reader recognises them instantly and reads the page as a thing for
   sale. Reading has its own vernacular — a measure you can follow, a serif at a
   size meant for prose, a headline that behaves like a headline, and restraint
   with images. This stylesheet commits to the second one.

   DECISIONS
   Body face is a system serif stack. Not nostalgia: it costs zero network
   requests (the site already loads seven third-party origins), it renders long
   prose better than Inter at 19px, and it makes the Knowledge Centre feel like a
   different room from the marketplace without a rebrand.

   Gold is a rule and a marker, never body text. Measured 2.10:1 on white — it
   fails AA badly for text. #8C7424 is the darkest gold at the same hue that
   passes (4.53:1) and is used for labels and links; #D4AF37 stays for hairlines,
   spine fills and markers, where contrast rules do not apply.

   THE SIGNATURE
   The jurisdiction spine: a fixed vertical rail down the left of every article
   carrying the content type, the jurisdictions the piece touches, and reading
   progress. Cross-border work is defined by which jurisdictions it touches, so
   the rail encodes something true about the content rather than decorating it.
   ========================================================================== */

.kc {
    /* Palette — extends the brand rather than replacing it */
    --kc-ink: var(--cx-ink);   /* headings, body at full strength */
    --kc-slate: var(--cx-ink-soft);   /* body prose — 8.86:1 on paper */
    --kc-quiet: var(--cx-muted);   /* metadata */
    --kc-paper:      #FBFAF7;   /* warmer and lighter than marketplace cream, so
                                 the two zones read as different rooms */
    --kc-mist:       #E7E3D8;   /* hairlines */
    --kc-gold:       #D4AF37;   /* rules, markers, spine fill — never text */
    --kc-gold-deep:  #8C7424;   /* labels and links on light — AA at 4.53:1 */

    --kc-measure: var(--cx-measure);      /* the line length prose is actually readable at */
    --kc-rail:       clamp(0px, 6vw, 96px);
    --kc-spine-w:    6.5rem;    /* wide enough for "United Kingdom" on one or two lines */

    --kc-display: var(--cx-display);
    --kc-body: var(--cx-serif);
    --kc-utility: var(--cx-sans);

    background: var(--kc-paper);
    color: var(--kc-slate);
}

/* ---- Type scale -----------------------------------------------------------
   Four sizes, not ten. Editorial pages need a clear hierarchy more than a
   granular one. */
.kc h1, .kc h2, .kc h3 { font-family: var(--kc-display); color: var(--kc-ink); }

.kc-hed        { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06;
    letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
.kc-hed--lead  { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; }
.kc-hed--row   { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.25;
    font-weight: 700; letter-spacing: -.012em; }
.kc-sub        { font-family: var(--kc-body); font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.5; color: var(--kc-quiet); max-width: 58ch; }

/* Type label. Deliberately typographic, not a pill — a pill is a badge, and a
   badge is what a product wears. */
.kc-kicker {
    font-family: var(--kc-utility);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--kc-gold-deep);
    display: inline-flex; align-items: center; gap: .55rem;
}
.kc-kicker::before {
    content: ''; width: 1.6rem; height: 2px;
    background: var(--kc-gold); flex: none;
}
.kc-meta {
    font-family: var(--kc-utility); font-size: .8rem;
    color: var(--kc-quiet); letter-spacing: .01em;
}

/* ---- Masthead ------------------------------------------------------------- */
.kc-masthead { padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.kc-masthead .kc-hed { max-width: 18ch; }
.kc-masthead-rule {
    height: 3px; background: var(--kc-ink);
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}
.kc-masthead-rule::after {
    content: ''; display: block; width: 22%; height: 3px;
    background: var(--kc-gold); transform: translateY(0);
}

/* ---- Filter chips --------------------------------------------------------- */
.kc-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; }
.kc-chip {
    font-family: var(--kc-utility); font-size: .82rem; font-weight: 600;
    padding: .4rem .9rem; border: 1px solid var(--kc-mist);
    border-radius: 100px; color: var(--kc-slate);
    background: transparent; text-decoration: none;
    transition: border-color var(--cx-duration-sm) ease, color var(--cx-duration-sm) ease;
}
.kc-chip:hover { border-color: var(--kc-gold); color: var(--kc-ink); }
.kc-chip[aria-current='true'] {
    background: var(--kc-ink); border-color: var(--kc-ink); color: var(--kc-paper);
}
.kc-chip-count { color: var(--kc-quiet); margin-left: .35rem; }
.kc-chip[aria-current='true'] .kc-chip-count { color: rgba(251,250,247,.6); }

/* ---- Lead + briefing ------------------------------------------------------
   One story gets the image. Everything else earns attention on its headline,
   which is how a reader decides what to read. */
.kc-top {
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr;
    padding: clamp(2rem, 5vw, 3rem) 0;
    border-top: 1px solid var(--kc-mist);
}
@media (min-width: 992px) { .kc-top { grid-template-columns: 1.65fr 1fr; } }

.kc-lead-media {
    display: block; overflow: hidden; margin-bottom: 1.5rem;
    background: var(--kc-mist); aspect-ratio: 16 / 9;
}
.kc-lead-media img {
    width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.kc-lead:hover .kc-lead-media img { transform: scale(var(--cx-hover-scale)); }
.kc-lead a { color: inherit; text-decoration: none; }
.kc-lead a:hover .kc-hed--lead { text-decoration: underline;
    text-decoration-color: var(--kc-gold); text-underline-offset: 5px;
    text-decoration-thickness: 2px; }

.kc-briefing { border-left: 1px solid var(--kc-mist); padding-left: clamp(1rem, 3vw, 2rem); }
@media (max-width: 991px) { .kc-briefing { border-left: 0; padding-left: 0; } }
.kc-briefing-title {
    font-family: var(--kc-utility); font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--kc-ink);
    padding-bottom: .75rem; border-bottom: 2px solid var(--kc-ink); margin-bottom: 1.25rem;
}
.kc-brief-item { padding: .95rem 0; border-bottom: 1px solid var(--kc-mist); }
.kc-brief-item:last-child { border-bottom: 0; }
.kc-brief-item a {
    font-family: var(--kc-display); font-weight: 700; font-size: 1rem;
    line-height: 1.3; color: var(--kc-ink); text-decoration: none;
    display: block; margin: .3rem 0 .35rem;
}
.kc-brief-item a:hover { color: var(--kc-gold-deep); }

/* ---- Reading list ---------------------------------------------------------
   Rows, not cards. A card with an image and a badge is a product; a row with a
   label and a headline is something to read. This is the whole point. */
.kc-list { border-top: 2px solid var(--kc-ink); }
.kc-row {
    display: grid; gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: 1fr;
    padding: clamp(1.4rem, 3vw, 2rem) 0;
    border-bottom: 1px solid var(--kc-mist);
}
@media (min-width: 768px) {
    .kc-row { grid-template-columns: 7rem 1fr; align-items: start; }
    .kc-row--media { grid-template-columns: 7rem 1fr 12rem; }
}
.kc-row-rail { font-family: var(--kc-utility); }
.kc-row-body a { color: inherit; text-decoration: none; }
.kc-row-body a:hover .kc-hed--row {
    text-decoration: underline; text-decoration-color: var(--kc-gold);
    text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.kc-dek {
    font-family: var(--kc-body); font-size: 1rem; line-height: 1.55;
    color: var(--kc-slate); margin: .5rem 0 .6rem; max-width: 62ch;
}
.kc-row-media { overflow: hidden; background: var(--kc-mist); aspect-ratio: 4 / 3; }
.kc-row-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block; }

/* ---- Jurisdiction spine — the signature -----------------------------------
   Fixed rail carrying content type, jurisdictions touched, and reading progress.
   Hidden below 1200px, where the width is better spent on the measure. */
.kc-article { position: relative; }
.kc-spine {
    position: fixed; left: max(1.5rem, calc(50vw - 47rem)); top: 50%;
    transform: translateY(-50%);
    width: var(--kc-spine-w); display: none; z-index: 3;
    font-family: var(--kc-utility);
}
/* Needs a wider viewport now that the rail itself is wider — below this the space
   is better spent on the measure than on a margin ornament. */
@media (min-width: 1280px) { .kc-spine { display: block; } }

.kc-spine-type {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: .68rem; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--kc-gold-deep);
    margin-bottom: 1rem;
}
.kc-spine-track {
    width: 2px; height: 9rem; background: var(--kc-mist);
    margin: 0 0 1rem 2px; position: relative; overflow: hidden;
}
.kc-spine-fill {
    position: absolute; inset: 0 0 auto 0; height: 0;
    background: var(--kc-gold); transition: height .1s linear;
}
.kc-spine-juris { display: flex; flex-direction: column; gap: .4rem; }
.kc-spine-juris span {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; color: var(--kc-quiet);
    /* Tighter tracking and a real line-height, so a two-word jurisdiction wraps
       cleanly instead of running out of the rail. */
    letter-spacing: .06em; line-height: 1.35;
    overflow-wrap: break-word; hyphens: auto;
}
.kc-spine-iso {
    color: var(--kc-gold-deep);
    letter-spacing: .16em;
}
.kc-spine-name { max-width: 100%; }

/* ---- Article body ---------------------------------------------------------
   19px serif on a 68ch measure. Not a style preference — it is the range long
   prose is actually read at, and the marketplace's 16px sans is not. */
.kc-body { font-family: var(--kc-body); max-width: var(--kc-measure); }
.kc-body p {
    font-size: 1.1875rem; line-height: 1.72; color: var(--kc-slate);
    margin: 0 0 1.45em;
}
.kc-body > p:first-of-type::first-letter {
    float: left; font-family: var(--kc-display); font-weight: 800;
    font-size: 3.9em; line-height: .82; padding: .06em .09em 0 0;
    color: var(--kc-ink);
}
.kc-body h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2;
    margin: 2.4rem 0 .9rem; letter-spacing: -.015em;
}
.kc-body a { color: var(--kc-gold-deep); text-decoration: underline;
    text-underline-offset: 3px; }
.kc-body a:hover { color: var(--kc-ink); }

/* Elements introduced when an article body is authored as HTML (headings below h2, lists,
   inline emphasis and editorial callouts). Styled to the same measure and rhythm as the
   paragraphs above so an imported HTML article reads as one typeset piece. */
.kc-body h3 {
    font-family: var(--kc-display); font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25;
    margin: 2rem 0 .7rem; letter-spacing: -.01em; color: var(--kc-ink);
}
.kc-body h4 {
    font-weight: 700; font-size: 1.1rem; line-height: 1.3;
    margin: 1.6rem 0 .5rem; color: var(--kc-ink);
}
.kc-body strong, .kc-body b { font-weight: 700; color: var(--kc-ink); }
.kc-body em, .kc-body i { font-style: italic; }
.kc-body ul, .kc-body ol {
    font-size: 1.1875rem; line-height: 1.7; color: var(--kc-slate);
    margin: 0 0 1.45em; padding-left: 1.4em;
}
.kc-body li { margin: 0 0 .5em; padding-left: .2em; }
.kc-body li::marker { color: var(--kc-gold-deep); }
.kc-body hr { border: none; border-top: 1px solid var(--kc-line, #E3E7EE); margin: 2.2rem 0; }
/* An editorial callout — the whitelisted <blockquote> from an article body. The pull quote
   (.kc-pull) keeps its own distinct treatment defined elsewhere. */
.kc-body blockquote:not(.kc-pull) {
    margin: 1.8rem 0; padding: 1rem 1.3rem; border-left: 3px solid var(--kc-gold-deep);
    background: rgba(201,162,39,.06); border-radius: 0 8px 8px 0;
    font-size: 1.1rem; line-height: 1.6; color: var(--kc-ink);
}
.kc-body blockquote:not(.kc-pull) p:last-child { margin-bottom: 0; }
/* The drop cap suits a plain-text lead paragraph; when an HTML article opens with a heading
   it would land on a mid-article paragraph, so it is disabled for HTML bodies. */
.kc-body:has(> h2:first-child) > p:first-of-type::first-letter,
.kc-body:has(> h3:first-child) > p:first-of-type::first-letter {
    float: none; font-size: inherit; font-family: inherit; font-weight: inherit;
    padding: 0; color: inherit;
}

.kc-pull {
    font-family: var(--kc-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.32; font-weight: 700; color: var(--kc-ink);
    border-left: 3px solid var(--kc-gold);
    padding-left: clamp(1rem, 2.5vw, 1.6rem);
    margin: 2.2rem 0; max-width: 46ch;
}

/* Key points — a definition list, because these are claims with substance,
   not a feature list with ticks. Ticks are what a product page uses. */
.kc-points { border-top: 1px solid var(--kc-mist); margin: 2.5rem 0; max-width: var(--kc-measure); }
.kc-point {
    display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--kc-mist);
}
.kc-point-n {
    font-family: var(--kc-utility); font-size: .78rem; font-weight: 700;
    color: var(--kc-gold-deep); letter-spacing: .06em; padding-top: .28rem;
}
.kc-point p { font-family: var(--kc-body); font-size: 1.05rem;
    line-height: 1.6; margin: 0; }

.kc-figure { margin: 2.2rem 0; }
.kc-figure img { width: 100%; height: auto; display: block; }
.kc-credit {
    font-family: var(--kc-utility); font-size: .74rem; color: var(--kc-quiet);
    padding-top: .5rem; border-top: 1px solid var(--kc-mist); margin-top: .5rem;
}
.kc-credit a { color: var(--kc-quiet); }

.kc-faq { border-top: 1px solid var(--kc-mist); max-width: var(--kc-measure); }
.kc-faq details { border-bottom: 1px solid var(--kc-mist); padding: 1.1rem 0; }
.kc-faq summary {
    font-family: var(--kc-display); font-weight: 700; font-size: 1.05rem;
    color: var(--kc-ink); cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: 1rem;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: '+'; color: var(--kc-gold-deep); font-weight: 400; }
.kc-faq details[open] summary::after { content: '−'; }
.kc-faq p { font-family: var(--kc-body); margin: .8rem 0 0; line-height: 1.65; }

/* ---- Sidebar --------------------------------------------------------------
   Related READING only. An article that ends in four company formations for sale
   is an advert wearing the clothes of a recommendation, and readers can tell. */
.kc-aside-title {
    font-family: var(--kc-utility); font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--kc-ink);
    padding-bottom: .7rem; border-bottom: 2px solid var(--kc-ink); margin-bottom: 1rem;
}
.kc-related a {
    display: block; padding: .85rem 0; border-bottom: 1px solid var(--kc-mist);
    font-family: var(--kc-display); font-weight: 700; font-size: .95rem;
    line-height: 1.32; color: var(--kc-ink); text-decoration: none;
}
.kc-related a:hover { color: var(--kc-gold-deep); }

.kc-advice {
    margin-top: 2rem; padding: 1.6rem; background: var(--kc-ink); color: var(--kc-paper);
}
.kc-advice h3 { font-size: 1.15rem; color: var(--kc-paper); margin: 0 0 .5rem; }
.kc-advice p { font-family: var(--kc-body); font-size: .95rem; line-height: 1.55;
    color: rgba(251,250,247,.82); margin: 0 0 1.1rem; }
.kc-advice .btn { background: var(--kc-gold); color: var(--kc-ink);
    border: 0; font-family: var(--kc-utility); font-weight: 700;
    padding: .7rem 1.4rem; display: inline-block; text-decoration: none; }
.kc-advice .btn:hover { background: #C9A430; color: var(--kc-ink); }

/* ---- Live feed ------------------------------------------------------------ */
.kc-wire { border-top: 2px solid var(--kc-ink); padding-top: 1rem; }
.kc-wire-item { padding: .8rem 0; border-bottom: 1px solid var(--kc-mist); }
.kc-wire-item:last-child { border-bottom: 0; }
.kc-wire-item a { font-family: var(--kc-display); font-weight: 700; font-size: .93rem;
    line-height: 1.3; color: var(--kc-ink); text-decoration: none; display: block; }
.kc-wire-item a:hover { color: var(--kc-gold-deep); }
.kc-wire-src { font-family: var(--kc-utility); font-size: .7rem; color: var(--kc-quiet);
    text-transform: uppercase; letter-spacing: .1em; }

/* ---- Empty state — an invitation, not an apology -------------------------- */
.kc-empty { padding: clamp(3rem, 8vw, 5rem) 0; max-width: 48ch; }
.kc-empty h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.kc-empty p { font-family: var(--kc-body); font-size: 1.05rem; line-height: 1.6; }

/* ---- Quality floor -------------------------------------------------------- */
.kc a:focus-visible,
.kc button:focus-visible,
.kc summary:focus-visible {
    outline: 2px solid var(--kc-gold-deep);
    outline-offset: 3px;
    border-radius: var(--cx-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
    .kc *, .kc *::before, .kc *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .kc-lead:hover .kc-lead-media img { transform: none; }
}

@media print {
    .kc-spine, .kc-advice, .kc-filters { display: none; }
    .kc-body { max-width: none; }
}

/* ---- Search bar (search results page) -------------------------------------
   Lives here rather than in nav.css because it belongs to the results page, not
   the header. Same gold rule: a charcoal label on a gold surface, never white —
   white on #D4AF37 measures 2.10:1 and fails AA. */
.kc-searchbar { display: flex; max-width: 640px; margin-top: 1.5rem; }
.kc-searchbar input {
    flex: 1; min-width: 0;
    font-family: var(--kc-utility); font-size: 1rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--kc-mist); border-right: 0;
    border-radius: 8px 0 0 8px; background: #fff; color: var(--kc-ink);
}
.kc-searchbar input:focus {
    outline: none; border-color: var(--kc-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.16);
}
.kc-searchbar button {
    flex: none; border: 0; cursor: pointer;
    padding: 0 1.6rem; border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, #D4AF37 0%, #B8902B 100%);
    color: #1A1A1D;
    font-family: var(--kc-utility); font-weight: 700; font-size: .95rem;
}
.kc-searchbar button:hover { filter: brightness(1.06); }

.kc-aside-title .kc-meta { float: right; font-weight: 400; }

/* Phase 1: the navy hero now carries the title, so the filter row sits closer. */
.kc-masthead--compact { padding-top: 1.6rem; }
.kc-masthead--compact .kc-filters { margin-top: 0; }

/* ============================================================================
   KNOWLEDGE CENTRE v2 — rebuilt landing page (kc2-*)
   Light/editorial by default; navy reserved for hero, jurisdiction, CTA.
   Uses the site system fonts (Inter/Manrope) and Coutts navy/gold/ivory.
   ========================================================================== */
.kc2 { --navy:#0B1626; --gold:#C9A227; --ink:#0B1626; --muted:#6b7280;
    --ivory:#F7F5EF; --line:#e7e3d8; background:#fff; color:var(--ink);
    font-family: var(--cx-sans); }
.kc2-wrap { max-width:1460px; margin:0 auto; padding-left:clamp(1rem,4vw,2.4rem); padding-right:clamp(1rem,4vw,2.4rem); }
.kc2 h2 { font-family: var(--cx-display); letter-spacing:-.02em; }
/* §26 — section eyebrows are real headings now (kc2-eyebrow-gold on h2/h3/h4); this keeps their
   compact gold-uppercase look from being overridden by the generic .kc2 h2/h3 rules above. */
.kc2 h2.kc2-eyebrow-gold, .kc2 h3.kc2-eyebrow-gold, .kc2 h4.kc2-eyebrow-gold {
    letter-spacing:.14em; text-transform:uppercase; font-weight:700; font-size:.8rem; color:#C9A227; margin:0 0 .6rem;
}
.kc2-rule { display:block; width:52px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:1rem 0; }
.kc2-btn { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-family: var(--cx-display);
    font-weight: var(--cx-btn-weight); font-size: var(--cx-btn-fs); padding: 0 var(--cx-btn-pad-x); border-radius: var(--cx-btn-radius); transition:transform var(--cx-duration-sm) ease, background var(--cx-duration-sm) ease; min-height: var(--cx-btn-h);}
.kc2-btn span { transition:transform var(--cx-duration-sm) ease; }
.kc2-btn:hover span { transform:translateX(3px); }
.kc2-btn--gold { background:var(--gold); color:#0B1626; }
.kc2-btn--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }

/* 4 — discovery */
.kc2-discovery { background:#fff; border-bottom:1px solid var(--line); }
.kc2-discovery-form { padding:1.6rem 0; }
.kc2-cats { display:flex; flex-wrap:wrap; gap:1.4rem; margin-bottom:1.2rem; }
.kc2-cat { text-decoration:none; font-family: var(--cx-display); font-weight:600; font-size:.9rem;
    color:#3a4658; padding-bottom:.35rem; border-bottom:2px solid transparent; }
.kc2-cat:hover { color:var(--navy); }
.kc2-cat.is-on { color:var(--gold); border-bottom-color:var(--gold); }
.kc2-filters { display:flex; gap:1rem; align-items:stretch; }
.kc2-select { flex:0 0 220px; border:1px solid var(--line); border-radius: var(--cx-radius); padding:.7rem .9rem;
    font-size:.9rem; color:var(--navy); background:#fff; }
.kc2-search { flex:1 1 auto; display:flex; align-items:center; gap:.6rem; border:1px solid var(--line);
    border-radius: var(--cx-radius); padding:.2rem .9rem; background:#fff; }
.kc2-search-ic { width:18px; height:18px; color:var(--muted); flex:0 0 auto; }
.kc2-search-ic svg { width:100%; height:100%; }
.kc2-search input { flex:1; border:0; outline:0; padding:.7rem 0; font-size:.9rem; background:transparent; }

.kc2-empty { padding:4rem 0; text-align:center; color:var(--muted); }
.kc2-empty p { margin-bottom:1rem; }

/* 5 — featured + latest */
.kc2-editorial { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2.4rem;
    padding:clamp(3rem,5vw,4.5rem) clamp(1rem,4vw,2.4rem); }
.kc2-featured { display:grid; grid-template-columns:42% 58%; text-decoration:none; color:var(--ink);
    border:1px solid var(--line); border-radius: var(--cx-radius-sm); overflow:hidden; background:var(--ivory);
    transition:box-shadow var(--cx-duration-sm) ease; }
.kc2-featured:hover { box-shadow: var(--cx-shadow-4); }
.kc2-featured-text { padding:2rem; display:flex; flex-direction:column; }
.kc2-tag { align-self:flex-start; font-family: var(--cx-display); font-size:.66rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(201,162,39,.5);
    border-radius: var(--cx-radius-xs); padding:.3rem .6rem; margin-bottom:1rem; }
.kc2-featured-title { font-size:clamp(1.4rem,2vw,1.9rem); font-weight:800; line-height:1.15; margin:0 0 .8rem; color:var(--navy); }
.kc2-featured-dek { font-size:.95rem; line-height:1.6; color:#4a5568; margin:0 0 1.2rem; }
.kc2-featured-meta { font-size:.8rem; color:var(--muted); margin:0 0 1.2rem; }
.kc2-featured-go { margin-top:auto; font-family: var(--cx-display); font-weight:700; font-size:.88rem; color:var(--gold); }
.kc2-featured-media { position:relative; min-height:320px; }
.kc2-featured-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: var(--img-pos, 50% 50%); }
.kc2-flag { display:inline-block; width:1.25em; height:1.25em; border-radius:50%; background-size:cover;
    background-position:center; box-shadow:0 0 0 1px rgba(0,0,0,.15); vertical-align:middle; }
.kc2-featured-media .kc2-flag { position:absolute; top:1rem; right:1rem; width:34px; height:34px; box-shadow: var(--cx-shadow-2); }

.kc2-latest-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.5rem; }
.kc2-latest-head h2 { font-size:1.1rem; font-weight:800; color:var(--navy); }
.kc2-latest-head a { font-size:.8rem; font-weight:700; color:var(--gold); text-decoration:none; }
.kc2-latest-item { display:grid; grid-template-columns:96px 1fr; gap:1rem; align-items:center;
    padding:1.1rem 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); }
.kc2-latest-item:first-of-type { border-top:0; }
.kc2-latest-thumb { width:96px; height:70px; border-radius: var(--cx-radius-sm); overflow:hidden; background:var(--ivory); }
.kc2-latest-thumb img { width:100%; height:100%; object-fit:cover; object-position: var(--img-pos, 50% 50%); }
.kc2-latest-title { display:block; font-family: var(--cx-display); font-weight:700; font-size:.92rem;
    line-height:1.3; color:var(--navy); }
.kc2-latest-meta { display:block; font-size:.76rem; color:var(--muted); margin-top:.35rem; }
.kc2-latest-item:hover .kc2-latest-title { color:var(--gold); }

/* 6 — explore by jurisdiction (navy) */
.kc2-jx { background:var(--navy); color:#fff; }
.kc2-jx-grid { display:grid; grid-template-columns:minmax(0,22%) minmax(0,78%); gap:2rem; align-items:center;
    padding:clamp(3rem,5vw,4.5rem) clamp(1rem,4vw,2.4rem); }
.kc2-jx-intro h2 { font-size:clamp(1.4rem,1.8vw,1.8rem); font-weight:800; line-height:1.15; }
.kc2-jx-intro p { font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.7); margin:0 0 1.2rem; }
.kc2-jx-browse { font-family: var(--cx-display); font-weight:700; font-size:.85rem; color:var(--gold); text-decoration:none; }
.kc2-jx-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:1rem;
    overflow-x:auto; padding-bottom:.5rem; scrollbar-width:thin; }
.kc2-jx-card { position:relative; aspect-ratio:4/5; border-radius: var(--cx-radius); overflow:hidden; text-decoration:none;
    background:#0a1420; display:block; }
.kc2-jx-card img { width:100%; height:100%; object-fit:cover; object-position: var(--img-pos, 50% 50%); transition:transform .4s ease; }
.kc2-jx-card:hover img { transform:scale(var(--cx-hover-scale)); }
.kc2-jx-card-grad { position:absolute; inset:0; background:linear-gradient(to top, rgba(6,14,24,.85) 0%, transparent 55%); }
.kc2-jx-card-name { position:absolute; left:.9rem; bottom:.9rem; display:flex; align-items:center; gap:.5rem;
    font-family: var(--cx-display); font-weight:700; font-size:.9rem; color:#fff; z-index:2; }

/* 8 — all insights grid */
.kc2-all { padding:clamp(3rem,5vw,4.5rem) clamp(1rem,4vw,2.4rem); background:#fff; }
.kc2-all-head h2 { font-size:clamp(1.4rem,1.8vw,1.8rem); font-weight:800; color:var(--navy); margin-bottom:1.6rem; }
.kc2-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:1.8rem; }
.kc2-card { text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius: var(--cx-radius-sm);
    overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow var(--cx-duration-sm) ease; }
.kc2-card:hover { box-shadow: var(--cx-shadow-4); }
.kc2-card-media { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ivory); }
.kc2-card-media img { width:100%; height:100%; object-fit:cover; object-position: var(--img-pos, 50% 50%); transition:transform .4s ease; }
.kc2-card:hover .kc2-card-media img { transform:scale(var(--cx-hover-scale)); }
.kc2-card-body { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.kc2-card-eyebrow { font-family: var(--cx-display); font-size:.66rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gold); }
.kc2-card-title { font-family: var(--cx-display); font-weight:700; font-size:1rem; line-height:1.3;
    color:var(--navy); margin:.5rem 0 .7rem; }
.kc2-card-meta { font-size:.76rem; color:var(--muted); margin-bottom:.9rem; }
.kc2-card-go { margin-top:auto; font-family: var(--cx-display); font-weight:700; font-size:.82rem; color:var(--gold); }
.kc2-more { margin-top:2.5rem; display:flex; justify-content:center; }

/* 9 — CTA (navy) */
.kc2-cta { background:var(--navy); color:#fff; }
.kc2-cta-inner { display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; align-items:center;
    padding:clamp(2.5rem,4vw,3.5rem) clamp(1rem,4vw,2.4rem); }
.kc2-cta-copy h2 { font-size:clamp(1.3rem,1.8vw,1.7rem); font-weight:800; line-height:1.25; }
.kc2-cta-copy p { font-size:var(--kc-fs-body); line-height:1.6; color:rgba(255,255,255,.72); margin-top:.8rem; max-width:520px; }
.kc2-cta-actions { display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; }

@media (max-width:960px){
    .kc2-editorial { grid-template-columns:1fr; }
    .kc2-featured { grid-template-columns:1fr; }
    .kc2-featured-media { min-height:220px; }
    .kc2-jx-grid { grid-template-columns:1fr; }
    .kc2-cta-inner { grid-template-columns:1fr; }
    .kc2-filters { flex-direction:column; }
    .kc2-select { flex:1; }
}

/* ---- Refinement pass ---------------------------------------------------------
   §26 hide the native carousel scrollbar; §41 never uppercase long titles;
   §19 clamp the featured excerpt; §40 clamp card titles for consistent height. */
.kc2-jx-rail { scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; }
.kc2-jx-rail::-webkit-scrollbar { display: none; }
.kc2-jx-card { scroll-snap-align: start; }
.kc2-featured-title, .kc2-card-title, .kc2-latest-title { text-transform: none; }
.kc2-featured-dek {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.kc2-card-title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em;
}
.kc2-latest-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================================
   Knowledge Centre — new content architecture (Guides + Insights)
   ========================================================================== */
.kc2-eyebrow-gold { font-family: var(--cx-display); color:#C9A227; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; font-size:var(--kc-fs-eyebrow); margin:0 0 .5rem; }
/* Was inheriting the body default, which is how it ended up visually larger than the
   Insight deks it sits alongside. On the scale now, like everything else. */
.kcg2-intro { max-width:600px; color:#4a5568; font-size:var(--kc-fs-lead); line-height:1.6; margin:0; }
.kcg2-intro--light { color:rgba(255,255,255,.72); }

/* THE COUTTS GUIDES */
.kcg2 { background:#fff; padding:var(--kc-space-section) 0; }
.kcg2-head { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--kc-gap-lg); margin-bottom:var(--kc-gap-lg); flex-wrap:wrap; }
.kcg2-all { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-link); color:#C9A227; text-decoration:none; white-space:nowrap; }
.kcg2-empty { background:#F7F5EF; border:1px dashed #d9d2c2; border-radius:var(--kc-radius-lg); padding:2.4rem 1.6rem;
    text-align:center; color:#6b7280; font-size:var(--kc-fs-lead); }
.kcg2-latest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--kc-gap-lg); }
.kcg2-card { display:flex; flex-direction:column; position:relative; isolation:isolate; }
/* Same portrait ratio AND the same ceiling as .hp-card-media--cover, which reads the
   --coutts-guide-cover-max token. Without the cap, a 3/4 box on a wider column simply
   grows taller — which is why these covers stood roughly 350px tall here against 210px
   on the homepage. */
/* The frame takes its shape from the artwork, rather than the artwork being fitted into a
   frame of a different shape.

   This was `aspect-ratio:3/4` plus `max-height:210px`, which is an effective ratio of about
   0.9 on a 190px card — not 3/4 at all, because the cap overrides the ratio. The cover was
   then letterboxed into that box with `object-fit:contain`, and the leftover showed as the
   navy #0B1626 background.

   No single fixed ratio could have fixed it: GuidePdfIngestService::renderCover() rasterises
   page 1 of each source PDF and, by its own comment, preserves that page's ratio without
   cropping or resizing. An A4 guide and a US-Letter guide therefore produce covers of
   genuinely different shapes, so any frame ratio is wrong for some of them. Letting the image
   set the height is the only version that has no leftover to fill for every cover. */
.kcg2-cover { display:block; border-radius: var(--cx-radius); overflow:hidden;
    box-shadow: var(--cx-shadow-3); position:relative; }
.kcg2-cover img { width:100%; height:auto; display:block; transition:transform .4s ease; }
/* Only the no-artwork case still needs a shape and a background of its own — with no <img>
   to give it height, the box would otherwise collapse to nothing. */
.kcg2-cover:not(:has(img)) { aspect-ratio:3/4; background:#0B1626; }
.kcg2-card:hover .kcg2-cover img { transform:scale(var(--cx-hover-scale)); }
.kcg2-cover-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#C9A227; font-family: var(--cx-display); font-weight:800; text-align:center; letter-spacing:.08em; }
/* Card interior matched to .hp-card-* on the homepage, which shows these same guide
   covers in the same kind of rail. The two were previously independent: 1rem titles and
   .8rem country lines here against .82rem and .68rem there, so a guide looked like a
   different piece of content depending on which page you met it on. */
.kcg2-card-body { padding-top:.6rem; position:static; }
.kcg2-country { display:flex; align-items:center; gap:.3rem; font-family: var(--cx-display); font-weight:700;
    font-size:var(--kc-fs-micro); text-transform:uppercase; letter-spacing:.06em; color:#0B1626; }
.kcg2-country .fi, .kcg2-country .kc2-flag { width:15px; height:11px; border-radius: var(--cx-radius-xs); }
/* Clamped to two lines, like .hp-card-body h3. Character-count truncation gives uneven
   card heights because the same character count is two lines in one title and four in
   another; clamping by line keeps every card in the rail the same height. */
.kcg2-card-title { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-h3); line-height:1.28;
    margin:.35rem 0 .3rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.1em; }
.kcg2-card-title a { color:#0B1626; text-decoration:none; }
.kcg2-card-title a:hover { color:#C9A227; }
.kcg2-card-meta { font-size:var(--kc-fs-micro); color:#6b7280; margin:0 0 .5rem; }
.kcg2-card-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.kcg2-btn { display:inline-flex; align-items:center; text-decoration:none; font-family: var(--cx-display);
    font-weight: var(--cx-btn-weight); font-size: var(--cx-btn-fs); padding: 0 var(--cx-btn-pad-x); border-radius: var(--cx-btn-radius); min-height: var(--cx-btn-h);}
.kcg2-btn--gold { background:#C9A227; color:#0B1626; }
.kcg2-btn--ghost { background:transparent; color:#0B1626; border:1px solid #d9d2c2; }

/* EXPLORE COUTTS GUIDES (navy) */
.kcx2-explore { background:#0B1626; color:#fff; padding:var(--kc-space-section) 0; }
.kcx2-filter { width:100%; max-width:380px; margin:var(--kc-gap-md) 0 1.4rem; padding:.62rem .85rem;
    font-size:var(--kc-fs-body); border-radius:var(--kc-radius);
    border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; }
.kcx2-filter::placeholder { color:rgba(255,255,255,.5); }
/* Explicit column counts per the brief (4 desktop / 3 intermediate / 2 tablet / 1 mobile) —
   auto-fill with a 220px minimum was organically fitting 5 across at this container's actual
   width (1180px), not the intended 4; verified by rendering rather than assumed. */
.kcx2-jx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--kc-gap-sm); }
@media (max-width:1100px) { .kcx2-jx-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .kcx2-jx-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px)  { .kcx2-jx-grid { grid-template-columns:1fr; } }
.kcx2-jx { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:var(--kc-radius); text-decoration:none;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#fff;
    transition:background var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease; }
.kcx2-jx:hover { background:rgba(201,162,39,.16); border-color:rgba(201,162,39,.35); }
.kcx2-jx-text { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.kcx2-jx-name { font-weight:700; font-size:var(--kc-fs-body); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kcx2-jx-ed { font-family: var(--cx-sans); font-weight:500; font-size:var(--kc-fs-label); letter-spacing:.03em;
    text-transform:uppercase; color:rgba(255,255,255,.5); }
.kcx2-jx-go { margin-left:auto; flex:none; color:#C9A227; }

/* COUTTS INSIGHTS (editorial) — photography-led, distinct from the cover-led Guides section
   above it, per the brief's explicit visual-language split between the two publication types. */
.kci3 { padding:var(--kc-space-section) clamp(1rem,4vw,2.4rem); }
.kci3-h { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-display);
    line-height:1.18; letter-spacing:-.01em; color:#0B1626; margin:.25rem 0 .7rem; max-width:20ch; }

/* Featured Insight — a substantial horizontal editorial composition, not a boxed blog card:
   no border, no card background, ~40% image / 60% copy, integrated into the page architecture. */
/* Media column stated in px, not as a share.

   2fr of a 2fr/3fr split is 40% of the container — about 472px at 1180, and 590px tall at the
   4/5 ratio below, which is what made the Featured Insight tower over the six cards beneath
   it. A px track means the image is the size it is, rather than a size that grows with the
   viewport while the cards below it do not. */
.kci3-feat { display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:clamp(1.6rem,3.2vw,2.5rem); align-items:center;
    text-decoration:none; color:#0B1626; margin-top:.4rem; }
.kci3-feat-media { display:block; position:relative; aspect-ratio:4/5; border-radius:var(--kc-radius-sm); overflow:hidden;
    background:#F7F5EF; box-shadow: var(--cx-shadow-3); }
.kci3-feat-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: var(--img-pos, 50% 50%); display:block; transition:transform .5s ease; }
.kci3-feat:hover .kci3-feat-media img { transform:scale(var(--cx-hover-scale)); }
.kci3-fallback { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column;
    align-items:flex-start; justify-content:flex-end; gap:.5rem; padding:1.4rem;
    background:linear-gradient(135deg,#0B1626 0%,#101f34 60%,#0a1420 100%); }
.kci3-fallback-cat { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-micro); letter-spacing:.14em;
    text-transform:uppercase; color:#C9A227; }
.kci3-fallback-title { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-lead); line-height:1.3; color:#fff; }
.kci3-feat-body { display:flex; flex-direction:column; }
.kci3-feat-eyebrow { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-micro); letter-spacing:.1em;
    color:#5c6470; margin-bottom:.7rem; }
.kci3-feat-title { display:block; font-family: var(--cx-display); font-weight:700; letter-spacing:-.01em;
    font-size:var(--kc-fs-display); line-height:1.18; color:#0B1626; margin-bottom:.8rem; }
.kci3-feat:hover .kci3-feat-title { color:#8C7424; }
.kci3-feat-dek { font-size:var(--kc-fs-lead); line-height:1.6; color:#3f4652; max-width:56ch; margin-bottom:1.1rem; }
.kci3-feat-cta { display:inline-flex; align-items:center; gap:.4rem; font-family: var(--cx-display);
    font-weight:700; font-size:var(--kc-fs-link); color:#8C7424; }
.kci3-feat-cta span { transition:transform var(--cx-duration-sm) ease; }
.kci3-feat:hover .kci3-feat-cta span { transform:translateX(3px); }

/* Secondary Insights — editorially restrained: no borders, no shadows, no boxed cards.
   Photography and typography carry the visual interest, not decorative UI (§12). */
/* The base rule carries a working column definition, not just `display:grid`.

   It previously relied entirely on a --count-N modifier for its columns. That makes the
   layout depend on the view and the stylesheet being in step: emit a count the CSS has no
   rule for and `display:grid` falls back to a single column, so every card goes full width
   and each 16/10 image stretches to roughly 740px tall. A stale stylesheet then reads as a
   catastrophically broken page rather than a slightly wrong one.

   auto-fill + minmax(260px, 1fr) lands on four columns at the 1180px container by itself, so
   the modifiers below now refine a layout that already works rather than supplying the only
   one there is. Any count — known, unknown, or missing — degrades to a sensible grid. */
.kci3-secondary { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:1.7rem; margin-top:var(--kc-gap-xl); padding-top:1.9rem; border-top:1px solid #e7e3d8; }
/* minmax(0,1fr) rather than 1fr on every tier: a bare 1fr is min-content-floored, so one long
   unbroken word in a title can push its column past its share and unbalance the whole row.
   At four across the columns are narrow enough for that to be a real possibility. */
.kci3-secondary--count-1 { grid-template-columns:minmax(0,1fr); }
.kci3-secondary--count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kci3-secondary--count-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kci3-secondary--count-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kci3-sec-card { display:flex; flex-direction:column; text-decoration:none; color:#0B1626; }
/* max-height is a backstop, not a design decision. object-fit below is `cover`, so this
   crops rather than letterboxes — it simply means no card image can run away vertically if
   its column ever ends up wider than intended. */
.kci3-sec-media { display:block; position:relative; aspect-ratio:16/10; max-height:260px;
    border-radius:var(--kc-radius-sm); overflow:hidden; margin-bottom:.8rem;
    background:#F7F5EF; }
.kci3-sec-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: var(--img-pos, 50% 50%); transition:transform .4s ease; }
.kci3-sec-card:hover .kci3-sec-media img { transform:scale(var(--cx-hover-scale)); }
.kci3-sec-media-fallback { position:absolute; inset:0; display:block; width:100%; height:100%;
    background:linear-gradient(135deg,#0B1626 0%,#16293f 100%); }
.kci3-sec-cat { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-label); letter-spacing:.1em;
    text-transform:uppercase; color:#8C7424; margin-bottom:.35rem; }
/* Two lines, clamped — the same treatment as the Guide cards beside them, so a long
   Insight title cannot make its row taller than its neighbours. */
.kci3-sec-title { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-h2); line-height:1.32; color:#0B1626;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kci3-sec-card:hover .kci3-sec-title { color:#8C7424; }
.kci3-sec-dek { font-size:var(--kc-fs-body); line-height:1.5; color:#4a5568; margin-top:.45rem;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.kci3-sec-meta { font-size:var(--kc-fs-meta); color:#6b7280; margin-top:.5rem; }

.kci3-load-more { display:flex; justify-content:center; margin-top:1.9rem; }

/* ---- Explore Coutts Insights — discovery ported from the retired standalone Insights index.
   Soft off-white, subtly differentiated from the white article grid above it, per brief §17. ---- */
.kci3-explore { background:#FAF8F3; border-radius:var(--kc-radius-lg); padding:2rem clamp(1.2rem,2.6vw,2.1rem); margin-top:var(--kc-gap-xl); }
.kci3-explore-group { margin-top:1.1rem; }
.kci3-explore-group + .kci3-explore-group { margin-top:1.4rem; }
.kci3-explore-label { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-micro); letter-spacing:.12em;
    text-transform:uppercase; color:#6b7280; margin:0 0 .65rem; }
.kci3-pill-grid { display:flex; flex-wrap:wrap; gap:var(--kc-gap-xs); }
.kci3-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem;
    border-radius:999px; background:#fff; border:1px solid #e7e3d8; text-decoration:none;
    font-family: var(--cx-display); font-weight:600; font-size:var(--kc-fs-link); color:#0B1626;
    transition:border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease; }
.kci3-pill:hover { border-color:#C9A227; box-shadow: var(--cx-shadow-2); }
.kci3-pill.is-active { background:#0B1626; border-color:#0B1626; color:#fff; }
.kci3-pill-count { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-label); color:#C9A227;
    background:rgba(201,162,39,.12); border-radius:999px; padding:.12rem .42rem; }
.kci3-pill.is-active .kci3-pill-count { background:rgba(201,162,39,.22); }
.kci3-pill-flag { width:1.15em; height:1.15em; border-radius:50%; flex:none; }
.kci3-clear-filter { display:inline-block; margin-top:1.1rem; font-family: var(--cx-display);
    font-weight:700; font-size:var(--kc-fs-link); color:#8C7424; text-decoration:none; }
.kci3-clear-filter:hover { color:#C9A227; }
/* A lone secondary story is a smaller companion piece, not a stray grid tile: give it the same
   horizontal composition as the Featured Insight, just narrower. */
.kci3-secondary--count-1 .kci3-sec-card { display:grid; grid-template-columns:190px 1fr; gap:1.3rem; align-items:center; }
.kci3-secondary--count-1 .kci3-sec-media { margin-bottom:0; aspect-ratio:4/3; }

@media (max-width:1100px){ .kcg2-latest-grid { grid-template-columns:repeat(2,1fr); } }
/* Four across only where four fit. Below this the row steps to three, then two, then one —
   the same ladder the Guide cards use, so the two grids stay in step as the page narrows. */
@media (max-width:1100px){
    .kci3-secondary--count-4 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
    .kci3-feat { grid-template-columns:minmax(0,1fr); }
    .kci3-feat-media { aspect-ratio:16/10; max-width:420px; }
    .kci3-secondary--count-2, .kci3-secondary--count-3,
    .kci3-secondary--count-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .kci3-secondary--count-1 .kci3-sec-card { grid-template-columns:1fr; }
    .kci3-secondary--count-1 .kci3-sec-media { margin-bottom:1rem; aspect-ratio:16/10; }
}
@media (max-width:640px){
    .kci3-secondary--count-2, .kci3-secondary--count-3,
    .kci3-secondary--count-4 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){ .kcg2-latest-grid { grid-template-columns:repeat(2,1fr); gap:1.2rem; } }

/* ============================================================================
   Featured Coutts Guide — premium two-column editorial feature
   ========================================================================== */
.kcfg { display:grid; grid-template-columns:minmax(0,228px) 1fr; gap:clamp(1.8rem,3.4vw,3rem);
    align-items:start; margin-bottom:2.2rem; }
/* Same change as .kcg2-cover above — image defines the box, so nothing shows behind it. */
.kcfg-cover { display:block; position:relative; border-radius: var(--cx-radius-sm); overflow:hidden;
    box-shadow: var(--cx-shadow-4); transition:transform var(--cx-duration) ease; }
.kcfg-cover:hover { transform:translateY(var(--cx-hover-lift)); }
.kcfg-cover img { width:100%; height:auto; display:block; }
.kcfg-cover:not(:has(img)) { aspect-ratio:3/4; background:#0B1626; }
.kcfg-cover-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#C9A227; font-family: var(--cx-display); font-weight:800; text-align:center; letter-spacing:.08em; font-size:1.3rem; }
.kcfg-eyebrow { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-micro); letter-spacing:.16em;
    text-transform:uppercase; color:#8C7424; margin:0 0 .7rem; }
.kcfg-country { display:flex; align-items:center; gap:.55rem; font-family: var(--cx-display); font-weight:700;
    text-transform:uppercase; letter-spacing:.1em; font-size:var(--kc-fs-micro); color:#0B1626; }
.kcfg-title { font-family: var(--cx-display); font-weight:800; font-size:var(--kc-fs-display);
    line-height:1.18; margin:.5rem 0 .45rem; }
.kcfg-title a { color:#0B1626; text-decoration:none; }
.kcfg-title a:hover { color:#C9A227; }
.kcfg-topics-line { color:#8a7a52; font-size:var(--kc-fs-meta); font-weight:600; margin:0 0 .85rem; }
.kcfg-dek { color:#3f4652; line-height:1.65; font-size:var(--kc-fs-lead); max-width:56ch; margin:0 0 1.3rem; }
.kcfg-inside { border-top:1px solid #e7e3d8; padding-top:.85rem; margin-bottom:1.1rem; }
.kcfg-inside-label { font-family: var(--cx-display); font-weight:700; text-transform:uppercase;
    letter-spacing:.12em; font-size:var(--kc-fs-micro); color:#0B1626; }
.kcfg-inside-list { list-style:none; padding:0; margin:.7rem 0 0; columns:2; column-gap:1.8rem; }
.kcfg-inside-list li { padding:.35rem 0 .35rem 1.2rem; position:relative; font-size:var(--kc-fs-body); color:#2f3640;
    break-inside:avoid; }
.kcfg-inside-list li::before { content:''; position:absolute; left:0; top:.9em; width:6px; height:6px;
    background:#C9A227; border-radius:1px; }
.kcfg-meta { display:flex; flex-wrap:wrap; gap:var(--kc-gap-lg); padding:1rem 0; border-top:1px solid #e7e3d8;
    border-bottom:1px solid #e7e3d8; margin-bottom:1.3rem; }
.kcfg-meta span { display:flex; flex-direction:column; }
.kcfg-meta strong { font-family: var(--cx-display); font-weight:800; color:#0B1626; font-size:var(--kc-fs-body);
    text-transform:uppercase; letter-spacing:.04em; }
.kcfg-meta em { font-style:normal; color:#8a8f98; font-size:var(--kc-fs-micro); margin-top:.15rem; }
.kcfg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.kcfg-download { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-link); color:#0B1626;
    text-decoration:none; border-bottom:1px solid transparent; }
.kcfg-download:hover { border-bottom-color:#C9A227; color:#C9A227; }
.kcg2-latest-head { display:flex; align-items:center; justify-content:space-between; margin:var(--kc-gap-md) 0 1.1rem; }
.kcg2-carousel-nav { display:flex; gap:.6rem; }
/* 32px rather than 38px — the controls were sized against a 264px card and looked
   oversized once the cards came down to the homepage's width. */
.kcg2-carousel-btn { width:32px; height:32px; border-radius:50%; border:1px solid #d9d2c2; background:#fff;
    color:#0B1626; font-size:1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease, color var(--cx-duration-sm) ease, opacity var(--cx-duration-sm) ease; }
.kcg2-carousel-btn:hover:not(:disabled) { background:#0B1626; border-color:#0B1626; color:#C9A227; }
.kcg2-carousel-btn:disabled { opacity:.35; cursor:default; }
.kcg2-carousel { overflow:hidden; }
/* Fixed pixel card widths per tier — NOT percentage-of-container. A percentage-based
   grid-auto-columns shrinks continuously as the viewport narrows, which is what let the cards
   compress into thin vertical strips instead of snapping to a defined column count. Each tier
   below holds a constant width; only the breakpoints change, so a card is always wide enough
   for its cover, title, edition line and CTA to typeset normally, and the row simply shows
   fewer of them (scrollable) rather than shrinking what's shown. */
.kcg2-grid[data-kcg-track] { display:grid; grid-template-columns:none; grid-auto-flow:column;
    grid-auto-columns:clamp(150px, 48vw, 172px);
    gap:var(--kc-gap-sm); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:.25rem; }
.kcg2-grid[data-kcg-track]::-webkit-scrollbar { display:none; }
.kcg2-grid[data-kcg-track]:focus-visible { outline:2px solid #C9A227; outline-offset:4px; }
.kcg2-grid[data-kcg-track] .kcg2-card { scroll-snap-align:start; min-width:0; }
/* Column widths and gap lifted from .hp-rail-track on the homepage: clamp(150px, 48vw, 172px)
   below 640px, 190px above it. That puts roughly six cards across inside the 1180px container,
   which is what the homepage rail shows.

   Written as min-width rather than max-width deliberately. The previous tiers were max-width
   and ran 264 → 300 → 280px, so a card got LARGER as the viewport got smaller between 1100px
   and 820px. Building up from the smallest tier makes that class of mistake visible.

   No percentage track sizing here: this is a horizontally scrolling grid, and a percentage
   grid-auto-column resolves against a container that is itself defined by its contents. That
   is the exact trap noted in home.css, which is why the homepage rail uses flex with a fixed
   basis rather than a calc(). 190px lands on the same result without the ambiguity. */
@media (min-width:640px){ .kcg2-grid[data-kcg-track] { grid-auto-columns:190px; } }
.kcg2-card-go { font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-meta); color:#C9A227;
    text-decoration:none; }
.kcg2-card-go:hover { text-decoration:underline; }

@media (max-width:820px){
    .kcfg { grid-template-columns:1fr; }
    /* Was 260px — larger than the desktop cover now is, which would have made the feature
       grow as the viewport shrank. Matched to the desktop width instead. */
    .kcfg-cover { max-width:228px; }
    .kcfg-inside-list { columns:1; }
}

/* ============================================================================
   Refinement pass — editorial proportions & typography (Featured Guide)
   ========================================================================== */
.kc2-wrap { max-width: var(--cx-container); }
/* Cover reduced to 60% of its previous size: 380px → 228px.

   The track is stated in px rather than as 34fr/66fr because a fractional track is a share
   of the container, so the cover's real width depended on the container and the max-width
   race — 34fr of 1180px is ~401px, which the 380px max-width then clipped. Two rules
   competing to define one width is why it could not be adjusted in one place. Now the track
   IS the cover width, and the copy takes whatever is left. */
.kcfg { grid-template-columns: minmax(0, 228px) 1fr; gap: clamp(1.8rem,3.4vw,2.6rem); align-items: stretch; }
/* The cover (portrait, often 500px+ tall) is naturally taller than the text content beside it.
   With no vertical alignment, the text simply sat at the top of the row, leaving the row's
   remaining height as unexplained empty space below it — exactly the "disconnected, book cover
   next to some text" feel flagged in review. Centring the text block against the cover's full
   height makes the two sides read as one deliberately composed unit instead. */
.kcfg-body { display: flex; flex-direction: column; justify-content: center; }
/* align-self matters now. The row used to be as tall as the cover, so `align-items: stretch`
   on the parent was harmless. At 228px the cover is ~304px tall and the copy beside it is
   taller, so the row height is set by the copy — and a stretched grid item with an
   aspect-ratio gets its height from the stretch and its width from max-width, breaking the
   3/4 box and letterboxing the artwork against the navy background. Opting this one item out
   of the stretch keeps the cover at its true proportions while the body still centres. */
.kcfg-cover { max-width: 228px; align-self: start; box-shadow: var(--cx-shadow-4); border-radius: var(--cx-radius-xs); }
/* Same tokens as the base rules above. This block is a later refinement pass at equal
   specificity, so whatever it sets wins — retokenising only the base rules would have
   left these raw values quietly overriding the scale. */
.kcfg-title { font-size: var(--kc-fs-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.kcfg-country { font-size: var(--kc-fs-micro); font-weight: 600; letter-spacing: .1em; }
.kcfg-topics-line { font-size: var(--kc-fs-meta); }
.kcfg-dek { font-size: var(--kc-fs-lead); line-height: 1.55; max-width: 60ch; color: #3f4652;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1.4rem; }
.kcfg-inside-list { columns: 2; column-gap: 2rem; margin-top: .7rem; }
.kcfg-inside-list li { font-size: var(--kc-fs-body); padding: .35rem 0 .35rem 1.2rem; }
.kcfg-metaline { font-family: var(--cx-display); font-weight: 600; font-size: var(--kc-fs-link);
    letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin: 1.1rem 0 1.2rem;
    padding-top: .85rem; border-top: 1px solid #e7e3d8; }

/* ============================================================================
   Refinement pass — individual Guide page (kgp-*) typography & widths
   ========================================================================== */
.kgp-wrap { max-width: var(--cx-container); }
.kgp-title { font-size: clamp(1.9rem,3.6vw,3.4rem); font-weight: 600; line-height: 1.07; max-width: 15ch; }
.kgp-hero-inner { max-width: var(--cx-container); }
.kgp-hero-inner .kgp-eyebrow, .kgp-hero-inner .kgp-country, .kgp-hero-inner .kgp-title,
.kgp-hero-inner .kgp-subtitle, .kgp-hero-inner .kgp-topics-line, .kgp-hero-inner .kgp-meta,
.kgp-hero-inner .kgp-actions { max-width: 700px; }
.kgp-subtitle { font-size: 1.05rem; }
.kgp-topics-line { font-size: .95rem; }
/* About — editorial body sizing and a constrained measure */
.kgp-about-body { max-width: 800px; }
.kgp-lead { font-size: 1.18rem; line-height: 1.55; color: #2b323b; }
.kgp-prose { font-size: 1.02rem; line-height: 1.68; }
.kgp-about-actions .kgp-btn--gold { font-size: .82rem; padding: .6rem 1.2rem; }
.kgp-about-cover img, .kgp-cover-fallback { max-width: 320px; }
/* Inside this guide — supporting description room, tighter rules */
.kgp-inside-topic { font-weight: 600; }
.kgp-inline-action { font-family: var(--cx-display); font-weight: 700; font-size: .85rem;
    color: #0B1626; text-decoration: none; border-bottom: 1px solid transparent; }
.kgp-inline-action:hover { color: #C9A227; border-bottom-color: #C9A227; }

/* Hero contextual nav links (§8) + compact closing CTA (§30) */
.kcx-nav { display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:1.8rem; }
.kcx-nav-sep { display:inline-block; width:1px; height:16px; background:rgba(247,247,244,.22); }
.kcx-nav-link { position:relative; font-family: var(--cx-display); font-weight:700; font-size:var(--kc-fs-link); color:#C9A227;
    text-decoration:none; padding-bottom:.3rem; border-bottom:1px solid transparent; transition:color var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease; }
.kcx-nav-link:hover { color:#e0be4b; border-bottom-color:rgba(224,190,75,.55); }
.kcx-nav-link span { display:inline-block; transition:transform var(--cx-duration-sm) ease; }
.kcx-nav-link:hover span { transform:translateX(3px); }
/* Compact bottom CTA — target ~280–320px, not another hero (§30) */
.kc2-cta { padding:clamp(2.4rem,4vw,3rem) 0; }
.kc2-cta-inner { align-items:center; }
.kc2-cta-copy h2 { font-size:clamp(1.4rem,2.4vw,1.9rem); margin:.2rem 0 .6rem; }
.kc2-cta-copy p { font-size:var(--kc-fs-lead); line-height:1.55; max-width:60ch; }

/* ============================================================================
   LIVE INTELLIGENCE — the three-panel section (.kli-*)
   ----------------------------------------------------------------------------
   Knowledge Centre only. Every selector is namespaced under .kli, so this cannot
   reach the Jurisdictions, Services, homepage or country templates. It reuses the
   --kc-fs-* scale defined at the top of this file rather than introducing sizes,
   and the navy/gold values already used throughout the Knowledge Centre rather
   than a second colour system.
   ========================================================================== */

.kli {
    /* Panel tokens, scoped to this section. Named so the three tonal variants below
       differ by ONE value each rather than by three independently-edited blocks. */
    --kli-navy:    #071525;
    --kli-panel:   #0C1D31;
    --kli-line:    rgba(255,255,255,.09);
    --kli-line-2:  rgba(255,255,255,.06);
    --kli-ink:     #F4F6F9;
    --kli-muted:   #97A3B4;   /* 5.6:1 on --kli-panel — metadata must stay readable */
    --kli-gold:    #D9B65A;   /* lifted from #C9A227 for dark grounds: 8.1:1 here */

    background: var(--kli-navy);
    padding: clamp(2.2rem, 4vw, 3.4rem) 0;
    color: var(--kli-ink);
}

.kli-intro { margin-bottom: clamp(1.2rem, 2vw, 1.6rem); }
.kli-eyebrow {
    font-family: var(--cx-display); font-weight: 700; font-size: var(--kc-fs-eyebrow);
    letter-spacing: .14em; text-transform: uppercase; color: var(--kli-gold); margin: 0 0 .35rem;
}
.kli-sub { font-size: var(--kc-fs-body); line-height: 1.5; color: var(--kli-muted); margin: 0; max-width: 60ch; }

/* Three equal columns. minmax(0,1fr) rather than 1fr so a long service name cannot
   push its column past its share and unbalance the row. */
.kli-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.25rem); }

/* Panels are flex columns with the footer pushed down by margin-top:auto on .kli-foot.
   That is what makes the three bottom CTAs share a baseline whatever each panel holds —
   without a fixed height, which would clip the longest one. */
.kli-panel {
    display: flex; flex-direction: column;
    background: var(--kli-panel);
    border: 1px solid var(--kli-line);
    border-radius: var(--cx-radius-xl);
    padding: clamp(1.1rem, 1.6vw, 1.4rem);
    /* Restrained depth: a hairline inner highlight along the top edge plus a soft shadow.
       No gradient, no glow — expensive rather than flashy. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.28);
    transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease;
}
.kli-panel:hover {
    border-color: rgba(217,182,90,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 46px rgba(0,0,0,.34);
}

/* Tonal identity: one token each, deliberately close to the base navy. Sampled to stay
   within ~4% of --kli-panel so the three read as one system in different light rather
   than as three coloured cards. */
.kli-panel--trend { --kli-panel: #0C1D31; }   /* navy / blue          */
.kli-panel--pub   { --kli-panel: #0A1F28; }   /* navy, teal undertone */
.kli-panel--watch { --kli-panel: #131B31; }   /* navy, plum undertone */

.kli-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.kli-head-text { min-width: 0; }
.kli-title {
    font-family: var(--cx-display); font-weight: 600; font-size: var(--kc-fs-h2);
    letter-spacing: .06em; text-transform: uppercase; color: var(--kli-ink); margin: 0 0 .25rem;
    text-wrap: balance;
}
.kli-note { font-size: var(--kc-fs-micro); line-height: 1.4; color: var(--kli-muted); margin: 0; text-wrap: pretty; }
.kli-icon {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; color: var(--kli-gold);
    border: 1px solid var(--kli-line); background: rgba(255,255,255,.03);
}
.kli-icon svg { width: 17px; height: 17px; }

/* ---- Tabs ---- */
.kli-tabs { display: flex; gap: 1.1rem; margin: 1rem 0 .2rem; border-bottom: 1px solid var(--kli-line-2); }
.kli-tab {
    appearance: none; background: none; border: 0; padding: 0 0 .5rem; cursor: pointer;
    font-family: var(--cx-display); font-weight: 600; font-size: var(--kc-fs-micro);
    color: var(--kli-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease; white-space: nowrap;
}
.kli-tab:hover { color: var(--kli-ink); }
.kli-tab[aria-selected="true"] { color: var(--kli-gold); border-bottom-color: var(--kli-gold); }
.kli-tab:focus-visible { outline: 2px solid var(--kli-gold); outline-offset: 3px; border-radius: var(--cx-radius-xs); }

/* ---- Rows ---- */
/* flex:1 on the body is the other half of the equal-height mechanism: the body absorbs
   the spare space so the footer lands at the bottom rather than under the last row. */
.kli-body { flex: 1; }
.kli-rows { list-style: none; margin: 0; padding: 0; }
.kli-row + .kli-row { border-top: 1px solid var(--kli-line-2); }

.kli-row-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .62rem .4rem; margin: 0 -.4rem; border-radius: var(--cx-radius);
    text-decoration: none; color: inherit;
    transition: background-color var(--cx-duration-sm) ease;
}
.kli-row-link:hover { background: rgba(255,255,255,.04); }
.kli-row-link:hover .kli-row-title { color: var(--kli-gold); }
.kli-row-link:focus-visible { outline: 2px solid var(--kli-gold); outline-offset: -2px; }

.kli-rank {
    flex: none; width: 1.1rem; text-align: center;
    font-family: var(--cx-display); font-weight: 600; font-size: var(--kc-fs-micro);
    color: var(--kli-muted);
}
.kli-flag { flex: none; width: 20px; height: 14px; border-radius: var(--cx-radius-xs); background-size: cover; background-position: 50%; }
.kli-flag--lg { width: 24px; height: 17px; }

/* min-width:0 lets the title ellipsis instead of forcing the row wider than its column. */
.kli-row-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.kli-row-title {
    font-size: var(--kc-fs-body); line-height: 1.35; color: var(--kli-ink);
    transition: color var(--cx-duration-sm) ease;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kli-row-meta { font-size: var(--kc-fs-label); line-height: 1.35; color: var(--kli-muted); }

.kli-change {
    flex: none; font-family: var(--cx-display); font-weight: 600;
    font-size: var(--kc-fs-label); white-space: nowrap;
}
.kli-change.is-up   { color: #6FCF97; }   /* 6.4:1 on the panel ground */
.kli-change.is-down { color: #E8907C; }   /* 6.1:1 — a real fall, not decoration */

/* ---- Publication rows ---- */
.kli-pubicon {
    flex: none; width: 30px; height: 30px; border-radius: var(--cx-radius);
    display: grid; place-items: center; border: 1px solid var(--kli-line);
}
.kli-pubicon svg { width: 15px; height: 15px; }
.kli-pubicon--guide   { color: var(--kli-gold);  background: rgba(217,182,90,.10); }
.kli-pubicon--insight { color: #6BC5B8;          background: rgba(107,197,184,.10); }

.kli-kind {
    font-family: var(--cx-display); font-weight: 700; font-size: var(--kc-fs-label);
    letter-spacing: .12em; text-transform: uppercase;
}
.kli-kind--guide   { color: var(--kli-gold); }
.kli-kind--insight { color: #6BC5B8; }

/* ---- Jurisdiction Watch ---- */
.kli-status {
    flex: none; font-family: var(--cx-display); font-weight: 600;
    font-size: var(--kc-fs-label); letter-spacing: .08em; text-transform: uppercase;
    color: var(--kli-ink); background: rgba(255,255,255,.07);
    border: 1px solid var(--kli-line); border-radius: var(--cx-radius-xs); padding: .16rem .42rem;
    white-space: nowrap;
}
.kli-when { flex: none; font-size: var(--kc-fs-label); color: var(--kli-muted); white-space: nowrap; }

/* ---- Footer ---- */
/* margin-top:auto is what aligns the three CTAs. Do not replace with a fixed height. */
.kli-foot { margin-top: auto; padding-top: .9rem; }
.kli-cta {
    display: inline-block; font-family: var(--cx-display); font-weight: 600;
    font-size: var(--kc-fs-link); color: var(--kli-gold); text-decoration: none;
}
.kli-cta:hover { color: #EBCE7C; text-decoration: underline; }
.kli-cta:focus-visible { outline: 2px solid var(--kli-gold); outline-offset: 3px; border-radius: var(--cx-radius-xs); }

/* ---- Responsive ----
   Readability outranks column count. Below 1080px three columns would force the status
   chip and the timestamp onto their own lines and start splitting jurisdiction names, so
   the row breaks to 2 + 1 and then stacks. */
@media (max-width: 1080px) {
    .kli-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The odd panel spans both columns rather than sitting half-width beside a gap. */
    .kli-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .kli-grid { grid-template-columns: minmax(0, 1fr); }
    .kli-panel:last-child:nth-child(odd) { grid-column: auto; }
    /* Tabs scroll rather than wrap mid-word on a narrow panel. */
    .kli-tabs { overflow-x: auto; scrollbar-width: none; }
    .kli-tabs::-webkit-scrollbar { display: none; }
    /* The timestamp is the least important thing in the row and the first to go. */
    .kli-when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kli-panel, .kli-row-link, .kli-row-title, .kli-tab { transition: none; }
}

/* ============================================================================
   RELATED KNOWLEDGE & GUIDANCE — the standard publication control
   ----------------------------------------------------------------------------
   ONE publication card, used by partials/related-knowledge on the jurisdiction,
   proposition and compare pages.

   PROPORTIONS ARE THE HOME PAGE'S. `.hp-card` on the home page is the reference
   the site is judged against, and this control had drifted well above it — 18px
   of body padding against the home card's ~10, .84/.78/.72rem type against
   .82/.74/.68, three-line clamps against two, a 3:2 photograph against 16:9 and
   a 20px gutter against 16. None of those is large on its own; together they
   made the same card read roughly a fifth bigger everywhere it appeared, which
   is what "everything seems much larger" was describing.

   The numbers below are copied from .hp-card in home.css rather than
   re-derived, so the two stay comparable. If the home card moves, this moves
   with it — and the right long-term answer is one of them importing the other,
   noted in the handover rather than done silently here.
   ============================================================================ */
.rk { margin: var(--cx-section-feature) 0 0; }

.rk-h2 {
    font-family: var(--cx-display); font-size: var(--cx-fs-label);
    font-weight: var(--cx-eyebrow-weight); letter-spacing: var(--cx-eyebrow-tracking);
    text-transform: uppercase; color: var(--cx-ink);
    margin: 0 0 var(--cx-space-5); padding-bottom: var(--cx-space-3);
    border-bottom: var(--cx-border);
}

/* Fixed four-up, matching .hp-insights-grid, NOT auto-fill.

   `repeat(auto-fill, minmax(240px, 1fr))` sizes cards from whatever container
   they happen to land in, so the same publication was a different width on
   every page that showed it — the one thing a standard control cannot do. Four
   tracks with a 16px gutter is the home page's own grid, and three items simply
   leave the fourth track empty rather than stretching to fill it. */
.rk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 900px) { .rk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rk-grid { grid-template-columns: 1fr; } }

.rk-card {
    display: flex; flex-direction: column; text-decoration: none;
    background: #FFF; border: var(--cx-card-border); border-radius: var(--cx-radius-lg);
    overflow: hidden;
    transition: border-color var(--cx-t-fast), box-shadow var(--cx-t-base), transform var(--cx-t-base);
}
.rk-card:hover {
    border-color: #CFD6E0; box-shadow: var(--cx-shadow-2);
    transform: translateY(var(--cx-hover-lift));
}

/* 16:9, as .hp-card-media. The 3:2 box was ~12% taller for the same width, and
   on a four-up row that is a visibly deeper band of photography before any text
   is reached. */
.rk-card-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cx-paper); }
.rk-card-cover img {
    width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%);
    display: block;
}

/* The badge keeps its bottom-left placement and its own contrast — it sits on a
   photograph of unknown brightness — but at .hp-badge's type size and padding.
   Placement is a design decision; scale was the fault. */
.rk-badge {
    position: absolute; left: .5rem; bottom: .5rem;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .45rem; border-radius: var(--cx-radius-xs);
    background: rgba(11, 22, 38, .88);
    color: #fff; font-size: .58rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    backdrop-filter: saturate(140%) blur(2px);
}
.rk-badge-ico { display: inline-flex; color: var(--cx-gold-soft, #D9B65A); }
.rk-badge-ico svg { display: block; width: 10px; height: 10px; }

/* .hp-card-body's padding exactly. flex:1 so the action pins to the bottom and
   a short summary does not leave the row ragged. */
.rk-card-body { display: flex; flex-direction: column; flex: 1; padding: .55rem .6rem .65rem; }

.rk-card-type {
    display: block; font-size: .58rem; font-weight: var(--cx-eyebrow-weight);
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--cx-gold-ink); margin-bottom: .3rem;
}

/* Two lines, not three. Three lines of a .84rem display face is most of the
   card's height on a publication whose title is already the longest string in
   it, and it is the single biggest contributor to the size difference. */
.rk-card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: var(--cx-display); font-size: .82rem; font-weight: 600;
    line-height: 1.28; color: var(--cx-ink); margin-bottom: .35rem;
    min-height: 2.1em;
}
.rk-card-summary {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .74rem; line-height: 1.42;
    color: var(--cx-ink-soft); margin-bottom: .5rem;
}
.rk-card-meta { display: block; font-size: .68rem; color: var(--cx-muted); margin-bottom: 0; }

/* margin-top:auto rather than a fixed .7rem — the action sits on the card's
   floor, which is what keeps a row of uneven summaries reading as one row. */
.rk-card-cta {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: auto; padding-top: .5rem;
    font-size: .72rem; font-weight: 700;
    color: var(--cx-gold-ink, #8A6E12);
}
.rk-card:hover .rk-card-cta { text-decoration: underline; }

@media (max-width: 599px) {
    .rk { margin-top: var(--cx-section-standard); }
}

/* ---- IN-PAGE ANCHOR OFFSET ------------------------------------------------
   The header is `position: sticky; top: 0`, so a browser scrolling to an anchor
   puts the target at viewport top — directly underneath it. The heading and the
   first row of cards end up hidden, which is what made "View all Coutts Guides"
   look as though it had jumped to the wrong place.

   scroll-margin-top reserves the header's own height plus a little breathing
   room, so the section heading lands just below the nav rather than behind it.

   Uses the header's own variable rather than a fixed pixel value: --cc-header-h
   is defined in nav.css and changes at breakpoints, and a hard-coded offset
   would drift out of step the moment the header height changes. The same
   pattern is already used for insight body headings and legal sections. */
#all-guides,
#explore-guides,
#insights,
#insight-cards,
#explore-insights,
#kcGuideList {
    scroll-margin-top: calc(var(--cc-header-h, 122px) + 24px);
}

@media (max-width: 900px) {
    /* The header is shorter on small screens, so the reservation follows it down
       rather than leaving a large empty gap above the heading. */
    #all-guides,
    #explore-guides,
    #insights,
    #insight-cards,
    #explore-insights,
    #kcGuideList {
        scroll-margin-top: calc(var(--cc-header-h, 84px) + 16px);
    }
}

/* Compare link beneath the Insight's tagged jurisdictions. One quiet line, not a button —
   it is a route onward for a reader already deep in an article, not a call to action
   competing with the publication. */
.kins-juris-compare { margin: 1rem 0 0; font-size: .84rem; }
.kins-juris-compare a { color: var(--cx-gold-ink, #8A6E12); font-weight: 700; text-decoration: none; }
.kins-juris-compare a:hover { text-decoration: underline; }

/* Superseding notice on an older publication. Visible without shouting: it points a
   reader at newer analysis, it does not disown the article they are reading. */
.kins-updated {
    margin: 0 0 1.6rem; padding: .85rem 1.1rem;
    background: var(--cx-paper, #F7F5EF);
    border-left: 3px solid var(--cx-gold-soft, #D9B65A);
    border-radius: 0 6px 6px 0;
    font-size: .86rem; line-height: 1.55; color: var(--cx-ink-soft, #33404F);
}
.kins-updated strong { color: var(--cx-navy, #0B1626); }
.kins-updated a { color: var(--cx-gold-ink, #8A6E12); font-weight: 700; }