/* MCM Travels tokens — generated from tokens.json. Load before components/bundle.css. */
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --navy: #21264F;
  --mint: #81DEC7;
  --aqua: #A2DAE3;
  --turquoise: #2ABCC9;
  --white: #FFFFFF;
  --aqua-deep: #1E7A89;
  --grey-600: #6F6F6F;
  --grey-300: #CCCCCC;
  --teal-700: #17806A;
  --text: var(--navy);
  --heading: var(--navy);
  --text-inverse: var(--white);
  --heading-inverse: var(--aqua);
  --text-muted: var(--grey-600);
  --link: var(--teal-700);
  --link-hover: var(--navy);
  --link-on-accent: var(--navy);
  --link-inverse: var(--mint);
  --surface: var(--white);
  --surface-dark: var(--navy);
  --surface-accent: var(--mint);
  --surface-accent-soft: var(--aqua);
  --button-primary-bg: var(--aqua);
  --button-primary-hover: var(--mint);
  --button-dark-bg: var(--navy);
  --button-dark-hover: var(--turquoise);
  --button-pager-bg: var(--mint);
  --border-strong: var(--navy);
  --border: var(--grey-300);
  --photo-frame: var(--white);
  --rating-star: var(--mint);
  --focus: var(--navy);
  --focus-inverse: var(--mint);
  --overlay: rgba(33, 38, 79, 0.6);
  --font-display: "Atkinson Hyperlegible Next", Tahoma, Verdana, "Segoe UI", sans-serif;
  --font-body: Lato, "Segoe UI", Helvetica, Arial, sans-serif;
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 30px;
  --space-lg: 50px;
  --space-xl: 80px;
  --gutter: 30px;
  --gutter-mobile: 20px;
  --radius-none: 0px;
  --radius-md: 8px;
  --radius-tab: 10px;
  --container-narrow: 720px;
  --container: 960px;
  --container-wide: 1200px;
  --logo-width: 107px;
  --banner-height: 125px;
  --banner-height-mobile: 90px;
  --icon-sm: 17px;
  --icon-social: 32px;
  --badge-height: 64px;
  --tap-target: 44px;
  --frame-width: 4px;
  --hairline: 1px;
  --focus-width: 3px;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  --aspect-og: 1200 / 630;
}
/* Breakpoints (use literally in media queries): bp-tablet = max-width 991px, bp-mobile = max-width 767px, bp-small = max-width 479px */
/* Type styles */
.t-display { font-family: var(--font-display); font-size: 50px; line-height: 55px; font-weight: 800; }
.t-display-mobile { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 800; }
.t-heading-1 { font-family: var(--font-display); font-size: 35px; line-height: 42px; font-weight: 800; }
.t-heading-1-mobile { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 800; }
.t-heading-2 { font-family: var(--font-display); font-size: 25px; line-height: 30px; font-weight: 700; }
.t-heading-3 { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; }
.t-body-large { font-family: var(--font-body); font-size: 24px; line-height: 36px; font-weight: 400; }
.t-body { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 400; }
.t-body-mobile { font-family: var(--font-body); font-size: 18px; line-height: 27px; font-weight: 400; }
.t-body-small { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
.t-caption { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-nav { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.25px; }
.t-tab { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 700; }
.t-eyebrow { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 1.5px; }
.t-button { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 2px; }