/* Drop 1291: the services page — find by need. Navy band with the outcomes and the regulator row, then the services
   as cards without images (pictures stay on each service's own page). Full width; light and dark. */
.svb {
  --svb-navy: #0F294C; --svb-navy-2: #16386A; --svb-line-d: #2E4B7D; --svb-gold: #D4A03A; --svb-gold-ink: #8A6212;
  --svb-ink: #12161F; --svb-muted: #4A5363; --svb-ground: #F4F5F8; --svb-card: #FFFFFF; --svb-line: #E3E6EC; --svb-tag: #EEF1F6;
  --svb-on-navy: #FFFFFF; --svb-on-navy-2: #C3CEE3; --svb-on-navy-3: #9FB0CF; --svb-pad: clamp(20px, 5vw, 80px);
  background: var(--svb-ground); color: var(--svb-ink);
}
[data-theme="dark"] .svb {
  --svb-navy: #0A1B33; --svb-navy-2: #10264A; --svb-line-d: #29446F; --svb-gold-ink: #E3B45A;
  --svb-ink: #E6EBF4; --svb-muted: #A8B4C8; --svb-ground: #061326; --svb-card: #0C1E3A; --svb-line: #1D3456; --svb-tag: #142B4D;
}
.svb [hidden] { display: none !important; }
.svb a { text-decoration: none; }
.svb-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; letter-spacing: .02em; }

/* the band */
.svb-hero { background: var(--svb-navy); color: var(--svb-on-navy); padding: clamp(48px, 7vw, 88px) var(--svb-pad) clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 2rem; }
.svb-hero-top { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-end; justify-content: space-between; }
.svb-hero-text { flex: 1 1 36rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.svb-eyebrow { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--svb-gold); }
.svb-title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--svb-on-navy); text-wrap: balance; }
.svb-lead { margin: 0; font-size: 1.1rem; line-height: 1.65; color: var(--svb-on-navy-2); max-width: 62ch; }
.svb-need-h { margin: .5rem 0 0; font-size: 1.15rem; font-weight: 600; color: var(--svb-on-navy); }
.svb-needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.svb-need { display: flex; flex-direction: column; gap: .6rem; min-height: 9.25rem; padding: 1.35rem; border-radius: 12px; border: 1px solid var(--svb-line-d); color: var(--svb-on-navy); transition: border-color .2s, background .2s; }
.svb-need:hover { border-color: var(--svb-gold); color: var(--svb-on-navy); }
.svb-need:focus-visible, .svb-reg:focus-visible, .svb-card:focus-visible, .svb-btn:focus-visible { outline: 2px solid var(--svb-gold); outline-offset: 2px; }
.svb-need-top { display: flex; justify-content: space-between; color: var(--svb-gold); }
.svb-need-t { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.svb-need-d { font-size: .85rem; line-height: 1.55; color: var(--svb-on-navy-3); }
.svb-need.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0F294C; }
.svb-need.is-on .svb-need-top { color: #8A6212; }
.svb-need.is-on .svb-need-d { color: #4A5363; }
.svb-regs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.svb-regs-label { font-size: .82rem; color: var(--svb-on-navy-3); margin-inline-end: .35rem; }
.svb-reg { font-size: .85rem; font-weight: 600; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--svb-line-d); color: #DCE3F0; transition: border-color .2s; }
.svb-reg:hover { border-color: var(--svb-gold); color: #FFFFFF; }
.svb-reg.is-on { background: var(--svb-gold); border-color: var(--svb-gold); color: #0B1630; }

/* the results */
.svb-results { padding: clamp(32px, 4vw, 48px) var(--svb-pad) clamp(56px, 6vw, 88px); display: flex; flex-direction: column; gap: 1.6rem; }
.svb-results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; }
.svb-results-t { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--svb-ink); }
.svb-results-s { font-size: .9rem; color: var(--svb-muted); font-variant-numeric: tabular-nums; }
.svb-chip-row { margin: 0; }
.svb-chip { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; background: var(--svb-tag); color: var(--svb-ink); }
.svb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; }
.svb-card { display: flex; flex-direction: column; gap: .85rem; padding: 1.75rem; background: var(--svb-card); border: 1px solid var(--svb-line); border-radius: 14px; color: var(--svb-ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.svb-card:hover { border-color: var(--svb-gold); box-shadow: 0 10px 30px rgba(11, 42, 91, .08); color: var(--svb-ink); }
.svb-card-k { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--svb-gold-ink); }
.svb-card-t { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--svb-navy); }
[data-theme="dark"] .svb-card-t { color: #DCE6F7; }
.svb-card-d { flex-grow: 1; font-size: .92rem; line-height: 1.6; color: var(--svb-muted); }
.svb-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.svb-tag { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; padding: .25rem .45rem; border-radius: 4px; background: var(--svb-tag); color: var(--svb-ink); }
.svb-card-f { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--svb-line); font-size: .82rem; color: var(--svb-muted); }
.svb-card-f b { color: var(--svb-ink); font-weight: 600; }
.svb-go { font-weight: 600; color: var(--svb-navy); white-space: nowrap; }
[data-theme="dark"] .svb-go { color: #DCE6F7; }
.svb-card:hover .svb-go { color: var(--svb-gold-ink); }
.svb-arrow { display: inline-block; transition: transform .2s; }
.svb-card:hover .svb-arrow { transform: translateX(3px); }
[dir="rtl"] .svb-arrow { transform: scaleX(-1); }
[dir="rtl"] .svb-card:hover .svb-arrow { transform: scaleX(-1) translateX(3px); }
.svb-empty { margin: 0; padding: 2.5rem; background: var(--svb-card); border: 1px dashed var(--svb-line); border-radius: 14px; font-size: .95rem; color: var(--svb-muted); }

/* the close */
.svb-cta { background: var(--svb-card); border-top: 1px solid var(--svb-line); padding: clamp(36px, 4vw, 56px) var(--svb-pad); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.svb-cta-text { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.svb-cta-t { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--svb-navy); }
[data-theme="dark"] .svb-cta-t { color: #DCE6F7; }
.svb-cta-s { margin: 0; font-size: .95rem; color: var(--svb-muted); }
.svb-cta-acts { display: flex; flex-wrap: wrap; gap: .75rem; }
.svb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: filter .2s, border-color .2s; }
.svb .svb-btn-gold { background: var(--svb-gold); color: #0B1630; }
.svb .svb-btn-gold:hover { filter: brightness(1.06); color: #0B1630; }
.svb .svb-btn-navy { background: #0F294C; color: #FFFFFF; }
.svb .svb-btn-navy:hover { background: #16386A; color: #FFFFFF; }
.svb .svb-btn-line { border: 1px solid var(--svb-line); color: var(--svb-ink); }
.svb .svb-btn-line:hover { border-color: var(--svb-gold); color: var(--svb-ink); }
@media (max-width: 640px) { .svb-need { min-height: 0; } .svb-btn { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .svb-card, .svb-need, .svb-arrow { transition: none; } }
/* the website's phone rule gives every band "4rem 0 !important"; these bands keep their side gutter */
@media (max-width: 768px) {
  .svb > section.svb-hero { padding: 3.5rem 20px 2.25rem !important; }
  .svb > section.svb-results { padding: 2rem 20px 3.5rem !important; }
  .svb > section.svb-cta { padding: 2.25rem 20px !important; }
}