@layer base {
  body {
    font-family: 'Nunito', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  h1, h2, h3, h4, .font-heading {
    font-family: 'Fredoka', 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
  }

  .font-brand-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
  }
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #0d2256;
}

::-webkit-scrollbar-thumb {
  background: #ffde00;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #facc15;
}

/* Bubble float animation */
@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.04);
  }
}

.animate-bubble {
  animation: bubbleFloat 4s ease-in-out infinite;
}

.animate-bubble-delayed {
  animation: bubbleFloat 4.5s ease-in-out 1.5s infinite;
}

/* ---------------------------------------------------------------
 * WordPress integration only - never changes the approved design.
 *
 * NOTE: keep this section free of "safety net" rules that target raw
 * elements. Unlayered CSS beats every @layer, so a rule like
 * `.mw-site a { color: inherit }` would silently override the design's
 * own text-colour utilities. Tailwind's preflight already normalises
 * links.
 * --------------------------------------------------------------- */

/* Screen-reader helper used by the mobile menu button. */
.mw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hide the WP admin bar offset jump for logged-out visitors (default behaviour). */
@media screen and (max-width: 782px) {
  #wpadminbar {
    position: fixed;
  }
}

/* ---------------------------------------------------------------
 * Home page header - menu hover colour.
 *
 * The front page's hero is yellow and the header floats over it, so the design's
 * yellow hover colour (`hover:text-[#FFDE00]`) disappears into the background:
 * on the home page the menu items darken instead. Scoped to the front page, to
 * the header's top state (which only exists over the hero - scrolling replaces it)
 * and to the desktop pill nav, so the mobile drawer's own nav is untouched and
 * every other page keeps the design's yellow hover.
 * --------------------------------------------------------------- */
@media (min-width: 1024px) {
  body.home header[data-mw-section="navbar"] nav[class*="lg:flex"] > a:hover {
    color: #1642A7;
  }
}

/* The mobile menu toggle sits on the same yellow hero, where its translucent white
 * pill and white icon wash out. On the home page it becomes a solid blue button
 * (the hero's own call-to-action colour), in the header's hero state only - the
 * scrolled header keeps the design's translucent button. */
