/* ============================================================
   Modern Training - Components
   ------------------------------------------------------------
   The reusable building blocks established on the homepage
   design. Every page template reuses these classes, so a fix
   here fixes the whole site.

   Contents:
     1. Layout (containers, sections, grids)
     2. Buttons
     3. Cards
     4. Section headers + text styles
     5. Stat / proof blocks
     6. Plus-bullet lists
     7. Quote / testimonial panel
     8. FAQ accordion
     9. Decorative orange rings
    10. Header / navigation
    11. Footer
    12. Mobile rules (single 768px breakpoint)
   ============================================================ */

/* ----- 1. Layout ------------------------------------------- */

/* Standard content column: 1200px max, 40px gutters (20px mobile) */
.mt-container {
  max-width: 1280px; /* 1200px content + 2 x 40px gutter */
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* Narrower columns for text-heavy sections */
.mt-container--narrow { max-width: 980px; }  /* FAQ: 900 + gutters */
.mt-container--prose  { max-width: 860px; }  /* single-column prose: 780 + gutters */

/* Vertical rhythm: 88px desktop, 56px mobile (see section 12) */
.mt-section { padding-top: 88px; padding-bottom: 88px; }
.mt-section--tall { padding-top: 104px; padding-bottom: 104px; }

/* Section background variants */
.mt-bg-white { background: var(--mt-white); }
.mt-bg-warm  { background: var(--mt-warm); }
.mt-bg-soft  { background: var(--bg-2); }
.mt-bg-cool  { background: var(--mt-gray-cool); }
.mt-bg-navy  { background: var(--mt-navy); }

/* Anchor jumps land clear of the sticky nav */
section[id], div[id^="cat-"], header[id] { scroll-margin-top: 100px; }

/* Sections that hold decorative rings need to clip them */
.mt-clip { position: relative; overflow: hidden; }
.mt-clip > .mt-container { position: relative; }

/* Card grids */
.mt-grid { display: grid; gap: 24px; }
.mt-grid--2 { grid-template-columns: 1fr 1fr; }
.mt-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.mt-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Two-column split (text + media or text + text) */
.mt-split { display: grid; gap: 48px; align-items: center; }
.mt-split--hero    { grid-template-columns: 1.08fr 0.92fr; }
.mt-split--lede    { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.mt-split--even    { grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; }

/* ----- 2. Buttons ------------------------------------------- */

.mt-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--dur-base) var(--ease-out);
  cursor: pointer;
}

/* Primary: solid orange */
.mt-btn--primary {
  background: var(--mt-orange);
  color: var(--mt-white);
  padding: 15px 28px;
  border: 0;
}
.mt-btn--primary:hover,
.mt-btn--primary:focus-visible {
  background: var(--mt-orange-hover);
  color: var(--mt-white);
  transform: translateY(-1px);
}

/* Secondary: white with a border */
.mt-btn--secondary {
  background: var(--mt-white);
  color: var(--mt-ink);
  padding: 14px 28px;
  border: 1px solid var(--border-strong);
}
.mt-btn--secondary:hover,
.mt-btn--secondary:focus-visible {
  border-color: var(--mt-ink);
  color: var(--mt-ink);
}

/* On navy bands, secondary buttons automatically become light outlines
   (the design's treatment everywhere a white-bordered button sits on navy) */
.mt-bg-navy .mt-btn--secondary {
  background: transparent;
  color: var(--mt-white);
  border-color: rgba(255, 255, 255, 0.45);
}
.mt-bg-navy .mt-btn--secondary:hover,
.mt-bg-navy .mt-btn--secondary:focus-visible {
  border-color: var(--mt-white);
  color: var(--mt-white);
}

/* Navy: solid navy fill (catalog "Browse Retail" style buttons) */
.mt-btn--navy {
  background: var(--mt-navy);
  color: var(--mt-white);
  padding: 15px 28px;
  border: 0;
}
.mt-btn--navy:hover,
.mt-btn--navy:focus-visible {
  background: #00294a;
  color: var(--mt-white);
  transform: translateY(-1px);
}

