/* ============================================================================
   BUILD MY INTERNATIONAL BUSINESS
   ----------------------------------------------------------------------------
   A requirement, not a basket. No cart glyphs, no running total, no progress bar,
   no completion percentage — §32 rules those out and they would also misdescribe
   what the page does: Coutts reviews the requirement, the page does not price it.
   ============================================================================ */

.bld { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: var(--cx-ink); }
.bld-inner { max-width: var(--cx-container, 1180px); margin: 0 auto; padding: 0 20px; }

.bld-hero { background: var(--cx-navy, #0B1626); color: #FFF; padding: 26px 0 30px; }
.bld-crumbs { font-size: .78rem; color: rgba(255,255,255,.72); margin-bottom: .9rem; }
.bld-crumbs a { color: rgba(255,255,255,.9); text-decoration: none; }
.bld-crumbs a:hover { text-decoration: underline; }
.bld-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
               color: var(--cx-gold-soft, #D9B65A); margin: 0 0 .4rem; }
.bld-h1 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); font-weight: 700; margin: 0 0 .6rem; }
.bld-lede { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 52ch; margin: 0; }

.bld-body { padding: 2.2rem 20px 3rem; }
.bld-h2 { font-size: 1.05rem; font-weight: 700; color: var(--cx-navy, #0B1626); margin: 0 0 .8rem; }

.bld-flash, .bld-warn {
    margin: 0 0 1.2rem; padding: .7rem 1rem; font-size: .85rem; border-radius: 0 6px 6px 0;
    background: var(--cx-paper, #F7F5EF); border-left: 3px solid var(--cx-gold-soft, #D9B65A);
}
.bld-warn { border-left-color: #B3261E; }

/* ---- actions ---- */
.bld-actions {
    display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
    padding: 1rem 1.15rem; margin-bottom: 1.8rem;
    background: var(--cx-paper, #F7F5EF); border: 1px solid #E2DDD0; border-radius: var(--cx-radius-lg, 10px);
}
.bld-count { margin: 0; font-size: .9rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.bld-count-hint { flex: 1 0 100%; margin: 0; font-size: .78rem; color: var(--cx-muted, #5A6472); }
.bld-actions-go { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bld-actions-go form { margin: 0; }

.bld-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: var(--cx-btn-h, 42px); padding: 0 var(--cx-btn-pad-x, 20px);
    border: 1px solid var(--cx-line, #E3E7EC); border-radius: var(--cx-btn-radius, 6px);
    background: #FFF; color: var(--cx-ink); cursor: pointer;
    font-family: inherit; font-size: var(--cx-btn-fs, .78rem); font-weight: 600; text-decoration: none;
}
.bld-btn--gold { background: var(--cx-gold-soft, #D9B65A); color: var(--cx-navy, #0B1626); border-color: transparent; }
.bld-btn--gold:hover { background: #C9A94D; }
.bld-btn[disabled] { opacity: .45; cursor: not-allowed; }
.bld-btn:focus-visible, .bld-toggle:focus-visible { outline: 2px solid var(--cx-gold-ink, #8A6E12); outline-offset: 2px; }

/* Secondary by design (§21): a link, not a third button competing with the two above. */
.bld-discuss { font-size: .82rem; font-weight: 700; color: var(--cx-gold-ink, #8A6E12); text-decoration: none; }
.bld-discuss:hover { text-decoration: underline; }

/* ---- service families ---- */
.bld-fam { margin-bottom: 2rem; }
.bld-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.bld-svc {
    display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
    padding: .9rem 1rem; background: #FFF;
    border: 1px solid var(--cx-line, #E3E7EC); border-radius: 8px;
}
/* Selected state carries a tinted ground AND a gold rule AND the word "Selected" on the
   control — never colour alone (§29). */
.bld-svc.is-on { background: #FDFAF2; border-color: var(--cx-gold-ink, #8A6E12); box-shadow: inset 0 0 0 1px var(--cx-gold-ink, #8A6E12); }

.bld-svc-body { min-width: 0; }
.bld-svc-t { margin: 0 0 .2rem; font-size: .9rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.bld-svc-s { margin: 0 0 .35rem; font-size: .8rem; line-height: 1.5; color: var(--cx-ink-soft, #33404F); }
.bld-svc-more { font-size: .76rem; color: var(--cx-gold-ink, #8A6E12); text-decoration: none; }
.bld-svc-more:hover { text-decoration: underline; }

.bld-toggle {
    flex: 0 0 auto; min-width: 104px; justify-content: center;
    display: inline-flex; align-items: center; gap: .35rem;
    height: 36px; padding: 0 .9rem; cursor: pointer;
    border: 1px solid var(--cx-line, #E3E7EC); border-radius: 6px;
    background: #FFF; color: var(--cx-ink); font-family: inherit; font-size: .78rem; font-weight: 700;
}
.bld-toggle.is-on { background: var(--cx-gold-ink, #8A6E12); border-color: var(--cx-gold-ink, #8A6E12); color: #FFF; }

/* ---- chooser, empty state, note ---- */
.bld-choose { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.bld-label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .3rem; }
.bld-select { height: var(--cx-btn-h, 42px); padding: 0 .7rem; min-width: 260px;
              border: 1px solid var(--cx-line, #E3E7EC); border-radius: 6px; font-family: inherit; font-size: .85rem; }
.bld-alt { margin-top: 1.2rem; font-size: .84rem; color: var(--cx-muted, #5A6472); }
.bld-alt a { color: var(--cx-gold-ink, #8A6E12); font-weight: 700; }

.bld-none { padding: 1.4rem 1.5rem; background: var(--cx-paper, #F7F5EF); border-radius: var(--cx-radius-lg, 10px); }
.bld-none p { font-size: .87rem; line-height: 1.55; color: var(--cx-ink-soft, #33404F); max-width: 56ch; }

.bld-note { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--cx-line, #E3E7EC);
            font-size: .78rem; line-height: 1.55; color: var(--cx-muted, #5A6472); max-width: 70ch; }

/* ---- mobile: stack, never scroll sideways (§28) ---- */
@media (max-width: 620px) {
    .bld-svc { flex-direction: column; align-items: stretch; gap: .6rem; }
    .bld-toggle { width: 100%; }
    .bld-actions { flex-direction: column; align-items: stretch; }
    .bld-actions-go { flex-direction: column; align-items: stretch; }
    .bld-actions-go .bld-btn { width: 100%; justify-content: center; }
    .bld-discuss { text-align: center; padding-top: .3rem; }
    .bld-choose, .bld-select, .bld-choose .bld-btn { width: 100%; min-width: 0; }
}