/*
  Shared visual consistency layer.
  Keep this file loaded after page-level styles so common typography and spacing
  stay aligned while individual layouts keep their own structure.
*/
/* Fonts loaded by global_min.css — no duplicate import needed */
/* Shared rhythm tokens: loaded after global.min.css so section spacing is owned here. */
:root {
  --section-y: clamp(48px, 5vw, 72px);
  --section-y-compact: clamp(36px, 4vw, 52px);
  --block-gap: clamp(24px, 3vw, 36px);
}

/* ── BLANK-BAR FIX ──
   Ensure pages have sufficient top spacing so content is not hidden under
   the fixed site navigation. Individual pages (for example `page-home`) or
   scripts may override this when a different layout is required.
   !important: Prevents script-level or component-level resets from collapsing nav spacing. */
@media (min-width: 901px) {
  body {
    padding-top: var(--nav-main) !important;
  }

  /* Hero pages: nav floats over the full-bleed hero — no body offset needed */
  body.page-home,
  body.site-has-visual-hero {
    padding-top: 0 !important;
  }
}

@media (max-width: 900px) {
  body {
    padding-top: 64px !important;
  }

  body.page-home {
    padding-top: 0 !important;
  }
}

html {
  font-family: var(--font-body) !important;
  text-size-adjust: 100%;
  font-size: 16px;
}

/* WCAG Compliance: Minimum font size 16px for readability. Line-height 1.7 for generous spacing. */
body {
  font-size: 16px;
  line-height: 1.7;
}

/* Font-family declarations consolidated in global_min.css. No duplication here. */

p,
li,
.lead,
.bh-p,
.prog-intro-text p,
.footer-tagline,
.footer-address p {
  line-height: 1.75;
}

.container {
  /* !important: Ensures consistent padding regardless of page-level or component overrides */
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

.page-intro,
.page-banner,
.page-header,
.bh-banner,
.merit-banner {
  /* !important: Overrides page or component padding to enforce token-based spacing. */
  padding-top: var(--section-y-compact) !important;
  padding-bottom: var(--section-y-compact) !important;
}

.section,
.bh-section,
.faq-page,
.fees-body,
.form-outer,
.section-legal,
.school-section,
.payment-section,
.download-strip,
.testimonial-band,
.stats-strip,
.values-strip,
.global-band,
.safety-band,
.map-section,
.newsletter-strip,
.prog-intro,
.prog-offers,
.prog-resources,
.enrol-cta,
.cta-band,
.bh-cta-band,
.cbc-strip,
.transport-hero,
.transport-section,
.cta-band-light,
.blog-hero,
.seo-link-hub,
.legal-main {
  /* !important: Single owner of section spacing. Overrides conflicting page-level declarations. */
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}

/* ── SCROLL PAINT STABILITY ──
   Avoid browser blanking while it reactivates off-screen sections during fast
   smooth scrolling. The shared reveal observer still handles entrance motion. */
.section,
.section-light,
.section-cream,
.section-navy,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.cbc-strip,
.transport-hero,
.transport-section,
.legal-main {
  content-visibility: visible !important;
  contain-intrinsic-size: auto none !important;
}

.blog-hero {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}

@media (min-width: 901px) {
  body.site-nav-index-behavior {
    padding-top: 80px;
  }

  body.site-nav-index-behavior.site-has-visual-hero,
  body.page-home {
    padding-top: 0;
  }

  body.site-nav-index-behavior .main-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transform: translateY(0);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .28s ease;
  }

  body.site-nav-index-behavior .main-nav.nav-solid {
    background: #fff;
    border-bottom-color: rgba(26, 58, 92, .1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
  }

  body.site-nav-index-behavior .main-nav.nav-up {
    transform: translateY(-100%);
  }

  body.site-nav-index-behavior .main-nav.nav-down {
    transform: translateY(0);
  }

  body.site-nav-index-behavior .nav-inner {
    min-height: 80px;
  }

  body.site-nav-index-behavior .main-nav:not(.nav-solid) .logo-name,
  body.site-nav-index-behavior .main-nav:not(.nav-solid) .nav-item > a {
    color: rgba(255, 255, 255, .92) !important;
  }

  body.site-nav-index-behavior .main-nav:not(.nav-solid) .logo-sub {
    color: rgba(255, 255, 255, .74) !important;
  }

  body.site-nav-index-behavior .main-nav:not(.nav-solid) .hamburger span {
    background: #fff;
  }

  body.site-nav-index-behavior .nav-item.open > .drop-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* ── IMAGE STYLING (consistency from boarding.html) ── */

/* Base image styles */
img {
  display: block;
  max-width: 100%;
}

img.lazyload {
  opacity: 0;
  transition: opacity .5s ease;
}

img.lazyload.loaded {
  opacity: 1;
}

/* Navigation logo images */
.nav-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.mob-drawer-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Footer logo image */
.footer-logo-img {
  width: 92px;
  height: auto;
  object-fit: contain;
  margin-bottom: 1rem;
}

/* Image strip and frame styles */
.img-strip {
  display: grid;
  gap: 4px;
}

.img-frame {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: transparent;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

.img-frame:hover img {
  transform: scale(1.05);
}

/* Split section images (Brookhouse style) */
.bh-split__img {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: transparent;
}

.bh-split__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}

.bh-split:hover .bh-split__img img {
  transform: scale(1.04);
}

.bh-split__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark) 0%, #1a3a5c 100%);
}