/* Ghost: transparent with a light border, for navy backgrounds */
.mt-btn--ghost {
  background: transparent;
  color: var(--mt-white);
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.mt-btn--ghost:hover,
.mt-btn--ghost:focus-visible {
  border-color: var(--mt-white);
  color: var(--mt-white);
}

/* Compact size (nav bar, inside dark bands) */
.mt-btn--sm { font-size: 16px; padding: 13px 24px; }
.mt-btn--sm.mt-btn--secondary { padding: 12px 24px; }

/* Row of buttons */
.mt-btn-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mt-btn-row__note {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}

/* Arrow text link ("Explore AI Services →") */
.mt-link-arrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
  color: var(--mt-orange);
  text-decoration: none;
}
.mt-link-arrow:hover,
.mt-link-arrow:focus-visible { color: var(--mt-orange-hover); }
.mt-card .mt-link-arrow { font-size: 16px; }
/* On navy backgrounds the hover lightens instead of darkens */
.mt-bg-navy .mt-link-arrow:hover,
.mt-bg-navy .mt-link-arrow:focus-visible { color: #FFB066; }

/* ----- 3. Cards --------------------------------------------- */

/* Service card: white, hairline border, raises on hover */
.mt-card {
  background: var(--mt-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.mt-card:hover { box-shadow: var(--shadow-2); }

.mt-card__title {
  font-size: 26px;
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mt-ink);
}
.mt-card__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
  flex: 1; /* pushes the link to the card's bottom edge */
}
.mt-card__body strong { color: var(--mt-ink); }

/* Dark card: used inside navy bands */
.mt-card--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  padding: 32px;
  gap: 12px;
}
.mt-card--dark:hover { box-shadow: none; border-color: rgba(255, 255, 255, 0.3); }
.mt-card--dark .mt-card__title { color: var(--mt-white); font-size: 21px; }
.mt-card--dark .mt-card__body { color: rgba(255, 255, 255, 0.78); font-size: 16px; }
.mt-card--dark .mt-link-arrow { font-size: 15px; }

/* Navy card: SOLID navy tile for use on light sections
   (mt-card--dark is translucent and only works on navy bands) */
.mt-card--navy {
  background: var(--mt-navy);
  border-color: var(--mt-navy);
}
.mt-card--navy:hover { box-shadow: var(--shadow-2); }
.mt-card--navy .mt-card__title { color: var(--mt-white); }
.mt-card--navy .mt-card__body { color: rgba(255, 255, 255, 0.82); }
.mt-card--navy .mt-link-arrow:hover,
.mt-card--navy .mt-link-arrow:focus-visible { color: #FFB066; }

/* Phase card: orange top bar, used for step-by-step rows */
.mt-card--phase {
  border: 0;
  border-top: 4px solid var(--mt-orange);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 32px;
  gap: 12px;
}
.mt-card--phase:hover { box-shadow: none; }
.mt-card--phase .mt-card__title { font-size: 22px; }
.mt-card--phase .mt-card__body { font-size: 16px; }

/* ----- 4. Section headers + text styles --------------------- */

/* Small uppercase label above a heading */
.mt-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-black);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 24px;
}
.mt-eyebrow--muted { color: var(--fg-3); margin: 0; }

/* The standard section H2 (44px on desktop) */
.mt-section-title {
  font-size: 44px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 48px;
  color: var(--mt-ink);
  text-wrap: pretty;
}
.mt-section-title--flush { margin-bottom: 16px; }
.mt-section-title--solo  { margin-bottom: 0; }

/* Large intro paragraph under a section title */
.mt-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 48px;
  text-wrap: pretty;
}
.mt-lead--flush { margin-bottom: 0; }

/* Light text variants for navy bands */
.mt-bg-navy .mt-section-title { color: var(--mt-white); }
.mt-bg-navy .mt-lead { color: rgba(255, 255, 255, 0.82); }
.mt-text-orange { color: var(--mt-orange); }

/* Centered section header treatment */
.mt-section-head--center { text-align: center; }

/* ----- 5. Stat / proof blocks -------------------------------- */

