/* ==========================================================================
   MSBM Executive Leadership Retreat (template--executive-leadership-retreat.php)
   Brand layer on top of Bootstrap 5.3. The page loads Bootstrap 5 itself and
   skips the site's Bootstrap 4 stylesheets ($skip_site_stylesheets).
   Layout, grid, spacing helpers, navbar, cards, modal, forms and buttons all
   come from Bootstrap's markup. This file adds the fonts, brand colours
   (as Bootstrap CSS variables), button variants, photo overlays and crops, and
   the typographic scale specific to this design.

   The icon font is a subset of Material Symbols Outlined holding only the
   icons the page uses. A new icon needs a new subset from
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,200..500,0..1,0&icon_names=...
   (icon names comma-separated in alphabetical order, requested with a browser
   user agent so it returns woff2).
   ========================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/dmsans-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/dmsans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-cyrillicext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("../fonts/executive-leadership-retreat/sourceserif-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 200 500; font-display: block;
  src: url("../fonts/executive-leadership-retreat/material-symbols-subset.woff2") format('woff2');
}

/* ---------- BRAND TOKENS (override Bootstrap's CSS variables) ---------- */
:root {
  --msbm-navy: #0c1a35;
  --msbm-navy-2: #13264a;
  --msbm-ink: #13213d;
  --msbm-gold: #f1c467;
  --msbm-gold-hover: #f6d283;
  --msbm-gold-text: #f1c062;
  --msbm-tint: #e8eff9;
  --msbm-pale: #f5f6f8;
  --msbm-gutter: clamp(20px, 4vw, 64px);

  --bs-body-font-family: 'DM Sans', system-ui, sans-serif;
  --bs-body-color: #13213d;
  --bs-body-bg: #ffffff;
  --bs-body-line-height: normal;
  --bs-link-color-rgb: 19, 38, 74;
  --bs-link-hover-color-rgb: 201, 154, 58;
  --bs-heading-color: inherit;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 64px; }
#top { scroll-margin-top: 0; }

.font-serif { font-family: 'Source Serif 4', serif; font-weight: 700; }
.text-gold { color: var(--msbm-gold-text) !important; }
.msbm-lh-tight { line-height: 1.3; }
.msbm-gutter { --bs-gutter-x: calc(2 * var(--msbm-gutter)); }

/* ---------- ICONS (Material Symbols ligatures) ---------- */
.msi {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
  display: inline-block;
  flex: none;
  font-size: 24px;
  width: 1em;
}
.msi-18 { font-size: 18px; } .msi-19 { font-size: 19px; } .msi-20 { font-size: 20px; }
.msi-22 { font-size: 22px; } .msi-24 { font-size: 24px; } .msi-30 { font-size: 30px; }
.msi-36 { font-size: 36px; } .msi-38 { font-size: 38px; } .msi-40 { font-size: 40px; }
.msi-fill { font-variation-settings: 'FILL' 1; }
.msi-light { font-weight: 300; }
.msi-bold { font-weight: 600; }
.msi-feature { font-size: clamp(24px, 2.8vw, 34px); font-weight: 300; color: var(--msbm-navy-2); }