body.home header[data-mw-section="navbar"] [data-mw-state="top"] [data-mw-trigger="menu-toggle"] {
  background-color: #1642A7;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

body.home header[data-mw-section="navbar"] [data-mw-state="top"] [data-mw-trigger="menu-toggle"]:hover {
  background-color: #103487;
}

/* ---------------------------------------------------------------
 * Popups - overflow & scroll behaviour (shared by every popup).
 *
 * Short content renders exactly as the design does. When the content
 * is taller than the viewport, the panel is capped at 90% of the
 * viewport height, only the content area scrolls, and the close button
 * and header stay put. The page behind is frozen by .mw-scroll-locked,
 * which assets/js/mw-popup.js adds while a popup is open.
 *
 * Scoped to the popups' own data attributes; no global element rules.
 * --------------------------------------------------------------- */

[data-mw-popup-overlay] {
  /* Never let a gesture at the end of the popup chain to the page behind. */
  overscroll-behavior: contain;
}

[data-mw-popup-panel] {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-height: 90svh; /* mobile: ignores the collapsing browser chrome */
}

/* The scroll area spans the panel's full inner width, so the scrollbar sits
 * against the panel's border (same as the case-study popup). The popup's own
 * padding lives on this element, which keeps the content clear of the scrollbar. */
[data-mw-popup-scroll] {
  flex: 1 1 auto;
  min-height: 0; /* lets the flex item shrink, so it can actually scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Header block of a popup: scrolls with the content until it reaches the top.
 * Its background is a pseudo-element rather than a background on the element
 * itself: giving a sticky element its own background makes Chromium re-rasterise
 * its text with different antialiasing, which would visibly change the
 * (unchanged) short-content rendering. */
[data-mw-popup-header] {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* The header carries the popup's top spacing itself, pulled back into place by an
 * equal negative margin. Nothing moves before anything is scrolled, but once the
 * header pins while the content scrolls it keeps that space from the panel edge
 * instead of collapsing onto it. */
[data-mw-popup-header] {
  padding-top: 24px;
  margin-top: -24px;
  padding-bottom: 14px; /* keeps the header from overlapping the content when it pins */
}

@media (min-width: 640px) {
  [data-mw-popup-header] {
    padding-top: 32px;
    margin-top: -32px;
  }
}

[data-mw-popup-header]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #0e2d77; /* the panel's own colour */
  pointer-events: none;
}

/* Popups whose header already paints its own band opt out of the pseudo-element. */
[data-mw-popup-header].mw-popup-header-solid::before {
  content: none;
}

/* The pop-up's photo caption bar sits inside a rounded frame. It carries a backdrop-filter, and a
 * filtered layer is composited on its own, so the frame's `overflow: hidden` stops rounding it: the
 * bar showed square bottom corners sticking past the image's curve (Chromium). Rounding the bar
 * itself puts the corner back without giving up the blur. */
.mw-popup-caption {
  border-bottom-left-radius: var(--radius-2xl, 1rem);
  border-bottom-right-radius: var(--radius-2xl, 1rem);
}

/* Page-behind lock, applied only while a popup is open. */
html.mw-scroll-locked,
body.mw-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

body.mw-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* Consultation submit button, "sending" state. The spinner and the busy label
   are already in the markup (hidden), so the idle button renders exactly like
   the approved design - nothing is added to the layout while it is at rest. */
[data-mw-consult-submit][disabled] {
  cursor: wait;
  opacity: 0.92;
  /* Beats the hover:scale-105 utility while disabled; the idle state is untouched. */
  transform: none !important;
}

.mw-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid rgba(22, 66, 167, 0.3);
  border-top-color: #1642A7;
  animation: mw-spin 0.7s linear infinite;
}

@keyframes mw-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-spinner {
    animation-duration: 1.6s;
  }
}

/* Outlet list: the map's pins in plain text, so a phone user does not have to hit
   a 28px target. Rows behave exactly like the pins - clicking one selects it. */
.mw-outlet-list {
  max-height: 248px;
  overflow-y: auto;
  padding-right: 6px;
  /* Brand-yellow scrollbar (Firefox). */
  scrollbar-width: thin;
  scrollbar-color: #FFDE00 rgba(255, 255, 255, .08);
}

/* Brand-yellow scrollbar (Chromium / Safari). */
.mw-outlet-list::-webkit-scrollbar {
  width: 8px;
}

.mw-outlet-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .07);
  border-radius: 9999px;
}

.mw-outlet-list::-webkit-scrollbar-thumb {
  background: #FFDE00;
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

.mw-outlet-list::-webkit-scrollbar-thumb:hover {
  background: #ffe633;
  background-clip: content-box;
}

.mw-outlet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #081a44;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

.mw-outlet-row + .mw-outlet-row {
  margin-top: 6px;
}

.mw-outlet-row:hover {
  border-color: rgba(255, 222, 0, .4);
}

.mw-outlet-row--active {
  background: rgba(255, 222, 0, .12);
  border-color: #FFDE00;
}

.mw-outlet-row[hidden] {
  display: none;
}

.mw-outlet-row__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1642A7;
  border: 1px solid #fff;
}

.mw-outlet-row--active .mw-outlet-row__dot {
  background: #FFDE00;
}

.mw-outlet-row__name {
  display: block;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 900;
}

.mw-outlet-row__meta {
  display: block;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #a5c4ff;
}

.mw-outlet-row__count {
  flex: none;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  color: #FFDE00;
  background: rgba(255, 222, 0, .12);
  border: 1px solid rgba(255, 222, 0, .35);
  border-radius: 9999px;
  padding: 2px 8px;
}

/* Outlet status pill: the colour follows the Status set on the outlet, so an
   "Installation" site never reads as operational. */