.mt-stat-row { display: flex; gap: 48px; flex-wrap: wrap; }
.mt-stat__number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--mt-orange);
  line-height: 1;
}
.mt-stat__label {
  font-size: 16px;
  color: var(--fg-2);
  margin-top: 8px;
}

/* Soft panel that holds stats or proof copy */
.mt-panel {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mt-panel p { font-size: 18px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* ----- 6. Plus-bullet lists ---------------------------------- */

/* Brand list style: orange "+" instead of a bullet dot */
.mt-plus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mt-plus-list li { display: flex; gap: 16px; }
.mt-plus-list li::before {
  content: "+";
  flex: 0 0 auto;
  color: var(--mt-orange);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 26px;
  line-height: 1.2;
}
.mt-plus-list p,
.mt-plus-list li > span {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.mt-plus-list strong { color: var(--mt-ink); }

/* ----- 7. Quote / testimonial panel --------------------------- */

.mt-quote {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 56px;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.mt-quote blockquote {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--mt-ink);
  margin: 0 0 28px;
  max-width: 900px;
  text-wrap: pretty;
  border: 0;
  padding: 0;
  position: relative;
}
.mt-quote figcaption { font-size: 17px; color: var(--fg-2); position: relative; }
.mt-quote figcaption strong { color: var(--mt-ink); font-family: var(--font-display); }

/* ----- 8. FAQ accordion --------------------------------------- */

/* Native <details>/<summary>, styled with the orange plus marker */
.mt-faq { display: flex; flex-direction: column; }
.mt-faq details {
  border-top: 1px solid var(--border-subtle);
  padding: 8px 0;
}
.mt-faq details:last-child { border-bottom: 1px solid var(--border-subtle); }
.mt-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--mt-ink);
  list-style: none;
  cursor: pointer;
}
.mt-faq summary::-webkit-details-marker { display: none; }
.mt-faq .mt-faq__plus {
  color: var(--mt-orange);
  font-weight: var(--fw-regular);
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-out);
}
.mt-faq details[open] .mt-faq__plus { transform: rotate(45deg); }
.mt-faq details > *:not(summary) {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 22px;
  max-width: 760px;
}
.mt-faq a { color: var(--mt-orange); text-decoration: none; }
.mt-faq a:hover { color: var(--mt-orange-hover); }

/* ----- 9. Decorative orange rings ------------------------------ */

/* Position with inline style per use (top/right/bottom/left + size).
   Parent section needs .mt-clip so the ring crops at the edges. */
.mt-ring {
  position: absolute;
  border-radius: 50%;
  border: 26px solid rgba(250, 125, 0, 0.22);
  pointer-events: none;
}
/* Any container holding a ring clips it at its edges, so rings never
   cause sideways scrolling (belt-and-suspenders for bespoke sections) */
*:has(> .mt-ring) { overflow: hidden; position: relative; }
.mt-ring--faint  { border-color: rgba(250, 125, 0, 0.12); border-width: 22px; }
.mt-ring--soft   { border-color: rgba(250, 125, 0, 0.16); border-width: 24px; }
.mt-ring--quote  { border-color: rgba(250, 125, 0, 0.14); border-width: 16px; }

/* Floating decorative "+" marks (hero corners) */
.mt-plus-mark {
  position: absolute;
  color: var(--mt-orange);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: 1;
  opacity: 0.5;
  pointer-events: none;
}

/* ----- 9b. Page hero (homepage + adaptable to other pages) ------ */

.mt-hero { background: var(--mt-white); position: relative; overflow: hidden; }
.mt-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 40px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: center;
}
.mt-hero__title {
  font-size: 62px;
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0 0 24px;
  color: var(--mt-ink);
  text-wrap: pretty;
}
/* The orange "+" inside headings (brand signature, lighter weight) */
.mt-plus-accent { color: var(--mt-orange); font-weight: var(--fw-regular); }
.mt-hero__text {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 32px;
  max-width: 560px;
}

