/* ============================================================================
   WHERE SHOULD I SET UP? — jurisdiction adviser
   ----------------------------------------------------------------------------
   ARIAL THROUGHOUT, as instructed. The site's --cx-display is Manrope and
   --cx-sans is the body stack; both are overridden inside `.adv` only, so no
   other page is affected. The override is on the container rather than on each
   rule, which means a new element added here inherits Arial without anyone
   having to remember to set it.

   Everything else — colour, spacing, radius, shadow, border — comes from the
   existing coutts-system.css tokens. No new palette, no new scale. That is what
   makes this feel like the rest of the site rather than like a bolted-on tool.

   Mobile-first: the base rules are the phone layout and the breakpoints add
   columns. §26 asks for this feature to work particularly well on mobile, and
   writing desktop-first would have meant unwinding a grid at every breakpoint.
   ============================================================================ */

.adv {
    --adv-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-family: var(--adv-font);
    color: var(--cx-ink);
    background: #FFF;
}

.adv h1, .adv h2, .adv h3,
.adv input, .adv button, .adv select, .adv textarea {
    font-family: var(--adv-font);
}

.adv-inner {
    max-width: var(--cx-container, 1180px);
    margin: 0 auto;
    padding: 0 20px;
}

/* Visually hidden but read aloud. Every step of the progress bar carries one of
   these, so state is announced rather than inferred from colour — §32. */
.cx-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- hero ---------------------------------------------------------------- */

/* The image is a CSS custom property set inline per step, so one rule serves all
   four screens and the photograph changes as the visitor advances. The gradient
   is opaque enough on the left that white text meets contrast over any hero in
   the library — it cannot be left to chance when the image varies. */
.adv-hero {
    position: relative;
    background: var(--cx-navy, #0B1626);
    color: #FFF;
    padding: 28px 0 34px;
    overflow: hidden;
}
.adv-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--adv-hero, none);
    background-size: cover; background-position: center;
    opacity: .55;
}
.adv-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(11,22,38,.96) 0%, rgba(11,22,38,.88) 38%, rgba(11,22,38,.35) 100%);
}
.adv-hero > * { position: relative; z-index: 1; }

.adv-crumbs { font-size: .78rem; margin-bottom: 1.1rem; color: rgba(255,255,255,.72); }
.adv-crumbs a { color: rgba(255,255,255,.9); text-decoration: none; }
.adv-crumbs a:hover { text-decoration: underline; }
.adv-crumbs span { margin: 0 .4rem; }

.adv-eyebrow {
    font-size: .74rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cx-gold-soft, #D9B65A);
    margin: 0 0 .5rem;
}
.adv-h1 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.1; font-weight: 700; margin: 0 0 .7rem; }
.adv-lede { font-size: clamp(.9rem, 2.6vw, 1rem); line-height: 1.55; max-width: 34em; color: rgba(255,255,255,.9); margin: 0; }

