/* Main website layouts. Load after the shared /assets/brand.css.
   Shared tokens, type, buttons, navigation and footer live in brand.css. */

/* Surfaces carry their text, label and focus colours into shared components.
   Light cards inside dark sections explicitly reset this context. */
:where(.page-hero, .section-ink, .bsi-home .hero,
       .example-hero, .example-finish, .quiz-hero, .quiz-product,
       .next-hero, .next-offer-band) {
  --bsi-text: var(--bsi-cream);
  --bsi-secondary: #d4dbe6;
  --bsi-label: var(--bsi-gold-light);
  --bsi-outline: #9aa8bd;
  --bsi-focus: var(--bsi-gold-light);
}
:where(.hero-card, .app-card, .media-card, .book, .principle, .proof-card,
       .route-grid article, .quiz-card, .next-boundaries, .next-enquiry-card,
       .example-card, .example-callout, .free-paid-comparison) {
  --bsi-text: var(--bsi-navy);
  --bsi-secondary: var(--bsi-slate);
  --bsi-label: var(--bsi-gold-dark);
  --bsi-outline: #66738a;
  --bsi-focus: #8b6426;
}

.section-title { max-width: 820px; font-size: clamp(32px, 4vw, 56px); }

form { background: var(--bsi-cream); border: 1px solid var(--bsi-line); border-radius: var(--bsi-radius); padding: 32px; }
label { display: block; margin-bottom: 20px; font-size: 16px; font-weight: 600; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  display: block; width: 100%; min-height: 48px; margin-top: 8px;
  padding: 12px 16px; border: 1px solid #8993a3; border-radius: var(--bsi-radius);
  background: #fff; color: var(--bsi-navy); font: 400 16px/1.5 var(--bsi-font);
}
textarea { resize: vertical; }
#draft-result { border-top: 1px solid var(--bsi-line); margin-top: 24px; padding-top: 24px; }