/* The signature orange ring photo circle */
.mt-hero__media { position: relative; height: 540px; }
.mt-hero__circle {
  position: absolute;
  top: 0;
  right: -120px; /* bleeds off the right edge of the content column */
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 26px solid var(--mt-orange);
  box-sizing: border-box;
  padding: 18px;
  background: var(--mt-white);
}
.mt-hero__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ----- 9b-2. Interior page heroes --------------------------------- */

/* Kicker: small navy ring dot + uppercase section label */
.mt-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.mt-kicker__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 6px solid var(--mt-navy);
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 auto;
}
.mt-kicker span:last-child {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-black);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mt-navy);
}

/* Breadcrumb: "Parent / Current" on detail pages */
.mt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-medium);
  margin-bottom: 28px;
}
.mt-breadcrumb a { color: var(--mt-navy); text-decoration: none; }
.mt-breadcrumb a:hover, .mt-breadcrumb a:focus-visible { color: var(--mt-orange); }
.mt-breadcrumb__sep { color: var(--fg-3); }
.mt-breadcrumb__current { color: var(--fg-2); }

/* Interior hero shell */
.mt-hero-page { position: relative; overflow: hidden; }
.mt-hero-page__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 40px 72px;
  position: relative;
}
.mt-hero-page__inner--photo {
  padding: 72px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.mt-hero-page__title {
  font-size: 56px;
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0 0 24px;
  color: var(--mt-ink);
  text-wrap: pretty;
}
.mt-hero-page__inner--photo .mt-hero-page__title { font-size: 58px; }
.mt-hero-page__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 36px;
  text-wrap: pretty;
}
.mt-hero-page__inner--photo .mt-hero-page__lead { font-size: 19px; max-width: 560px; margin-bottom: 32px; }

/* Hub hero photo: rounded rectangle with a small orange ring badge */
.mt-hero-page__media { position: relative; }
.mt-hero-page__media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.mt-hero-page__badge {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 14px solid var(--mt-orange);
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}
.mt-hero-page__caption {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mt-gray-slate);
}

/* Split section titles (statement left) */
.mt-split__title {
  font-size: 40px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--mt-ink);
  text-wrap: pretty;
}
.mt-split__title--xl { font-size: 44px; line-height: 1.08; }
.mt-split__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
}
.mt-split__body p { margin: 0; font-size: 18px; line-height: 1.6; }
.mt-split__body strong { color: var(--mt-ink); }
.mt-split__body .mt-link-arrow { align-self: flex-start; }

/* ----- 9b-3. More card styles ------------------------------------- */

/* Panel card: white card on a gray/tinted section, no hover lift */
.mt-card--panel { padding: 32px; gap: 10px; }
.mt-card--panel:hover { box-shadow: none; }
.mt-card--panel .mt-card__title { font-size: 21px; }
.mt-card--panel .mt-card__body { font-size: 16px; }

/* Rule card: just an orange top rule, no box */
.mt-card--rule {
  border: 0;
  border-top: 3px solid var(--mt-orange);
  border-radius: 0;
  background: transparent;
  padding: 20px 0 0;
  gap: 10px;
}
.mt-card--rule:hover { box-shadow: none; }
.mt-card--rule .mt-card__title { font-size: 21px; }
.mt-card--rule .mt-card__body { font-size: 16px; }

/* Small screenshot/product image at the top of a card */
.mt-card__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  display: block;
}

/* Orange ring icon used at the top of offering cards */
.mt-icon-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 8px solid var(--mt-orange);
  box-sizing: border-box;
}

/* Note text next to a button after a grid ("Not sure where to start?") */
.mt-after-note { font-size: 17px; color: var(--fg-2); }
.mt-bg-navy .mt-after-note { color: rgba(255, 255, 255, 0.82); }

/* ----- 9b-4. Navy CTA band ----------------------------------------- */

.mt-cta-band { padding-top: 80px; padding-bottom: 80px; }
.mt-cta-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.mt-cta-band__copy { max-width: 720px; }
.mt-cta-band__copy h2 {
  font-size: 38px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--mt-white);
}
.mt-cta-band__copy p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.mt-cta-band__btn { font-size: 18px; padding: 17px 32px; white-space: nowrap; }