.adv-hero-points {
    list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
    padding: 0; margin: 1.4rem 0 0;
}
.adv-hero-points li { font-size: .8rem; color: rgba(255,255,255,.86); }
.adv-hero-points li::before { content: "—"; color: var(--cx-gold-soft, #D9B65A); margin-right: .5rem; }

/* ---- progress ------------------------------------------------------------ */

/* Horizontal scroll on a narrow phone rather than four cramped columns. §26 warns
   against interfaces needing awkward horizontal scrolling — this is the exception
   that avoids the worse outcome of illegible four-across labels at 320px. */
.adv-progress { background: var(--cx-paper, #F7F5EF); border-bottom: 1px solid rgba(0,0,0,.06); }

.adv-steps {
    list-style: none; display: flex; gap: 0; margin: 0;
    padding-top: 18px; padding-bottom: 18px;
    overflow-x: auto; scrollbar-width: none;
}
.adv-steps::-webkit-scrollbar { display: none; }

.adv-step { flex: 1 0 auto; min-width: 118px; text-align: center; position: relative; }
.adv-step > a, .adv-step > span {
    display: block; text-decoration: none; color: inherit;
    padding: 0 .4rem;
}
.adv-step > a:hover .adv-step-l { text-decoration: underline; }

/* The connecting rule is drawn from each step to the previous one, so it can be
   coloured by that step's own state without a separate element per gap. */
.adv-step + .adv-step::before {
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%;
    height: 2px; background: #D8D3C6;
}
.adv-step--done + .adv-step::before,
.adv-step--current::before { background: var(--cx-gold-ink, #8A6E12); }

.adv-step-n {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #FFF; border: 2px solid #D8D3C6; color: var(--cx-muted, #5A6472);
    font-size: .82rem; font-weight: 700;
}
.adv-step--done .adv-step-n,
.adv-step--current .adv-step-n {
    background: var(--cx-gold-ink, #8A6E12); border-color: var(--cx-gold-ink, #8A6E12); color: #FFF;
}
.adv-step-l { display: block; margin-top: .45rem; font-size: .76rem; color: var(--cx-muted, #5A6472); }
.adv-step--done .adv-step-l,
.adv-step--current .adv-step-l { color: var(--cx-ink); font-weight: 700; }

/* ---- question body ------------------------------------------------------- */

.adv-body { padding: 2.6rem 20px 3rem; }

.adv-q-h { font-size: clamp(1.35rem, 4.6vw, 1.9rem); font-weight: 700; margin: 0 0 .4rem; color: var(--cx-ink); }
.adv-q-sub { font-size: .92rem; color: var(--cx-ink-soft, #33404F); margin: 0 0 1.6rem; }
.adv-count { font-weight: 700; color: var(--cx-gold-ink, #8A6E12); margin-left: .4rem; }

.adv-fieldset { border: 0; padding: 0; margin: 0; }

.adv-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }

@media (min-width: 620px) {
    .adv-grid--3, .adv-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
    .adv-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .adv-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- selectable card ----------------------------------------------------- */

/* The card is a <label> wrapping a real radio or checkbox. Keyboard focus, arrow-key
   movement within a radio group, and screen-reader announcement all come from the
   native control. Building this from divs and click handlers would have meant
   reimplementing every one of those, badly. */
.adv-card { display: block; cursor: pointer; }

/* Off-screen, not display:none — a hidden input is not focusable and the whole
   keyboard path would be lost. */
.adv-card-input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
}

.adv-card-in {
    position: relative;
    display: flex; gap: .85rem; align-items: flex-start;
    height: 100%;
    padding: 1.05rem 1.1rem;
    background: #FFF;
    border: 1px solid var(--cx-line, #E3E7EC);
    border-radius: var(--cx-radius-lg, 10px);
    transition: border-color .15s, box-shadow .2s, background-color .15s;
}
.adv-card:hover .adv-card-in { border-color: #C9B98A; }

/* Focus follows the input onto the card, so keyboard users see the same ring
   sighted mouse users would expect — §32. */
.adv-card-input:focus-visible + .adv-card-in {
    outline: 2px solid var(--cx-gold-ink, #8A6E12);
    outline-offset: 2px;
}

/* SELECTED STATE IS THREE SIGNALS, NOT ONE: a tinted fill, a heavier gold border,
   and a tick or filled box. §32 requires that selection not depend on colour
   alone, which rules out the common pattern of only changing the border. */
.adv-card-input:checked + .adv-card-in {
    border-color: var(--cx-gold-ink, #8A6E12);
    box-shadow: inset 0 0 0 1px var(--cx-gold-ink, #8A6E12);
    background: #FDFAF2;
}

.adv-card-ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--cx-paper, #F7F5EF); color: var(--cx-gold-ink, #8A6E12);
}
.adv-card-ico svg { width: 21px; height: 21px; }

.adv-card-txt { flex: 1 1 auto; min-width: 0; }
.adv-card-t { display: block; font-size: .95rem; font-weight: 700; line-height: 1.3; margin-bottom: .3rem; }
.adv-card-b { display: block; font-size: .82rem; line-height: 1.45; color: var(--cx-ink-soft, #33404F); }

.adv-card-mark {
    position: absolute; top: .7rem; right: .8rem;
    color: var(--cx-gold-ink, #8A6E12); font-weight: 700; opacity: 0; transition: opacity .15s;
}
.adv-card-input:checked + .adv-card-in .adv-card-mark { opacity: 1; }

.adv-card-box {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem;
    border: 2px solid #C4CBD4; border-radius: 4px; background: #FFF;
    position: relative;
}
.adv-card--check .adv-card-box { order: -1; }
.adv-card-input:checked + .adv-card-in .adv-card-box {
    background: var(--cx-gold-ink, #8A6E12); border-color: var(--cx-gold-ink, #8A6E12);
}
.adv-card-input:checked + .adv-card-in .adv-card-box::after {
    content: ""; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px; border: solid #FFF; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.adv-card-radio {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem;
    border: 2px solid #C4CBD4; border-radius: 50%; background: #FFF; position: relative;
}
.adv-card-input:checked + .adv-card-in .adv-card-radio { border-color: var(--cx-gold-ink, #8A6E12); }
.adv-card-input:checked + .adv-card-in .adv-card-radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--cx-gold-ink, #8A6E12);
}

/* A card at its limit is dimmed and its cursor changes, but it is NOT disabled —
   a disabled input is unreachable by keyboard and gives no explanation. It stays
   focusable and clicking it explains the limit instead. */
.adv-card--blocked .adv-card-in { opacity: .5; }
.adv-card--blocked { cursor: not-allowed; }

.adv-card--wide .adv-card-in { flex-direction: row; align-items: center; }

/* ---- hints, notes, disclaimer -------------------------------------------- */

.adv-hint { font-size: .82rem; color: var(--cx-muted, #5A6472); margin: 1rem 0 0; }
.adv-hint[data-adv-required-msg] { color: #B3261E; font-weight: 700; }

.adv-note {
    display: flex; gap: .7rem; align-items: flex-start;
    margin: 1.4rem 0 0; padding: .9rem 1.1rem;
    background: #F3F6FA; border: 1px solid #DDE5EE;
    border-radius: var(--cx-radius-lg, 10px);
    font-size: .84rem; line-height: 1.5; color: var(--cx-ink-soft, #33404F);
}

.adv-disclaimer {
    margin: 2.4rem 0 0; padding: 1.1rem 1.2rem;
    background: var(--cx-paper, #F7F5EF);
    border-left: 3px solid var(--cx-gold-soft, #D9B65A);
    border-radius: 0 var(--cx-radius-lg, 10px) var(--cx-radius-lg, 10px) 0;
    font-size: .8rem; line-height: 1.55; color: var(--cx-ink-soft, #33404F);
}

/* ---- buttons and navigation ---------------------------------------------- */

.adv-nav {
    display: flex; flex-wrap: wrap; gap: .8rem;
    justify-content: space-between; align-items: center;
    margin-top: 2.2rem;
}
.adv-nav--center { justify-content: center; }

.adv-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.4rem;
    border: 1px solid transparent; border-radius: 6px;
    font-size: .86rem; font-weight: 700; font-family: var(--adv-font);
    text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.adv-btn--lg { padding: .95rem 1.8rem; font-size: .92rem; }

.adv-btn--gold { background: var(--cx-gold-soft, #D9B65A); color: var(--cx-navy, #0B1626); }
.adv-btn--gold:hover { background: #C9A94D; }

.adv-btn--ghost { background: #FFF; color: var(--cx-ink); border-color: var(--cx-line, #E3E7EC); }
.adv-btn--ghost:hover { border-color: #C4CBD4; }

.adv-btn:focus-visible { outline: 2px solid var(--cx-gold-ink, #8A6E12); outline-offset: 2px; }

.adv-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* .adv-pending REMOVED. It styled the disabled "Show my results" button and its
   explanatory note, both of which existed only while the results page was awaiting
   approval of the scoring model. Results shipped; the markup went; these rules were
   left behind. */

/* On a phone the two navigation buttons go full width and stack, with the primary
   action first in the visual order. Two half-width buttons at 320px are a
   mis-tap waiting to happen. */
@media (max-width: 520px) {
    .adv-nav { flex-direction: column-reverse; align-items: stretch; }
    .adv-btn { justify-content: center; width: 100%; }
}

/* ---- start page ---------------------------------------------------------- */

.adv-how { list-style: none; display: grid; gap: 22px; padding: 0; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 780px) { .adv-how { grid-template-columns: repeat(3, 1fr); } }

.adv-how li { padding: 1.4rem 1.5rem; background: var(--cx-paper, #F7F5EF); border-radius: var(--cx-radius-lg, 10px); }
.adv-how-n { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--cx-gold-ink, #8A6E12); margin-bottom: .5rem; }
.adv-how-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.adv-how li p { font-size: .85rem; line-height: 1.55; color: var(--cx-ink-soft, #33404F); margin: 0; }

/* ---- help band: REMOVED --------------------------------------------------
   The "Need help? / Speak to Coutts" strip that used these rules is gone. The
   global footer already closes every page with "Ready to discuss your
   international business requirements?", and two commercial calls to action a
   few hundred pixels apart competed with each other and with Next.
   Rules deleted rather than left orphaned. */

/* ---- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .adv * { transition: none !important; }
}

/* ---- photo cards (Q2 regions) -------------------------------------------- */

/* The mockup shows each region as a photograph above the label. The images are the
   existing jurisdiction heroes resolved through ImageResolver — no new assets — and
   one representative country stands for each region.

   The photo is a background on a span rather than an <img>: it is decorative, the
   region is named in the label directly beneath it, and a background cannot be
   announced by a screen reader or dragged out of the card by a visitor. */
.adv-card--photo .adv-card-in { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }

.adv-card-photo {
    display: block; width: 100%; aspect-ratio: 16 / 9;
    background-color: var(--cx-paper, #F7F5EF);
    background-size: cover; background-position: center;
}

.adv-card-foot { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem 1rem; }

/* The tick sits over the photograph when selected, so the state is visible even when
   the card's foot is scrolled out of view on a phone. */
.adv-card--photo .adv-card-in::after {
    content: "✓"; position: absolute; top: .6rem; right: .7rem;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--cx-gold-ink, #8A6E12); color: #FFF;
    font-size: .8rem; font-weight: 700;
    opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s;
}
.adv-card-input:checked + .adv-card-in::after { opacity: 1; transform: scale(1); }

/* ---- heading case --------------------------------------------------------
   The site's global h2 rule uppercases headings. The mockups show sentence case
   throughout this feature and "1. WHAT DO YOU WANT TO ACHIEVE?" reads as shouting
   next to the restrained hero, so the transform is reset inside .adv only. */
.adv h1, .adv h2, .adv h3, .adv .adv-q-h, .adv .adv-how-h {
    text-transform: none;
    letter-spacing: normal;
}

/* ============================================================================
   REFINEMENT PASS — September 2026
   ----------------------------------------------------------------------------
   Appended rather than edited in place so the whole change is legible in one
   block and can be reverted by deleting it. All of it is presentation: no
   markup, route, state or scoring behaviour is touched.
   ============================================================================ */

/* ---- 3. compact hero on question screens --------------------------------- */

/* Question screens only — the landing page keeps its full-height banner because
   there the hero IS the content. Here it is context, and the question should be
   the first thing the eye lands on. Roughly a third of the vertical space
   recovered, without dropping to a navigation strip. */
.adv-hero--compact { padding: 18px 0 22px; }
.adv-hero--compact .adv-h1 { font-size: clamp(1.5rem, 4vw, 2.15rem); margin-bottom: .45rem; }
.adv-hero--compact .adv-lede { font-size: .88rem; max-width: 46em; }
.adv-hero--compact .adv-crumbs { margin-bottom: .7rem; }
.adv-hero--compact .adv-eyebrow { margin-bottom: .35rem; }
.adv-hero--compact .adv-hero-points { margin-top: .9rem; gap: .4rem 1.4rem; }
.adv-hero--compact .adv-hero-points li { font-size: .76rem; }

/* On a phone the benefits line is the first thing to go: it repeats what the lede
   already says and costs a whole row above the question. */
@media (max-width: 560px) {
    .adv-hero--compact { padding: 14px 0 18px; }
    .adv-hero--compact .adv-hero-points { display: none; }
    .adv-hero--compact .adv-lede { font-size: .84rem; }
}

/* ---- 5. question hierarchy ----------------------------------------------- */

/* The question was competing with the hero above it and the cards below. More air
   above it, less between it and its own supporting line, and a heavier weight —
   so the eye goes heading, sub, cards, in that order. */
.adv-body { padding-top: 3rem; }
.adv-q-h {
    font-size: clamp(1.45rem, 4.4vw, 2.05rem);
    font-weight: 700; line-height: 1.2;
    color: var(--cx-navy, #0B1626);
    margin-bottom: .35rem;
}
.adv-q-sub { font-size: .9rem; color: var(--cx-muted, #5A6472); margin-bottom: 1.9rem; }

/* ---- 6 & 8. answer cards ------------------------------------------------- */

/* CREAM, not white. Against a white page a white card has to be found by its
   border alone; the site's own --cx-paper gives it presence without a shadow, and
   it is the same off-white used by the jurisdiction and how-it-works panels. */
.adv-card-in {
    background: var(--cx-paper, #F7F5EF);
    border-color: #E2DDD0;
    padding: 1.15rem 1.2rem;
}

/* Restrained hover: border and a 1px lift. No scale, no bounce. */
.adv-card:hover .adv-card-in {
    border-color: #C9B98A;
    background: #FBFAF6;
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(11, 22, 38, .06);
}

/* SELECTED — four signals, so it is unmistakable and none of them is colour alone:
   white ground reversing out of the cream field, a doubled gold border, the gold
   tick or filled box, and a stronger icon. */
.adv-card-input:checked + .adv-card-in {
    background: #FFFDF7;
    border-color: var(--cx-gold-ink, #8A6E12);
    box-shadow: inset 0 0 0 2px var(--cx-gold-ink, #8A6E12);
    transform: none;
}
.adv-card-input:checked + .adv-card-in .adv-card-ico {
    background: var(--cx-gold-ink, #8A6E12);
    color: #FFF;
}
.adv-card-input:checked + .adv-card-in .adv-card-t { color: var(--cx-navy, #0B1626); }

/* The tick was a bare glyph; a filled disc reads at a glance and matches the photo
   cards on Q2, so selection looks the same on every question. */
.adv-card-mark {
    top: .8rem; right: .9rem;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--cx-gold-ink, #8A6E12); color: #FFF;
    font-size: .72rem;
}

/* Title and body given a little more room now the card is larger. */
.adv-card-t { font-size: .97rem; margin-bottom: .35rem; }
.adv-card-b { font-size: .83rem; line-height: 1.5; }
.adv-card-ico { width: 44px; height: 44px; transition: background-color .15s, color .15s; }

/* ---- 11. Q2 photographs: supporting, not dominating ---------------------- */

/* Reduced from 16:9 to 3:1. The region name and its selection state are the
   decision; the photograph is context and was taking more height than the label it
   was supporting. */
.adv-card--photo .adv-card-photo { aspect-ratio: 3 / 1; }
.adv-card--photo .adv-card-foot { padding: .85rem 1rem .95rem; }
.adv-card--photo .adv-card-in { background: var(--cx-paper, #F7F5EF); }
.adv-card-input:checked + .adv-card-in .adv-card-photo { filter: saturate(1.05); }

@media (max-width: 620px) {
    /* Shallower again on a phone, where eight stacked cards otherwise become a very
       long scroll. */
    .adv-card--photo .adv-card-photo { aspect-ratio: 4 / 1; }
}

/* ---- 7 & 19. the whole card is the target -------------------------------- */

/* Already true — the card is a <label> wrapping the input, so any point inside it
   selects. Stated here because it is easy to break later by moving the input out
   of the label, and the comment is where someone would look. */
.adv-card { -webkit-tap-highlight-color: transparent; }
.adv-card-in { min-height: 100%; }

/* ---- CTA spacing after the removed help strip ---------------------------- */

/* The questionnaire now runs straight into the global footer CTA. Without this the
   Next button sat hard against the dark band. */
.adv-body { padding-bottom: 3.4rem; }

/* ---- landing page: primary action, quiet alternative --------------------- */

/* Hierarchy: understand the tool, start it, an alternative route, then the
   qualification. The disclaimer moved below the actions so it no longer sits
   between the explanation and the decision. */
.adv-cta { text-align: center; margin-top: 2.6rem; }

/* Fixed width rather than padding-driven, so the button reads as a deliberate
   target rather than a label with a box round it. Capped by max-width so it still
   fits a 320px phone. */
.adv-btn--start {
    display: inline-flex; justify-content: center;
    width: 235px; max-width: 100%;
    padding: 1rem 1.5rem;
    font-size: .92rem; letter-spacing: .02em;
}

/* The alternative is a sentence with a link in it, not a button. That is the whole
   point of the change: a second button of similar weight asks the visitor to choose
   between two routes, when only one of them is this page's purpose. */
.adv-alt {
    margin: 1.15rem 0 0;
    font-size: .84rem; line-height: 1.5;
    color: var(--cx-muted, #5A6472);
}
.adv-alt a {
    color: var(--cx-gold-ink, #8A6E12);
    font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
.adv-alt a:hover { text-decoration: underline; }
.adv-alt a:focus-visible { outline: 2px solid var(--cx-gold-ink, #8A6E12); outline-offset: 2px; }

/* Quieter still now it follows the decision rather than preceding it: centred,
   narrower measure, no left rule competing with the button above. */
.adv-disclaimer--foot {
    max-width: 60em; margin-left: auto; margin-right: auto;
    margin-top: 2.4rem;
    border-left: 0; border-top: 1px solid rgba(0,0,0,.07);
    border-radius: 0; background: transparent;
    padding: 1.1rem 0 0;
    text-align: center;
    color: var(--cx-muted, #5A6472);
}

@media (max-width: 520px) {
    /* The question sub-line wraps awkwardly at narrow widths with the link held on
       one line, so it gets its own row. */
    .adv-alt a { display: block; margin-top: .35rem; }
}

/* ---- button sizing: use the site's own tokens ---------------------------- */

/* These were hand-sized and came out noticeably larger than every other button on
   the site — roughly 48–55px against the production 42px. Rather than pick a
   smaller number by eye, they now read the button tokens directly, so they match
   whatever the rest of the site does and stay matched if that ever changes.

   coutts-system.css: --cx-btn-h 42px, --cx-btn-pad-x 20px, --cx-btn-fs
   (--cx-fs-meta), --cx-btn-weight 600, --cx-btn-radius, --cx-btn-gap 8px. */
.adv-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);
}

/* --lg no longer means "bigger than a button". It is the standard height with the
   slightly wider padding the system reserves for a primary action. */
.adv-btn--lg {
    height: var(--cx-btn-h, 42px);
    padding: 0 var(--cx-btn-pad-x-lg, 28px);
    font-size: var(--cx-btn-fs, .78rem);
}

/* The landing page's primary action keeps the 220–250px width that was asked for,
   but takes its height and type from the tokens like everything else. Width is a
   deliberate emphasis; height is not the place to add it. */
.adv-btn--start {
    height: var(--cx-btn-h, 42px);
    padding: 0 var(--cx-btn-pad-x, 20px);
    font-size: var(--cx-btn-fs, .78rem);
    letter-spacing: 0;
}

/* ---- space between the lede and the hero action -------------------------- */

/* The button sat directly against the closing line of the paragraph. .adv-lede has
   margin:0 so the two were touching; the gap belongs on the button, which is the
   element that follows, rather than on a paragraph shared with the question pages. */
.adv-hero .adv-btn { margin-top: 1.6rem; }

@media (max-width: 560px) {
    .adv-hero .adv-btn { margin-top: 1.25rem; }
}

/* ============================================================================
   RESULTS
   ============================================================================ */

.adv-res-head {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    margin-bottom: 1.6rem;
}
.adv-res-count { margin: 0; font-size: .88rem; font-weight: 700; color: var(--cx-navy, #0B1626); }

.adv-res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

/* A row, not a card grid. Each result carries a sentence of explanation and up to
   four services, and three of those side by side in equal columns forces either
   truncation or ragged heights. A full-width row lets the explanation be read. */
.adv-res {
    display: grid; grid-template-columns: 1fr auto; gap: 1.4rem;
    align-items: start;
    padding: 1.25rem 1.35rem;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0;
    border-radius: var(--cx-radius-lg, 10px);
}

.adv-res-top { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: .5rem; }
.adv-res-name { font-size: 1.15rem; font-weight: 700; color: var(--cx-navy, #0B1626); margin: 0; }

/* THE BAND, NEVER A NUMBER. Each is a filled pill in its own weight, so the three
   are distinguishable without reading — and distinguishable from each other by more
   than hue, since a visitor who cannot separate the golds still reads the words. */
.adv-badge {
    display: inline-flex; align-items: center;
    padding: .22rem .6rem; border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
.adv-badge--strong-match      { background: var(--cx-gold-ink, #8A6E12); color: #FFF; }
.adv-badge--good-match        { background: #EFE3BE; color: #6B550C; }
.adv-badge--worth-considering { background: #EDEAE1; color: var(--cx-ink-soft, #33404F); }

.adv-res-why { font-size: .88rem; line-height: 1.55; color: var(--cx-ink-soft, #33404F); margin: 0; }

/* Present only when propositions exist — the section is absent otherwise, rather
   than a heading over an empty list. */
.adv-res-svc { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #E2DDD0; }
.adv-res-svc-h {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cx-gold-ink, #8A6E12); margin: 0 0 .4rem;
}
.adv-res-svc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.adv-res-svc a { font-size: .82rem; color: var(--cx-ink); text-decoration: none; }
.adv-res-svc a:hover { color: var(--cx-gold-ink, #8A6E12); text-decoration: underline; }

.adv-res-actions { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; min-width: 190px; }

.adv-res-pick {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: var(--cx-ink-soft, #33404F); cursor: pointer;
    padding: .3rem 0;
}
.adv-res-pick input { width: 17px; height: 17px; accent-color: var(--cx-gold-ink, #8A6E12); cursor: pointer; }
.adv-res-pick:hover { color: var(--cx-ink); }

.adv-empty { max-width: 40em; }
.adv-empty p { font-size: .9rem; line-height: 1.6; color: var(--cx-ink-soft, #33404F); }

@media (max-width: 720px) {
    /* Stack: the actions go under the content and full width, so View jurisdiction
       stays an easy target rather than a narrow column beside the text. */
    .adv-res { grid-template-columns: 1fr; gap: 1rem; }
    .adv-res-actions { min-width: 0; }
    .adv-res-name { font-size: 1.05rem; }
    .adv-res-head { flex-direction: column; align-items: stretch; }
    .adv-compare-go { justify-content: center; }
}

/* ---- result thumbnail ---------------------------------------------------- */

/* Three columns only when there is an image: photograph, content, actions. A card
   without one keeps the two-column layout rather than leaving an empty well, so a
   jurisdiction with no picture does not look like a broken card. */
.adv-res--img { grid-template-columns: 200px 1fr auto; }

.adv-res-img {
    width: 200px; height: 130px;
    object-fit: cover; object-position: center;
    border-radius: var(--cx-radius-lg, 10px);
    display: block;
    background: #EDEAE1;      /* holds the space while it loads */
}

/* The badge should read as a label beside the name, not compete with it. Smaller,
   lighter weight, and vertically centred on the heading's baseline. */
.adv-res-name { font-size: 1.12rem; }
.adv-badge { font-size: .62rem; font-weight: 600; letter-spacing: .06em; padding: .2rem .55rem; }
.adv-badge--strong-match { background: var(--cx-gold-ink, #8A6E12); color: #FFF; }

@media (max-width: 1024px) {
    .adv-res--img { grid-template-columns: 160px 1fr; }
    .adv-res-img  { width: 160px; height: 105px; }
    /* Actions drop below the content rather than squeezing a third column. */
    .adv-res--img .adv-res-actions { grid-column: 2; }
}

@media (max-width: 720px) {
    /* Full-width image across the top, content stacked beneath — the brief's mobile
       arrangement. One column, so the image spans it naturally. */
    .adv-res--img { grid-template-columns: 1fr; }
    .adv-res-img  { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .adv-res--img .adv-res-actions { grid-column: 1; }
}

/* ---- the one region card with no country ---------------------------------- */

/* "International / Multiple Regions" until an image is uploaded for it. A navy field
   with a faint meridian grid — the same device the home page band uses — so the card
   sits in the row as a deliberate treatment rather than a gap where a photograph
   failed to load. Pure CSS: no asset to source, nothing to 404, and it costs nothing.

   Replaced automatically the moment an image is set in Image Library > Hero Images. */
.adv-card-photo--global {
    background-color: var(--cx-navy, #0B1626);
    background-image:
        repeating-linear-gradient(90deg,
            rgba(217,182,90,.16) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg,
            rgba(217,182,90,.10) 0 1px, transparent 1px 26px),
        radial-gradient(circle at 50% 45%, rgba(217,182,90,.14), transparent 62%);
}

/* ---- hero overlay: match the home page ----------------------------------- */

/* The adviser was doing the job twice — dimming the photograph to 55% AND laying a
   scrim over it — so the image read as washed out rather than dark. The home page
   leaves the photograph at full opacity and lets the scrim alone carry the contrast,
   which is why it looks richer.

   Both values below are lifted from .hp-hero-media in home.css rather than
   re-estimated, so the two heroes stay comparable. The gradient is weighted left for
   the same reason it is there: the headline must hold contrast whatever photograph is
   behind it, and a flat overlay works for some images and not others. */
.adv-hero::before { opacity: 1; }

.adv-hero::after {
    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%);
}

/* ---- compare selection ---------------------------------------------------- */

.adv-compare-note {
    margin: 0 0 1rem; font-size: .82rem; color: var(--cx-ink-soft, #33404F);
    padding: .55rem .8rem; background: var(--cx-paper, #F7F5EF);
    border-left: 3px solid var(--cx-gold-soft, #D9B65A); border-radius: 0 6px 6px 0;
}
.adv-compare-note[hidden] { display: none; }

/* Held back at the selection limit, not disabled: a disabled checkbox leaves the tab
   order and the option would vanish for a keyboard user with no explanation. */
.adv-res--blocked { opacity: .62; }
.adv-res--blocked .adv-res-pick { cursor: not-allowed; }

/* The one-selected state. Still visible and still focusable — hiding the button the
   moment someone ticks a box would read as a fault rather than as guidance. */
.adv-btn--muted {
    background: #E8E3D4; color: var(--cx-muted, #5A6472); cursor: not-allowed;
}
.adv-btn--muted:hover { background: #E8E3D4; }

/* ---- save shortlist ------------------------------------------------------- */

/* After the results, never before them. The member or visitor has already received
   everything the adviser offers; this is an invitation to keep it, not a gate. */
.adv-save {
    display: flex; flex-wrap: wrap; gap: .8rem 1.25rem;
    align-items: center; justify-content: space-between;
    margin-top: 2rem; padding: 1.05rem 1.2rem;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0; border-radius: var(--cx-radius-lg, 10px);
}
.adv-save form { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; margin: 0; }
.adv-save-h    { margin: 0 0 .2rem; font-size: .95rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.adv-save-note { margin: 0; font-size: .82rem; color: var(--cx-ink-soft, #33404F); }
.adv-save-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.adv-save-done { margin: 0; font-size: .88rem; font-weight: 700; color: var(--cx-gold-ink, #8A6E12); }
.adv-save-done a { color: var(--cx-navy, #0B1626); font-weight: 700; margin-left: .5rem; }

@media (max-width: 620px) {
    .adv-save { flex-direction: column; align-items: stretch; }
    .adv-save-actions .adv-btn, .adv-save form .adv-btn { width: 100%; justify-content: center; }
}

/* ---- discuss your shortlist ------------------------------------------------
   One contextual enquiry route, after the results. Restrained: a cream panel and a
   single gold button, not a promotion. The global footer CTA still closes the page,
   so this must read as the specific option rather than compete with the general one. */
.adv-discuss {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    align-items: center; justify-content: space-between;
    margin-top: 2.2rem; padding: 1.3rem 1.4rem;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0; border-radius: var(--cx-radius-lg, 10px);
}
.adv-discuss-h { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.adv-discuss p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--cx-ink-soft, #33404F); max-width: 52ch; }
.adv-discuss-note { margin-top: .45rem !important; font-size: .8rem !important; color: var(--cx-muted, #5A6472) !important; }

@media (max-width: 620px) {
    .adv-discuss { flex-direction: column; align-items: stretch; }
    .adv-discuss .adv-btn { width: 100%; justify-content: center; }
}