/* Scoped initial visual checkpoint. Shared tokens and component defaults stay intact. */
.sb-page { color: var(--color-dark-blue); }
.sb-page p { margin-block: 12px; }
.sb-page a:not(.button) { color: inherit; text-underline-offset: 3px; }
.sb-page .button { min-height: 44px; }
.sb-page button { cursor: pointer; }
.sb-page button[aria-disabled="true"] { opacity: .55; cursor: default; }
.sb-section { padding-block: 40px; }
.sb-tinted { background: var(--color-pale-blue); }
.sb-reading { max-width: 850px; margin-inline: auto; }
.sb-intro { margin-block: 16px 28px; }
.sb-page .section-title { font-size: 32px; margin-bottom: 24px; }
.sb-hero { background: var(--color-dark-blue); color: var(--color-white); padding-block: 44px; }
.sb-hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
.sb-hero h1 { margin: 0 0 20px; font: 600 38px/1.2 var(--font-heading); }
.sb-hero .sb-statement { font-size: 22px; line-height: 1.4; font-weight: 600; }
.sb-hero-copy { min-width: 0; }
.sb-hero-copy .sb-action { margin-top: 24px; }
.sb-hero-figure { margin: 0; min-width: 0; }
.sb-hero-figure img { aspect-ratio: 8 / 5; }
.sb-hero figcaption { font-size: 14px; text-align: center; padding-inline: 12px; }
.sb-hero a:focus-visible, .sb-closing a:focus-visible { outline-color: var(--color-amber); }
.sb-situations { gap: 24px; }
.sb-situation-pathways { margin-top: 24px; padding: 16px 24px; border-left: 3px solid var(--color-primary); background: var(--color-pale-blue); }
.sb-situation-pathways p { margin: 0; }
.sb-situations .content-card, .sb-benefits .content-card { padding: 24px; }
.sb-page .content-card h3 { font: 600 22px/1.35 var(--font-body); text-align: left; }
.sb-audience { padding-top: 16px; }
.sb-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sb-carousel { max-width: 1040px; margin-inline: auto; }
.sb-slides { display: grid; gap: 32px; }
.sb-slide { border: 1px solid var(--color-neutral); border-radius: 8px; overflow: hidden; background: var(--color-white); }
.sb-slide-image { aspect-ratio: 8 / 5; background: var(--color-pale-blue); }
.sb-slide-image img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; }
.sb-slide-copy { padding: 20px 24px; }
.sb-slide-copy h3 { margin: 0; font: 600 26px/1.3 var(--font-heading); }
.sb-slide-copy .button { margin-top: 8px; }
.sb-page [hidden] { display: none !important; }
/* Overlap panels to size the row from the longest caption without loading inert images.
 * Inactive panels stay invisible, unfocusable and absent from the accessibility tree. */
.sb-carousel.is-enhanced .sb-slides { gap: 0; }
.sb-carousel.is-enhanced .sb-slide { grid-area: 1 / 1; }
.sb-carousel.is-enhanced .sb-slide[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.sb-carousel-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 16px; }
.sb-carousel-position { text-align: center; font-size: 15px; line-height: 1.4; }
.sb-centred { text-align: center; }
.sb-packages { gap: 24px; align-items: stretch; }
.sb-packages .service-offer-card { padding: 24px; border-top: 4px solid var(--color-primary); }
.sb-packages .service-offer-card h3 { text-align: center; font-family: var(--font-heading); font-size: 26px; }
.sb-packages .service-price { font-size: 32px; }
.sb-packages .service-feature-list { margin-block: 8px; }
.sb-packages .service-feature-list li { margin-block: 10px; }
.sb-packages .service-offer-card > p:first-of-type + p { min-height: 5.1em; }
.sb-packages .sb-action { margin-top: auto; padding-top: 16px; text-align: center; }
.sb-shared-inclusions { max-width: 850px; margin: 24px auto 0; padding: 20px 24px; border-radius: 8px; background: var(--color-white); }
.sb-shared-inclusions h3 { margin: 0; font: 600 23px/1.4 var(--font-heading); }
.sb-shared-inclusions .service-feature-list { margin-bottom: 0; }
.sb-costs { margin-top: 32px; }
.sb-costs h3, .sb-question h3 { font: 600 23px/1.4 var(--font-heading); }
.sb-process { gap: 20px; }
.sb-process .content-card { padding: 20px; }
.sb-question + .sb-question { margin-top: 28px; }
.sb-closing { text-align: center; background: var(--color-dark-blue); color: var(--color-white); }
.sb-closing .section-title { color: inherit; }
@media (min-width: 1024px) {
  .sb-situations .content-card h3 { min-height: 2.7em; }
}
@media (max-width: 1023px) {
  .sb-hero-layout { grid-template-columns: minmax(0, 1fr); }
  .sb-hero-figure { max-width: 680px; margin-inline: auto; }
  .sb-packages { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
  .sb-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sb-section { padding-block: 32px; }
  .sb-hero { padding-block: 32px; }
  .sb-hero h1 { font-size: 32px; }
  .sb-hero .sb-statement { font-size: 20px; }
  .sb-hero-layout { gap: 16px; }
  .sb-hero-copy .sb-action .button, .sb-closing .button { width: 100%; }
  .sb-page .section-title { font-size: 28px; }
  .sb-page p { margin-block: 16px; }
  .sb-hero figcaption { line-height: 1.6; }
  .sb-situations, .sb-benefits, .sb-process { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sb-situations .content-card, .sb-benefits .content-card { padding: 20px; }
  .sb-situation-pathways { padding: 16px 20px; }
  .sb-situation-pathways p { margin: 0; }
  .sb-slide-copy { padding: 20px; }
  .sb-slide-copy h3 { font-size: 24px; }
  .sb-carousel-controls { grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .sb-carousel-position { grid-column: 1 / -1; grid-row: 1; min-height: 42px; margin: 0; }
  .sb-carousel-controls .button { padding-inline: 10px; font-size: 15px; }
  .sb-packages .service-offer-card { padding: 20px; }
  .sb-packages .service-offer-card > p:first-of-type + p { min-height: 0; }
  .sb-shared-inclusions { padding: 20px; }
}
@media (max-width: 359px) {
  .sb-page .section-title { font-size: 26px; }
  .sb-page .content-card h3 { font-size: 21px; }
  .sb-situations .content-card, .sb-benefits .content-card, .sb-packages .service-offer-card { padding: 16px; }
  .sb-carousel-controls { gap: 10px; }
  .sb-carousel-controls .button { font-size: 14px; padding-inline: 6px; }
}