/* Quote figure on gray sections gets a white background */
.mt-quote--white { background: var(--mt-white); padding: 48px; align-self: start; }
.mt-quote--white blockquote { font-size: 23px; }

/* Rule cards keep readable text on navy bands */
.mt-bg-navy .mt-card--rule .mt-card__title { color: var(--mt-white); }
.mt-bg-navy .mt-card--rule .mt-card__body { color: rgba(255, 255, 255, 0.82); }

/* Navy-band split text */
.mt-bg-navy .mt-split__title { color: var(--mt-white); }
.mt-bg-navy .mt-split__body { color: rgba(255, 255, 255, 0.82); }
.mt-bg-navy .mt-split__body strong { color: var(--mt-white); }
.mt-bg-navy .mt-plus-list p { color: rgba(255, 255, 255, 0.82); }
.mt-bg-navy .mt-plus-list strong { color: var(--mt-white); }

/* ----- 9b-5. Contact page ------------------------------------------ */

.mt-contact-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
  padding: 88px 40px 96px;
}
.mt-inline-link { color: var(--mt-orange); text-decoration: none; font-weight: var(--fw-medium); }
.mt-inline-link:hover, .mt-inline-link:focus-visible { color: var(--mt-orange-hover); }

.mt-contact-channel { display: flex; align-items: center; gap: 14px; }
.mt-contact-channel__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-black);
  color: var(--mt-orange);
  flex: 0 0 auto;
}
.mt-contact-channel__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mt-contact-channel__value {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--mt-ink);
  text-decoration: none;
}
.mt-contact-channel__value:hover,
.mt-contact-channel__value:focus-visible { color: var(--mt-orange); }

