/* 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: 'Inter', system-ui, sans-serif;
}

.hp-wrap { width: 100%; max-width: 1520px; 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: 'Manrope', system-ui, sans-serif; }
.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; 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: 'Manrope', system-ui, sans-serif;
    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: .7rem 1.35rem; border-radius: 8px;
    font-weight: 700; font-size: .89rem; text-decoration: none;
    transition: transform .16s ease, filter .16s ease;
}
.hp-btn:hover { transform: translateY(-1px); }
/* 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));
    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(-3.75rem, -5.5vw, -2.75rem); position: relative; z-index: 2;
    overflow: hidden;
}
.hp-feature {
    display: flex; gap: .95rem; padding: clamp(1.05rem, 2vw, 1.5rem);
    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: 46px; height: 46px; border-radius: 50%;
    background: #FAF3E2; color: var(--gold-text);
    display: grid; place-items: center;
}
.hp-feature-icon svg { width: 22px; height: 22px; }
.hp-feature-title { display: block; font-family: 'Manrope', sans-serif; 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: .7rem; 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 .16s 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: 10px;
    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 .16s ease, box-shadow .16s ease;
}
.hp-country:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.hp-country .fi {
    width: 34px; height: 24px; border-radius: 4px; 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: 1; -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: clamp(1.9rem, 3.8vw, 3.1rem) 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(1.25rem, 2.2vw, 1.6rem); 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: .9rem; 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(232px, 78vw, 268px); }
@media (min-width: 640px)  { .hp-rail-track > * { flex-basis: 300px; } }
@media (min-width: 1200px) { .hp-rail-track > * { flex-basis: 316px; } }

.hp-rail-btn {
    position: absolute; top: 42%; z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
    font-size: 1.4rem; 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: 12px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}
.hp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hp-card-media { position: relative; display: block; aspect-ratio: 16/9; background: #EDEFF3; }
.hp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-badge {
    position: absolute; top: .7rem; left: .7rem;
    background: var(--gold); color: var(--navy);
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    padding: .22rem .6rem; border-radius: 5px;
}
.hp-badge-dark { background: var(--navy); color: #fff; letter-spacing: .1em; }
.hp-card-body { padding: .8rem .9rem .95rem; 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: .98rem; line-height: 1.3; margin: 0 0 .5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
.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: .4rem; font-size: .8rem;
    color: #8A929E; margin: 0 0 .5rem; }
.hp-card-meta .fi { width: 18px; height: 13px; border-radius: 2px; }
.hp-card-text {
    font-size: .87rem; line-height: 1.5; margin: 0 0 .7rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-card-cat  { font-size: .78rem; color: #98A0AC; margin: 0 0 .8rem; }
.hp-card-link { margin-top: auto; font-size: .85rem; 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. */
.hp-quad { align-items: stretch; }
.hp-quad > .hp-panel { height: 100%; }

/* 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(--radius); padding: clamp(1rem, 1.8vw, 1.4rem);
    box-shadow: 0 0 0 1px rgba(212,160,53,.16), 0 0 24px rgba(212,160,53,.09),
    var(--shadow);
    transition: box-shadow .22s ease;

    /* A column, so the list inside can take the remaining height.

       The panels were already equal height — grid stretches them — but their contents
       were not: a five-row ranking at 40px a row finished well short of a five-row feed
       at 58px, leaving one panel with a block of empty white beneath it while its
       neighbour filled. Equal boxes with unequal contents read as a mistake rather than
       as a pair. */
    display: flex;
    flex-direction: column;
}

/* 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:hover {
    box-shadow: 0 0 0 1px rgba(212,160,53,.3), 0 0 34px rgba(212,160,53,.16),
    var(--shadow-lg);
}
.hp-panel-head { display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; margin-bottom: 1rem; }
.hp-panel-title {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1.02rem; font-weight: 800; margin: 0 0 1rem;
}
.hp-panel-head .hp-panel-title { margin: 0; }
.hp-panel-title svg { width: 18px; height: 18px; color: var(--gold-text); }

.hp-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.hp-tab {
    background: none; border: 0; cursor: pointer;
    padding: .5rem .75rem; font-size: .85rem; 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: .75rem;
    padding: .7rem 0; min-height: 52px;
    border-bottom: 1px solid #F1F3F6;
}
.hp-rank li:last-child, .hp-updates li:last-child { border-bottom: 0; }
.hp-rank-n {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--paper); color: #8A929E;
    font-size: .74rem; font-weight: 700; display: grid; place-items: center;
}
.hp-rank a { flex: 1; font-size: .9rem; color: var(--ink); text-decoration: none; }
.hp-rank a:hover { color: var(--gold-text); }
.hp-rank-change { font-size: .78rem; font-weight: 700; color: #1E7B4D; white-space: nowrap; }
.hp-rank-change.is-down { color: #B3261E; }

.hp-updates { list-style: none; margin: 0; padding: 0; }
.hp-update-icon {
    /* 30px, matching the ranking badge below — the two panels sit side by side and their
       leading elements should line up horizontally. */
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: #FAF3E2; color: var(--gold-text); display: grid; place-items: center;
}
.hp-update-icon svg { width: 17px; height: 17px; }
.hp-updates a { display: block; font-size: .89rem; font-weight: 600;
    color: var(--ink); text-decoration: none; line-height: 1.35; }
.hp-updates a:hover { color: var(--gold-text); }
.hp-update-when { display: block; font-size: .77rem; color: #98A0AC; margin-top: .15rem; }

.hp-partners { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hp-partner {
    border: 1px solid var(--line); border-radius: 10px; 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; }

.hp-topic {
    display: flex; align-items: center; gap: .7rem;
    border: 1px solid var(--line); border-radius: 10px; 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: 9px;
    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. */
.hp-stats { background: var(--navy); padding: clamp(1.4rem, 2.6vw, 2rem) 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(4, 1fr); gap: 1rem; }

@media (max-width: 900px) {
    .hp-stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 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 1rem; }
.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 .35rem; }
.hp-stat-icon svg { width: 24px; height: 24px; }
.hp-stat-value, .hp-stat-suffix {
    font-family: 'Manrope', sans-serif; font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    font-weight: 800; color: var(--gold); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hp-stat-label { display: block; color: #fff; font-size: .86rem; font-weight: 600; margin-top: .35rem; }
.hp-stat-sub   { display: block; color: rgba(255,255,255,.62); font-size: .78rem; }

/* ---- Consultation banner --------------------------------------------------- */
.hp-cta { background: var(--gold); padding: clamp(1.5rem, 3vw, 2.1rem) 0; }
.hp-cta-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
/* Navy on gold: 7.67:1. */
.hp-cta h2 { color: var(--navy); font-size: clamp(1.3rem, 2.6vw, 1.85rem); margin: 0 0 .4rem; font-weight: 800; }
.hp-cta p  { color: rgba(11,22,38,.78); margin: 0; font-size: .96rem; }
.hp-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Quality floor --------------------------------------------------------- */
.hp a:focus-visible, .hp button:focus-visible {
    outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 6px;
}
.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); }