.bh-split__img--placeholder svg {
  opacity: .18;
}

/* Responsive image sizing */
@media (max-width: 640px) {
  .img-frame {
    aspect-ratio: 16/10;
  }
}

.section-rule {
  margin: 0 !important;
}

.img-strip {
  margin-top: var(--block-gap) !important;
  margin-bottom: var(--block-gap) !important;
}

.section + .section,
.section + .bh-section,
.bh-section + .section,
.bh-section + .bh-section,
.section + .cta-band,
.bh-section + .bh-cta-band,
.img-strip + .section,
.section + .img-strip,
.page-intro + .section,
.page-banner + .section,
.page-header + main {
  margin-top: 0 !important;
}

.prog-offers-grid,
.resources-grid,
.bh-resources,
.bh-stats,
.bh-features,
.values-row,
.mv-grid,
.programme-grid,
.resource-grid,
.level-card-grid,
.card-grid,
.features-grid,
.content-grid,
.intro-grid,
.intro-wrap {
  margin-top: var(--block-gap);
}

.section-intro,
.section-header {
  margin-bottom: var(--block-gap) !important;
}

.why-sikri-intro,
.results-header,
.testimonial-section,
.quote-wrap,
.seo-link-hub__intro,
.section-intro {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cta-band,
.cta-band-light,
.bh-cta-band,
.enrol-cta {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cta-actions {
  justify-content: center !important;
}

.cta-band p,
.cta-band-light p,
.bh-cta-band p,
.enrol-cta p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.section-intro > :last-child,
.section-header > :last-child,
.page-intro .container > :last-child,
.page-banner .container > :last-child,
.page-header .container > :last-child,
.bh-banner .container > :last-child,
.cta-band .container > :last-child,
.bh-cta-band .container > :last-child {
  margin-bottom: 0 !important;
}

.page-intro h1,
.page-intro p,
.section-intro h2,
.section-intro p,
.bh-banner h1,
.bh-banner-sub,
.bh-cta-band h2,
.bh-cta-band p {
  max-width: 680px;
}

/* Grid child shrinking: allow grid children to shrink below content size */
.prog-offers-grid > *,
.resources-grid > *,
.bh-resources > *,
.bh-stats > *,
.bh-features > *,
.values-row > *,
.mv-grid > *,
.programme-grid > *,
.resource-grid > *,
.level-card-grid > *,
.card-grid > *,
.features-grid > *,
.content-grid > *,
.intro-grid > *,
.intro-wrap > *,
.why-sikri-grid > *,
.ws-pillars > *,
.level-grid > *,
.sibling-grid > *,
.gallery-strip > *,
.values-strip > *,
.bh-level-grid > *,
.img-strip > *,
.img-strip-2 > *,
.img-strip-3 > *,
.related-grid > *,
.bh-split > *,
.about-split > *,
.seo-link-hub__grid > * {
  min-width: 0;
  overflow: hidden;
}

/* Touch targets: 48px min-height on interactive elements (WCAG 2.5.5).
   Kept scoped — no !important so page-level button styles aren't overridden. */
.btn,
.nav-enquire,
.btn-red-solid,
.btn-navy-outline,
.bh-btn-white,
.bh-btn-ghost,
.mob-cta {
  font-family: var(--font-body);
  min-height: 48px;
}

/* Prevent iOS zoom (font-size must be ≥ 16px on form fields) */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Nav link touch targets */
.nav-item a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.seo-link-hub {
  background: #fff;
  padding: var(--section-y-compact) 0;
}

.seo-link-hub__intro {
  max-width: 720px;
  margin: 0 0 var(--block-gap);
  text-align: left;
}

.seo-link-hub__intro p {
  color: #586879;
  margin-top: 0.75rem;
}

.seo-link-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(26, 58, 92, 0.12);
  border: 1px solid rgba(26, 58, 92, 0.12);
}

.seo-link-hub__link {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
  padding: 24px;
  color: #1a3a5c;
  transition: background 0.22s ease, color 0.22s ease;
}

.seo-link-hub__link:hover {
  background: #1a3a5c;
  color: #fff;
}

.seo-link-hub__link strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.seo-link-hub__link span {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

@media (min-width: 961px) {
  .bh-section:has(.bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(40px, 5vw, 72px);
    max-width: 1180px;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) > .bh-prose--left {
    position: sticky;
    top: 112px;
    max-width: 420px;
    grid-column: 1;
    grid-row: 1;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) > :is(.bh-resources, .resources-grid, .resource-grid) {
    grid-column: 2;
    margin-top: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial + .prog-editorial {
    margin-top: clamp(18px, 2vw, 28px) !important;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial .prog-editorial__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial .prog-editorial__img {
    order: 1 !important;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial .prog-editorial__text {
    order: 2 !important;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card {
    min-height: 220px;
    padding: clamp(28px, 3vw, 36px);
    display: flex;
    flex-direction: column;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource p,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card p {
    margin-bottom: 1rem;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource .bh-link,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card .resource-link {
    margin-top: auto;
  }
}

@media (min-width: 961px) and (max-width: 1120px) {
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 36px;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) > :is(.bh-resources, .resources-grid, .resource-grid) {
    grid-template-columns: 1fr;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card {
    min-height: 240px;
  }
}

@media (max-width: 760px) {
  :root {
    --section-y: 40px;
    --section-y-compact: 32px;
    --block-gap: 24px;
  }

  .page-intro,
  .page-banner,
  .page-header,
  .bh-banner,
  .merit-banner {
    padding-top: var(--section-y-compact) !important;
    padding-bottom: var(--section-y-compact) !important;
  }

  .section,
  .bh-section,
  .faq-page,
  .fees-body,
  .form-outer,
  .section-legal,
  .school-section,
  .payment-section,
  .download-strip,
  .testimonial-band,
  .stats-strip,
  .values-strip,
  .global-band,
  .safety-band,
  .map-section,
  .newsletter-strip,
  .prog-intro,
  .prog-offers,
  .prog-resources,
  .enrol-cta,
  .cta-band,
  .bh-cta-band,
  .cbc-strip,
  .transport-hero,
  .transport-section,
  .cta-band-light,
  .blog-hero,
  .seo-link-hub,
  .legal-main {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }

  .seo-link-hub__grid {
    grid-template-columns: 1fr 1fr;
  }

  .seo-link-hub__link {
    min-height: 118px;
    padding: 20px;
  }
}

/* font-size blanket removed — WCAG 16px is met via html{font-size:16px} and body{font-size:16px}; blanket !important on span/li/label breaks nav, badges, and section tags */

/* Ensure small labels and helper text are at least 14px (though 16px is better) */
.logo-sub,
.logo-name,
.mob-drawer-logo-sub,
.mob-drawer-logo-name,
.seo-link-hub__link span,
small,
.small-text,
.caption,
figcaption {
  font-size: clamp(0.875rem, 1vw, 1rem);
}

/*
  All image containers use the same pattern as the welcome section:
  wrapper = position:relative; overflow:hidden; aspect-ratio
  img     = position:absolute; inset:0; width:100%; height:100%; object-fit:cover
*/
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.prog-editorial__img {
  position: relative;
  overflow: hidden;
  box-shadow: none;
  background: transparent;
}

/* Card/thumbnail frames get rounded corners; editorial image panels are square-edged */
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item {
  border-radius: 4px;
}

.prog-editorial__img {
  border-radius: 0;
}

.img-frame > img,
.intro-img > img,
.about-split-img > img,
.bh-split__img > img,
.ws-card-image > img,
.banner-img > img,
.fleet-image > img,
.safety-img > img,
.gs-item > img,
.gg-item > img,
.prog-editorial__img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* img-strip children flow in grid — use aspect-ratio instead of absolute fill */
.img-strip > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* img-strip: grid layout — children flow normally, not absolutely positioned */

/* Aspect ratios per container type */
.about-split-img  { aspect-ratio: 4 / 3; }
.intro-img        { aspect-ratio: 4 / 3; }
.bh-split__img    { aspect-ratio: 4 / 3; }
.banner-img       { aspect-ratio: 16 / 9; }
.fleet-image      { aspect-ratio: 3 / 2; }
.safety-img       { aspect-ratio: 3 / 2; }
.gs-item          { aspect-ratio: 3 / 2; }
.gg-item          { aspect-ratio: 3 / 2; }
.ws-card-image    { aspect-ratio: 3 / 2; }
.img-frame        { aspect-ratio: 3 / 2; }
/* prog-editorial__img fills its grid column — height driven by the row, not a fixed ratio */
.prog-editorial__img { aspect-ratio: unset; min-height: 420px; }

.site-natural-image-frame {
  aspect-ratio: var(--site-image-ratio, auto) !important;
}

/* img-strip and about-split get content-max width — prog-editorial stays full-bleed */
body > .img-strip,
body > .about-split,
.section > .img-strip,
.section > .about-split,
.bh-section > .bh-split,
main > .img-strip,
main > .about-split {
  width: min(calc(100% - var(--page-gutter) - var(--page-gutter)), var(--content-max));
  margin-left: auto !important;
  margin-right: auto !important;
}

body > .prog-editorial,
.section > .prog-editorial,
.bh-section > .prog-editorial,
main > .prog-editorial {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── EDITORIAL ALTERNATING LAYOUT ── */
.prog-editorial { 
  padding: var(--section-y) 0; 
}
.prog-editorial + .prog-editorial { 
  padding-top: var(--section-y-compact);
  border-top: 1px solid rgba(0,0,0,0.08); 
}
.prog-editorial__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.prog-editorial--reverse .prog-editorial__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.prog-editorial--reverse .prog-editorial__img { 
  order: 2; 
}
.prog-editorial--reverse .prog-editorial__text { 
  order: 1; 
}
.prog-editorial__img {
  position: relative;
  overflow: hidden;
  /* Full-column-height fill — no fixed aspect-ratio, no rounded corners */
  aspect-ratio: unset;
  border-radius: 0;
  min-height: 420px;
  box-shadow: none;
}
.prog-editorial__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.prog-editorial__img:hover > img,
.prog-editorial:hover .prog-editorial__img img {
  transform: scale(1.04);
}
.prog-editorial__label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red, #c8102e);
  display: block;
  margin-bottom: 0.75rem;
}
.prog-editorial__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark, #111820);
  margin-bottom: 0;
}
.prog-editorial__text .hr-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--red, #c8102e);
  margin: 1.5rem 0 2rem;
  border: none;
}
.prog-editorial__body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--soft, #586879);
  margin-bottom: 1rem;
}
.prog-editorial__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 14px 32px;
  background: var(--navy, #1a3a5c);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
.prog-editorial__cta:hover {
  background: var(--navy-dark, #0d2540);
  transform: translateY(-1px);
  text-decoration: none;
}
@media (max-width: 768px) {
  .prog-editorial__inner,
  .prog-editorial--reverse .prog-editorial__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 6vw, 32px) !important;
  }

  .prog-editorial__text + .prog-editorial__img,
  .prog-editorial__img + .prog-editorial__text {
    margin-top: 0 !important;
  }

  .prog-editorial--reverse .prog-editorial__img { 
    order: 1; 
  }
  .prog-editorial--reverse .prog-editorial__text { 
    order: 2; 
  }
  .prog-editorial__img {
    min-height: 300px;
  }
}
@media (max-width: 640px) {
  .prog-editorial__img {
    min-height: 260px;
  }
}

/* ── GOOGLE BLOGGER NOTABLE LIGHT INSPIRED THEME ── */
:root {
  --notable-bg: #ffffff;
  --notable-surface: #ffffff;
  --notable-soft: #f7f8fa;
  --notable-ink: #202124;
  --notable-heading: var(--navy, #1a3a5c);
  --notable-muted: #5f6368;
  --notable-line: #dadce0;
  --notable-accent: var(--red, #c8102e);
  --notable-accent-dark: var(--red-dark, #a00d24);
  --notable-link: var(--navy, #1a3a5c);
  --notable-warm: #f2b705;
  --shadow: 0 1px 2px rgba(60, 64, 67, 0.08) !important;
  --shadow-lg: 0 10px 24px rgba(60, 64, 67, 0.12) !important;
  --border: var(--notable-line) !important;
}

html {
  background: var(--notable-bg);
}

body {
  background: var(--notable-bg) !important;
  color: var(--notable-ink) !important;
}

body,
p,
li,
.lead,
.bh-p,
.prog-intro-text p,
.footer-tagline,
.footer-address p {
  color: var(--notable-muted);
}

/* Footer: remove underlines from links that inherit body link styles */
.footer a,
.footer a:hover {
  text-decoration: none !important;
}

/* Editorial and split images are contained within .container which already has page-gutter padding */

:where(.page-intro,
.page-banner,
.page-header,
.section,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.about-split-text,
.prog-editorial__text,
.intro-text,
.intro-wrap,
.content-grid,
.features-grid,
.card-grid,
.resource-grid,
.level-card-grid,
.programme-grid,
.values-row,
.mv-grid,
.cta-band,
.bh-cta-band,
.enrol-cta,
.legal-main) :where(p, li, .lead, .bh-p, .prog-editorial__body, .prog-intro-text p) {
  color: var(--notable-muted) !important;
  font-size: 1rem;
  line-height: 1.8 !important;
  text-align: left !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.bh-h2,
.bh-h3,
.prog-editorial__title,
.logo-name,
.mob-drawer-logo-name {
  color: var(--notable-heading) !important;
  letter-spacing: 0 !important;
}

em,
.prog-editorial__label,
.section-kicker,
.eyebrow,
.bh-banner-tag,
.ls-tag,
.tag,
.badge {
  color: var(--notable-accent) !important;
}

.main-nav,
body.site-nav-index-behavior .main-nav,
body.site-nav-index-behavior .main-nav.nav-solid {
  background: #fff !important;
  border-bottom: 1px solid var(--notable-line) !important;
  box-shadow: none !important;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.main-nav.nav-up,
body.site-nav-index-behavior .main-nav.nav-up {
  transform: translateY(-100%) !important;
}

.main-nav.nav-down,
body.site-nav-index-behavior .main-nav.nav-down {
  transform: translateY(0) !important;
}

.main-nav:not(.nav-solid) .logo-name,
.main-nav:not(.nav-solid) .logo-sub,
.main-nav:not(.nav-solid) .nav-item > a,
body.site-nav-index-behavior .main-nav:not(.nav-solid) .logo-name,
body.site-nav-index-behavior .main-nav:not(.nav-solid) .logo-sub,
body.site-nav-index-behavior .main-nav:not(.nav-solid) .nav-item > a {
  color: var(--notable-ink) !important;
}

.main-nav:not(.nav-solid) .hamburger span,
body.site-nav-index-behavior .main-nav:not(.nav-solid) .hamburger span {
  background: var(--notable-ink) !important;
}

body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.page-home .main-nav:not(.nav-solid) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.page-home .main-nav:not(.nav-solid) .logo-name,
body.page-home .main-nav:not(.nav-solid) .nav-item > a {
  color: rgba(255, 255, 255, .92) !important;
}

body.page-home .main-nav:not(.nav-solid) .logo-sub {
  color: rgba(255, 255, 255, .74) !important;
}

body.page-home .main-nav:not(.nav-solid) .hamburger span {
  background: #fff !important;
}

body.page-home .main-nav:not(.nav-solid) .nav-item > a::after {
  background: #fff !important;
}

body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .logo-name,
body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .nav-item > a {
  color: rgba(255, 255, 255, .92) !important;
}

body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .logo-sub {
  color: rgba(255, 255, 255, .74) !important;
}

body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .hamburger span {
  background: #fff !important;
}

body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .nav-item > a::after {
  background: #fff !important;
}

.nav-logo .logo-white {
  display: none !important;
}

.nav-logo .logo-colour {
  display: block !important;
}

body.page-home .main-nav:not(.nav-solid) .nav-logo .logo-white,
body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .nav-logo .logo-white {
  display: block !important;
}

body.page-home .main-nav:not(.nav-solid) .nav-logo .logo-colour,
body.site-nav-index-behavior.site-has-visual-hero .main-nav:not(.nav-solid) .nav-logo .logo-colour {
  display: none !important;
}

.logo-sub,
.mob-drawer-logo-sub {
  color: var(--notable-muted) !important;
}

@media (min-width: 901px) {
  body.page-home .prog-editorial--feature,
  body.page-home .prog-editorial--compact,
  body.page-home .prog-editorial--legacy,
  body.page-home .prog-editorial--wide {
    padding: clamp(42px, 4.5vw, 72px) 0 !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__inner,
  body.page-home .prog-editorial--compact .prog-editorial__inner,
  body.page-home .prog-editorial--legacy .prog-editorial__inner,
  body.page-home .prog-editorial--wide .prog-editorial__inner {
    min-height: 0;
    gap: 0 !important;
    align-items: stretch;
  }

  body.page-home .prog-editorial--feature .prog-editorial__text,
  body.page-home .prog-editorial--feature .prog-editorial__img,
  body.page-home .prog-editorial--compact .prog-editorial__text,
  body.page-home .prog-editorial--compact .prog-editorial__img,
  body.page-home .prog-editorial--legacy .prog-editorial__text,
  body.page-home .prog-editorial--legacy .prog-editorial__img,
  body.page-home .prog-editorial--wide .prog-editorial__text,
  body.page-home .prog-editorial--wide .prog-editorial__img {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__img {
    order: 1;
    min-height: 620px;
    aspect-ratio: auto !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__text {
    order: 2;
    background: var(--navy-dark, #0d2540);
    padding: clamp(54px, 5vw, 84px) !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__label {
    color: #ffb6c1 !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__title {
    color: #fff !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__body {
    color: rgba(255, 255, 255, .78) !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__cta {
    background: #fff !important;
    color: var(--navy-dark, #0d2540) !important;
  }

  body.page-home .prog-editorial--compact .prog-editorial__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  }

  body.page-home .prog-editorial--compact .prog-editorial__text {
    order: 1;
    padding: clamp(42px, 4vw, 64px) !important;
    background: #fff;
    border-left: 4px solid var(--red, #c8102e);
  }

  body.page-home .prog-editorial--compact .prog-editorial__img {
    order: 2;
    min-height: 430px;
    aspect-ratio: auto !important;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__text {
    order: 1;
    position: relative;
    padding: clamp(54px, 5vw, 78px) !important;
    background: #fff;
    overflow: hidden;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__text::before {
    content: "12+";
    position: absolute;
    top: clamp(18px, 3vw, 34px);
    right: clamp(24px, 4vw, 54px);
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: clamp(5rem, 10vw, 9rem);
    line-height: .8;
    font-weight: 800;
    color: rgba(200, 16, 46, .08);
    pointer-events: none;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__img {
    order: 2;
    min-height: 560px;
    aspect-ratio: auto !important;
  }

  body.page-home .prog-editorial--wide .prog-editorial__inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-home .prog-editorial--wide .prog-editorial__img {
    order: 1;
    min-height: 420px;
    aspect-ratio: 21 / 9 !important;
  }

  body.page-home .prog-editorial--wide .prog-editorial__text {
    order: 2;
    max-width: 880px;
    padding: clamp(38px, 4vw, 58px) 0 0 !important;
    background: transparent;
  }

  body.page-home .prog-editorial--wide .prog-editorial__body {
    max-width: 820px;
  }

  body.page-home .prog-editorial--compact .prog-editorial__cta,
  body.page-home .prog-editorial--legacy .prog-editorial__cta,
  body.page-home .prog-editorial--wide .prog-editorial__cta {
    background: var(--navy, #1a3a5c) !important;
    color: #fff !important;
  }
}

.nav-item > a::after,
.nav-item > a:hover::after {
  background: var(--notable-accent) !important;
}

.nav-item > a:hover,
.nav-item.open > a,
.drop-panel a:hover,
.mob-drawer a:hover {
  color: var(--notable-link) !important;
}

.drop-panel,
.mob-drawer,
.resource-card,
.bh-resource,
.ws-card,
.card,
.programme-card,
.level-card,
.fee-card,
.faq-item,
.contact-card,
.news-card,
.blog-card,
.featured-post,
.post-card,
.sidebar-card,
.event-card,
.download-card,
.value-card,
.stat-card,
.feature-card,
.team-card,
.route-card,
.payment-card {
  background: var(--notable-surface) !important;
  border: 1px solid var(--notable-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.drop-panel {
  border-top: 0 !important;
}

.section,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.faq-page,
.fees-body,
.form-outer,
.school-section,
.payment-section,
.download-strip,
.testimonial-band,
.stats-strip,
.values-strip,
.global-band,
.safety-band,
.map-section,
.newsletter-strip,
.transport-section,
.legal-main,
.seo-link-hub {
  background: var(--notable-bg) !important;
  border-top: 1px solid rgba(218, 220, 224, 0.72);
}

.page-intro,
.page-banner,
.page-header,
.bh-banner,
.merit-banner,
.cta-band,
.bh-cta-band,
.enrol-cta,
.cbc-strip {
  background: var(--notable-soft) !important;
  color: var(--notable-ink) !important;
  border-top: 1px solid var(--notable-line);
  border-bottom: 1px solid var(--notable-line);
  box-shadow: none !important;
}

.page-intro h1,
.page-banner h1,
.page-header h1,
.bh-banner h1,
.cta-band h2,
.bh-cta-band h2 {
  color: var(--notable-heading) !important;
}

.block-hero h1,
.block-hero h2,
.block-hero p {
  color: #fff !important;
}

.block-hero .block-hero-title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.page-intro p,
.page-banner p,
.page-header p,
.bh-banner p,
.cta-band p,
.bh-cta-band p {
  color: var(--notable-muted) !important;
}

.btn,
.nav-enquire,
.btn-red-solid,
.btn-navy-outline,
.bh-btn-white,
.bh-btn-ghost,
.mob-cta,
.btn-hero-primary,
.btn-cta-primary,
.btn-cta,
.btn-outline,
button[type="submit"],
input[type="submit"] {
  border-radius: 4px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

.btn,
.nav-enquire,
.btn-red-solid,
.btn-navy-outline,
.bh-btn-white,
.bh-btn-ghost,
.mob-cta,
.btn-hero-primary,
.btn-cta-primary,
.btn-cta,
.btn-outline,
button[type="submit"],
input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

.cta-band .container,
.cta-band-light .container,
.bh-cta-band .container,
.enrol-cta .container,
.cta-band-inner {
  text-align: center !important;
}

.cta-band h2,
.cta-band-light h2,
.bh-cta-band h2,
.enrol-cta h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.cta-band p,
.cta-band-light p,
.bh-cta-band p,
.enrol-cta p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.cta-actions,
.bh-cta-btns {
  justify-content: center !important;
}

.cta-actions > *,
.bh-cta-btns > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 769px) {
  .page-intro .container {
    text-align: center !important;
  }

  .page-intro .page-tag,
  .page-intro h1,
  .page-intro p,
  .page-intro p.lead {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

.btn,
.nav-enquire,
.btn-red-solid,
.bh-btn-white,
.mob-cta,
.btn-hero-primary,
.btn-cta-primary,
.btn-cta,
button[type="submit"],
input[type="submit"] {
  background: var(--notable-accent) !important;
  border-color: var(--notable-accent) !important;
  color: #fff !important;
}

.btn:hover,
.nav-enquire:hover,
.btn-red-solid:hover,
.bh-btn-white:hover,
.mob-cta:hover,
.btn-hero-primary:hover,
.btn-cta-primary:hover,
.btn-cta:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--notable-accent-dark) !important;
  border-color: var(--notable-accent-dark) !important;
}

body .main-nav .nav-enquire,
body .main-nav.nav-scrolled .nav-enquire,
body.site-nav-index-behavior .main-nav .nav-enquire {
  background: var(--notable-accent) !important;
  border-color: var(--notable-accent) !important;
  color: #fff !important;
}

body .main-nav .nav-enquire:hover,
body .main-nav.nav-scrolled .nav-enquire:hover,
body.site-nav-index-behavior .main-nav .nav-enquire:hover {
  background: var(--notable-accent-dark) !important;
  border-color: var(--notable-accent-dark) !important;
}

.btn-navy-outline,
.bh-btn-ghost,
.resource-link,
.bh-link,
.content-link,
.seo-link-hub__link,
.btn-outline {
  color: var(--notable-link) !important;
}

.btn-outline {
  background: transparent !important;
  border: 1px solid var(--notable-accent) !important;
}

.blog-hero {
  background: var(--notable-heading) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none !important;
}

.blog-hero h1,
.blog-hero h2,
.blog-hero p,
.blog-hero .hero-sub,
.blog-hero .hero-stat-num,
.blog-hero .hero-stat-label {
  color: #fff !important;
}

.blog-hero h1 em,
.hero-eyebrow,
.post-cat,
.featured-badge,
.card-read-link:hover,
.read-more:hover,
.quick-list a:hover,
.category-list a:hover {
  color: var(--notable-accent) !important;
}

.hero-eyebrow {
  background: rgba(200, 16, 46, 0.16) !important;
  border-color: rgba(200, 16, 46, 0.32) !important;
}

.hero-eyebrow::before,
.featured-badge,
.newsletter-submit,
.cta-btn,
.load-more-btn:hover {
  background: var(--notable-accent) !important;
}

.featured-badge,
.newsletter-submit,
.cta-btn,
.load-more-btn:hover {
  color: #fff !important;
}

.featured-post,
.post-card,
.sidebar-card {
  overflow: hidden;
}

.featured-post:hover,
.post-card:hover,
.sidebar-card:hover {
  box-shadow: 0 8px 20px rgba(26, 58, 92, 0.08) !important;
}

.featured-body h2,
.card-body h3,
.sidebar-card h3,
.read-more,
.card-read-link,
.category-list a,
.quick-list a,
.load-more-btn {
  color: var(--notable-link) !important;
}

.load-more-btn {
  background: transparent !important;
  border: 1px solid var(--notable-link) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.cta-card {
  background: var(--notable-heading) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.cta-card h3,
.cta-card p,
.article-cta h3,
.article-cta p {
  color: #fff !important;
}

.cta-card h3 em {
  color: #ffd6dc !important;
}

.cta-btn.secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* ── IMAGE FRAME SYSTEM ──
   Wrapper: sets the visual slot (aspect-ratio + clipping).
   Child img: fills the slot absolutely so it never misaligns with surrounding text columns. */
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.prog-editorial__img {
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

/* Card/thumbnail frames get rounded corners; editorial image panels are square-edged */
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item {
  border-radius: 4px;
}

.prog-editorial__img {
  border-radius: 0;
}

/* Aspect-ratio slots — keeps image height locked to grid column width */
.about-split-img,
.intro-img,
.bh-split__img { aspect-ratio: 4 / 3; background: transparent; }

.banner-img { aspect-ratio: 16 / 9; }

.ws-card-image,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.img-frame { aspect-ratio: 3 / 2; }

/* prog-editorial__img fills its grid column — height driven by the row, not a fixed ratio */
.prog-editorial__img { aspect-ratio: unset; min-height: 420px; }

/* Absolute fill: image stretches to cover the wrapper exactly */
.img-frame > img,
.intro-img > img,
.about-split-img > img,
.bh-split__img > img,
.ws-card-image > img,
.banner-img > img,
.fleet-image > img,
.safety-img > img,
.gs-item > img,
.gg-item > img,
.prog-editorial__img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover zoom */
.img-frame:hover > img,
.intro-img:hover > img,
.about-split-img:hover > img,
.bh-split__img:hover > img,
.ws-card-image:hover > img,
.banner-img:hover > img,
.fleet-image:hover > img,
.safety-img:hover > img,
.gs-item:hover > img,
.gg-item:hover > img,
.prog-editorial__img:hover > img {
  transform: scale(1.04);
}

/* ── IMAGE OVERLAY PATTERNS ──
   Pattern A — cross-hatch + gold glow for hero/featured image containers.
   Pattern B — dot grid for card/thumbnail image containers.

   Note: .featured-img, .hero-img, .banner-img use overflow:hidden (inherited from
   the image frame system above). The ::after gold glow is offset outside the box
   (bottom:-40px; right:-40px), so overflow is switched to visible on those containers
   so the glow bleeds out as intended. The ::before crosshatch sits at inset:0 and
   clips naturally. Neither pseudo-element blocks pointer events. */

body:not(.gallery-page) .featured-img,
body:not(.gallery-page) .hero-img,
body:not(.gallery-page) .banner-img {
  overflow: visible;
}

/* Pattern A — cross-hatch texture */
body:not(.gallery-page) .featured-img::before,
body:not(.gallery-page) .hero-img::before,
body:not(.gallery-page) .banner-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(200,146,42,.05) 0, rgba(200,146,42,.05) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, rgba(200,146,42,.05) 0, rgba(200,146,42,.05) 1px, transparent 0, transparent 50%);
  background-size: 20px 20px;
  z-index: 1;
  pointer-events: none;
}

/* Pattern A — gold glow bleeding outside the frame */
body:not(.gallery-page) .featured-img::after,
body:not(.gallery-page) .hero-img::after,
body:not(.gallery-page) .banner-img::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(200,146,42,.25) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* Pattern B — dot grid for card/thumbnail image containers */
body:not(.gallery-page) .card-img::after,
body:not(.gallery-page) .post-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none;
}

.seo-link-hub__grid {
  background: var(--notable-line) !important;
  border-color: var(--notable-line) !important;
}

.seo-link-hub__link {
  background: var(--notable-surface) !important;
}

.seo-link-hub__link:hover {
  background: var(--notable-soft) !important;
  color: var(--notable-accent-dark) !important;
}

input,
select,
textarea {
  background: var(--notable-surface) !important;
  border: 1px solid var(--notable-line) !important;
  border-radius: 4px !important;
  color: var(--notable-ink) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--notable-accent) !important;
  outline-offset: 2px;
}

@media (min-width: 901px) {
  body.page-home {
    padding-top: 0;
  }

  body.page-home .main-nav {
    position: fixed !important;
  }

  body.page-home .prog-editorial--compact .prog-editorial__cta,
  body.page-home .prog-editorial--legacy .prog-editorial__cta,
  body.page-home .prog-editorial--wide .prog-editorial__cta {
    background: var(--navy, #1a3a5c) !important;
    color: #fff !important;
  }
}

@media (max-width: 900px) {
  .main-nav,
  body.site-nav-index-behavior .main-nav {
    background: #fff !important;
  }
}

body.page-home .prog-editorial--feature .prog-editorial__cta,
body.page-home .prog-editorial--compact .prog-editorial__cta,
body.page-home .prog-editorial--legacy .prog-editorial__cta,
body.page-home .prog-editorial--wide .prog-editorial__cta {
  background: var(--navy, #1a3a5c) !important;
  color: #fff !important;
}

@media (min-width: 901px) {
  body.page-home .prog-editorial--feature .prog-editorial__cta {
    background: #fff !important;
    color: var(--navy-dark, #0d2540) !important;
  }

  body.page-home .prog-editorial--compact .prog-editorial__cta,
  body.page-home .prog-editorial--legacy .prog-editorial__cta,
  body.page-home .prog-editorial--wide .prog-editorial__cta {
    background: var(--navy, #1a3a5c) !important;
    color: #fff !important;
  }
}

/* Prevent images from being clickable across all pages */
img {
  pointer-events: none;
}