/* White card holding the embedded scheduler */
.mt-booking-card {
  background: var(--mt-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mt-booking-card h2 {
  font-size: 24px;
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--mt-ink);
}
.mt-booking-card > div > p { font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.mt-booking-card iframe {
  width: 100%;
  height: 620px;
  border: none;
  border-radius: var(--radius-md);
}
.mt-booking-card__fallback {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  text-align: center;
}
.mt-booking-card__fallback:hover,
.mt-booking-card__fallback:focus-visible { color: var(--mt-orange); }

/* ----- 9c. Client logo wall -------------------------------------- */

/* Each logo sets its own height with style="--h: 44px" so different
   logo shapes sit at equal visual weight. Mobile scales them all down. */
.mt-logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 56px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}
.mt-logo-wall img { height: var(--h, 40px); width: auto; }

/* ----- 9d. Course catalog ------------------------------------------ */

/* Sticky search bar + category chips, sits below the site nav */
.mt-catalog-toolbar {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.mt-catalog-toolbar__inner {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.mt-catalog-toolbar input[type="search"] {
  flex: 1 1 280px;
  min-width: 240px;
  font-family: var(--font-display);
  font-size: 16px;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--mt-ink);
  background: var(--mt-white);
}
.mt-catalog-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt-catalog-chips a {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--mt-navy);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}
.mt-catalog-chips a:hover,
.mt-catalog-chips a:focus-visible { border-color: var(--mt-orange); color: var(--mt-orange); }

.mt-catalog__inner { display: flex; flex-direction: column; gap: 64px; padding-top: 8px; }
.mt-catalog-cat { scroll-margin-top: 150px; }
.mt-catalog-cat__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-bottom: 3px solid var(--mt-navy);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.mt-catalog-cat__head h2 {
  font-size: 40px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--mt-navy);
  text-transform: lowercase;
}
.mt-catalog-cat__count {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  white-space: nowrap;
}
.mt-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.mt-catalog-card {
  background: var(--mt-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.mt-catalog-card:hover { box-shadow: var(--shadow-2); }
.mt-catalog-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mt-catalog-card h3 {
  font-size: 21px;
  font-weight: var(--fw-black);
  line-height: 1.2;
  margin: 0;
  color: var(--mt-ink);
}
.mt-catalog-card > p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.mt-badge {
  flex: 0 0 auto;
  color: var(--mt-white);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.mt-badge--orange { background: var(--mt-orange); }
.mt-badge--navy { background: var(--mt-navy); }
.mt-catalog-card__audience {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mt-navy);
}
.mt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mt-orange); flex: 0 0 auto; }
.mt-dot--sm { width: 6px; height: 6px; margin-top: 7px; }
.mt-catalog-card__wyl { border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-top: 4px; }
.mt-catalog-card__wyl summary {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--mt-orange);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.mt-catalog-card__wyl summary::-webkit-details-marker { display: none; }
.mt-catalog-card__caret { font-size: 12px; transition: transform var(--dur-base) var(--ease-out); }
.mt-catalog-card__wyl[open] .mt-catalog-card__caret { transform: rotate(90deg); }
.mt-catalog-card__wyl ul {
  margin: 12px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mt-catalog-card__wyl li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.mt-catalog__empty { font-size: 18px; color: var(--fg-2); margin: 40px 0 0; }
.mt-catalog__empty a { color: var(--mt-orange); font-weight: var(--fw-bold); text-decoration: none; }

/* Spotlight: the navy Leadership panel inside the catalog */
.mt-catalog-spotlight {
  background: var(--mt-navy);
  border-radius: var(--radius-lg);
  padding: 48px 52px;
  position: relative;
  overflow: hidden;
}
.mt-catalog-spotlight__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 800px;
}
.mt-catalog-spotlight h2 {
  font-size: 36px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--mt-white);
  text-transform: lowercase;
}
.mt-catalog-spotlight p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; }
.mt-catalog-spotlight__groups { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-catalog-spotlight__groups span {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--mt-white);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.mt-catalog-spotlight .mt-link-arrow { margin-top: 6px; font-size: 16px; }
.mt-catalog-spotlight .mt-link-arrow:hover { color: #FFB066; }

/* WordPress password form, styled to the brand */
.post-password-form input[type="password"] {
  font-family: var(--font-display);
  font-size: 16px;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  margin-right: 8px;
  background: var(--mt-white);
}
.post-password-form input[type="submit"] {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--mt-orange);
  color: var(--mt-white);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.post-password-form input[type="submit"]:hover { background: var(--mt-orange-hover); }

/* Hidden-but-accessible label (WordPress convention) */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* ----- 10. Header / navigation --------------------------------- */

.mt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
/* WordPress adds this class to <body> when the admin bar shows (logged in).
   Keeps the sticky nav from hiding under it. */
.admin-bar .mt-nav { top: 32px; }

.mt-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 40px;
  height: 76px;
  max-width: 1440px;
  margin: 0 auto;
}
.mt-nav__logo { display: block; }
.mt-nav__logo img { height: 44px; width: auto; display: block; }

.mt-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-medium);
}
/* Menu items come from a WordPress menu (ul/li), so flatten the list */
.mt-nav__links ul { display: contents; list-style: none; margin: 0; padding: 0; }
.mt-nav__links li { display: contents; }
.mt-nav__links a:not(.mt-btn) {
  color: var(--fg-1);
  text-decoration: none;
}
.mt-nav__links a:not(.mt-btn):hover,
.mt-nav__links a:not(.mt-btn):focus-visible { color: var(--mt-orange); }

.mt-nav__cta {
  font-size: 15px;
  padding: 11px 20px;
}

/* Mobile-only cluster (compact CTA + hamburger); hidden on desktop */
.mt-nav__actions { display: none; }