/* ---------- BUTTONS (Bootstrap .btn + brand variants via --bs-btn-* vars) ---------- */
.btn-gold, .btn-navy, .btn-outline-gold, .btn-outline-white {
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  white-space: nowrap;
}
.btn-gold {
  --bs-btn-color: var(--msbm-ink);
  --bs-btn-bg: var(--msbm-gold);
  --bs-btn-border-color: var(--msbm-gold);
  --bs-btn-hover-color: var(--msbm-ink);
  --bs-btn-hover-bg: var(--msbm-gold-hover);
  --bs-btn-hover-border-color: var(--msbm-gold-hover);
  --bs-btn-active-color: var(--msbm-ink);
  --bs-btn-active-bg: #e9b94f;
  --bs-btn-active-border-color: #e9b94f;
  --bs-btn-focus-shadow-rgb: 241, 196, 103;
  --bs-btn-disabled-color: var(--msbm-ink);
  --bs-btn-disabled-bg: var(--msbm-gold);
  --bs-btn-disabled-border-color: var(--msbm-gold);
}
.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--msbm-navy-2);
  --bs-btn-border-color: var(--msbm-navy-2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d3666;
  --bs-btn-hover-border-color: #1d3666;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1d3666;
  --bs-btn-active-border-color: #1d3666;
  --bs-btn-focus-shadow-rgb: 19, 38, 74;
}
.btn-outline-gold {
  --bs-btn-color: var(--msbm-gold-text);
  --bs-btn-border-color: var(--msbm-gold-text);
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: var(--msbm-gold-text);
  --bs-btn-hover-bg: rgba(241, 192, 98, .12);
  --bs-btn-hover-border-color: var(--msbm-gold-text);
  --bs-btn-active-color: var(--msbm-gold-text);
  --bs-btn-active-bg: rgba(241, 192, 98, .2);
  --bs-btn-active-border-color: var(--msbm-gold-text);
  --bs-btn-focus-shadow-rgb: 241, 192, 98;
}
.btn-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(12, 26, 53, .35);
  --bs-btn-border-color: #fff;
  --bs-btn-border-width: 1.5px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
/* Large CTA button size */
.btn-xl {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-size: 1rem;
  height: 54px;
  transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}
.btn-xl:hover { transform: translateY(-2px); }
.msbm-hero-ctas .btn-xl { min-width: 212px; }
.msbm-hero-ctas .btn-gold { min-width: 262px; }
/* Small nav button */
.btn-nav {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 18px;
  --bs-btn-font-size: 14px;
  --bs-btn-border-radius: 9px;
  gap: .5rem;
  flex: none;
}
.btn-nav-lg {
  --bs-btn-padding-y: clamp(10px, 1vw, 13px);
  --bs-btn-padding-x: clamp(14px, 1.8vw, 22px);
  --bs-btn-font-size: clamp(13.5px, 1.3vw, 15px);
  --bs-btn-border-radius: 10px;
  gap: .625rem;
}