[data-mw-map="status"][data-mw-status="operational"] {
  background: rgba(16, 185, 129, .2);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, .3);
}

[data-mw-map="status"][data-mw-status="installation"] {
  background: rgba(255, 222, 0, .18);
  color: #FFDE00;
  border-color: rgba(255, 222, 0, .38);
}

[data-mw-map="status"][data-mw-status="expanding"] {
  background: rgba(0, 194, 203, .18);
  color: #00C2CB;
  border-color: rgba(0, 194, 203, .38);
}

/* Photo bubble on the map: the outlet's own picture, at the pin you point at.
   Clamped inside the panel by the section script, with a tail aimed at the pin. */
.mw-pin-bubble {
  position: absolute;
  z-index: 30;
  width: 172px;
  padding: 6px;
  background: #081a44;
  border: 2px solid rgba(255, 222, 0, .55);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
  pointer-events: none;
}

.mw-pin-bubble.hidden,
.mw-pin-bubble__img.hidden {
  display: none;
}

.mw-pin-bubble__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
}

.mw-pin-bubble__name {
  display: block;
  margin-top: 5px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  text-align: center;
}

.mw-pin-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: rgba(255, 222, 0, .55);
}

.mw-pin-bubble--below::after {
  bottom: auto;
  top: -8px;
  border-top-color: transparent;
  border-bottom-color: rgba(255, 222, 0, .55);
}

/* Before / after picture: press and drag anywhere to move the split. */
.mw-compare {
  cursor: ew-resize;
  touch-action: none;
}

/* Slider drag handle: two chevrons centred in the circle. The design used a unicode
   arrow glyph, which sat off-centre and rendered differently in every font. */
.mw-handle__chevrons {
  display: flex;
  align-items: center;
  line-height: 1;
}

.mw-handle__chevrons > svg:first-child {
  margin-right: -5px;
}

/* The knob lives inside the 4px divider, which squeezed it into an ellipse
   (27x32 instead of 32x32). Lock the box so it stays a true circle. */
.mw-handle__knob {
  flex: none;
  min-width: 2rem;
  min-height: 2rem;
}

/* ==========================================================================
   Flexible Client Solutions (client revision, Sept 2026)
   Values mirror the reference exactly: py-24, p-7/8, rounded-3xl, 3px borders,
   scale-102 on the selected card, #0b2463 cards on the #0d276b section.
   ========================================================================== */
.mw-solutions {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: #0d276b;
}

.mw-solutions__inner {
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.mw-solutions__circle {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}

.mw-solutions__circle--a {
  top: 2.5rem;
  left: 2.5rem;
  width: 12rem;
  height: 12rem;
  background: rgba(255, 222, 0, .05);
  border: 1px solid rgba(255, 255, 255, .05);
}

.mw-solutions__circle--b {
  bottom: 2.5rem;
  right: 2.5rem;
  width: 16rem;
  height: 16rem;
  background: rgba(0, 194, 203, .05);
  border: 1px solid rgba(255, 255, 255, .05);
}

.mw-solutions__header {
  max-width: 48rem;
  margin: 0 auto 4rem;
  text-align: center;
}

.mw-solutions__title {
  margin-top: .75rem;
  font-family: Fredoka, sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
}

.mw-solutions__lead {
  margin: .5rem auto 0;
  max-width: 42rem;
  font-family: Nunito, sans-serif;
  font-size: .875rem;
  line-height: 1.25rem;
  /* sm+: text-base = 1rem / 1.5rem */
  font-weight: 600;
  color: #c7dbff;
}

.mw-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem;
  border-radius: 9999px;
  background: #FFDE00;
  color: #1642A7;
  font-family: Fredoka, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 900;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.mw-solutions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.mw-model {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem;
  border: 3px solid rgba(255, 255, 255, .15);
  border-radius: 1.5rem;
  background: #0b2463;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: all .3s;
}

.mw-model:hover {
  border-color: rgba(255, 255, 255, .4);
}

.mw-model.is-selected {
  border-color: #FFDE00;
  background: #10307e;
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(255, 222, 0, .2);
}

.mw-model__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
}