/* Mobile hamburger (hidden on desktop) */
.mt-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.mt-nav__toggle span {
  width: 22px;
  height: 2.5px;
  background: var(--mt-ink);
  border-radius: 2px;
  display: block;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
/* Hamburger turns into an X when the menu is open */
.mt-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mt-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mt-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu sheet (hidden until toggled; only exists below 768px) */
.mt-nav__sheet {
  display: none;
  background: var(--mt-white);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-2);
  flex-direction: column;
  padding: 8px 16px 16px;
}
.mt-nav__sheet ul { list-style: none; margin: 0; padding: 0; display: contents; }
.mt-nav__sheet li { display: contents; }
.mt-nav__sheet a {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.mt-nav__sheet li:last-child a { border-bottom: 0; }
.mt-nav--open .mt-nav__sheet { display: flex; }

/* ----- 11. Footer ----------------------------------------------- */

.mt-footer { background: var(--mt-navy); }
.mt-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.mt-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.mt-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.mt-footer__brand img { height: 40px; width: auto; display: block; align-self: flex-start; }
.mt-footer__brand p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 300px;
}
.mt-footer__col { display: flex; flex-direction: column; gap: 12px; }
.mt-footer__col ul { list-style: none; margin: 0; padding: 0; display: contents; }
.mt-footer__col li { display: contents; }
.mt-footer__heading {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-black);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.mt-footer__col a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.mt-footer__col a:hover,
.mt-footer__col a:focus-visible { color: var(--mt-white); }
.mt-footer__muted { font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.mt-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.mt-footer__plus {
  color: var(--mt-orange);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
}

/* ----- 11b. Page shell ------------------------------------------- */

/* Our templates output full-bleed sections. These rules make sure the
   GeneratePress wrappers never squeeze or flex them, whatever the
   parent theme's container settings are. */
.mt-main { width: 100%; display: block; }
body.mt-fullbleed #page,
body.mt-fullbleed #content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

/* Bigger closing CTA title ("Let's Meet") */
.mt-section-title--xl { font-size: 52px; line-height: 1.05; margin-bottom: 20px; }

/* Small spacing utilities for locked templates */
.u-mb-36 { margin-bottom: 36px; }
.u-mb-48 { margin-bottom: 48px; }
.u-mt-48 { margin-top: 48px; }
.u-center { text-align: center; }

/* ----- 12. Mobile rules (single 768px breakpoint) ---------------- */

@media (max-width: 768px) {
  .mt-container { padding-left: 20px; padding-right: 20px; }

  /* Hero stacks: text first, circle below, cropped at the bottom edge */
  .mt-hero__inner { display: block; padding: 48px 20px 0; }
  .mt-hero__title { font-size: 38px; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; }
  .mt-hero__text { font-size: 17px; margin-bottom: 24px; }
  .mt-hero .mt-eyebrow { font-size: 12px; margin-bottom: 16px; }
  .mt-hero .mt-btn-row { margin-bottom: 36px; }
  .mt-hero__media { height: 300px; margin: 0 -20px; }
  .mt-hero__circle {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 340px;
    border-width: 18px;
    padding: 12px;
  }

  /* Logos scale down together */
  .mt-logo-wall { gap: 20px 32px; }
  .mt-logo-wall img { height: calc(var(--h, 40px) * 0.78); }

  .mt-section-title--xl { font-size: 38px; margin-bottom: 20px; }

  /* Interior page heroes */
  .mt-hero-page__inner { padding: 48px 20px 56px; }
  .mt-hero-page__inner--photo { display: block; padding: 48px 20px 56px; }
  .mt-hero-page__title,
  .mt-hero-page__inner--photo .mt-hero-page__title { font-size: 36px; letter-spacing: -0.02em; line-height: 1.06; margin-bottom: 16px; }
  .mt-hero-page__lead,
  .mt-hero-page__inner--photo .mt-hero-page__lead { font-size: 17px; margin-bottom: 24px; }
  .mt-hero-page__media { margin-top: 36px; }
  .mt-hero-page__media img { height: 280px; }
  .mt-hero-page__badge { top: -14px; right: -6px; width: 84px; height: 84px; border-width: 10px; }
  .mt-split__title, .mt-split__title--xl { font-size: 32px; }
  .mt-cta-band { padding-top: 56px; padding-bottom: 56px; }
  .mt-cta-band__inner { grid-template-columns: 1fr; gap: 28px; }
  .mt-cta-band__copy h2 { font-size: 30px; }
  .mt-cta-band__btn { text-align: center; }
  .mt-quote--white { padding: 32px 24px; }
  .mt-quote--white blockquote { font-size: 19px; }
  /* Card grid spans collapse with the grid */
  .mt-grid > .mt-card { grid-column: auto !important; }

  /* Catalog stacks */
  .mt-catalog-toolbar { top: 64px; }
  .mt-catalog-grid { grid-template-columns: 1fr; }
  .mt-catalog-cat__head h2 { font-size: 30px; }
  .mt-catalog-spotlight { padding: 32px 24px; }
  .mt-catalog-spotlight h2 { font-size: 28px; }
  .mt-catalog__inner { gap: 48px; }

  /* Linked proof/case-study cards stack on mobile */
  .mt-proof-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 28px 24px !important;
  }
  .mt-proof-card span { white-space: normal !important; }

  /* Krispy Kreme case study: bespoke grids collapse (inline styles need !important) */
  .mt-kk-story { display: block !important; padding-top: 120px !important; }
  .mt-kk-story > *:first-child { position: static !important; margin-bottom: 32px; }
  .mt-kk-quote { display: block !important; }
  .mt-kk-quote > *:first-child { margin-bottom: 24px; }
  .mt-kk-snapshot {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 24px;
  }

  /* Contact page stacks */
  .mt-contact-hero { display: block; padding: 48px 20px 56px; }
  .mt-contact-hero > div:first-child { margin-bottom: 36px; }
  .mt-contact-hero .mt-hero-page__title { font-size: 36px; }
  .mt-booking-card { padding: 24px 20px; }
  .mt-booking-card iframe { height: 560px; }
  .mt-section { padding-top: 56px; padding-bottom: 56px; }
  .mt-section--tall { padding-top: 64px; padding-bottom: 64px; }

  /* All multi-column grids collapse to one column */
  .mt-grid--2, .mt-grid--3, .mt-grid--4,
  .mt-split--hero, .mt-split--lede, .mt-split--even {
    grid-template-columns: 1fr;
  }
  .mt-split { gap: 32px; }

  .mt-section-title { font-size: 34px; margin-bottom: 32px; }
  .mt-section-title--flush { margin-bottom: 16px; }
  .mt-section-title--solo { margin-bottom: 0; }
  .mt-lead { margin-bottom: 32px; }
  .mt-lead--flush { margin-bottom: 0; }

  .mt-card { padding: 28px; }
  .mt-panel { padding: 32px; }
  .mt-quote { padding: 32px 24px; }
  .mt-quote blockquote { font-size: 20px; }
  .mt-stat-row { gap: 32px; }
  .mt-stat__number { font-size: 44px; }

  /* Buttons go full width so tap targets stay comfortable */
  .mt-btn-row { flex-direction: column; align-items: stretch; }
  .mt-btn-row .mt-btn { text-align: center; }

  /* Nav: 64px bar with logo, compact CTA, hamburger */
  .mt-nav__inner { height: 64px; padding: 0 16px; gap: 16px; }
  .mt-nav__logo img { height: 36px; }
  .mt-nav__links { display: none; }
  .mt-nav__actions { display: flex; align-items: center; gap: 8px; }
  .mt-nav__cta {
    font-size: 14px;
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .mt-nav__cta:hover { transform: none; }
  .mt-nav__toggle { display: flex; }
  /* On phones the admin bar is 46px tall and un-sticks while scrolling;
     WordPress handles that, so no offset needed here. */
  .admin-bar .mt-nav { top: 0; }

  /* Footer stacks */
  .mt-footer__inner { padding: 48px 20px 32px; gap: 36px; }
  .mt-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .mt-footer__brand { grid-column: 1 / -1; gap: 16px; }
  .mt-footer__brand img { height: 36px; }
  .mt-footer__col a { min-height: 44px; display: flex; align-items: center; }
  .mt-footer__legal { padding-top: 20px; font-size: 12px; }
}

@media (min-width: 769px) {
  /* Desktop never shows the mobile sheet, even if it was left open */
  .mt-nav__sheet { display: none !important; }
}

/* The hidden attribute always wins, even over display: flex/grid classes
   (used by the catalog search to hide non-matching cards) */
[hidden] { display: none !important; }

/* Respect users who turn off animations in their OS settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}