/* public/css/home.css */
/* ============================================================================
   HOMEPAGE
   ----------------------------------------------------------------------------
   Self-contained, namespaced under .hp, loaded only on the homepage.

   PALETTE, from the brief — with one measured correction.

   Gold #D4A035 on navy #0B1626 is 7.67:1. Excellent, and used freely on dark.
   Gold #D4A035 on white is 2.37:1 — a clear AA failure, so it never carries body
   text on a light surface. Where a gold link is needed on white, #8A6A1E (5.05:1)
   does the job at the same hue. Where gold is the background, the label is navy,
   not white: white on gold is that same failing 2.37:1.

   None of this changes how the design looks. It changes which of two nearly
   identical golds carries the text.
   ========================================================================== */

.hp {
    --navy:      #0B1626;
    --navy-2:    #132139;
    --gold:      #D4A035;   /* surfaces, rules, icons, text on dark */
    --gold-text: #8A6A1E;   /* the same gold, dark enough for text on white */
    --ink:       #12203A;
    --body:      #5A6472;   /* 6.0:1 on white */
    --line:      #E7E9ED;
    --paper:     #F7F8FA;
    --card:      #FFFFFF;
    --radius:    14px;
    --shadow:    0 10px 34px rgba(11,22,38,.08);
    --shadow-lg: 0 22px 60px rgba(11,22,38,.14);

    background: var(--paper);
    color: var(--body);
    font-family: var(--cx-sans);
}