.mw-model__badge {
  padding: .25rem .75rem;
  border-radius: 9999px;
  font-family: Fredoka, sans-serif;
  font-size: .6875rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mw-model__badge--yellow { background: #FFDE00; color: #1642A7; }
.mw-model__badge--cyan { background: #00C2CB; color: #081a44; }
.mw-model__badge--white { background: rgba(255, 255, 255, .2); color: #fff; }

.mw-model__number {
  font-family: Nunito, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  color: #c7dbff;
}

.mw-model__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.mw-model__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 2px solid rgba(255, 222, 0, .4);
  border-radius: 1rem;
  background: #081a44;
  color: #FFDE00;
}

.mw-model__title {
  font-family: Fredoka, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
}

.mw-model__subtitle {
  font-family: Nunito, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  color: #FFDE00;
}

.mw-model__quote {
  margin: 1rem 0;
  padding: .75rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1rem;
  background: rgba(8, 26, 68, .8);
  font-family: Nunito, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #fff;
}

.mw-model__ideal {
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  margin-bottom: 1.25rem;
  font-family: Nunito, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  color: #a5c4ff;
}

.mw-model__ideal strong { color: #fff; }

.mw-model__ideal-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: .125rem;
  color: #00C2CB;
}

.mw-model__features {
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: Nunito, sans-serif;
}

.mw-model__feature {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .625rem;
  font-size: .75rem;
  line-height: 1.625;
  color: #e2e8f0;
}

.mw-model__feature:last-child { margin-bottom: 0; }

.mw-model__feature-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: .125rem;
  color: #FFDE00;
}

.mw-model__foot {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.mw-model__investment {
  margin-bottom: .75rem;
  font-family: Fredoka, sans-serif;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  color: #00C2CB;
}

.mw-model__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .875rem 1rem;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 1rem;
  background: #1642A7;
  color: #fff;
  font-family: Fredoka, sans-serif;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
}

.mw-model__cta:hover { background: #1f52cf; }

.mw-model.is-selected .mw-model__cta {
  border-color: #fff;
  background: #FFDE00;
  color: #1642A7;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}

.mw-model.is-selected .mw-model__cta:hover { background: #ffe633; }

.mw-solutions__ribbon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding: 1.5rem;
  border: 2px solid rgba(255, 255, 255, .15);
  border-radius: 1.5rem;
  background: #0b2463;
  text-align: center;
}

.mw-solutions__ribbon-copy {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.mw-solutions__ribbon-icon {
  display: none;
  flex: none;
  width: 2rem;
  height: 2rem;
  color: #FFDE00;
}

.mw-solutions__ribbon-title {
  font-family: Fredoka, sans-serif;
  font-size: .875rem;
  font-weight: 900;
  color: #fff;
}

.mw-solutions__ribbon-text {
  font-family: Nunito, sans-serif;
  font-size: .75rem;
  line-height: 1rem;
  color: #c7dbff;
}

.mw-solutions__ribbon-cta {
  flex-shrink: 0;
  padding: .625rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: Fredoka, sans-serif;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .2s;
}

.mw-solutions__ribbon-cta:hover { background: rgba(255, 255, 255, .2); }

@media (min-width: 640px) {
  .mw-solutions__inner { padding: 0 1.5rem; }
  .mw-solutions__title { font-size: 2.25rem; line-height: 2.5rem; }
  .mw-solutions__lead { font-size: 1rem; line-height: 1.5rem; }
  .mw-model { padding: 2rem; }
  .mw-model__cta { font-size: .875rem; }
  .mw-solutions__ribbon { flex-direction: row; text-align: left; }
  .mw-solutions__ribbon-icon { display: block; }
}

@media (min-width: 1024px) {
  .mw-solutions__inner { padding: 0 2rem; }
  .mw-solutions__title { font-size: 3rem; line-height: 1; }
  .mw-solutions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Student Laundry Journey - standalone section (client revision, Sept 2026)
   ========================================================================== */
.mw-journey-section {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: #103487;
}

.mw-journey-section__inner {
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.mw-journey-section__circle {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .1);
  pointer-events: none;
}

.mw-journey-section__circle--a {
  top: 33.3333%;
  left: 2rem;
  width: 11rem;
  height: 11rem;
  background: rgba(255, 222, 0, .1);
}

.mw-journey-section__circle--b {
  bottom: 2.5rem;
  right: 2rem;
  width: 14rem;
  height: 14rem;
  background: rgba(0, 194, 203, .1);
}

.mw-journey-section__header {
  max-width: 48rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.mw-journey-section__title {
  margin-top: .75rem;
  font-family: Fredoka, sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
}

.mw-journey-section__lead {
  margin: .5rem auto 0;
  max-width: 42rem;
  font-family: Nunito, sans-serif;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #c7dbff;
}

.mw-journey-section__stage {
  max-width: 56rem;
  margin: 0 auto;
}

.mw-journey-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  max-width: 56rem;
  margin: 3rem auto 0;
  text-align: center;
}

.mw-journey-pillar {
  padding: .875rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 1rem;
  background: #0b2463;
}

.mw-journey-pillar__title {
  font-family: Fredoka, sans-serif;
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #FFDE00;
}

.mw-journey-pillar__text {
  margin-top: .125rem;
  font-family: Nunito, sans-serif;
  font-size: .6875rem;
  color: #cbd5e1;
}

@media (min-width: 640px) {
  .mw-journey-section__inner { padding: 0 1.5rem; }
  .mw-journey-section__title { font-size: 2.25rem; line-height: 2.5rem; }
  .mw-journey-section__lead { font-size: 1rem; line-height: 1.5rem; }
  .mw-journey-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .mw-journey-section__inner { padding: 0 2rem; }
  .mw-journey-section__title { font-size: 3rem; line-height: 1; }
}

/* ==========================================================================
   Utilities the client's revision uses that are not in the compiled Tailwind
   build (checked in the browser: they resolved to nothing).
   ========================================================================== */
.pb-12 { padding-bottom: 3rem; }        /* hero foam base, was pb-16 */
.-mb-1 { margin-bottom: -.25rem; }      /* foam SVG overlap, was mb-0 */
/* the lg:text-5xl override that used to live here had no @media wrapper, so it applied at every
   width and blew headings up to 48px on mobile. tailwind.css ships the correctly scoped rule. */


/* ==== Arbitrary-value utilities used by the theme markup (Tailwind JIT classes) ==== */
.aspect-\[16\/10\] { aspect-ratio: 16/10; }







/* removed: duplicate of tailwind's own rule; as an unlayered rule it beat sm:text-xs */
.text-\[11px\] { font-size: 11px; }



/* ==== Arbitrary-value + responsive utilities (Tailwind JIT) part 2 ==== */
.aspect-\[16\/10\] { aspect-ratio: 16/10; }










@media (min-width: 640px) {



}
@media (min-width: 768px) {

}

/* ==== Utilities used by the logo images (missing from the compiled Tailwind build) ==== */
.object-contain { object-fit: contain; }

.w-11 { width: 2.75rem; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.w-auto { width: auto; }
.h-auto { height: auto; }
@media (min-width: 640px) {
  .sm\:w-14 { width: 3.5rem; }

}
@media (min-width: 640px) {
  .sm\:w-16 { width: 4rem; }
  .sm\:h-16 { height: 4rem; }
}
/* logo at 80px */
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
@media (min-width: 640px) {
  .sm\:w-20 { width: 5rem; }
  .sm\:h-20 { height: 5rem; }
}

/* fixed navbar height */
@media (min-width: 640px) {
  .sm\:h-28 { height: 7rem; }
}


/* ==========================================================================
   Legal documents (Privacy Policy, Terms of Service, M&E Warranty Policy)
   The page body is the client's own editor content, so it arrives as plain
   <h2>/<h3>/<p>/<ul>/<table> markup. Tailwind's reset strips those, so the
   styling for that one wrapper lives here instead of in the copy.
   ========================================================================== */
.mw-legal {
  color: #cbd5e1;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
}
.mw-legal > * + * { margin-top: 1rem; }
.mw-legal h2 {
  margin-top: 2.25rem;
  color: #ffffff;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.mw-legal h3 {
  margin-top: 1.5rem;
  color: #e2e8f0;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}
.mw-legal ul, .mw-legal ol { padding-left: 1.35rem; }
.mw-legal ul { list-style: disc; }
.mw-legal ol { list-style: decimal; }
.mw-legal li + li { margin-top: 0.35rem; }
.mw-legal li > ul, .mw-legal li > ol { margin-top: 0.35rem; }
.mw-legal a {
  color: #FFDE00;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mw-legal strong { color: #ffffff; font-weight: 700; }
.mw-legal em { color: #e2e8f0; }
.mw-legal hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.mw-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.mw-legal th, .mw-legal td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.mw-legal th {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  font-family: 'Fredoka', system-ui, sans-serif;
}
.mw-legal > .mw-legal-card, .mw-legal-card a { text-decoration: none; }
.mw-legal-card a:hover { text-decoration: underline; }
.mw-legal-note { color: #94a3b8; font-size: 0.75rem; }


/* ==========================================================================
   Mobile navigation drawer
   The drawer is appended inside the fixed header, which is a fixed-height flex
   row (h-20 sm:h-28 - the page clearance depends on that height). A flex child
   there got centred and clipped into an 80/112px box, so the panel is taken out
   of the flow and pinned directly under the bar, full width, with its own scroll
   for long menus.
   ========================================================================== */
.mw-navbar-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .mw-navbar-drawer {
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
  }
}

/*
 * Centred list grid.
 *
 * A section whose cards come from a content list can render a part-filled last row, and a fixed-column
 * grid pins that row to the left edge - one partner in an eight-column strip sat alone in the corner.
 * This lays the same items out as a centred flex row instead: the widths and gaps match the grid it
 * replaces (so a full row is unchanged) and a part-filled row sits in the middle. The template passes
 * the column counts and gaps it used to give Tailwind, per breakpoint.
 */
.mw-grid-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.mw-grid-center > * {
	flex: 0 0 auto;
	width: calc((100% - (var(--mw-gap, 0rem) * (var(--mw-cols, 1) - 1))) / var(--mw-cols, 1));
}

@media (min-width: 640px) {
	.mw-grid-center > * {
		width: calc((100% - (var(--mw-gap-sm, var(--mw-gap, 0rem)) * (var(--mw-cols-sm, var(--mw-cols, 1)) - 1))) / var(--mw-cols-sm, var(--mw-cols, 1)));
	}
}

@media (min-width: 768px) {
	.mw-grid-center > * {
		width: calc((100% - (var(--mw-gap-md, var(--mw-gap-sm, var(--mw-gap, 0rem))) * (var(--mw-cols-md, var(--mw-cols-sm, var(--mw-cols, 1))) - 1))) / var(--mw-cols-md, var(--mw-cols-sm, var(--mw-cols, 1))));
	}
}

@media (min-width: 1024px) {
	.mw-grid-center > * {
		width: calc((100% - (var(--mw-gap-lg, var(--mw-gap-md, var(--mw-gap-sm, var(--mw-gap, 0rem)))) * (var(--mw-cols-lg, var(--mw-cols-md, var(--mw-cols-sm, var(--mw-cols, 1)))) - 1))) / var(--mw-cols-lg, var(--mw-cols-md, var(--mw-cols-sm, var(--mw-cols, 1)))));
	}
}