/* ---------- NAVBARS (hero + sticky) ---------- */
.msbm-nav {
  --bs-navbar-padding-y: 10px;
  --bs-navbar-padding-x: 0;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #c99a3a;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-brand-font-size: inherit;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-nav-link-padding-x: 0;
}
.msbm-nav .container-fluid { gap: 16px; }
.msbm-brand { display: flex; flex-direction: column; line-height: 1; }
.msbm-brand-name {
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  color: #fff;
}
.msbm-brand-sub { font-weight: 600; color: #fff; margin-top: 2px; }
.msbm-navlinks {
  --bs-nav-link-padding-y: 0;
  gap: clamp(14px, 2.2vw, 32px);
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
}
.msbm-navlinks .nav-link.active { font-weight: 700; }

.msbm-sticky-nav {
  background: rgba(12, 26, 53, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.msbm-sticky-nav.show { opacity: 1; visibility: visible; transform: none; }
.msbm-sticky-nav .msbm-brand-name { font-size: 26px; letter-spacing: -.01em; }
.msbm-sticky-nav .msbm-brand-sub { font-size: 7.5px; letter-spacing: .06em; }
.msbm-sticky-nav .nav-link { font-size: clamp(13px, 1.2vw, 14px); }

.msbm-hero-nav { --bs-navbar-padding-y: 18px; }
.msbm-hero-nav .msbm-brand-name { font-size: 38px; letter-spacing: -.015em; }
.msbm-hero-nav .msbm-brand-sub { font-size: 9.5px; letter-spacing: .05em; }
.msbm-hero-nav .msbm-navlinks { gap: clamp(14px, 2.4vw, 36px); }
.msbm-hero-nav .nav-link { font-size: clamp(13px, 1.3vw, 14.5px); }

/* Way back to the main site at the end of the sticky nav's links */
.msbm-navlinks-site { padding-left: clamp(14px, 2.2vw, 32px); border-left: 1px solid rgba(255, 255, 255, .25); }
.msbm-navlinks-site .nav-link { gap: 6px; }
.msi-flip { transform: scaleX(-1); }

/* ---------- MAIN SITE STRIP (links back to msbm.org.uk, above the hero nav) ---------- */
.msbm-sitebar { background: rgba(8, 16, 32, .4); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.msbm-sitebar .container-fluid { min-height: 38px; }
.msbm-sitebar-links { gap: clamp(12px, 2vw, 28px); }
.msbm-sitebar-link {
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.msbm-sitebar-link:hover, .msbm-sitebar-link:focus-visible { color: var(--msbm-gold-text); }
/* Below 360px the four links ran past the screen edge at full size */
@media (max-width: 359.98px) {
  .msbm-sitebar .container-fluid { gap: 10px !important; }
  .msbm-sitebar-links { gap: 10px; }
  .msbm-sitebar-link { font-size: 12px; letter-spacing: 0; }
  .msbm-sitebar-link .msi { display: none; }
}

/* ---------- SHARED TEXT PIECES ---------- */
.msbm-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
}
.msbm-eyebrow-dark { color: var(--msbm-ink); }

/* ---------- HERO ---------- */
.msbm-hero { background: var(--msbm-navy); }
.msbm-hero-img { object-position: 60% 40%; }
.msbm-hero-overlay {
  background:
    linear-gradient(180deg, rgba(12, 26, 53, .75), rgba(12, 26, 53, 0)) top / 100% 140px no-repeat,
    linear-gradient(90deg,
      rgba(12, 26, 53, .82) 0%,
      rgba(12, 26, 53, .74) 22%,
      rgba(12, 26, 53, .52) 40%,
      rgba(12, 26, 53, .24) 58%,
      rgba(12, 26, 53, .06) 76%,
      rgba(12, 26, 53, 0) 100%);
}
.msbm-hero-body { padding-top: 38px; padding-bottom: 22px; }
.msbm-hero-eyebrow { font-size: 14.5px; }
.msbm-hero-title {
  margin-top: 16px !important;
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.msbm-hero-subtitle { margin-top: 20px; font-size: clamp(18px, 1.8vw, 22px); }
.msbm-hero-info { gap: 22px 30px; margin-top: 30px; font-size: 16px; }
.msbm-hero-info li { gap: 12px; }
.msbm-hero-ctas { margin-top: 28px; gap: 20px !important; }

/* ---------- FEATURE BAR ---------- */
.msbm-features {
  background: var(--msbm-pale);
  border-bottom: 1px solid #e9ecf1;
  padding-top: 16px;
  padding-bottom: 16px;
}
.msbm-feature {
  gap: clamp(8px, 1.2vw, 14px);
  padding: 6px clamp(8px, 1.6vw, 24px);
}
@media (min-width: 768px) {
  .msbm-feature:not(:first-child) { border-left: 1px solid #d9dfe8; }
}
.msbm-icon-circle {
  flex: none;
  border-radius: 50%;
  background: #e4ebf5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msbm-icon-circle-lg { width: clamp(42px, 5vw, 60px); height: clamp(42px, 5vw, 60px); }
.msbm-icon-circle-sm { width: 32px; height: 32px; color: var(--msbm-navy-2); }
.msbm-feature-label {
  font-size: clamp(12.5px, 1.35vw, 15px);
  line-height: 1.35;
  white-space: nowrap;
  min-width: 0;
}

/* ---------- PROGRAMME ---------- */
.msbm-programme { padding-top: 22px; padding-bottom: 24px; }
.msbm-programme-title {
  margin-top: 10px !important;
  font-size: clamp(28px, 3.2vw, 36px);
  letter-spacing: -.01em;
}
.msbm-programme-lead {
  margin-top: 12px !important;
  max-width: 780px;
  font-size: 16.5px;
  line-height: 1.45;
  color: #3a4558;
  text-wrap: pretty;
}
.msbm-days { --bs-gutter-x: clamp(8px, 1.2vw, 14px); --bs-gutter-y: clamp(8px, 1.2vw, 14px); margin-top: 8px; }
.msbm-day {
  --bs-card-border-radius: 8px;
  --bs-card-inner-border-radius: 8px;
  --bs-card-cap-bg: #f4f6f9;
  --bs-card-cap-padding-y: 12px;
  --bs-card-cap-padding-x: clamp(10px, 1.3vw, 16px);
  --bs-card-spacer-y: 14px;
  --bs-card-spacer-x: clamp(10px, 1.3vw, 16px);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(15, 31, 61, .11);
  transition: transform .25s, box-shadow .25s;
}
.msbm-day:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(15, 31, 61, .18); }
.msbm-day-media { aspect-ratio: 183 / 129; }
.msbm-day-badge {
  background: var(--msbm-navy-2);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  padding: 7px 20px 7px 18px;
  border-bottom-right-radius: 12px;
}
.msbm-day-body { padding-bottom: 12px; }
.msbm-day-title { font-size: 15.5px; line-height: 1.3; font-weight: 700; }
.msbm-day-text { margin-top: 14px !important; font-size: 13.5px; line-height: 1.4; color: #4a5466; }
.msbm-day-text-tight { margin-top: 6px !important; }
.msbm-day-foot { gap: 10px; }
.msbm-day-foot-label { font-size: 12.5px; line-height: 1.35; }

/* ---------- YOUR STAY ---------- */
.msbm-stay {
  background: var(--msbm-tint);
  padding-top: 20px;
  padding-bottom: 20px;
}
.msbm-stay-title {
  margin-top: 12px !important;
  font-size: clamp(30px, 3.3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.msbm-stay-text {
  margin-top: 16px !important;
  max-width: 470px;
  font-size: 16px;
  line-height: 1.45;
  color: #2b3648;
  text-wrap: pretty;
}
.msbm-stay-items { gap: 16px 26px; margin-top: 22px; }
.msbm-stay-items li { gap: 10px; }
.msbm-stay-label { font-size: 12px; font-weight: 600; line-height: 1.3; }
.msbm-stay-label small { font-size: 11px; }
.msbm-stay-media {
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  box-shadow: 0 12px 30px rgba(15, 31, 61, .22) !important;
}
.msbm-stay-media img { object-position: 50% 0; }

/* ---------- WHY GLASGOW ---------- */
.msbm-glasgow {
  background: var(--msbm-navy);
  padding-top: 72px;
  padding-bottom: 72px;
}
.msbm-glasgow-img { object-position: 50% 46%; }
.msbm-glasgow-copy { max-width: calc(560px + var(--bs-gutter-x)); }
.msbm-glasgow-overlay {
  background: linear-gradient(90deg,
    rgba(12, 26, 53, .90) 0%,
    rgba(12, 26, 53, .80) 28%,
    rgba(12, 26, 53, .45) 46%,
    rgba(12, 26, 53, .15) 64%,
    rgba(12, 26, 53, .20) 100%);
}
.msbm-glasgow-title {
  margin-top: 16px !important;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.msbm-glasgow-text {
  margin-top: 18px !important;
  margin-bottom: 26px !important;
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}
.msbm-glasgow-card {
  --bs-card-border-radius: 14px;
  background: rgba(13, 22, 40, .9);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  padding: 28px clamp(22px, 2.4vw, 36px);
  gap: 20px;
  font-size: 17px;
}
.msbm-glasgow-card li { gap: 18px; }

/* ---------- PRICING (executive pass) ----------
   The fee sits on a tear-off pass: an ivory main part and a gold stub joined by a perforation.
   The notches are real holes cut with CSS masks, so the tartan background shows through them,
   and the drop shadow sits on the wrapper so it follows the cut shape. */
.msbm-pricing {
  --msbm-ivory: #fbf7ee;
  --msbm-gold-deep: #a9792a;
  padding-top: 88px;
  padding-bottom: 80px;
  /* Faint gold tartan with a twill grain, fading into the sections above and below */
  background:
    linear-gradient(180deg, var(--msbm-navy) 0, rgba(12, 26, 53, 0) 140px, rgba(12, 26, 53, 0) calc(100% - 140px), var(--msbm-navy) 100%),
    radial-gradient(ellipse 60% 65% at 50% 58%, rgba(36, 70, 132, .55), rgba(36, 70, 132, 0) 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(241, 196, 103, .075) 38px 40px, transparent 40px 66px, rgba(241, 196, 103, .045) 66px 80px, transparent 80px 118px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(241, 196, 103, .075) 38px 40px, transparent 40px 66px, rgba(241, 196, 103, .045) 66px 80px, transparent 80px 118px),
    var(--msbm-navy);
}
.msbm-pricing-title {
  margin-top: 14px !important;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.msbm-pricing-lead {
  margin-top: 14px !important;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.5;
  color: #c9d2e2;
  text-wrap: pretty;
}

.msbm-pass {
  --pass-notch: 16px;
  --pass-radius: 18px;
  --pass-hole: transparent var(--pass-notch), #000 calc(var(--pass-notch) + .5px);
  max-width: 1040px;
  margin-top: 48px;
  color: var(--msbm-ink);
  filter: drop-shadow(0 28px 32px rgba(3, 9, 22, .5));
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
/* Set by the page script until the pass scrolls into view */
.msbm-pass.is-pending { opacity: 0; transform: translateY(40px) rotate(-1.5deg); }

.msbm-pass-main {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(24px, 3.4vw, 44px);
  background: linear-gradient(135deg, #fffdf8 0%, var(--msbm-ivory) 55%, #f3ead7 100%);
  border-radius: var(--pass-radius) 0 0 var(--pass-radius);
  -webkit-mask: radial-gradient(circle at 100% 0, var(--pass-hole)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, var(--pass-hole)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, var(--pass-hole)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, var(--pass-hole)) bottom / 100% 51% no-repeat;
}
/* Security-print rings behind the seal, faded out before they reach the list */
.msbm-pass-main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 86% 32%, rgba(169, 121, 42, .11) 0 1px, transparent 1px 7px);
  -webkit-mask: radial-gradient(circle at 86% 32%, #000 0, transparent 300px);
          mask: radial-gradient(circle at 86% 32%, #000 0, transparent 300px);
  pointer-events: none;
}
.msbm-pass-brand .msbm-brand-name { font-size: 26px; letter-spacing: -.01em; color: var(--msbm-navy); }
.msbm-pass-brand .msbm-brand-sub { font-size: 7.5px; letter-spacing: .06em; color: var(--msbm-navy); }
.msbm-pass-admit {
  border: 1.5px solid var(--msbm-ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  white-space: nowrap;
}
.msbm-pass-label { font-size: 11px; font-weight: 600; letter-spacing: .26em; color: #6b7486; }

.msbm-pass-price-row {
  margin-top: clamp(22px, 3vw, 34px);
  padding-bottom: clamp(20px, 2.6vw, 28px);
  border-bottom: 2px dotted rgba(19, 33, 61, .22);
}
.msbm-pass-price-copy { min-width: 0; }
.msbm-pass-price {
  margin-top: 6px !important;
  font-size: clamp(50px, 7.4vw, 104px);
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--msbm-navy);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.msbm-pass-currency { font-size: .5em; vertical-align: .74em; margin-right: .06em; letter-spacing: 0; color: var(--msbm-gold-deep); }
.msbm-pass-per { margin-top: 12px !important; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4a5466; }

.msbm-pass-seal {
  flex: none;
  width: clamp(76px, 10vw, 140px);
  height: auto;
  color: var(--msbm-gold-deep);
  transform: rotate(-14deg);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.msbm-pass:hover .msbm-pass-seal { transform: rotate(18deg); }
.msbm-pass-seal text { fill: currentColor; font-weight: 700; }
.msbm-pass-seal-ring { font-size: 8.4px; letter-spacing: .19em; }
.msbm-pass-seal-mark { font-family: 'Source Serif 4', serif; font-size: 17px; }
.msbm-pass-seal-year { font-size: 9px; letter-spacing: .2em; }

.msbm-pass-includes-label { margin-top: clamp(20px, 2.6vw, 28px) !important; }
.msbm-pass-includes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px 24px;
  margin-top: 16px !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.msbm-pass-includes li { gap: 12px; min-width: 0; }
.msbm-pass-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(169, 121, 42, .4);
  background: rgba(241, 196, 103, .16);
  color: var(--msbm-navy-2);
}
.msbm-pass-icon .msi { font-size: 19px; font-weight: 300; }

.msbm-pass-stub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  width: 300px;
  padding: clamp(24px, 3vw, 36px) clamp(22px, 2.6vw, 32px);
  background: linear-gradient(160deg, #f7d78e 0%, var(--msbm-gold) 45%, #e3ae4a 100%);
  border-radius: 0 var(--pass-radius) var(--pass-radius) 0;
  -webkit-mask: radial-gradient(circle at 0 0, var(--pass-hole)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, var(--pass-hole)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, var(--pass-hole)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, var(--pass-hole)) bottom / 100% 51% no-repeat;
}
/* Perforation between the two parts */
.msbm-pass-stub::before {
  content: '';
  position: absolute;
  top: calc(var(--pass-notch) + 8px);
  bottom: calc(var(--pass-notch) + 8px);
  left: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(19, 33, 61, .4) 0 6px, transparent 6px 12px);
}
/* Foil sheen that sweeps across the stub on hover */
.msbm-pass-stub::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.msbm-pass:hover .msbm-pass-stub::after { transform: translateX(120%); }
.msbm-pass-stub .msbm-pass-label { color: rgba(19, 33, 61, .68); }
.msbm-pass-city { margin-top: 6px !important; font-size: clamp(36px, 3.6vw, 44px); line-height: 1; letter-spacing: -.01em; color: var(--msbm-navy); }
.msbm-pass-country { margin-top: 6px !important; font-size: 13.5px; font-weight: 500; }
.msbm-pass-month { margin-top: 20px !important; padding-top: 18px; border-top: 1px solid rgba(19, 33, 61, .2); }
.msbm-pass-days { gap: 6px; margin-top: 10px !important; }
.msbm-pass-days li {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(19, 33, 61, .12);
  background: rgba(255, 255, 255, .38);
}
.msbm-pass-day-name { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: rgba(19, 33, 61, .68); }
.msbm-pass-day-date { margin-top: 2px; font-family: 'Source Serif 4', serif; font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--msbm-navy); }
.msbm-pass-facts { margin-top: 18px; margin-bottom: 26px !important; }
.msbm-pass-facts dt { margin-bottom: 4px; }
.msbm-pass-facts dd { font-size: 16px; font-weight: 700; }
.msbm-pass-cta { margin-top: auto; }
.msbm-pass-barcode {
  height: 42px;
  margin-top: 22px;
  opacity: .82;
  background:
    repeating-linear-gradient(90deg, var(--msbm-ink) 0 2px, transparent 2px 5px, var(--msbm-ink) 5px 6px, transparent 6px 9px, var(--msbm-ink) 9px 12px, transparent 12px 13px, var(--msbm-ink) 13px 14px, transparent 14px 19px),
    repeating-linear-gradient(90deg, transparent 0 3px, var(--msbm-ink) 3px 4px, transparent 4px 17px, var(--msbm-ink) 17px 18px, transparent 18px 31px);
}
.msbm-pass-code { margin-top: 8px !important; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-align: center; color: rgba(19, 33, 61, .72); }

.msbm-pricing-note { margin-top: 34px !important; font-size: 15.5px; color: #c9d2e2; }
.msbm-pricing-link {
  --bs-btn-padding-x: 4px;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 15.5px;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--msbm-gold-text);
  --bs-btn-hover-color: var(--msbm-gold-hover);
  --bs-btn-active-color: var(--msbm-gold-hover);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: baseline;
  text-decoration: none;
}
.msbm-pricing-link .msi { transition: transform .2s; }
.msbm-pricing-link:hover .msi { transform: translateX(3px); }

@media (min-width: 768px) and (max-width: 991.98px) {
  .msbm-pass-stub { width: 260px; }
}
/* Stacked pass on phones: the stub drops below and the perforation turns horizontal */
@media (max-width: 767.98px) {
  .msbm-pricing { padding-top: 60px; padding-bottom: 56px; }
  .msbm-pass { --pass-notch: 14px; margin-top: 36px; }
  .msbm-pass-main {
    border-radius: var(--pass-radius) var(--pass-radius) 0 0;
    -webkit-mask: radial-gradient(circle at 0 100%, var(--pass-hole)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, var(--pass-hole)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, var(--pass-hole)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, var(--pass-hole)) right / 51% 100% no-repeat;
  }
  .msbm-pass-stub {
    width: auto;
    border-radius: 0 0 var(--pass-radius) var(--pass-radius);
    -webkit-mask: radial-gradient(circle at 0 0, var(--pass-hole)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, var(--pass-hole)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, var(--pass-hole)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, var(--pass-hole)) right / 51% 100% no-repeat;
  }
  .msbm-pass-stub::before {
    top: 0;
    bottom: auto;
    left: calc(var(--pass-notch) + 8px);
    right: calc(var(--pass-notch) + 8px);
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(19, 33, 61, .4) 0 6px, transparent 6px 12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .msbm-pass, .msbm-pass-seal, .msbm-pass-stub::after { transition: none; }
}

/* ---------- VISA ---------- */
.msbm-visa { background: var(--msbm-tint); padding-top: 30px; padding-bottom: 30px; }
.msbm-visa-badge { gap: 30px; }
.msbm-passport {
  width: 74px;
  height: 86px;
  border-radius: 8px;
  background: #10224a;
  transform: rotate(-9deg);
  box-shadow: 0 6px 14px rgba(15, 31, 61, .3);
  gap: 5px;
  flex: none;
}
.msbm-passport .msi { color: #fff; }
.msbm-passport-label { font-size: 7px; letter-spacing: .08em; color: #fff; font-weight: 700; }
.msbm-visa-title { font-size: 21px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; }
.msbm-visa-divider { width: 1px; background: #c9d3e2; margin: 6px 0; }
.msbm-visa-heading { font-size: 30px; line-height: 1.15; }
.msbm-visa-text { margin-top: 8px !important; font-size: 17px; line-height: 1.45; color: #2b3648; }
@media (min-width: 992px) {
  .msbm-visa-row > * { padding-left: clamp(12px, 1.75vw, 28px); padding-right: clamp(12px, 1.75vw, 28px); }
}

/* ---------- FINAL CTA ---------- */
.msbm-cta { background: var(--msbm-navy); padding-top: 64px; padding-bottom: 64px; }
.msbm-cta .msbm-eyebrow { font-size: 14px; }
.msbm-cta-title {
  margin-top: 14px !important;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}
.msbm-cta-row { margin-top: 32px; }
.msbm-cta .btn-xl { height: 58px; font-size: 17px; }
.msbm-cta .btn-gold { min-width: 200px; }
.msbm-cta .btn-outline-white { min-width: 300px; background: transparent; }
.msbm-cta-features { gap: 24px clamp(24px, 3vw, 48px); }
.msbm-cta-features li { gap: 14px; }
.msbm-cta-label { font-size: 15px; line-height: 1.35; }

/* ---------- SITE FOOTER (components/footer.inc.php) ----------
   The main site's footer, shared with every other page. Its styles live in the site's Bootstrap 4
   stylesheets (css/style.css and css/new2025/style.css), which this page skips, so the rules it
   needs are repeated here and scoped to .msbm-footer. Update them if the main footer's look changes. */
.msbm-footer {
  min-height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: 'Europa', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.msbm-footer-title { margin-bottom: 1rem; font-size: 24px; font-weight: 700; text-align: center; }
.msbn-footer-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  place-items: center;
  place-content: center;
  gap: 10px;
  max-width: 90%;
  margin: 2rem auto 0;
}
.msbm-footer-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  justify-items: center;
  align-content: center;
  gap: 28px;
  max-width: 90%;
  margin: 2rem auto 0;
}
.msbm-footer-items-grid ul { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.msbm-footer-items-grid li { padding-bottom: 5px; font-size: .8rem; color: #b8b8b8; }
.msbm-footer-items-grid ul a { font-size: 16px; color: #fff; opacity: .9; text-decoration: none; transition: opacity .3s ease; }
.msbm-footer-items-grid ul a:hover { color: #fff; opacity: 1; }
.msbm-footer-items-grid .msbm-footer-items-title { display: inline-block; margin-bottom: 1rem; font-size: 20px; font-weight: 600; }
.msbm-footer .msbm-country-select {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  transform: translateY(-8px);
}
/* The "Language" link opens a Google Translate modal that lives in the site navbar, which this page doesn't use */
.msbm-footer #google_translate_modal_trigger { display: none !important; }
.msbm-footer-app-download p:nth-child(1) { margin-bottom: 1rem; font-size: 20px; font-weight: 600; }
.msbm-footer-app-download p:nth-child(2) { font-size: 14px; }
.msbm-footer .msbm-btn { text-decoration: none; transition: opacity .3s ease; }
.msbm-footer .msbm-btn:hover { opacity: .9; }
.msbm-footer-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin: 3rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.msbm-footer-end p { font-size: 12px; }
.msbm-footer-end a { color: #fff; text-decoration: none; }
.msbm-footer-end-social { display: flex; gap: 1.5rem; }
@media (max-width: 768px) {
  .msbm-footer-items-grid {
    grid-template-columns: 1fr;
    justify-items: start;
    align-content: start;
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* ---------- MODAL (Bootstrap .modal, themed) ---------- */
.msbm-modal {
  --bs-modal-width: 480px;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: 14px;
  --bs-modal-inner-border-radius: 14px;
  --bs-modal-padding: 0;
  --bs-modal-box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.modal-backdrop {
  --bs-backdrop-bg: #081020;
  --bs-backdrop-opacity: .62;
  backdrop-filter: blur(4px);
}
.msbm-modal-header { background: var(--msbm-navy); color: #fff; padding: 22px 28px 20px; }
.msbm-modal-heading { flex: 1 1 auto; min-width: 0; }
.msbm-modal-header .btn-close { opacity: .85; flex: none; margin: 0 -4px 0 12px; }
.msbm-modal-header .btn-close:hover { opacity: 1; }
.msbm-modal-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .28em; color: var(--msbm-gold-text); }
.msbm-modal-title { margin-top: 6px; font-size: 25px; line-height: 1.15; }
.msbm-modal-subtitle { margin-top: 6px; font-size: 13.5px; color: #c9d2e2; }
.msbm-modal-body { padding: 22px 28px 26px; }
.msbm-modal .form-label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.msbm-modal .form-control {
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid #d3dae5;
  padding: 0 14px;
  font-size: 15px;
  color: var(--msbm-ink);
}
.msbm-modal .form-control:focus {
  border-color: var(--msbm-navy-2);
  box-shadow: 0 0 0 3px rgba(19, 38, 74, .12);
}
.msbm-modal .form-control.is-invalid { border-color: #c0392b; background-position: right 12px center; }
.msbm-modal .invalid-feedback { font-size: 12px; color: #c0392b; }
.msbm-submit { margin-top: 20px; height: 50px; font-size: 15.5px; }
.msbm-form-message { margin-top: 16px; padding: 10px 14px; font-size: 13.5px; border-radius: 8px; }
/* Honeypot field for bots. Kept off-screen rather than display:none, which some bots skip. */
.msbm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msbm-fineprint { margin-top: 14px; font-size: 11.5px; color: #6b7486; }
.msbm-success { padding: 12px 0 4px; }
.msbm-success-icon { width: 64px; height: 64px; background: var(--msbm-tint); color: var(--msbm-navy-2); }
.msbm-success-title { margin-top: 16px; font-size: 22px; }
.msbm-success-text { margin-top: 8px !important; max-width: 340px; font-size: 14.5px; line-height: 1.5; color: #3a4558; }
.msbm-success-close { margin-top: 22px; height: 42px; padding: 0 28px; border-radius: 8px; font-weight: 600; }

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 767.98px) {
  .msbm-hero-body { padding-top: 24px; }
  .msbm-glasgow { padding-top: 52px; padding-bottom: 52px; }
  .msbm-cta { padding-top: 48px; padding-bottom: 48px; }
  .msbm-visa-heading { font-size: 26px; }
  .msbm-glasgow-card { font-size: 16px; }
}
@media (max-width: 575.98px) {
  .msbm-hero-ctas .btn-xl { width: 100%; min-width: 0 !important; }
  /* Two feature columns on a phone are too narrow for the unwrapped labels, which ran into the next icon */
  .msbm-feature-label { white-space: normal; }
}

/* Stacked layout (below lg): text sits over the photo, so dim it evenly. */
@media (max-width: 991.98px) {
  .msbm-glasgow-overlay { background: rgba(12, 26, 53, .72); }
}