.hp-wrap { width: 100%; max-width: var(--cx-container-wide); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* Element-plus-class selectors like `.hp h1` (specificity 0,1,1) outrank a plain
   class like `.hp-hero-title` (0,1,0), which is how the hero headline ended up navy
   on navy — invisible. Set the family here and let each component own its own
   colour, so a component class is never fighting a blanket rule it cannot win. */
.hp h1, .hp h2, .hp h3 { font-family: var(--cx-display); }
.hp h2, .hp h3 { color: var(--ink); }
.hp-section-head h2, .hp-panel-title { color: var(--ink); }

.hp-kicker {
    font-size: .74rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
}

/* ---- Hero ----------------------------------------------------------------- */
.hp-hero {
    position: relative; overflow: hidden;
    /* A gradient stands in when the photograph is missing or still loading, so the
       hero never renders as a flat empty band. */
    background: radial-gradient(120% 90% at 78% 20%, #1B2E4C 0%, var(--navy) 58%);
}
.hp-hero-media { position: absolute; inset: 0; }
/* Every city is stacked in the same box and cross-faded. Opacity only — no
   transform, no repaint of anything but the image layer, so the rotation costs
   nothing on the compositor even on a phone. */
.hp-hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block;
    opacity: 0; transition: opacity 1.6s ease-in-out;
}
.hp-hero-img.is-active { opacity: 1; }
.hp-hero-media img[src=""], .hp-hero-media img:not([src]) { display: none; }

/* Quiet label so a visitor knows what they are looking at. Bottom right, out of
   the way of the headline. */
.hp-hero-city {
    position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 2; margin: 0;
    font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.hp-hero-city::before {
    content: ''; display: inline-block; width: 1.4rem; height: 1px;
    background: var(--gold); vertical-align: middle; margin-right: .6rem;
}
.hp-hero-media::after {
    content: ''; position: absolute; inset: 0;
    /* Weighted to the left so the headline always has contrast, whatever the photo. */
    /* 70-80% per the brief, weighted left so the headline always has contrast
       whichever city is showing — the ten photographs have very different
       luminance and a flat overlay would work for some and not others. */
    background: linear-gradient(100deg,
    rgba(11,22,38,.94) 0%, rgba(11,22,38,.86) 32%,
    rgba(11,22,38,.74) 60%, rgba(11,22,38,.66) 100%);
}
.hp-hero-inner {
    position: relative; z-index: 1;
    /* Roughly 22% off top and bottom. The hero was doing the job of a full screen
       when it only needs to introduce and point onward. */
    padding: clamp(2.6rem, 6.5vw, 5.2rem) clamp(1rem, 4vw, 2.5rem) clamp(4.4rem, 9vw, 6.8rem);
    max-width: 1400px;
}
.hp-hero .hp-hero-title {
    font-family: var(--cx-display);
    font-size: clamp(1.95rem, 4.2vw, 3.2rem); line-height: 1.1;
    font-weight: 800; letter-spacing: -.025em; color: #fff;
    margin: 0 0 1rem; text-wrap: balance;
}
.hp-hero-sub {
    font-size: clamp(.95rem, 1.3vw, 1.04rem); line-height: 1.55;
    color: rgba(255,255,255,.86); max-width: 36ch; margin: 0 0 1.6rem;
}
.hp-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hp-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 0 var(--cx-btn-pad-x); border-radius: var(--cx-btn-radius);
    font-weight: var(--cx-btn-weight); font-size: var(--cx-btn-fs); text-decoration: none;
    transition: transform var(--cx-duration-sm) ease, filter var(--cx-duration-sm) ease; min-height: var(--cx-btn-h);}
.hp-btn:hover { transform: translateY(var(--cx-hover-lift)); }
/* Navy on gold: 7.67:1. White on gold would be 2.37:1. */
.hp-btn-gold    { background: var(--gold); color: var(--navy); }
.hp-btn-gold:hover { filter: brightness(1.06); color: var(--navy); }
.hp-btn-ghost   { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hp-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.hp-btn-navy    { background: var(--navy); color: #fff; }
.hp-btn-navy:hover { color: #fff; filter: brightness(1.15); }
.hp-btn-outline { border: 2px solid var(--navy); color: var(--navy); }
.hp-btn-outline:hover { background: var(--navy); color: #fff; }

/* ---- Feature cards — lifted over the hero edge ---------------------------- */
.hp-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    background: var(--card); border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(212,160,53,.18), 0 0 30px rgba(212,160,53,.1),
    var(--shadow-lg);
    margin-top: clamp(2rem, 3vw, 3rem); position: relative; z-index: 1;
    overflow: hidden;
}
.hp-feature {
    display: flex; gap: .6rem; padding: .3rem .8rem;
    text-decoration: none; border-right: 1px solid var(--line);
}
.hp-feature:last-child { border-right: 0; }
.hp-feature:hover { background: #FCFBF7; }
.hp-feature-icon {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: #FAF3E2; color: var(--gold-text);
    display: grid; place-items: center;
}
.hp-feature-icon svg { width: 17px; height: 17px; }
.hp-feature-title { display: block; font-family: var(--cx-display); font-weight: 700;
    font-size: 1.06rem; color: var(--ink); margin-bottom: .3rem; }
.hp-feature-text  { display: block; font-size: .92rem; line-height: 1.5; color: var(--body); }
.hp-feature-link  { display: inline-block; margin-top: .4rem; font-size: .88rem;
    font-weight: 700; color: var(--gold-text); }

/* ---- Strips --------------------------------------------------------------- */
.hp-strip { padding: clamp(1.35rem, 2.7vw, 2.1rem) clamp(1rem, 4vw, 2.5rem) 0; }
.hp-strip-head { display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .75rem; }
.hp-strip-label {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-text);
}
.hp-strip-label svg { width: 17px; height: 17px; }

.hp-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.hp-chip {
    background: var(--navy); color: #fff; text-decoration: none;
    padding: .5rem 1.05rem; border-radius: 100px; font-size: .85rem; font-weight: 500;
    transition: background var(--cx-duration-sm) ease;
}
.hp-chip:hover { background: var(--navy-2); color: var(--gold); }

.hp-countries {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem; grid-auto-rows: 1fr; align-content: start;
}
.hp-country {
    display: flex; align-items: center; gap: .9rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--cx-radius-lg);
    padding: .8rem .95rem; text-decoration: none;
    /* One height for every tile, whether the name runs to one line or three. Cards of
       differing heights in a grid leave ragged gaps, which reads as a fault rather than
       as content. */
    min-height: 78px;
    transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease;
}
.hp-country:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.hp-country .fi {
    width: 34px; height: 24px; border-radius: var(--cx-radius-xs); flex: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.hp-country-name {
    display: block; font-weight: 700; font-size: .96rem; color: var(--ink);
    line-height: 1.25; margin-bottom: .12rem;
    /* Long names wrap rather than being clipped — "United Arab Emirates" must not become
       "United Arab Emir…". But `anywhere` was too strong: it permits a break at any
       character even when the word would fit, which is what turned "Seychelles" into
       "Seychelle s". `break-word` only breaks a word that genuinely cannot fit. */
    overflow-wrap: break-word;
}
.hp-country-note {
    display: block; font-size: .8rem; color: #8A929E; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Sections ------------------------------------------------------------- */
/* Section rhythm tightened by about a fifth throughout, so more of the page
   is visible before the first scroll without changing any proportion. */
.hp-section { padding: calc(var(--coutts-section-standard, 48px) / 2) clamp(1rem, 4vw, 2.5rem); }
.hp-section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: .75rem; margin-bottom: 1.15rem;
}
.hp-section-head h2 { font-size: clamp(1rem, 2.2vw, 1rem); font-weight: 800;
    letter-spacing: -.015em; margin: 0; }
.hp-more { font-size: .88rem; font-weight: 700; color: var(--gold-text); text-decoration: none; }
.hp-more:hover { color: var(--ink); }

/* ---- Horizontal rails -----------------------------------------------------
   Native scroll-snap rather than a carousel library: it swipes correctly on
   touch for free, keeps keyboard scrolling, and adds no JS to the critical path.
   The buttons are progressive enhancement over something that already works. */
.hp-rail { position: relative; }
/* Flex with an explicit basis rather than grid-auto-columns with percentages.
   Percentage track sizing inside a horizontally scrolling container resolves
   unpredictably and was producing eight cramped cards where four were intended.
   A fixed basis is predictable at every width, and clamp() keeps it sensible
   from phone to ultrawide. */
.hp-rail-track {
    display: flex; align-items: stretch;
    gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: .3rem .25rem 1rem;
    scrollbar-width: none;
}
.hp-rail-track::-webkit-scrollbar { display: none; }
.hp-rail-track > * { scroll-snap-align: start; flex: 0 0 clamp(150px, 48vw, 172px); }
@media (min-width: 640px)  { .hp-rail-track > * { flex-basis: 190px; } }
/* Standard card size across the home page — six complete cards visible at desktop rather
   than four, since each card is now ~60% of its previous width; still computed as a fraction
   of the actual container width (never a fixed px guess), so no partial card ever peeks off
   the edge regardless of container width. */
@media (min-width: 1200px) { .hp-rail-track > * { flex-basis: calc((100% - 5 * .7rem) / 6); } }

.hp-rail-btn {
    position: absolute; top: 42%; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow); display: none;
}
.hp-rail-prev { left: -14px; }
.hp-rail-next { right: -14px; }
@media (min-width: 992px) { .hp-rail-btn { display: block; } }
.hp-rail-btn:hover { border-color: var(--gold); color: var(--gold-text); }

/* ---- Cards ---------------------------------------------------------------- */
.hp-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--cx-radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow var(--cx-duration-sm) ease, transform var(--cx-duration-sm) ease;
}
.hp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(var(--cx-hover-lift)); }
.hp-card-media { position: relative; display: block; aspect-ratio: 16/9; background: #EDEFF3; }
.hp-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block; }
/* Guide covers are portrait publications, not landscape editorial photography — same visual
   distinction established across the Knowledge Centre between Guides (cover-led) and Insights
   (photo-led). */

/* The cover takes its shape from the artwork, matching .kcg2-cover in knowledge.css.

   This was `aspect-ratio: 3/4` with `max-height: 210px`, and the cap wins — so on a 190px
   card the real box was about 0.9, not 3/4. The generic .hp-card-media img rule above then
   fitted the cover with `object-fit: cover`, which fills but CROPS: the top and bottom of
   every publication cover were being cut off to fit a box that was never the right shape.

   No fixed ratio can be correct here. GuidePdfIngestService::renderCover() rasterises page 1
   of each source PDF and preserves that page's ratio without cropping or resizing, so an A4
   guide and a US-Letter guide genuinely differ. Letting the image set the height is the only
   version that shows the whole cover, edge to edge, for every guide.

   Note this only overrides the --cover variant. Listing and Insight cards keep the 16/9 box
   and `object-fit: cover`, which is right for editorial photography — a photo can be cropped
   without losing information, a cover with a title on it cannot. */
.hp-card-media--cover { aspect-ratio: auto; max-height: none; background: transparent; }
.hp-card-media--cover img {
    /* contain, not fill (§25). With height:auto the box already matches the
       image's ratio so `fill` did not distort in practice — but it is the one
       keyword that WILL stretch a photograph the moment any rule constrains
       height, and a latent distortion bug in a guide-cover component is worth
       closing while we are here. Renders identically today. */
    position: static; width: 100%; height: auto; object-fit: contain;
}
/* 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 collapse to nothing. */
.hp-card-media--cover:not(:has(img)) { aspect-ratio: 3/4; background: #0B1626; }
.hp-badge {
    position: absolute; top: .5rem; left: .5rem;
    background: var(--gold); color: var(--navy);
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    padding: .16rem .45rem; border-radius: var(--cx-radius-xs);
}

/* ---- Latest Coutts Insights — uniform 3-column grid ----
   Reuses .hp-card (the same component as Recently Added Listings/Latest Guides) rather than a
   bespoke Featured+Supporting layout — tested against a Featured treatment and a 4-column
   grid; 3-up read best given how long Coutts Insight titles typically run. */
/* ---- Latest Coutts Insights — uniform 4-column grid ----
   Reuses .hp-card (the same component as Recently Added Listings/Latest Guides). Re-tested
   against real, long Coutts Insight titles at 4-up before adopting — row heights stay even
   throughout via the shared line-clamp on .hp-card-body h3, with only the longest title or two
   per set of 8 picking up an ellipsis. */
.hp-insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

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

.hp-badge-dark { background: var(--navy); color: #fff; letter-spacing: .1em; }
.hp-card-body { padding: .55rem .6rem .65rem; display: flex; flex-direction: column; flex: 1; }
/* Two lines for a title, three for the description, ellipsis beyond.
   Str::limit already truncates by character count, but characters are the wrong
   unit — the same 84 characters is two lines in one card and five in another,
   and a rail of uneven cards reads as broken rather than varied. Clamping by
   LINE keeps every card the same height whatever the copy does. */
.hp-card-body h3 {
    font-size: .82rem; line-height: 1.28; margin: 0 0 .35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.1em;
}
.hp-card-body h3 a { color: var(--ink); text-decoration: none; }
.hp-card-body h3 a:hover { color: var(--gold-text); }
.hp-card-meta { display: flex; align-items: center; gap: .3rem; font-size: .68rem;
    color: #8A929E; margin: 0 0 .35rem; }
.hp-card-meta .fi { width: 15px; height: 11px; border-radius: var(--cx-radius-xs); }
.hp-card-text {
    font-size: .74rem; line-height: 1.42; margin: 0 0 .5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-card-cat  { font-size: .66rem; color: #98A0AC; margin: 0 0 .55rem; }
.hp-card-link { margin-top: auto; font-size: .72rem; font-weight: 700; color: var(--gold-text); }

/* ---- Panels --------------------------------------------------------------- */
.hp-triple { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.hp-duo    { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 992px) {
    /* Two equal columns in both panel rows, so the four panels read as a balanced 2×2.
       (Was repeat(3,1fr) — a three-column row holding only two panels, which left an empty
       slot and made the top row look narrower and lopsided than the row beneath it.) */
    .hp-triple { grid-template-columns: 1fr 1fr; }
    .hp-duo    { grid-template-columns: 1fr 1fr; }
}
/* All four discovery panels in one grid: equal columns, and equal-height panels per row. */
/* With "Explore by Business Need" removed, Jurisdiction Spotlight is now the only
   bottom-row panel — spanning both columns avoids it sitting alone beside an empty gap. */
.hp-quad { align-items: stretch; }
.hp-quad > .hp-panel { height: 100%; }
.hp-quad .hp-panel--spotlight { grid-column: 1 / -1; }
@media (min-width: 992px) {
    .hp-quad .hp-panel--spotlight { max-height: 260px; }
}

/* Gold edge glow on the panels. Low opacity on purpose — against white, a strong
   halo reads as a highlighted error state rather than as lighting. It lifts on
   hover so the panel feels responsive without moving. */
.hp-panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--cx-radius-lg); padding: clamp(.55rem, 1vw, .8rem);
    /* Softened considerably — the gold halo was making an ordinary utility panel read as a
       highlighted, prominent feature rather than compact reference content. */
    box-shadow: var(--cx-shadow-1);
    transition: box-shadow .22s ease;
    display: flex;
    flex-direction: column;
}
.hp-panel:hover { box-shadow: var(--cx-shadow-2); }

/* The list fills what the heading leaves, and its rows share that space evenly. Five
   items or three, the panel is full and the rhythm matches its neighbour. */
/* Lists fill the panel and space their rows evenly. */
.hp-panel > .hp-rank:not([hidden]),
.hp-panel > .hp-updates {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Grids fill it too, but stay grids — turning one into a flex column would stack the
   tiles in a single line. `align-content: start` keeps the rows together at the top
   rather than stretching a two-row grid across the full height. */
.hp-panel > .hp-countries,
.hp-panel > .hp-grid-3 { flex: 1 1 auto; }

/* A hidden tab panel must stay hidden. `display: flex` in the rule above would override
   the [hidden] attribute, and all three tabs would render stacked — the classic way a
   layout fix turns into a content bug. */
.hp-panel > .hp-rank[hidden] { display: none; }
.hp-panel-head { display: flex; justify-content: space-between; align-items: center;
    gap: .6rem; margin-bottom: .6rem; }
.hp-panel-title {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .92rem; font-weight: 800; margin: 0 0 .6rem;
}
.hp-panel-head .hp-panel-title { margin: 0; }
.hp-panel-title svg { width: 15px; height: 15px; color: var(--gold-text); }

.hp-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: .55rem; }
.hp-tab {
    background: none; border: 0; cursor: pointer;
    padding: .35rem .55rem; font-size: .72rem; font-weight: 600; color: #8A929E;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hp-tab.is-active { color: var(--ink); border-bottom-color: var(--gold); }

.hp-rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
/* One row rhythm across both panels. The ranking and the feed previously differed by
   nearly twenty pixels a row, which is what made the two lists look like different
   components rather than two views of the same idea. */
.hp-rank li, .hp-updates li {
    display: flex; align-items: center; gap: .5rem;
    padding: .32rem 0; min-height: 28px;
    border-bottom: 1px solid #F1F3F6;
}
.hp-rank li:last-child, .hp-updates li:last-child { border-bottom: 0; }
.hp-rank-n {
    flex: none; width: 21px; height: 21px; border-radius: 50%;
    background: var(--paper); color: #8A929E;
    font-size: .62rem; font-weight: 700; display: grid; place-items: center;
}
.hp-rank a { flex: 1; font-size: .74rem; color: var(--ink); text-decoration: none; }
.hp-rank a:hover { color: var(--gold-text); }
.hp-rank-flag { flex: none; width: 28px; height: 20px; border-radius: var(--cx-radius-xs);
    box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.hp-rank-change { font-size: .64rem; font-weight: 700; color: #1E7B4D; white-space: nowrap; margin-left: .4rem; }
.hp-rank-change.is-down { color: #B3261E; }

.hp-updates { list-style: none; margin: 0; padding: 0; }
.hp-update-icon {
    flex: none; width: 32px; height: 32px; border-radius: var(--cx-radius);
    background: #FAF3E2; color: var(--gold-text); display: grid; place-items: center;
}
.hp-update-icon svg { width: 18px; height: 18px; }
/* Distinct background per content type — shape alone (a book vs a building vs a document) is
   too subtle to tell apart at a glance in a compact feed; colour gives an immediate second
   signal, the same way a flag immediately reads as "jurisdiction" in the Trending panel. */
.hp-update-icon--guide   { background: #FAF3E2; color: #8A6A1E; }
.hp-update-icon--insight { background: #E9EEF7; color: #2F5FA8; }
.hp-update-icon--service { background: #EAF3EC; color: #2E7D4F; }
.hp-update-icon--article { background: #F2ECF7; color: #6B4A9E; }
.hp-updates a { display: block; font-size: .73rem; font-weight: 600;
    color: var(--ink); text-decoration: none; line-height: 1.3; }
.hp-updates a:hover { color: var(--gold-text); }
.hp-update-when { display: block; font-size: .64rem; color: #98A0AC; margin-top: .1rem; }

.hp-partners { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hp-partner {
    border: 1px solid var(--line); border-radius: var(--cx-radius-lg); padding: 1rem .75rem;
    text-align: center; text-decoration: none; background: var(--card);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    min-height: 92px;
}
.hp-partner:hover { border-color: var(--gold); }
.hp-partner img { max-width: 100%; height: 30px; object-fit: contain; }
.hp-partner-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.hp-partner-note { font-size: .74rem; color: #98A0AC; }

.hp-grid-3 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
    /* Rows sized to the tallest tile in each, so a two-line label does not leave its
       neighbours short. */
    grid-auto-rows: 1fr;
    align-content: start;
}
.hp-country--tile { flex-direction: row; }

/* Featured Jurisdictions reverted to the plain flag+text tile (.hp-country / .hp-country--tile,
   defined earlier in this file) — the photographic card treatment tried here didn't hold up in
   review (oversized tiles, a tiny flag lost against a plain dark background when the photo
   itself wasn't showing) and the plain tile was explicitly preferred. Kept .hp-panel--juris
   since the panel wrapper still uses it. */
.hp-panel--juris { display: flex; flex-direction: column; }

.hp-topic {
    display: flex; align-items: center; gap: .7rem;
    border: 1px solid var(--line); border-radius: var(--cx-radius-lg); padding: .8rem;
    text-decoration: none; background: var(--card);
    /* Matched to the jurisdiction tiles opposite: the two panels sit side by side and
       their contents should share a rhythm. */
    min-height: 78px;
}
.hp-topic:hover { border-color: var(--gold); }
.hp-topic-icon {
    flex: none; width: 36px; height: 36px; border-radius: var(--cx-radius);
    background: var(--navy); color: var(--gold); display: grid; place-items: center;
}
.hp-topic-icon svg { width: 18px; height: 18px; }
.hp-topic-name {
    display: block; font-weight: 700; font-size: .87rem; color: var(--ink);
    line-height: 1.25; overflow-wrap: break-word;
}
.hp-topic-note { display: block; font-size: .76rem; color: #98A0AC; }

/* ---- Statistics ----------------------------------------------------------- */
/* Reads as a divider between the browsing half of the page and the call to
   action, so it is deliberately shallow. */
/* margin-bottom was 90px. That gap existed to separate this navy band from the "Explore the
   Right Jurisdiction" CTA box that used to sit directly beneath it in the footer partial.
   With that box removed, the 90px had nothing to separate — it just left an empty pale strip
   above the legal disclaimer, since .post-content-band's #F7F8FA and the body background are
   the same colour and read as one continuous void.

   The disclaimer's own 1rem top padding now provides the breathing room. */
.hp-stats { background: var(--navy); padding: clamp(1rem, 1.6vw, 1.3rem) 0; margin-bottom: 0; }
/* Four even columns.

   auto-fit sized each column to its content and let the row reflow, so four statistics
   could land as three-plus-one on a mid-width screen — which reads as a mistake rather
   than a layout. The count is fixed at four now, so the grid can be explicit: four across
   on desktop, two on tablet, one on a phone. Even columns at every width. */
.hp-stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }

@media (max-width: 900px) {
    .hp-stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
    /* The divider belongs between columns, not between rows — at two-up it would draw a
       line down the middle of a wrapped row and look like a mistake. */
    .hp-stat:nth-child(odd)::before { display: none; }
}

@media (max-width: 520px) {
    .hp-stat-row { grid-template-columns: 1fr; }
    .hp-stat + .hp-stat::before { display: none; }
}
.hp-stat { text-align: center; position: relative; padding: 0 .7rem; display: block;
    text-decoration: none; color: inherit; transition: transform var(--cx-duration-sm) ease; }
.hp-stat:hover { transform: translateY(var(--cx-hover-lift)); }
.hp-stat:hover .hp-stat-value, .hp-stat:hover .hp-stat-suffix { filter: brightness(1.15); }
.hp-stat + .hp-stat::before {
    content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
    width: 1px; background: rgba(212,160,53,.22);
}
.hp-stat-icon { display: block; color: var(--gold); margin: 0 auto .2rem; }
.hp-stat-icon svg { width: 17px; height: 17px; }
.hp-stat-value, .hp-stat-suffix {
    font-family: var(--cx-display); font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    font-weight: 800; color: var(--gold); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hp-stat-label { display: block; color: #fff; font-size: .72rem; font-weight: 600; margin-top: .2rem; }
.hp-stat-sub   { display: block; color: rgba(255,255,255,.62); font-size: .64rem; }

/* ---- Consultation banner --------------------------------------------------- */
.hp-cta { background: var(--gold); padding: clamp(.9rem, 1.6vw, 1.3rem) 0; }
.hp-cta-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Navy on gold: 7.67:1. */
.hp-cta h2 { color: var(--navy); font-size: clamp(1.05rem, 1.8vw, 1.35rem); margin: 0 0 .25rem; font-weight: 800; }
.hp-cta p  { color: rgba(11,22,38,.78); margin: 0; font-size: .82rem; }
.hp-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---- Quality floor --------------------------------------------------------- */
.hp a:focus-visible, .hp button:focus-visible {
    outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: var(--cx-radius-sm);
}
.hp-stats a:focus-visible, .hp-hero a:focus-visible {
    outline-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
    .hp *, .hp *::before, .hp *::after {
        animation-duration: .001ms !important; transition-duration: .001ms !important;
    }
    .hp-rail-track { scroll-behavior: auto; }
}

/* Count as a quiet third line on the panel tiles — the tagline says why the
   jurisdiction matters, the number says how much we have there. Both useful,
   in that order of prominence. */
.hp-country-count { display: block; font-size: .72rem; color: #A6ADB8; margin-top: .1rem; }


/* ---- Trailing layout blocks ------------------------------------------------
   The free-guide panel and disclaimer come from the shared layout, not from the
   homepage, and they were landing on top of the gold consultation band. They are
   given their own space here rather than being moved, so every page that renders
   them gets the fix rather than just this one.

   If the panel carries a negative margin in the layout, remove it there too —
   this neutralises the symptom, and the cause is one line in the layout file. */
.hp + *, .hp ~ .free-guide, .hp ~ .guide-cta, .hp ~ .disclaimer {
    margin-top: 0;
    position: relative;
    z-index: 1;
}
.hp-cta { position: relative; z-index: 2; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* ---- Latest From Coutts — type labels (Panel 2) ---------------------------- */
.hp-panel-sub { font-size: .76rem; color: #98A0AC; margin: -.4rem 0 1rem; letter-spacing: .01em; }
.hp-update-type {
    display: block; font-family: var(--cx-display); font-weight: 700; font-size: .66rem;
    letter-spacing: .12em; text-transform: uppercase; color: #C9A227; margin-bottom: .12rem;
}

/* ---- Jurisdiction Spotlight (Panel 3) — photographic, one jurisdiction, existing Country
   Hero Image as background. Replaces six oversized flag-tile cards with one properly-scaled
   discovery module. ---- */
.hp-panel--spotlight { padding: 0; overflow: hidden; }
.hp-spotlight { position: relative; display: block; height: 100%; min-height: 220px; text-decoration: none; }
.hp-spotlight-media { position: absolute; inset: 0; display: block; }
.hp-spotlight-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block; }
/*
 * Scrim.
 *
 * Two layers rather than one. The gradient carries the composition as before; the second
 * stop deepens only the lower third, where every text element sits, so a pale photograph
 * (snow, desert, bright sky) cannot wash the type out. The upper image stays essentially
 * untouched, so the photograph is not flattened to buy legibility.
 */
.hp-spotlight-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11,22,38,0) 42%, rgba(11,22,38,.55) 72%, rgba(11,22,38,.95) 100%),
        linear-gradient(180deg, rgba(11,22,38,.18) 0%, rgba(11,22,38,.30) 45%, rgba(11,22,38,.55) 100%);
}
.hp-spotlight-body {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    height: 100%; padding: .8rem .9rem .85rem; justify-content: flex-end; gap: .12rem;
}
.hp-spotlight-eyebrow {
    font-family: var(--cx-display); font-weight: 700; font-size: .6rem; letter-spacing: .13em;
    text-transform: uppercase; color: #C9A227; margin-bottom: .3rem;
}
.hp-spotlight-name {
    display: flex; align-items: center; gap: .45rem;
    font-family: var(--cx-display); font-weight: 800; font-size: 1.15rem; color: #fff; line-height: 1.15;
}
.hp-spotlight-name .fi { width: 24px; height: 17px; border-radius: var(--cx-radius-xs); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.hp-spotlight-note { font-size: .76rem; color: rgba(247,245,239,.8); margin-top: .3rem; }
.hp-spotlight-count {
    font-size: .68rem; font-weight: 600; color: #C9A227; margin-top: .3rem;
    letter-spacing: .02em;
}
.hp-spotlight-cats {
    display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem;
}
.hp-spotlight-cat {
    font-size: .64rem; font-weight: 600; letter-spacing: .01em;
    color: rgba(247,245,239,.92);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px; padding: .2rem .5rem;
    backdrop-filter: blur(2px);
}
.hp-spotlight-go {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem;
    font-family: var(--cx-display); font-weight: 700; font-size: .74rem; color: #fff;
}
.hp-spotlight:hover .hp-spotlight-go { color: #C9A227; }
.hp-spotlight-go span { transition: transform var(--cx-duration-sm) ease; }
.hp-spotlight:hover .hp-spotlight-go span { transform: translateX(3px); }

/* ---- Explore by Business Need (Panel 4) — deep navy, compact rows, direct commercial
   pathways. Replaces the Coutts Intelligence panel, which was repeating the same Insight
   already shown in the dedicated Insights section further up the page. ---- */
.hp-panel--needs { background: linear-gradient(160deg, #0B1626 0%, #07111F 100%); border-color: #10233b; }
.hp-panel-title--light { color: #fff; }
.hp-needs { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.hp-needs li { border-bottom: 1px solid rgba(247,245,239,.1); }
.hp-needs li:last-child { border-bottom: none; }
.hp-needs a {
    display: flex; align-items: center; gap: .55rem; padding: .5rem 0;
    text-decoration: none; color: #F7F5EF; font-family: var(--cx-display); font-weight: 600; font-size: .78rem;
}
.hp-needs a:hover { color: #C9A227; }
.hp-needs-icon {
    flex: none; width: 22px; height: 22px; border-radius: var(--cx-radius-sm);
    background: rgba(201,162,39,.14); color: #C9A227; display: grid; place-items: center;
}
.hp-needs-icon svg { width: 12px; height: 12px; }
.hp-needs-go { margin-left: auto; color: #C9A227; transition: transform var(--cx-duration-sm) ease; }
.hp-needs a:hover .hp-needs-go { transform: translateX(2px); }

/* ============================================================================
   LIVE INTELLIGENCE BAND (.hp-intel) — homepage discovery panels, dark treatment
   ----------------------------------------------------------------------------
   Matches the Knowledge Centre's .kli panels so the same idea looks the same in
   both places. The panels' markup and data are untouched; this only re-grounds
   them.

   EVERY selector below is prefixed .hp-intel. .hp-panel, .hp-rank, .hp-updates
   and .hp-tab all have light-ground rules earlier in this file that other parts
   of the page may rely on, so this must not be written as bare overrides — the
   prefix is what keeps the restyle inside this one band.

   Colour values are the same as knowledge.css's .kli block rather than new ones:
   one idea, one palette.
   ========================================================================== */

.hp-intel {
    --i-navy:   #071525;
    --i-panel:  #0C1D31;
    --i-line:   rgba(255,255,255,.09);
    --i-line-2: rgba(255,255,255,.06);
    --i-ink:    #F4F6F9;
    --i-muted:  #97A3B4;   /* 6.6:1 on the panel ground */
    --i-gold:   #D9B65A;   /* the brand gold lifted for dark grounds — 8.7:1 */

    /* No background of its own.

       The band was painting itself deep navy, which put dark panels on a dark ground — they
       lost their edges and the whole block read as one large void rather than three cards.
       The reference has the panels sitting on the page's normal light paper, exactly like the
       Guides cards above them, with the dark statistics strip below providing the contrast.

       The section keeps its padding and its tokens; it just stops painting. */
}

/* Colour moved onto the panels. On .hp-intel it would have applied to the light ground too,
   leaving any text outside a panel white on near-white. */
.hp-intel .hp-panel { color: var(--i-ink); }

/* The band supplies its own vertical rhythm; .hp-section's margins would otherwise
   leave the dark ground floating away from the statistics strip below it. */
.hp-intel > .hp-wrap { padding-top: clamp(1.8rem, 3vw, 2.6rem); padding-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.hp-intel > .hp-wrap.hp-section { margin: 0 auto; }

/* ---- Panels ---- */
.hp-intel .hp-panel {
    background: var(--i-panel);
    border: 1px solid var(--i-line);
    border-radius: var(--cx-radius-xl);
    padding: clamp(.9rem, 1.4vw, 1.2rem);
    /* Hairline inner highlight along the top edge plus a soft drop — depth without a
       gradient or a glow. Same recipe as .kli-panel. */
    /* Retuned for a light ground: the inner top highlight still gives the panel its edge,
       but the drop is shorter and softer — a 40px black spread designed to read against navy
       becomes a smudge on near-white. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(11,22,38,.16);
    transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease;
}
.hp-intel .hp-panel:hover {
    border-color: rgba(217,182,90,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(11,22,38,.22);
}

/* Tonal identity — one token each, within ~4% of the base so the panels read as one
   system in different light rather than as coloured cards. Matched to .kli. */
.hp-intel .hp-quad > .hp-panel:nth-of-type(1) { --i-panel: #0C1D31; }  /* navy / blue     */
.hp-intel .hp-quad > .hp-panel:nth-of-type(2) { --i-panel: #0A1F28; }  /* teal undertone  */
.hp-intel .hp-quad > .hp-panel:nth-of-type(3) { --i-panel: #131B31; }  /* plum undertone  */

/* ---- Headings ---- */
.hp-intel .hp-panel-title { color: var(--i-ink); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; font-size: .8rem; }
.hp-intel .hp-panel-title svg { color: var(--i-gold); }
.hp-intel .hp-panel-sub { color: var(--i-muted); }

/* ---- Tabs ---- */
.hp-intel .hp-tabs { border-bottom-color: var(--i-line-2); gap: 1rem; }
.hp-intel .hp-tab { color: var(--i-muted); padding: .35rem 0 .5rem; transition: color var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease; }
.hp-intel .hp-tab:hover { color: var(--i-ink); }
/* The homepage marks the active tab with .is-active AND aria-selected; both are matched so
   the style cannot drift out of sync with whichever one the script updates. */
.hp-intel .hp-tab.is-active,
.hp-intel .hp-tab[aria-selected="true"] { color: var(--i-gold); border-bottom-color: var(--i-gold); }
.hp-intel .hp-tab:focus-visible { outline: 2px solid var(--i-gold); outline-offset: 3px; border-radius: var(--cx-radius-xs); }

/* ---- Rows ---- */
.hp-intel .hp-rank li,
.hp-intel .hp-updates li { border-bottom-color: var(--i-line-2); }
.hp-intel .hp-rank-n { color: var(--i-muted); background: transparent; }
.hp-intel .hp-rank a,
.hp-intel .hp-updates a { color: var(--i-ink); transition: color var(--cx-duration-sm) ease; }
.hp-intel .hp-rank a:hover,
.hp-intel .hp-updates a:hover { color: var(--i-gold); }
.hp-intel .hp-rank a:focus-visible,
.hp-intel .hp-updates a:focus-visible { outline: 2px solid var(--i-gold); outline-offset: 2px; border-radius: var(--cx-radius-xs); }
.hp-intel .hp-update-when { color: var(--i-muted); }

/* Trend figures — lightened for the dark ground. The light-ground #1E7B4D would sit at
   about 2.4:1 here, which is the "green-on-navy that disappears" failure. */
.hp-intel .hp-rank-change { color: #6FCF97; }          /* 8.9:1 */
.hp-intel .hp-rank-change.is-down { color: #E8907C; }  /* 7.0:1 */

/* ---- Publication type icons ----
   The light-ground rules use pale pastel fills (#FAF3E2, #E9EEF7 ...) which turn into bright
   blocks on navy. Re-tinted as low-alpha washes of the same hues instead. */
.hp-intel .hp-update-icon { border: 1px solid var(--i-line); }
.hp-intel .hp-update-icon--guide   { background: rgba(217,182,90,.10);  color: var(--i-gold); }
.hp-intel .hp-update-icon--insight { background: rgba(107,197,184,.10); color: #6BC5B8; }
.hp-intel .hp-update-icon--service { background: rgba(111,207,151,.10); color: #6FCF97; }
.hp-intel .hp-update-icon--article { background: rgba(168,148,214,.10); color: #A894D6; }
.hp-intel .hp-update-type { color: var(--i-gold); }

/* ---- Spotlight panel ---- */
/* Photographic and padding-free; it only needs the frame to agree with its neighbours. */
.hp-intel .hp-panel--spotlight { background: var(--i-panel); border-color: var(--i-line); }
.hp-intel .hp-spotlight-note,
.hp-intel .hp-spotlight-go { color: var(--i-gold); }

/* ---- Business Needs panel ---- */
/* Already dark, but on its own gradient. Flattened onto the shared panel ground so it
   cannot read as a fifth colour once its neighbours are dark too. */
.hp-intel .hp-panel--needs { background: var(--i-panel); border-color: var(--i-line); }
.hp-intel .hp-panel-title--light { color: var(--i-ink); }
.hp-intel .hp-needs a { color: var(--i-ink); }
.hp-intel .hp-needs a:hover { color: var(--i-gold); }
.hp-intel .hp-needs-go { color: var(--i-gold); }

@media (prefers-reduced-motion: reduce) {
    .hp-intel .hp-panel, .hp-intel .hp-tab,
    .hp-intel .hp-rank a, .hp-intel .hp-updates a { transition: none; }
}

/* ---- Reference alignment: three panels, ringed icons, aligned CTAs -------------------
   Structural pieces the reference has that the original two-panel layout did not. All
   still prefixed .hp-intel, so none of it reaches a panel elsewhere. */

/* Three across. .hp-quad is a 2-column grid for the old four-panel arrangement; inside this
   band the row is three, which is what the reference shows and what the panel set now is. */
.hp-intel .hp-quad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.25rem); }

/* ---- Panel header: text left, ringed icon right ---- */
.hp-intel .hp-ihead { display: flex; align-items: flex-start; justify-content: space-between;
    gap: .8rem; margin-bottom: .2rem; }
.hp-intel .hp-ihead-text { min-width: 0; }
.hp-intel .hp-ihead .hp-panel-title { margin: 0 0 .25rem; }
.hp-intel .hp-ihead .hp-panel-sub { margin: 0; font-size: .7rem; line-height: 1.4; }
.hp-intel .hp-iicon {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; color: var(--i-gold);
    border: 1px solid var(--i-line); background: rgba(255,255,255,.03);
}
.hp-intel .hp-iicon svg { width: 18px; height: 18px; }

/* ---- Rows: the reference is noticeably more generous than the old compact list ---- */
.hp-intel .hp-rank li,
.hp-intel .hp-updates li,
.hp-intel .hp-watch li { padding-top: .5rem; padding-bottom: .5rem; }
.hp-intel .hp-rank a { font-size: .78rem; }
.hp-intel .hp-rank-n { font-weight: 600; font-size: .74rem; min-width: 1rem; text-align: center; }
.hp-intel .hp-rank-flag { width: 22px; height: 15px; }
.hp-intel .hp-updates a { font-size: .78rem; }

/* ---- Footer CTA ----
   margin-top:auto is what puts the three CTAs on a shared baseline. .hp-panel is already
   a flex column, and the lists above already carry flex:1, so this needs no fixed height —
   which would clip the longest panel rather than align anything. */
.hp-intel .hp-ifoot { margin-top: auto; padding-top: .9rem; text-align: center; }
.hp-intel .hp-icta {
    display: inline-block; font-size: .76rem; font-weight: 600;
    color: var(--i-gold); text-decoration: none;
}
.hp-intel .hp-icta:hover { color: #EBCE7C; text-decoration: underline; }
.hp-intel .hp-icta:focus-visible { outline: 2px solid var(--i-gold); outline-offset: 3px; border-radius: var(--cx-radius-xs); }

/* ---- Jurisdiction Watch rows ---- */
.hp-intel .hp-watch { list-style: none; margin: 0; padding: 0; flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: space-between; }
.hp-intel .hp-watch li + li { border-top: 1px solid var(--i-line-2); }
.hp-intel .hp-watch-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .1rem .35rem; margin: 0 -.35rem; border-radius: var(--cx-radius);
    text-decoration: none; color: inherit; transition: background-color var(--cx-duration-sm) ease;
}
.hp-intel .hp-watch-link:hover { background: rgba(255,255,255,.04); }
.hp-intel .hp-watch-link:hover .hp-watch-name { color: var(--i-gold); }
.hp-intel .hp-watch-link:focus-visible { outline: 2px solid var(--i-gold); outline-offset: -2px; }
.hp-intel .hp-watch-flag { flex: none; width: 24px; height: 17px; border-radius: var(--cx-radius-xs);
    background-size: cover; background-position: 50%; }
/* min-width:0 lets a long jurisdiction name shrink instead of forcing the row wider than
   its column and pushing the status badge out of the card. */
.hp-intel .hp-watch-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.hp-intel .hp-watch-name { font-size: .78rem; font-weight: 600; color: var(--i-ink); transition: color var(--cx-duration-sm) ease; }
.hp-intel .hp-watch-reason { font-size: .68rem; color: var(--i-muted); }

/* Status words carry a restrained tint each. Deliberately NOT red/green arrows: there is no
   directional quantitative data behind them, so a direction would be a claim we cannot make. */
.hp-intel .hp-watch-status {
    flex: none; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-radius: var(--cx-radius-xs); padding: .16rem .42rem; white-space: nowrap;
    color: var(--i-ink); background: rgba(255,255,255,.07); border: 1px solid var(--i-line);
}
.hp-intel .hp-watch-when { flex: none; font-size: .66rem; color: var(--i-muted); white-space: nowrap; }

/* ---- Responsive ----
   Readability outranks column count: below 1080px three columns start squeezing the status
   badge and the timestamp onto their own lines, so the row steps to 2 + 1 and then stacks. */
@media (max-width: 1080px) {
    .hp-intel .hp-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-intel .hp-quad > .hp-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .hp-intel .hp-quad { grid-template-columns: minmax(0, 1fr); }
    .hp-intel .hp-quad > .hp-panel:last-child:nth-child(odd) { grid-column: auto; }
    .hp-intel .hp-tabs { overflow-x: auto; scrollbar-width: none; }
    .hp-intel .hp-tabs::-webkit-scrollbar { display: none; }
    /* The timestamp is the least load-bearing thing in the row and the first to go. */
    .hp-intel .hp-watch-when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-intel .hp-watch-link, .hp-intel .hp-watch-name { transition: none; }
}

/* ============================================================================
   MOST POPULAR JURISDICTIONS (.pj-*) — Home Page, directly below the hero
   ----------------------------------------------------------------------------
   Full-bleed photographic panels. The image is the card; type sits over it under
   a controlled gradient. Namespaced .pj-* so none of this reaches the listing
   cards or the discovery panels further down.

   Colours and radii are the ones already in use elsewhere on the site — navy
   #0B1626, gold #C9A227 on light, the warm paper #F7F5EF — not a new system.
   ========================================================================== */

.pj {
    --pj-navy: #0B1626;
    --pj-gold: #D9B65A;   /* gold lifted for dark grounds; over photography it needs the lift */
    --pj-ink:  #FFFFFF;
    --pj-sub:  #5A6473;   /* 6.1:1 on the warm paper below */

    /* Warm off-white, not another navy block: the hero above is already dark, and two dark
       bands back to back read as one long block with a seam. */
    background: #F7F5EF;
    padding: clamp(2.2rem, 4vw, 3.4rem) 0 clamp(2rem, 3.6vw, 3rem);
}

.pj-head { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.2rem; flex-wrap: wrap; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.pj-head-text { min-width: 0; }
.pj-h {
    font-family: var(--cx-display);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--pj-navy);
    margin: 0 0 .35rem; text-wrap: balance;
}
.pj-sub { font-size: .86rem; line-height: 1.55; color: var(--pj-sub);
    margin: 0; max-width: 60ch; text-wrap: pretty; }
.pj-all { font-size: .8rem; font-weight: 600; color: #8A6E12; text-decoration: none;
    white-space: nowrap; }
.pj-all:hover { text-decoration: underline; }
.pj-all:focus-visible { outline: 2px solid #8A6E12; outline-offset: 3px; border-radius: var(--cx-radius-xs); }

/* ---- Grid ---- */
/* Four across, equal in every dimension. minmax(0,…) so a long jurisdiction name cannot
   push its column past its share and break the row's alignment. */
.pj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.7rem, 1.4vw, 1.1rem); }

/* ---- Card ---- */
/* One <a>, not a card wrapping a link: the whole panel is the target, and assistive
   technology announces it once rather than as a container plus a stray link. */
.pj-card {
    position: relative; display: block; overflow: hidden;
    /* 4:3 editorial proportions, and the ratio is what guarantees equal heights without a
       fixed px value that would clip on a narrow column. */
    aspect-ratio: 4 / 3;
    border-radius: var(--cx-radius-lg); background: var(--pj-navy);
    text-decoration: none; color: var(--pj-ink); isolation: isolate;
    box-shadow: var(--cx-shadow-3);
    transition: transform var(--cx-duration) ease, box-shadow var(--cx-duration) ease;
}
.pj-card:hover { transform: translateY(var(--cx-hover-lift)); box-shadow: var(--cx-shadow-4); }
.pj-card:focus-visible { outline: 2px solid var(--pj-gold); outline-offset: 3px; }

.pj-media { position: absolute; inset: 0; display: block; background: var(--pj-navy); }
.pj-media img {
    width: 100%; height: 100%; object-fit: cover;
    /* Slightly above centre: horizons, skylines and landmarks sit in the upper half of most
       of these photographs, and the lower third is about to be covered by the gradient. */
    object-position: 50% 42%;
    display: block; transition: transform .32s ease;
}
.pj-card:hover .pj-media img { transform: scale(var(--cx-hover-scale)); }

/* Cinematic gradient, not a black rectangle: clear for the top half, then easing into navy
   through three stops so there is no visible band where it starts. */
.pj-scrim {
    position: absolute; inset: 0; display: block;
    background: linear-gradient(to bottom,
    rgba(11,22,38,0)    0%,
    rgba(11,22,38,.06) 42%,
    rgba(11,22,38,.55) 68%,
    rgba(11,22,38,.88) 100%);
    transition: opacity var(--cx-duration) ease;
}
.pj-card:hover .pj-scrim { opacity: .94; }

.pj-body { position: absolute; left: 0; right: 0; bottom: 0; display: block;
    padding: clamp(.85rem, 1.4vw, 1.15rem); }
.pj-flag-row { display: block; margin-bottom: .45rem; }
/* Small: an identifier, not the graphic. */
.pj-flag { display: inline-block; width: 22px; height: 16px; border-radius: var(--cx-radius-xs);
    box-shadow: var(--cx-shadow-2); }
.pj-name {
    display: block; font-family: var(--cx-display);
    font-size: clamp(.92rem, 1.3vw, 1.05rem); font-weight: 600; line-height: 1.25;
    letter-spacing: .01em; color: var(--pj-ink); margin-bottom: .2rem;
    /* Two lines maximum: "United Arab Emirates" wraps, "Turks and Caicos Islands" would
       otherwise take three and push the CTA off the card. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 12px rgba(11,22,38,.5);
}
/* Retained: .pj-tag is no longer rendered by the card (the service count took its place
   per §13), but the class is left defined because the tagline is still carried on the row
   and may be reinstated. Deleting it would silently unstyle anything that reinstates it. */
.pj-tag {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .76rem; line-height: 1.4; color: rgba(255,255,255,.82); margin-bottom: .5rem;
    text-shadow: 0 1px 10px rgba(11,22,38,.5);
}

/* Service count (§13).

   §29 forbids faint grey, low-opacity and dark-on-dark labels, so this is solid #FFF at
   600 rather than the rgba(255,255,255,.82) used for the tagline it replaced — the count
   is a factual claim about the marketplace and has to survive a bright photograph. The
   scrim behind it is already easing into navy by this height; the text-shadow covers the
   remaining case of a blown-out highlight sitting directly under the label.

   tabular-nums keeps the digits from shifting the baseline between "9" and "1,204" across
   the four cards, which is visible when they sit in one row. */
.pj-count {
    display: block; font-size: .78rem; font-weight: 600; line-height: 1.35;
    color: #FFFFFF; margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 10px rgba(11,22,38,.6);
}
.pj-cta { display: block; font-size: .76rem; font-weight: 600; color: var(--pj-gold); }
.pj-arrow { display: inline-block; transition: transform var(--cx-duration) ease; }
.pj-card:hover .pj-arrow { transform: translateX(3px); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    /* Two by two. Three across would leave a stranded fourth card. */
    .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /*
     * Horizontal rail: one full card plus a slice of the next, so it is visibly swipeable
     * without a hint or an arrow. Scroll snapping makes each swipe land on a card.
     *
     * The negative margin plus matching padding lets the rail bleed to the screen edges
     * while the first card still lines up with the page gutter — a rail that stops short of
     * the edge does not read as scrollable.
     */
    .pj-grid {
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(-1 * clamp(1rem, 4vw, 2.4rem));
        padding-inline: clamp(1rem, 4vw, 2.4rem);
        padding-bottom: .3rem;
    }
    .pj-grid::-webkit-scrollbar { display: none; }
    .pj-card { scroll-snap-align: start; }
    /* Taller on a phone: 4:3 at 78% of a narrow viewport is a letterbox. */
    .pj-card { aspect-ratio: 5 / 4; }
    .pj-head { align-items: flex-start; }
    .pj-all { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-card, .pj-media img, .pj-scrim, .pj-arrow { transition: none; }
    .pj-card:hover { transform: none; }
    .pj-card:hover .pj-media img { transform: none; }
    .pj-card:hover .pj-arrow { transform: none; }
}

/* ---- WHY COUTTS CONSULTANTS — champagne band -------------------------------
   A narrow interstitial strip, not a content section. ~175px, content
   vertically centred, no unused space above or below.

   The first attempt read as BEIGE because the edges sat at 0.799 relative
   lightness. They now sit at 0.876 and the centre at 0.975 — luminous ivory
   with warmth at the edges rather than a cream panel. The difference is
   lightness, not hue.

   Gold for TEXT is #7A5F0F. The system --cx-gold-ink measures 3.93:1 on this
   ground and fails AA — the "pale gold disappearing" the brief warns about. */
.wc-band {
    --wc-gold:      #7A5F0F;
    --wc-gold-line: #CBAF7C;
    --wc-navy:      #0B1626;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Symmetric: pale champagne at both edges, lightest through the centre. */
    background:
        linear-gradient(90deg,
            #F7F0E2 0%,
            #FCF8F0 26%,
            #FEFCF8 50%,
            #FCF8F0 74%,
            #F7F0E2 100%);
    border-top: 1px solid #F0E7D6;
    border-bottom: 1px solid #F0E7D6;
}

/* Architecture, far left — atmospheric only. Was 0.16 and read as line art;
   now 0.05, and the columns are 3px apart rather than 14px so they blur into a
   texture rather than resolving as individual lines. */
.wc-arch {
    position: absolute; inset: 0 auto 0 0; width: 26%;
    z-index: -1; pointer-events: none;
    opacity: .05;
    background: repeating-linear-gradient(90deg,
        transparent 0 3px, rgba(122,95,15,.9) 3px 4px, transparent 4px 9px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
}

/* Global context, far right. §11: no circle, no outline, no illustration —
   curved meridian lines that fade out before any edge, at 0.04. There is
   nothing left that reads as a graphic. */
.wc-globe {
    position: absolute; inset: 0 0 0 auto; width: 30%;
    z-index: -1; pointer-events: none;
    opacity: .04;
    background:
        repeating-radial-gradient(ellipse 140% 100% at 130% 50%,
            transparent 0 16px, rgba(122,95,15,.9) 16px 17px, transparent 17px 34px),
        repeating-linear-gradient(0deg,
            transparent 0 26px, rgba(122,95,15,.55) 26px 27px, transparent 27px 54px);
    -webkit-mask-image: radial-gradient(ellipse at 100% 50%, #000 10%, transparent 72%);
            mask-image: radial-gradient(ellipse at 100% 50%, #000 10%, transparent 72%);
}

.wc-inner {
    max-width: var(--cx-container, 1180px);
    margin: 0 auto;
    padding: 22px clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 34% 1fr;
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: center;               /* both columns centred in the band */
}

.wc-left { min-width: 0; }

.wc-eyebrow {
    font-size: .655rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--wc-gold); margin: 0 0 3px;
}
.wc-h2 {
    font-weight: 800; font-size: clamp(1.15rem, 1.75vw, 1.625rem);  /* 26px cap */
    line-height: 1.12; letter-spacing: -.015em;
    color: var(--wc-navy); margin: 0 0 3px;
}
/* The CTA lives at the end of this paragraph — no dedicated row. */
.wc-copy {
    font-size: .78rem; line-height: 1.45; color: #2A3444; margin: 0;
}
.wc-cta {
    font-weight: 700; color: var(--wc-gold); text-decoration: none;
    border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap;
    margin-left: .25rem;
}
.wc-cta span { display: inline-block; transition: transform .18s ease; }
.wc-cta:hover span, .wc-cta:focus-visible span { transform: translateX(3px); }

/* One continuous horizontal strip. */
.wc-right { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.wc-pt { padding: 0 clamp(.5rem, 1.2vw, 1rem); border-left: 1px solid rgba(203,175,124,.5); }
.wc-pt:first-child { border-left: 0; padding-left: 0; }

.wc-pt-ico { display: block; color: var(--wc-gold-line); margin-bottom: 2px; }
.wc-pt-ico svg { width: 17px; height: 17px; display: block; }

.wc-pt-h { margin: 0; line-height: 1.1; }
.wc-pt-lead {
    display: block; font-weight: 800; font-size: clamp(1rem, 1.35vw, 1.2rem);
    color: var(--wc-gold); letter-spacing: -.01em;
}
.wc-pt-label {
    display: block; font-weight: 700; font-size: .66rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--wc-navy); margin-top: 1px;
}
.wc-pt-sub { margin: 2px 0 0; font-size: .68rem; line-height: 1.35; color: #3A4757; }

@media (max-width: 1000px) {
    .wc-inner { grid-template-columns: 1fr; gap: 1.1rem; padding: 20px 1rem; }
    .wc-right { grid-template-columns: repeat(2, 1fr); gap: .9rem 0; }
    .wc-pt:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 560px) {
    .wc-arch, .wc-globe { display: none; }
    .wc-inner { padding: 18px 1rem; }
}

@media (prefers-reduced-motion: reduce) { .wc-cta span { transition: none; } }

/* §31 — Compare jurisdictions, subordinate to "View all". Lighter weight and no
   underline until hover, so it is discoverable without competing. */
.pj-compare {
    font-size: .82rem; font-weight: 600; color: var(--cx-ink-soft, #33404F);
    text-decoration: none; margin-right: 1rem; white-space: nowrap;
}
.pj-compare:hover, .pj-compare:focus-visible {
    color: var(--cx-gold-ink, #8A6E12); text-decoration: underline; text-underline-offset: 2px;
}

/* ============================================================================
   HOME — WHERE SHOULD I SET UP? band
   ----------------------------------------------------------------------------
   Overrides only. The band reuses .wc-band, .wc-inner, .wc-left and .wc-right,
   so the cream ground, the architectural and meridian textures, the container
   width, the vertical rhythm and every breakpoint are inherited rather than
   rebuilt. What follows is the three differences: four points become three plus a
   button, the lead number is a marker rather than a statistic, and the heading
   sits on one line.

   §11 — the band must not grow. Padding and alignment are untouched.
   ============================================================================ */

/* Three stages and the action. The button gets its own track rather than sitting
   inside a stage, so the strip reads left to right as proposition, stages, start —
   which is the whole point of keeping it horizontal. */
.adv-band-steps { grid-template-columns: repeat(3, 1fr) auto; }

.adv-band-h { white-space: nowrap; }

/* The old band's lead was a statistic — "93", "One" — set large because it was the
   information. Here the number is only a step marker and the stage name is the
   information, so the weighting reverses. */
.adv-band-n {
    font-size: .72rem;
    letter-spacing: .12em;
    opacity: .75;
    margin-right: .45rem;
}
.adv-band-pt .wc-pt-label { font-size: .9rem; }

/* The gold button, using the site's established treatment. Sized to be obvious
   without competing with the heading — §6 asks for prominent, not oversized. */
.adv-band-cta { padding-left: clamp(1rem, 2vw, 1.8rem); }

.adv-band-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .82rem 1.35rem;
    background: var(--cx-gold-soft, #D9B65A);
    color: var(--cx-navy, #0B1626);
    border-radius: 6px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: .84rem; font-weight: 700; white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s;
}
.adv-band-btn:hover { background: #C9A94D; }
.adv-band-btn:focus-visible { outline: 2px solid var(--cx-gold-ink, #8A6E12); outline-offset: 2px; }

/* Arial throughout this band, matching the adviser itself so the promotion and the
   tool read as one feature. */
.adv-band, .adv-band h2, .adv-band p, .adv-band a {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ---- tablet -------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Three across is still legible; the button drops to its own full-width row
       rather than being squeezed into a fourth track. */
    .adv-band-steps { grid-template-columns: repeat(3, 1fr); }
    .adv-band-cta { grid-column: 1 / -1; padding-left: 0; padding-top: 1rem; }
    .adv-band-h { white-space: normal; }
}

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

/* §12 — stack, do not compress. The stages go to one per row so each keeps its
   full label, and the button spans the width as the last thing read.
   The parent .wc-inner already collapses to a single column at this width. */
@media (max-width: 760px) {
    .adv-band-steps { grid-template-columns: 1fr; gap: .55rem 0; }

    .adv-band-pt {
        border-left: 0; padding-left: 0;
        display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    }
    /* The icon is redundant once each stage is a single row with its number —
       three icons stacked vertically add height without adding meaning. */
    .adv-band-pt .wc-pt-ico { display: none; }
    .adv-band-pt .wc-pt-h { margin: 0; }
    .adv-band-pt .wc-pt-sub { margin: 0; }

    .adv-band-btn { width: 100%; justify-content: center; }
}

/* The home band's action, on the same tokens as every other button on the site —
   it was hand-sized and sat taller than its neighbours. */
.adv-band-btn {
    height: var(--cx-btn-h, 42px);
    padding: 0 var(--cx-btn-pad-x, 20px);
    gap: var(--cx-btn-gap, 8px);
    font-size: var(--cx-btn-fs, .78rem);
    font-weight: var(--cx-btn-weight, 600);
    border-radius: var(--cx-btn-radius, 4px);
}

/* ============================================================================
   HOME FEATURE PANELS — adviser-first arrangement
   ----------------------------------------------------------------------------
   Overrides on .hp-features, not a replacement. The card ground, the gold ring,
   the radius and the column behaviour are all inherited; what changes is the
   internal structure now each panel carries a numbered eyebrow and its own
   action label.
   ============================================================================ */

/* PADDING ABOVE AND BELOW THE ROW. The panels previously sat tight between the
   hero and the strip below, which read as a bar rather than as a section. */
.hp-features {
    margin-top: clamp(2.2rem, 4vw, 3.4rem);
    margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}

/* Column, not row: the eyebrow sits above the title rather than beside the icon,
   which is what turns three links into a numbered sequence. Generous internal
   padding — the earlier .3rem made the panels feel like table cells. */
.hp-feature {
    flex-direction: column; gap: .7rem;
    padding: 1.35rem 1.5rem 1.5rem;
}

.hp-feature-head { display: flex; align-items: center; gap: .65rem; }

.hp-feature-eyebrow {
    display: inline-flex; align-items: baseline; gap: .45rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--gold-text, #8A6E12);
}
.hp-feature-n { opacity: .6; }

.hp-feature-body { display: flex; flex-direction: column; flex: 1; }

.hp-feature-title {
    display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.25;
    color: var(--cx-navy, #0B1626); margin-bottom: .35rem;
}
.hp-feature-text {
    display: block; font-size: .84rem; line-height: 1.5;
    color: var(--cx-ink-soft, #33404F);
}

/* margin-top:auto pins the action to the panel floor, so three panels with copy
   of different lengths still align their links. */
.hp-feature-link {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: auto; padding-top: .9rem;
    font-size: .8rem; font-weight: 700; color: var(--gold-text, #8A6E12);
}
.hp-feature:hover .hp-feature-link { text-decoration: underline; }

@media (max-width: 860px) {
    /* Stacked, so the divider becomes horizontal — a vertical rule between rows
       reads as a broken border. */
    .hp-feature { border-right: 0; border-bottom: 1px solid var(--line); }
    .hp-feature:last-child { border-bottom: 0; }
}