/* Shared section, hero and content layouts */
.page-hero { position: relative; overflow: hidden; padding: 80px 0; background: var(--bsi-navy); color: var(--bsi-cream); }
.page-hero::after { position: absolute; inset: 0; background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, transparent, #000); content: ""; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: var(--bsi-space-8); align-items: center; }
.page-hero h1 { max-width: 820px; font-size: clamp(36px, 4.8vw, 68px); }
.page-hero h1 span { color: var(--bsi-gold-light); }
.hero-actions, .section-actions, .book-actions { display: flex; flex-wrap: wrap; gap: var(--bsi-space-2); align-items: center; margin-top: var(--bsi-space-3); }
.hero-portrait { position: relative; max-width: 430px; justify-self: end; }
.hero-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1); border-radius: var(--bsi-radius); }
.hero-portrait::before { position: absolute; inset: 16px -16px -16px 16px; z-index: -1; border: 1px solid var(--bsi-gold); border-radius: var(--bsi-radius); content: ""; }
.hero-card { padding: var(--bsi-space-4); border-top: 4px solid var(--bsi-gold); border-radius: var(--bsi-radius); background: var(--bsi-cream); color: var(--bsi-navy); }
.hero-card p { margin: 0; font-size: 24px; line-height: 1.3; }
.hero-card small { display: block; margin-top: 24px; color: var(--bsi-secondary); }
.section { padding: 80px 0; }
.section-white, .customer-section { background: var(--bsi-cream); }
.customer-section { padding: 80px 0; }
.section-ink { background: var(--bsi-navy-soft); color: var(--bsi-cream); }
.section-gold, .cta { --bsi-text: var(--bsi-navy); --bsi-secondary: var(--bsi-navy); --bsi-label: var(--bsi-navy); --bsi-focus: var(--bsi-navy); background: var(--bsi-gold); color: var(--bsi-navy); }
.reading { max-width: 760px; }
.reading h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.15; margin: 16px 0 24px; }
.reading h2 { font-size: 28px; line-height: 1.25; margin: 32px 0 16px; }
.reading p, .reading li { font-size: 18px; line-height: 1.8; }
.reading section { padding: 24px 0; }
.reading.policy-reading { max-width: 900px; }
.policy-reading .legal-provider { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bsi-line); color: var(--bsi-secondary); font-size: 14px; }
.note-callout { padding: 32px; margin-top: 32px; background: var(--bsi-neutral); border-radius: var(--bsi-radius); }
.other-paths { background: var(--bsi-neutral); }
.route-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.route-grid article { display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1px solid var(--bsi-line); border-radius: var(--bsi-radius); background: var(--bsi-cream); color: var(--bsi-text); }
.route-grid h3 { margin: 16px 0 12px; font-size: 28px; line-height: 1.25; }
.route-grid p { color: var(--bsi-secondary); font-size: 16px; line-height: 1.75; }
.route-grid a { display: inline-flex; align-items: center; min-height: 48px; margin-top: auto; padding-top: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.route-label { color: var(--bsi-label); font-size: 14px; line-height: 1.5; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.enquiry-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 64px; align-items: start; }
.strategy-agenda { padding-left: 24px; line-height: 1.8; }
.strategy-agenda li { margin: 16px 0; }
.strategy-enquiry { padding: 32px; }
.strategy-enquiry ul { padding-left: 24px; line-height: 1.8; }
.native-enquiry { padding: 12px; background: #fff; border: 1px solid var(--bsi-line); border-radius: var(--bsi-radius); }
.native-enquiry iframe { display: block; width: 100%; height: 980px; border: 0; }

/* Authority, books and evidence components */
.principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 48px; border-top: 1px solid var(--bsi-line); border-left: 1px solid var(--bsi-line); }
.principle { min-height: 240px; padding: 32px; border-right: 1px solid var(--bsi-line); border-bottom: 1px solid var(--bsi-line); }
.principle span { color: var(--bsi-label); font-size: 14px; line-height: 1.5; font-weight: 700; }
.principle h3 { margin: 24px 0 12px; font-size: 26px; line-height: 1.25; }
.principle p { margin: 0; color: var(--bsi-secondary); }
.quote { margin: 0; padding-left: 32px; border-left: 2px solid var(--bsi-gold); font-size: clamp(28px, 4vw, 56px); line-height: 1.25; }
.book-list { display: grid; gap: 24px; margin-top: 48px; }
.book { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 48px; align-items: center; padding: 32px; border: 1px solid var(--bsi-line); border-radius: var(--bsi-radius); background: var(--bsi-cream); }
.book-cover { display: block; padding: 0; background: var(--bsi-navy); box-shadow: 12px 16px 0 var(--bsi-neutral); overflow: hidden; }
.book-cover img { width: 100%; height: auto; }
.book h2 { margin: 0 0 8px; font-size: 36px; line-height: 1.2; }
.book h3 { margin: 0 0 16px; color: var(--bsi-label); font-size: 14px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.book p { max-width: 720px; color: var(--bsi-secondary); }
.timeline { margin-top: 48px; border-top: 1px solid var(--bsi-line); }
.timeline-item { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--bsi-line); }
.timeline-item time, .timeline-item .label { color: var(--bsi-label); font-size: 14px; line-height: 1.5; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.timeline-item h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.25; }
.timeline-item p { max-width: 760px; margin: 0; color: var(--bsi-secondary); }
.timeline-item a { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 48px; }
.media-grid-paired { grid-template-columns: repeat(2,minmax(0,1fr)); }
.media-card { display: flex; flex-direction: column; min-height: 350px; padding: 32px; border-top: 4px solid var(--bsi-gold); border-radius: var(--bsi-radius); background: var(--bsi-cream); color: var(--bsi-navy); }
.media-card .tag { color: var(--bsi-label); font-size: 14px; line-height: 1.5; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.media-card h3 { margin: 32px 0 16px; font-size: 28px; line-height: 1.25; }
.media-card p { color: var(--bsi-secondary); }
.media-card a { display: inline-flex; align-items: center; min-height: 48px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bsi-line); font-weight: 600; }

/* Programme details and closing actions */
.app-preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 32px 0; }
.app-preview-grid figure { margin: 0; background: #fff; border: 1px solid var(--bsi-line); border-radius: var(--bsi-radius); overflow: hidden; }
.app-preview-grid img { width: 100%; max-height: 620px; object-fit: contain; background: var(--bsi-cream); }
.app-preview-grid figcaption { padding: 16px; color: var(--bsi-secondary); font-size: 16px; line-height: 1.6; }
.programme-faq { max-width: 900px; margin: 24px 0; }
.programme-faq details { padding: 16px 0; border-bottom: 1px solid var(--bsi-line); }
.programme-faq summary { cursor: pointer; min-height: 48px; padding-block: 8px; font-size: 18px; line-height: 1.6; font-weight: 600; }
.programme-faq details p { max-width: 76ch; color: var(--bsi-secondary); font-size: 18px; line-height: 1.75; }
.programme-detail, .excellence-section { background: var(--bsi-neutral-warm); }
.cta { padding: 72px 0; }
.cta-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: 56px; align-items: end; }
.cta h2 { max-width: 820px; font-size: clamp(32px, 4.5vw, 60px); }
.cta-actions { display: grid; gap: 12px; }
.care-link { display: none; position: static; }

/* Mobile programme actions appear only after the hero actions leave view. */



@media (max-width: 900px) {

  .hero-grid, .cta-grid, .enquiry-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .hero-portrait { justify-self: start; max-width: 520px; }
  .principles, .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-grid { grid-template-columns: minmax(0,1fr); }
  .section, .customer-section { padding: 56px 0; }






}
@media (max-width: 700px) {
  .app-preview-grid { grid-template-columns: minmax(0,1fr); }
  .native-enquiry { padding: 0; }
  .native-enquiry iframe { height: 1090px; }
}
@media (max-width: 650px) {
  .page-hero { padding: 48px 0; }
  .page-hero h1 { font-size: 36px; }
  .principles, .media-grid { grid-template-columns: minmax(0,1fr); }
  .book { grid-template-columns: minmax(0,1fr); padding: 24px; gap: 32px; }
  .book-cover { width: min(260px,88%); }
  .book h2 { font-size: 30px; }
  .timeline-item { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .hero-actions .button, .cta-actions .button, .section-actions .button { width: 100%; }
  .note-callout, .route-grid article, .media-card, .principle, .strategy-enquiry { padding: 24px; }
  form { padding: 24px; }
}


@media print {
  .site-header, .site-footer, .bsi-programme-bar, .care-link { display: none !important; }
  body.bsi-mobile-actions { padding-bottom: 0; }
}