@charset "utf-8";

/*
Theme Name: Modara - Fashion Design & Styling Academy HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Swatch Flip & Card Lift
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Split Menu
   3.5 Home Mega Menu
   3.6 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Arrows & Tabs
   7.2 Chips & Checks
   7.3 Accordion
   7.4 Post Cards
   7.5 Tables, Steps & Days
8. Cards
   8.1 Course Cards
   8.2 Team & Voices
   8.3 Graduates
   8.4 Open Days & Past Shows
   8.5 Study Modes
9. Home One
   9.1 Hero Slider
   9.2 Intake Strip
   9.3 The Four Schools
   9.4 Sketch To Photograph
   9.5 Mosaic
   9.6 Voices
   9.7 Open Day Band
   9.8 The Houses
10. Home Two
   10.1 Boxed Hero
   10.2 Studio Grid
   10.3 Intakes Table
   10.4 Semester Grid
   10.5 Quick Tuition
   10.6 Rooms
11. Home Three
   11.1 Split Hero
   11.2 The Night
   11.3 Portfolios Fan Out
   11.4 Running Order
   11.5 Reserve A Seat
12. Inner Pages
   12.1 Sidebar & Widgets
   12.2 Rows, Choices & Pages
13. Inner Page Sections
   13.1 About & Team
   13.2 Application Wizard
   13.3 Contact & Account
14. Courses, Tuition & The Show
   14.1 Filter Bars & Info Cards
   14.2 Course Pages
   14.3 Tuition Calculator
   14.4 The Application
   14.5 The Timetable
   14.6 Admissions & Open Days
   14.7 The Show & The Graduates
   14.8 Studios & About
   14.9 Student Work & Student Area
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Subheader
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --ma-ink: #212121;
  --ma-ink-rgb: 33, 33, 33;
  --ma-white: #FFFFFF;
  /* the base's blush: the rule under every title, tonal buttons, bars, the selection; ink text sits on it */
  --ma-blush: #DDB0B7;
  --ma-blush-rgb: 221, 176, 183;
  --ma-on-blush: #212121;
  /* the four course colours, from the photographs' backdrops (fills only, ink text on them) */
  --ma-lavender: #BDB6E3;
  --ma-powder: #B7D3DE;
  --ma-peach: #F3C9B1;
  --ma-mint: #B9DDD3;
  /* drawing lines for the croquis, the flats and the semester grid */
  --ma-draft: #212121;
  /* places: open, few left, closed */
  --ma-free: #5FAE8A;
  --ma-hold: #E0A64B;
  --ma-booked: #C9566A;
  /* semantic: white is the default; [data-theme="dark"] is the evening studio */
  --ma-bg: #FFFFFF;
  --ma-bg-rgb: 255, 255, 255;
  --ma-band: #F7F4F4;
  --ma-band-rgb: 247, 244, 244;
  --ma-plate: #EFE9E9;
  --ma-surface: #FFFFFF;
  --ma-surface-rgb: 255, 255, 255;
  --ma-heading: #212121;
  --ma-heading-rgb: 33, 33, 33;
  --ma-text: #6A6567;
  --ma-muted: #6F6A6C;
  --ma-line: #ECE5E6;
  --ma-line-2: rgba(33, 33, 33, 0.2);
  --ma-field: #F6F2F2;
  --ma-primary: #212121;
  --ma-on-primary: #FFFFFF;
  --ma-accent-text: #9B5363;
  --ma-free-text: #2F7A58;
  --ma-booked-text: #A8414F;
  --ma-hold-text: #8A5A0E;
  --ma-night: #1D1B1C;
  --ma-night-rgb: 29, 27, 28;
  --ma-shadow: 0 18px 44px rgba(33, 33, 33, 0.07);
  --ma-shadow-lg: 0 30px 70px rgba(33, 33, 33, 0.14);
  --ma-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: the base's Dosis capitals tracked .1em; Commissioner for the copy */
  --ma-ff-head: 'Dosis', 'Helvetica Neue', Arial, sans-serif;
  --ma-ff-body: 'Commissioner', 'Helvetica Neue', Arial, sans-serif;
  --ma-fs-h1: clamp(36px, 3.7vw, 62px);
  --ma-fs-h2: clamp(28px, 2.5vw, 41px);
  --ma-fs-h3: clamp(19px, 1.45vw, 23px);
  --ma-fs-h4: 19px;
  --ma-fs-h5: 16.5px;
  --ma-fs-h6: 13px;
  /* WebGL Pastel Clouds: the three cloud tints and their strength */
  --gl-1: #DDB0B7;
  --gl-2: #BDB6E3;
  --gl-3: #B7D3DE;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --ma-bg: #161415;
  --ma-bg-rgb: 22, 20, 21;
  --ma-band: #1D1B1C;
  --ma-band-rgb: 29, 27, 28;
  --ma-plate: #2A2627;
  --ma-surface: #211E1F;
  --ma-surface-rgb: 33, 30, 31;
  --ma-heading: #F4EEEF;
  --ma-heading-rgb: 244, 238, 239;
  --ma-text: #BDB5B8;
  --ma-muted: #ABA2A6;
  --ma-line: rgba(244, 238, 239, 0.12);
  --ma-line-2: rgba(244, 238, 239, 0.24);
  --ma-field: #262223;
  --ma-primary: #F4EEEF;
  --ma-on-primary: #161415;
  --ma-accent-text: #E8C0C6;
  --ma-free-text: #8FD3B1;
  --ma-booked-text: #F2A2AE;
  --ma-hold-text: #F0C66A;
  --ma-night: #0F0E0E;
  --ma-night-rgb: 15, 14, 14;
  --ma-draft: #F4EEEF;
  --ma-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  --ma-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --gl-1: #8E5F68;
  --gl-2: #6C6596;
  --gl-3: #5B7F8C;
  --gl-alpha: 0.42;
}
/* bands that stay dark in both themes (the footer, the night bands) */
.is-night {
  --ma-heading: #F4EEEF;
  --ma-heading-rgb: 244, 238, 239;
  --ma-text: rgba(244, 238, 239, 0.76);
  --ma-muted: rgba(244, 238, 239, 0.68);
  --ma-line: rgba(244, 238, 239, 0.12);
  --ma-line-2: rgba(244, 238, 239, 0.26);
  --ma-accent-text: #E8C0C6;
  --ma-free-text: #8FD3B1;
  --ma-booked-text: #F2A2AE;
  --ma-hold-text: #F0C66A;
  --ma-surface: #262324;
  --ma-surface-rgb: 38, 35, 36;
  --ma-plate: #2C2829;
  --ma-field: rgba(244, 238, 239, 0.07);
  --ma-primary: #F4EEEF;
  --ma-on-primary: #212121;
  --ma-draft: #F4EEEF;
  --gl-1: #8E5F68;
  --gl-2: #6C6596;
  --gl-3: #5B7F8C;
  --gl-alpha: 0.4;
  background-color: var(--ma-night);
  color: var(--ma-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ma-bg);
  color: var(--ma-text);
  font-family: var(--ma-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ma-ease), background-color 0.3s var(--ma-ease);
}
a:hover {
  color: var(--ma-accent-text);
}
strong,
b {
  font-weight: 500;
  color: var(--ma-heading);
}
::selection {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
:focus-visible {
  outline: 2px solid var(--ma-heading);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--ma-blush-rgb), 0.9);
}

/*----- 1.1 Typography -----*/
/* the base's voice: Dosis capitals tracked .1em (h1 and h2 at 500, the smaller titles at 600); Commissioner for copy */
h1, h2, h3, h4, h5, h6,
.ma-h1, .ma-h2, .ma-h3, .ma-h4, .ma-h5, .ma-h6 {
  margin: 0;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-weight: 600;
  text-transform: uppercase;
}
h1,
.ma-h1 {
  font-size: var(--ma-fs-h1);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0.1em;
}
h2,
.ma-h2 {
  font-size: var(--ma-fs-h2);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0.1em;
}
h3,
.ma-h3 {
  font-size: var(--ma-fs-h3);
  line-height: 1.32;
  letter-spacing: 0.09em;
}
h4,
.ma-h4 {
  font-size: var(--ma-fs-h4);
  line-height: 1.36;
  letter-spacing: 0.09em;
}
h5,
.ma-h5 {
  font-size: var(--ma-fs-h5);
  line-height: 1.4;
  letter-spacing: 0.1em;
}
h6,
.ma-h6 {
  font-size: var(--ma-fs-h6);
  line-height: 1.45;
  letter-spacing: 0.16em;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
/* the lead under a title: a step larger */
.ma-lead {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ma-text);
}
/* Dosis figures: fees, dates, places, times */
.ma-num {
  font-family: var(--ma-ff-head);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.ma-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.ma-bg-band {
  background-color: var(--ma-band);
}
/* photo band: one style everywhere (a cover photo under an ink wash from the copy side, white copy) */
.ma-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ma-ink);
  --ma-heading: #FFFFFF;
  --ma-heading-rgb: 255, 255, 255;
  --ma-text: rgba(255, 255, 255, 0.86);
  --ma-muted: rgba(255, 255, 255, 0.74);
  --ma-accent-text: #F2D3D8;
  --ma-line: rgba(255, 255, 255, 0.2);
  --ma-line-2: rgba(255, 255, 255, 0.32);
  --ma-primary: #FFFFFF;
  --ma-on-primary: #212121;
  color: var(--ma-text);
}
.ma-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ma-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(29, 27, 28, 0.8) 0%, rgba(29, 27, 28, 0.56) 48%, rgba(29, 27, 28, 0.16) 100%);
}
.ma-photo-band.is-center::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(29, 27, 28, 0.66) 0%, rgba(29, 27, 28, 0.5) 60%, rgba(29, 27, 28, 0.4) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's centred spaced-caps title: a tiny tracked eyebrow above, a short blush rule below */
.ma-title {
  margin-bottom: 60px;
}
.ma-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.ma-title h2 {
  max-width: 980px;
}
/* the short blush rule under a title (draws out on reveal) */
.ma-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 22px;
  background: var(--ma-blush);
  transform-origin: 0 50%;
}
.text-center .ma-rule {
  transform-origin: 50% 50%;
}
.ma-title .ma-lead {
  max-width: 680px;
  margin: 24px 0 0;
}
.ma-title.text-center h2,
.ma-title.text-center .ma-lead {
  margin-left: auto;
  margin-right: auto;
}
.ma-title.text-center .ma-rule,
.text-center .ma-rule {
  margin-left: auto;
  margin-right: auto;
}
.ma-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ma-title.is-split .ma-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's square ink button in tracked Dosis caps; the hover takes the blush, the arrow slides out and its twin
   slides in */
.ma-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 2px;
  background: var(--ma-primary);
  color: var(--ma-on-primary);
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--ma-ease), color 0.35s var(--ma-ease), box-shadow 0.35s var(--ma-ease), transform 0.35s var(--ma-ease);
}
.ma-btn i {
  position: relative;
  font-size: 11px;
  transition: transform 0.4s var(--ma-ease), opacity 0.3s ease;
}
.ma-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ma-btn:hover {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  box-shadow: 0 14px 30px rgba(var(--ma-ink-rgb), 0.14);
  transform: translateY(-2px);
}
.ma-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.ma-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.ma-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
/* tonal: the blush face, ink letters (the base's pink button, readable) */
.ma-btn.is-tonal {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.ma-btn.is-tonal:hover {
  background: var(--ma-ink);
  color: #FFFFFF;
}
[data-theme="dark"] .ma-btn.is-tonal:hover {
  background: #FFFFFF;
  color: var(--ma-ink);
}
.ma-btn.is-light {
  background: #FFFFFF;
  color: var(--ma-ink);
}
.ma-btn.is-light:hover {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.ma-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
}
.ma-btn.is-block {
  width: 100%;
}
.ma-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.is-night .ma-btn.is-tonal,
.ma-photo-band .ma-btn.is-tonal {
  background: var(--ma-blush);
  color: var(--ma-ink);
}
.is-night .ma-btn.is-tonal:hover,
.ma-photo-band .ma-btn.is-tonal:hover {
  background: #FFFFFF;
  color: var(--ma-ink);
}
/* "read more": tracked caps over a hairline that lengthens */
.ma-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ma-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--ma-blush);
  transition: width 0.45s var(--ma-ease);
}
.ma-more i {
  font-size: 10px;
  transition: transform 0.35s var(--ma-ease);
}
.ma-more:hover {
  color: var(--ma-heading);
}
.ma-more:hover::after {
  width: 100%;
}
.ma-more:hover i {
  transform: translateX(5px);
}
.ma-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
.ma-field {
  position: relative;
  margin-bottom: 20px;
}
.ma-field label,
.ma-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* tonal fields: a pale face, no outline; the focus draws an ink line under them */
.ma-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: var(--ma-field);
  color: var(--ma-heading);
  font-family: var(--ma-ff-body);
  font-size: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.ma-bg-band .ma-input {
  background: var(--ma-surface);
}
.ma-input[type="number"] {
  padding-right: 12px;
}
textarea.ma-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.ma-input::placeholder {
  color: var(--ma-muted);
}
.ma-input:focus {
  border-bottom-color: var(--ma-heading);
  box-shadow: inset 0 -3px 0 var(--ma-blush);
  outline: 0;
}
.ma-input.is-invalid {
  border-bottom-color: var(--ma-booked);
  box-shadow: inset 0 -1px 0 var(--ma-booked);
}
.ma-input[type="date"] {
  color-scheme: light;
}
[data-theme="dark"] .ma-input[type="date"],
.is-night .ma-input[type="date"] {
  color-scheme: dark;
}
.ma-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--ma-heading);
  font-size: 14px;
  opacity: 0.7;
  pointer-events: none;
}
.ma-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ma-muted);
}
.form-status.is-ok {
  color: var(--ma-free-text);
}
.form-status.is-error {
  color: var(--ma-booked-text);
}
.ma-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.ma-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  accent-color: var(--ma-ink);
}
[data-theme="dark"] .ma-check input,
.is-night .ma-check input {
  accent-color: var(--ma-blush);
}
/* a native range slider in the house colours */
.ma-range {
  width: 100%;
  accent-color: var(--ma-ink);
}
[data-theme="dark"] .ma-range {
  accent-color: var(--ma-blush);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ma-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ma-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ma-ease);
}
.ma-social a:hover {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  transform: translateY(-3px);
}
.is-night .ma-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.ma-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.ma-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  font-size: 20px;
  transition: transform 0.4s var(--ma-ease), background-color 0.4s ease, color 0.4s ease;
}
.ma-play i {
  margin-left: 4px;
}
.ma-play:hover {
  background: #FFFFFF;
  color: var(--ma-ink);
  transform: scale(1.06);
}
/* the booking calendar's signals and the light: a round dot and its line */
.ma-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ma-muted);
}
.ma-dot.is-free,
[data-state="free"] > .ma-dot,
[data-state="open"] > .ma-dot {
  background: var(--ma-free);
  box-shadow: 0 0 0 4px rgba(95, 174, 138, 0.2);
}
.ma-dot.is-hold,
[data-state="hold"] > .ma-dot,
[data-state="blue"] > .ma-dot {
  background: var(--ma-hold);
  box-shadow: 0 0 0 4px rgba(224, 166, 75, 0.22);
}
.ma-dot.is-booked,
[data-state="booked"] > .ma-dot,
[data-state="onsite"] > .ma-dot {
  background: var(--ma-booked);
  box-shadow: 0 0 0 4px rgba(201, 86, 106, 0.18);
}
.ma-dot.is-closed,
[data-state="closed"] > .ma-dot {
  background: var(--ma-muted);
}
.ma-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ma-heading);
}
.ma-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--ma-heading);
  font-size: 12px;
}
/* a small tag in tracked caps */
/* the course tones: each school's colour from the photographs' backdrops (fills only, ink text on them) */
.t-blush { --tone: #DDB0B7; --tone-rgb: 221, 176, 183; }
.t-lavender { --tone: #BDB6E3; --tone-rgb: 189, 182, 227; }
.t-powder { --tone: #B7D3DE; --tone-rgb: 183, 211, 222; }
.t-peach { --tone: #F3C9B1; --tone-rgb: 243, 201, 177; }
.t-mint { --tone: #B9DDD3; --tone-rgb: 185, 221, 211; }
i.fa-circle[class*="t-"] {
  color: var(--tone);
  font-size: 9px;
}
/* a small tag in the school's colour (ink letters) */
.ma-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 5px;
  border-radius: 2px;
  background: var(--tone, var(--ma-plate));
  color: #212121;
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* places left: open, few, full */
.ma-places {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ma-text);
  font-size: 14.5px;
  white-space: nowrap;
}
.ma-places::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ma-free);
}
.ma-places.is-few {
  color: var(--ma-hold-text);
}
.ma-places.is-few::before {
  background: var(--ma-hold);
}
.ma-places.is-full {
  color: var(--ma-booked-text);
}
.ma-places.is-full::before {
  background: var(--ma-booked);
}
/* label / value rows: rates, credits, what a package includes (never bullet pills) */
.ma-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ma-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ma-line);
  font-size: 15.5px;
}
.ma-rows li:first-child {
  border-top: 1px solid var(--ma-line);
}
.ma-rows li > span {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ma-rows li > b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.ma-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--ma-ink);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--ma-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--ma-ease);
}
.ma-toast i {
  color: var(--ma-blush);
}
.ma-toast.is-shown {
  transform: translate(-50%, 0);
}
.ma-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--ma-ease), background-color 0.3s ease;
}
.ma-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ma-back-top:hover {
  background: var(--ma-ink);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.ma-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.ma-gl.is-on {
  opacity: 1;
}
/* line icons in two inks: ink lines on white (the default), white lines in the dark theme and on the night bands */
.ma-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
}
.ma-ico img {
  width: 100%;
  height: 100%;
}
.ma-ico .ico-light,
[data-theme="dark"] .ma-ico .ico-ink,
.is-night .ma-ico .ico-ink,
.ma-photo-band .ma-ico .ico-ink {
  display: none;
}
[data-theme="dark"] .ma-ico .ico-light,
.is-night .ma-ico .ico-light,
.ma-photo-band .ma-ico .ico-light {
  display: block;
}
/* the mark in two inks the same way */
.ma-ink-pair .ink-light,
[data-theme="dark"] .ma-ink-pair .ink-dark,
.is-night .ma-ink-pair .ink-dark {
  display: none;
}
[data-theme="dark"] .ma-ink-pair .ink-light,
.is-night .ma-ink-pair .ink-light {
  display: block;
}
/* avatar group: overlapping round faces, a +N, two short lines */
.ma-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.ma-avatars .faces {
  display: inline-flex;
}
.ma-avatars .faces img,
.ma-avatars .faces .more {
  width: 46px;
  height: 46px;
  margin-inline-start: -12px;
  border: 3px solid var(--ma-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.ma-avatars .faces img:first-child {
  margin-inline-start: 0;
}
.ma-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
}
.ma-avatars .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  font-size: 14.5px;
  color: var(--ma-muted);
}
.ma-avatars .txt b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ma-bg-band .ma-avatars .faces img,
.ma-bg-band .ma-avatars .faces .more {
  border-color: var(--ma-band);
}
.is-night .ma-avatars .faces img,
.is-night .ma-avatars .faces .more,
.ma-photo-band .ma-avatars .faces img,
.ma-photo-band .ma-avatars .faces .more {
  border-color: var(--ma-ink);
}
/* the real review average and count */
.ma-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ma-review > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-size: 18px;
}
.ma-review .rv-score {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
}
.ma-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ma-review small {
  color: var(--ma-muted);
  font-size: 13.5px;
}

/*----- 1.7 Swatch Flip & Card Lift -----*/
/* Swatch Flip: a photo lies under a board of small pastel squares; they flip over one by one on a diagonal and
   uncover it while the photo settles from 1.06 (main.js builds the board and drives the flips) */
.ma-swatch {
  position: relative;
  overflow: hidden;
}
.ma-swatch > img {
  backface-visibility: hidden;
}
.ma-swatch > .sw-board {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  pointer-events: none;
  perspective: 600px;
}
.ma-swatch > .sw-board > i {
  display: block;
  margin: -0.5px;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.ma-swatch > .sw-board > i.t-blush { background: var(--ma-blush); }
.ma-swatch > .sw-board > i.t-lavender { background: var(--ma-lavender); }
.ma-swatch > .sw-board > i.t-powder { background: var(--ma-powder); }
.ma-swatch > .sw-board > i.t-peach { background: var(--ma-peach); }
.ma-swatch > .sw-board > i.t-band { background: var(--ma-band); }
/* card lift: the house hover - the card rises, its shadow deepens, its photo zooms a touch */
.ma-lift {
  position: relative;
  transition: transform 0.5s var(--ma-ease), box-shadow 0.5s var(--ma-ease);
}
.ma-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--ma-shadow-lg);
}
.ma-lift img {
  transition: transform 0.9s var(--ma-ease);
}
.ma-lift:hover img {
  transform: scale(1.05);
}

/*======================
2. Preloader
========================*/
/* Pin Cushion: pins stick into a blush pincushion one by one, ringing its crown; the ring lands on the O of the
   wordmark, which comes up round it, then the panel lifts (main.js draws the cushion and the pins on the canvas) */
.ma-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--ma-bg);
  pointer-events: none;
}
.js .ma-preloader {
  pointer-events: auto;
}
.no-js .ma-preloader,
.ma-preloader.is-done {
  display: none;
}
.pre-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
.pre-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateY(-50%);
  opacity: 0;
}
.pre-mark img {
  height: 40px;
  width: auto;
}
.pre-mark .logo-light,
[data-theme="dark"] .pre-mark .logo-main {
  display: none;
}
[data-theme="dark"] .pre-mark .logo-light {
  display: block;
}
.mk-line {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/*======================
3. Header
========================*/
/* Modara's header in three moods: style one is the base's white bar (logo left, the tracked menu right; Home 2 and
   the inner pages), style two the same bar laid transparent over Home 1's pale studio hero (the base's parallax home),
   style three the logo centred between two halves of the menu (Home 3, the graduate show). */
.ma-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--ma-bg);
  --hd-ink: var(--ma-heading);
  --hd-hover: var(--ma-accent-text);
  --hd-icon: var(--ma-band);
  --hd-line: var(--ma-line);
  --hd-top: var(--ma-band);
  --hd-top-ink: var(--ma-text);
}
.ma-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.ma-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.ma-logo img {
  height: 23px;
  width: auto;
}
.ma-logo .logo-light,
[data-theme="dark"] .ma-logo .logo-main {
  display: none;
}
[data-theme="dark"] .ma-logo .logo-light {
  display: block;
}
/* over Home 1's pale studio photographs the bar is clear and the ink stays ink in both themes */
.header-style-two:not(.is-sticky) .ma-logo .logo-main {
  display: block;
}
.header-style-two:not(.is-sticky) .ma-logo .logo-light {
  display: none;
}
.header-style-two {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
/* only the main bar sits on the photograph; the top bar keeps the page's own inks */
.header-style-two:not(.is-sticky) .header-main {
  --hd-bar: transparent;
  --hd-ink: #212121;
  --hd-hover: #9B5363;
  --hd-icon: rgba(255, 255, 255, 0.7);
  --hd-line: rgba(33, 33, 33, 0.08);
}

/*----- 3.1 Top Bar -----*/
/* the campus line (open now, the next open day), the next intake; links, currency, language */
.header-top {
  height: 40px;
  background: var(--hd-top);
  color: var(--hd-top-ink);
  font-size: 13.5px;
  overflow: visible;
  transition: height 0.4s var(--ma-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--hd-ink);
}
.ma-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ma-live b,
.header-top b {
  font-weight: 500;
  color: var(--hd-ink);
}
.header-top .top-intake {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.header-top .top-intake i {
  color: var(--hd-ink);
  font-size: 12px;
}
.header-top .top-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-top .top-light i {
  color: var(--hd-ink);
  font-size: 12px;
}
.header-top .top-right > a {
  position: relative;
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.header-top .ma-lang .lang-btn,
.header-top .ma-cur .cur-btn {
  height: 28px;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-family: var(--ma-ff-head);
  font-size: 11px;
}
.header-top .ma-lang .lang-btn:hover,
.header-top .ma-lang .lang-btn[aria-expanded="true"],
.header-top .ma-cur .cur-btn:hover,
.header-top .ma-cur .cur-btn[aria-expanded="true"] {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ma-blush);
  transform: translateY(-50%);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 92px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.ma-theme-toggle .ti-sun,
[data-theme="dark"] .ma-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .ma-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 8px;
}
.header-style-two:not(.is-sticky) .header-btn {
  background: #212121;
  color: #FFFFFF;
}
.header-style-two:not(.is-sticky) .header-btn:hover {
  background: var(--ma-blush);
  color: var(--ma-ink);
}
/* the base's menu mark: three short lines, the middle one shorter */
.ma-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ma-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hd-ink);
  transition: width 0.3s var(--ma-ease);
}
.ma-menu-toggle span:nth-child(2) {
  width: 14px;
}
.ma-menu-toggle span:nth-child(3) {
  width: 18px;
}
.ma-menu-toggle:hover span {
  width: 22px;
}

/*----- 3.3 Main Menu -----*/
/* the base's menu: Dosis capitals, tracked; no underline - hover and the current page by colour only (rose) */
.ma-nav {
  margin-left: auto;
}
.ma-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ma-nav li {
  position: relative;
}
.ma-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 36px 0;
  color: var(--hd-ink);
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.ma-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.7;
  transition: transform 0.3s var(--ma-ease);
}
.ma-nav > ul > li:hover > a,
.ma-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.ma-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.ma-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ma-ease), transform 0.35s var(--ma-ease), visibility 0.3s;
}
.ma-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 3px;
  background: var(--ma-blush);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.ma-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.ma-nav li:hover > .sub-menu,
.ma-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ma-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 28px;
  color: var(--ma-text);
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s var(--ma-ease), padding 0.35s var(--ma-ease);
}
.ma-nav .sub-menu a i {
  font-size: 8px;
  color: var(--ma-muted);
}
.ma-nav .sub-menu li:hover > a,
.ma-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--ma-accent-text);
}
.ma-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.ma-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Split Menu -----*/
/* style three: the logo centred between the two halves of the menu (the base's centred-logo home) */
.header-style-three .header-main .wide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
}
.header-style-three .ma-nav {
  margin: 0;
}
.header-style-three .ma-nav.is-left > ul {
  justify-content: flex-end;
}
.header-style-three .hd-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.header-style-three .ma-logo {
  justify-self: center;
}
.header-style-three .ma-logo img {
  height: 26px;
}
.header-style-three .header-right {
  margin: 0;
}

/*----- 3.5 Home Mega Menu -----*/
.ma-nav .has-mega {
  position: static;
}
.ma-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--ma-ease), transform 0.35s var(--ma-ease), visibility 0.3s;
}
.ma-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.ma-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 3px;
  background: var(--ma-blush);
}
.ma-nav .has-mega:hover > .mega-menu,
.ma-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--ma-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--ma-plate);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ma-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--ma-ff-head);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mega-card.is-current .mega-meta small,
.mega-card:hover .mega-meta small {
  color: var(--ma-heading);
}
.mega-card.is-current .shot,
.mega-card:hover .shot {
  box-shadow: 0 0 0 3px var(--ma-blush);
}

/*----- 3.6 Sticky Header -----*/
.ma-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: var(--ma-bg);
  --hd-ink: var(--ma-heading);
  --hd-hover: var(--ma-accent-text);
  --hd-icon: var(--ma-band);
  --hd-line: var(--ma-line);
  animation: ma-header-in 0.6s var(--ma-ease) both;
}
.ma-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.ma-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.ma-header.is-sticky .header-main .wide {
  height: 74px;
}
.ma-header.is-sticky .ma-nav > ul > li > a {
  padding: 26px 0;
}
.ma-header-spacer {
  display: none;
}
.ma-header-spacer.is-on {
  display: block;
}
@keyframes ma-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.ma-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--ma-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--ma-ease), box-shadow 0.6s var(--ma-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.ma-offcanvas.open {
  box-shadow: var(--ma-shadow-lg);
  transform: none;
}
.ma-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(12, 12, 12, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ma-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--ma-line);
}
.offcanvas-head .ma-logo img {
  height: 22px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ma-ease);
}
.offcanvas-close:hover {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--ma-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--ma-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--ma-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--ma-line);
  color: var(--ma-text);
  font-size: 15.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--ma-blush);
  color: var(--ma-heading);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ma-blush);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--ma-ff-head);
  font-size: 22px;
  font-weight: 500;
}
.oc-mail {
  color: var(--ma-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}
.oc-live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 32px;
  background: var(--ma-band);
  color: var(--ma-heading);
  font-family: var(--ma-ff-body);
  font-size: 14px;
}
.offcanvas-foot .ma-cur .cur-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.ma-select {
  position: relative;
}
.ma-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.ma-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--ma-field);
  font-size: 15px;
  text-align: left;
  color: var(--ma-heading);
  transition: border-color 0.3s var(--ma-ease);
}
.ma-select.is-open .select-button,
.ma-select .select-button:hover {
  border-color: var(--ma-heading);
}
.ma-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ma-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ma-accent-text);
  transition: transform 0.35s var(--ma-ease);
}
.ma-select.is-open .select-button i {
  transform: rotate(180deg);
}
.ma-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--ma-surface);
  border-top: 3px solid var(--ma-blush);
  box-shadow: var(--ma-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ma-ease), transform 0.3s var(--ma-ease), visibility 0.3s;
}
.ma-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 3px solid var(--ma-blush);
  transform: translateY(-10px);
}
.ma-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ma-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--ma-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ma-ease), color 0.2s var(--ma-ease);
}
.ma-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ma-accent-text);
}
.ma-select .select-option .option-meta.is-none {
  color: var(--ma-muted);
}
.ma-select .select-option.is-focused,
.ma-select .select-option:hover {
  background-color: var(--ma-plate);
}
.ma-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.ma-select .select-option.is-selected {
  color: var(--ma-accent-text);
}
.ma-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--ma-accent-text);
}
.ma-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--ma-plate);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.ma-lang {
  position: relative;
  flex-shrink: 0;
}
.ma-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--ma-ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ma-lang .lang-btn:hover,
.ma-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--ma-ink);
}
.ma-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.ma-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.ma-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ma-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--ma-plate);
  color: var(--ma-heading);
}
.ma-lang.is-icon .lang-btn:hover,
.ma-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.ma-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 0;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
  font-family: var(--ma-ff-body);
  text-align: start;
  white-space: normal;
}
.ma-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.ma-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.ma-lang .lang-menu[hidden] {
  display: none;
}
.ma-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ma-muted);
}
.ma-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ma-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ma-line);
}
.ma-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ma-heading);
  font-family: var(--ma-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.ma-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ma-muted);
}
.ma-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--ma-accent-text);
  opacity: 0;
}
.ma-lang .lang-item:hover,
.ma-lang .lang-item[aria-pressed="true"] {
  background: var(--ma-plate);
}
.ma-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.ma-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.ma-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--ma-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ma-muted);
}
/* the currency picker beside it: the same face, a menu of three currencies; every price on the page repaints */
.ma-cur {
  position: relative;
  flex-shrink: 0;
}
.ma-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ma-cur .cur-btn b {
  font-weight: 500;
  color: var(--ma-hd-ink, inherit);
}
.ma-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.ma-cur .cur-btn:hover,
.ma-cur .cur-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--ma-ink);
}
.ma-cur .cur-btn:hover b,
.ma-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.ma-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.ma-cur.is-up .cur-btn {
  height: 46px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.1);
}
.ma-cur .cur-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 232px;
  padding: 10px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
  font-family: var(--ma-ff-body);
  text-align: start;
}
.ma-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.ma-cur .cur-menu[hidden] {
  display: none;
}
.ma-cur .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ma-muted);
}
.ma-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--ma-heading);
  font-size: 14.5px;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.ma-cur .cur-item b {
  width: 18px;
  color: var(--ma-accent-text);
  font-family: var(--ma-ff-head);
  font-weight: 500;
}
.ma-cur .cur-item i {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--ma-accent-text);
  opacity: 0;
}
.ma-cur .cur-item:hover,
.ma-cur .cur-item[aria-pressed="true"] {
  background: var(--ma-plate);
}
.ma-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}

/*======================
7. Components
========================*/
/*----- 7.1 Arrows & Tabs -----*/
/* the base's slider arrow: a thin chevron on a pale square, blush on hover */
.ma-arrow,
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: var(--ma-band);
  color: var(--ma-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ma-ease);
}
.ma-arrow:hover,
.slider-arrow:hover {
  background: var(--ma-blush);
  color: var(--ma-ink);
}
.ma-bg-band .ma-arrow,
.ma-bg-band .slider-arrow {
  background: var(--ma-surface);
}
.ma-arrow.swiper-button-disabled,
.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.is-night .ma-arrow,
.ma-photo-band .ma-arrow {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.is-night .ma-arrow:hover,
.ma-photo-band .ma-arrow:hover {
  background: var(--ma-blush);
  color: var(--ma-ink);
}
.rail-arrows {
  display: flex;
  gap: 8px;
}
.title-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  text-align: end;
}
/* the slide counter: 01 - 03 on a short rule */
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.hero-count i {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--ma-line-2);
}
/* filter tabs: tonal chips in Dosis caps, the pressed one in ink (never hairline outlines) */
.ma-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ma-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border-radius: 2px;
  background: var(--ma-band);
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ma-bg-band .ma-tabs button {
  background: var(--ma-surface);
}
.ma-tabs button:hover {
  background: rgba(var(--ma-blush-rgb), 0.45);
}
.ma-tabs button.is-active {
  background: var(--ma-primary);
  color: var(--ma-on-primary);
}
.ma-count {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ma-empty {
  margin: 40px 0 0;
  text-align: center;
}
/* a segmented control: tonal faces, the pressed one in ink */
.ma-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--ma-plate);
}
.ma-seg button {
  height: 40px;
  padding: 0 16px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ma-seg button:hover {
  color: var(--ma-heading);
}
.ma-seg button.is-on,
.ma-seg button.is-active {
  background: var(--ma-primary);
  color: var(--ma-on-primary);
}
.swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ma-heading);
  opacity: 0.22;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--ma-blush);
  transform: scale(1.25);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 7.2 Chips & Checks -----*/
/* a tonal check chip: a pale face, the checked one in ink with a blush edge */
.ma-chip-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.ma-chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ma-chip-check > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: var(--ma-plate);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.ma-chip-check b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ma-chip-check small {
  color: var(--ma-muted);
  font-size: 13.5px;
}
.ma-chip-check input:checked + span {
  background: var(--ma-primary);
  box-shadow: inset 4px 0 0 var(--ma-blush);
}
.ma-chip-check input:checked + span b,
.ma-chip-check input:checked + span small {
  color: var(--ma-on-primary);
}
.ma-chip-check input:focus-visible + span {
  outline: 2px solid var(--ma-heading);
  outline-offset: 2px;
}
.ma-chip-check.is-fixed > span {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ma-line);
}
.ma-bg-band .ma-chip-check > span {
  background: var(--ma-surface);
}
/* a choice card (study mode, payment plan): the line icon, the name and its length, the fee; tonal face, the chosen
   one white with an ink edge */
.ma-choices {
  display: grid;
  gap: 10px;
}
.ma-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--ma-band);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.ma-bg-band .ma-choice {
  background: var(--ma-surface);
}
.ma-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ma-choice .ma-ico img {
  width: 42px;
  height: 42px;
}
.ch-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ch-txt b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-txt small {
  color: var(--ma-muted);
  font-size: 14px;
}
.ch-fee {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ma-choice:hover {
  box-shadow: inset 0 0 0 1px var(--ma-line-2);
}
.ma-choice.is-on {
  background: var(--ma-surface);
  box-shadow: inset 0 0 0 2px var(--ma-heading), 0 10px 26px rgba(var(--ma-ink-rgb), 0.06);
}
.ma-choice.is-on::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background: var(--ma-blush);
}
.ma-choice.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.ma-choice input:focus-visible ~ .ch-txt b {
  outline: 2px solid var(--ma-heading);
  outline-offset: 4px;
}

/*----- 7.3 Accordion -----*/
.ma-accordion .acc-item {
  border-bottom: 1px solid var(--ma-line);
}
.ma-accordion .acc-item:first-child {
  border-top: 1px solid var(--ma-line);
}
.acc-title {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: start;
  text-transform: uppercase;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-size: 10px;
  transition: transform 0.35s var(--ma-ease), background-color 0.3s ease, color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 60px 24px 0;
}
.acc-body p {
  margin: 0;
}

/*----- 7.4 Post Cards -----*/
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pcd-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pcd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ma-ease);
}
.post-card:hover .pcd-img img {
  transform: scale(1.04);
}
.pcd-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 22px 0 0;
}
.pcd-meta {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pcd-meta b {
  margin-right: 8px;
  color: var(--ma-heading);
  font-weight: 600;
}
.pcd-body h3 {
  margin-bottom: 6px;
}
.pcd-body .ma-more {
  align-self: flex-start;
  margin-top: auto;
}

/*----- 7.5 Tables, Steps & Days -----*/
/* positioned, so the visually hidden labels in its cells scroll with it instead of widening the page */
.ma-table-wrap {
  position: relative;
  overflow-x: auto;
}
.ma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ma-table th,
.ma-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--ma-line);
  text-align: start;
  vertical-align: middle;
}
.ma-table thead th {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ma-table tbody th {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ma-table tbody th small {
  display: block;
  margin-top: 4px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.ma-table td {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ma-table td small {
  display: block;
  margin-top: 2px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-body);
  font-size: 13.5px;
  font-weight: 400;
}
.ma-table tbody th a:hover {
  color: var(--ma-accent-text);
}
/* below a laptop's width a table row turns into a card: each cell on its own line with its column's label */
/* steps on a hairline, each with its number */
.ma-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px;
  border-top: 1px solid var(--ma-line);
}
.ma-steps li {
  position: relative;
  padding-top: 30px;
}
.ma-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ma-blush);
}
.ma-steps .ma-num {
  display: block;
  margin-bottom: 14px;
  color: var(--ma-muted);
  font-size: 13px;
}
.ma-steps h3 {
  margin-bottom: 10px;
}
.ma-steps p {
  font-size: 15px;
}

/*======================
8. Cards
========================*/
/*----- 8.1 Course Cards -----*/
/* a course: the photograph, the school's tag, the name, the level and length, the fee from. The hover accent: the next
   intake date slides up into the photograph's foot */
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ma-surface);
}
.ma-bg-band .course-card {
  box-shadow: var(--ma-shadow);
}
.cc-photo {
  display: block;
  aspect-ratio: 4 / 4.6;
  background: var(--ma-plate);
}
.cc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-intake {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  pointer-events: none;
}
.ci-in {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--ma-blush);
  color: #212121;
  font-size: 14px;
  transform: translateY(102%);
  transition: transform 0.55s var(--ma-ease);
}
.ci-in b {
  margin-inline-start: auto;
  font-family: var(--ma-ff-head);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.course-card:hover .ci-in,
.course-card:focus-within .ci-in {
  transform: translateY(0);
}
@media (hover: none) {
  .ci-in {
    transform: translateY(0);
  }
}
.cc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  padding: 24px 24px 22px;
}
.cc-body h3 {
  margin: 2px 0 0;
}
.cc-body h3 a:hover {
  color: var(--ma-accent-text);
}
.cc-meta {
  margin: 0;
  color: var(--ma-muted);
  font-size: 14.5px;
}
.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ma-line);
}
.cc-from {
  color: var(--ma-text);
  font-size: 14.5px;
}
.cc-from .ma-price {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/*----- 8.2 Team & Voices -----*/
.ma-member {
  height: 100%;
  background: var(--ma-surface);
}
.mb-photo {
  display: block;
  aspect-ratio: 4 / 4.2;
  background: var(--ma-plate);
}
.mb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.mb-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 4px 4px;
}
.ma-member h3 {
  margin: 0;
}
.mb-role {
  margin: 0 0 8px;
  color: var(--ma-muted);
  font-size: 14.5px;
}
.ma-voice {
  margin: 0;
}
.ma-voice blockquote {
  margin: 0 0 32px;
}
.ma-voice blockquote p {
  color: var(--ma-heading);
  font-size: 22px;
  line-height: 1.6;
}
.ma-voice figcaption {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-align: start;
}
.ma-voice figcaption .ma-face {
  width: 58px;
  height: 58px;
}
.ma-voice figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.ma-voice figcaption b {
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ma-voice figcaption small {
  color: var(--ma-muted);
  font-size: 14px;
}

/*----- 8.3 Graduates -----*/
.grad-card {
  position: relative;
  height: 100%;
  background: var(--ma-surface);
}
.gc-photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--ma-plate);
}
.gc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gc-award {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #212121;
  color: #FFFFFF;
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gc-award i {
  color: var(--ma-blush);
}
.gc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 4px 4px;
}
.gc-body h3 {
  margin: 0;
}
.gc-by {
  margin: 0;
  color: var(--ma-muted);
  font-size: 14.5px;
}

/*----- 8.4 Open Days & Past Shows -----*/
.od-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 30px 28px 26px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.od-card.is-now {
  box-shadow: inset 0 0 0 2px var(--ma-free), var(--ma-shadow);
}
.od-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  text-transform: uppercase;
}
.od-date b {
  font-size: 54px;
  font-weight: 500;
  line-height: 0.9;
}
.od-date span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.od-date small {
  color: var(--ma-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.od-card h3 {
  margin: 4px 0 0;
}
.od-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ma-muted);
  font-size: 14.5px;
}
.od-sessions {
  width: 100%;
  margin: 6px 0 0;
}
.od-sessions li {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--ma-line);
  font-size: 14.5px;
}
.od-sessions b {
  min-width: 44px;
  color: var(--ma-heading);
}
.od-places {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ma-line);
  color: var(--ma-free-text);
  font-size: 14.5px;
}
.past-show {
  height: 100%;
  background: var(--ma-surface);
}
.ps-photo {
  display: block;
  aspect-ratio: 16 / 11;
  background: var(--ma-plate);
}
.ps-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-body {
  padding: 26px 26px 22px;
}
.ps-body h3 {
  margin-bottom: 14px;
}

/*----- 8.5 Study Modes -----*/
.mode-card {
  height: 100%;
  padding: 34px 30px 28px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.mode-card.is-main {
  box-shadow: inset 0 4px 0 var(--ma-blush), var(--ma-shadow);
}
.mode-card .ma-ico img {
  width: 54px;
  height: 54px;
}
.mode-card h3 {
  margin: 18px 0 14px;
}

/*======================
9. Home One
========================*/
/*----- 9.1 Hero Slider -----*/
/* the base's photo studio hero: a full-bleed pastel slider under the clear header, the spaced-caps title on set lines
   left, the thin chevrons at the screen's edges. The photographs are pale studio walls, so the copy stays ink in both
   themes. */
.h1-hero {
  position: relative;
  overflow: hidden;
  background: #F4EEEE;
}
.h1-hero .swiper-slide {
  position: relative;
  height: clamp(640px, 94vh, 1000px);
  overflow: hidden;
}
.h1-hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.h1-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 132px;
}
.h1-hero .hero-copy {
  max-width: 600px;
  --ma-heading: #212121;
  color: #4C4749;
}
.h1-hero .ma-eyebrow {
  color: #5E585B;
}
.h1-hero h1,
.h1-hero .ma-h1 {
  margin: 0;
  color: #212121;
}
.hero-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin: 28px 0 26px;
  background: var(--ma-blush);
}
.hero-lead {
  max-width: 470px;
  margin-bottom: 34px;
  font-size: 17.5px;
  line-height: 1.7;
}
.h1-hero .ma-btn {
  --ma-primary: #212121;
  --ma-on-primary: #FFFFFF;
}
.h1-hero .ma-btn.is-light {
  box-shadow: 0 10px 24px rgba(33, 33, 33, 0.08);
}
.hero-intake {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0 0;
  color: #5E585B;
  font-size: 14.5px;
}
.hero-intake b {
  color: #212121;
  font-family: var(--ma-ff-head);
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* the base's thin chevrons at the edges */
.hero-edge {
  position: absolute;
  top: 54%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.72);
  color: #212121;
  font-size: 15px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hero-edge:hover {
  background: var(--ma-blush);
  color: #212121;
}
.hero-edge.hero-prev {
  left: 24px;
}
.hero-edge.hero-next {
  right: 24px;
}
.h1-hero .hero-count {
  position: absolute;
  right: 24px;
  bottom: 60px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #212121;
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.hero-count i {
  display: block;
  width: 46px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/*----- 9.2 Intake Strip -----*/
/* one strip docked on the hero's foot (lifted 28px): each school's diploma, its next start and its deadline */
.h1-strip {
  position: relative;
  z-index: 4;
  margin-top: -28px;
}
.intake-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
}
.intake-strip li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 30px 24px;
}
.intake-strip li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--ma-line);
}
.intake-strip .is-school {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.intake-strip .is-school::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tone);
}
.intake-strip b {
  color: var(--ma-heading);
  font-size: 19px;
}
.intake-strip small {
  color: var(--ma-muted);
  font-size: 13.5px;
}

/*----- 9.3 The Four Schools -----*/
/* each school a soft panel in its own colour: the line icon, the name, the line, its two courses and their intakes */
.school-col {
  height: 100%;
  padding: 44px 34px 36px;
  background: rgba(var(--tone-rgb), 0.2);
  transition: transform 0.5s var(--ma-ease), box-shadow 0.5s var(--ma-ease), background-color 0.5s ease;
}
.school-col:hover {
  background: rgba(var(--tone-rgb), 0.34);
  box-shadow: var(--ma-shadow);
  transform: translateY(-6px);
}
.school-col .ma-ico img {
  width: 64px;
  height: 64px;
}
.school-col h3 {
  margin: 22px 0 12px;
}
.school-col p {
  margin-bottom: 22px;
}
.sc-courses li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--ma-heading-rgb), 0.12);
}
.sc-courses a {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sc-courses a:hover {
  color: var(--ma-accent-text);
}
.sc-next {
  color: var(--ma-muted);
  font-size: 13.5px;
}
.sc-next::before {
  content: "Next intake ";
}

/*----- 9.4 Sketch To Photograph -----*/
/* the steps on the left light in turn; the frame on the right is a page of the sketchbook: the croquis draws itself,
   hands over to the flat, the flat is cut in calico, and the photograph rises over it */
.cq-steps {
  margin-top: 34px;
  counter-reset: cq;
}
.cq-steps li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--ma-line);
  transition: opacity 0.4s ease;
}
.cq-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ma-heading);
  transition: background-color 0.4s ease, transform 0.4s var(--ma-ease);
}
.cq-steps li.is-on::before {
  background: var(--ma-blush);
  border-color: var(--ma-blush);
  transform: scale(1.3);
}
.cq-steps li.is-done::before {
  background: var(--ma-heading);
}
.cq-steps b {
  display: block;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cq-steps span {
  display: block;
  color: var(--ma-text);
  font-size: 15px;
}
.cq-steps li:not(.is-on) span {
  opacity: 0.72;
}
.cq-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #FBF9F7;
  box-shadow: var(--ma-shadow-lg);
}
.cq-svg {
  position: absolute;
  inset: 5% 8% 7%;
  width: 84%;
  height: 88%;
}
.cq-draw,
.cq-line {
  fill: none;
  stroke: #212121;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cq-hatch {
  stroke-width: 1;
  opacity: 0.6;
}
.cq-line {
  stroke-width: 1.4;
}
.cq-stitch {
  fill: none;
  stroke: #212121;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.cq-calico {
  fill: #EFE5D0;
  stroke: #212121;
  stroke-width: 1;
}
.cq-chalk {
  fill: none;
  stroke: #6C8FB2;
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}
.cq-pins circle {
  fill: #D98C9A;
  stroke: #212121;
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
}
.cq-pins circle:nth-child(2n) {
  fill: #9C90D4;
}
.cq-pins circle:nth-child(3n) {
  fill: #78A9C2;
}
.cq-flat,
.cq-toile {
  opacity: 0;
}
.cq-photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
}
.no-js .cq-photo {
  clip-path: none;
}
.cq-label {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 3;
  padding: 8px 14px;
  background: #212121;
  color: #FFFFFF;
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cq-bar {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  display: block;
  height: 3px;
  background: rgba(33, 33, 33, 0.12);
}
.cq-bar i {
  display: block;
  height: 100%;
  background: var(--ma-blush);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/*----- 9.5 Mosaic -----*/
/* the base's joined mosaic: a narrow column, the large frame, a column and a tall frame; the student and the school on
   hover */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 21vw));
  gap: 0;
}
.mo-cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ma-plate);
}
.mo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ma-ease);
}
.mo-cell.m-a { grid-area: 1 / 1 / 2 / 2; }
.mo-cell.m-b { grid-area: 1 / 2 / 3 / 3; }
.mo-cell.m-c { grid-area: 1 / 3 / 2 / 4; }
.mo-cell.m-d { grid-area: 1 / 4 / 3 / 5; }
.mo-cell.m-e { grid-area: 2 / 1 / 3 / 2; }
.mo-cell.m-f { grid-area: 2 / 3 / 3 / 4; }
.mo-cap {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #212121;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.5s var(--ma-ease);
}
.mo-cap b {
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mo-cell:hover img {
  transform: scale(1.05);
}
.mo-cell:hover .mo-cap,
.mo-cell:focus-visible .mo-cap {
  opacity: 1;
  transform: none;
}

/*----- 9.6 Voices -----*/
.h1-voices {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.h1-voices > .container {
  position: relative;
  z-index: 1;
}
.voice-wrap {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.voice-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.voice-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px 44px;
  margin-top: 54px;
}

/*----- 9.7 Open Day Band -----*/
.od-panel {
  padding: 34px 34px 30px;
  background: rgba(29, 27, 28, 0.42);
  backdrop-filter: blur(6px);
}
.od-panel .ma-label {
  display: block;
  margin-bottom: 8px;
}
.h1-openday .ma-status {
  margin: 0 0 30px;
}

/*----- 9.8 The Houses -----*/
/* the houses our graduates work for, set in type (the base's lettered logo band, recomposed) */
.ma-houses {
  padding: 54px 0;
}
.hs-label {
  margin-bottom: 22px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
}
.hs-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 40px;
}
.hs-names li {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.62;
  transition: opacity 0.3s ease;
}
.hs-names li:hover {
  opacity: 1;
}

/*======================
10. Home Two
========================*/
/*----- 10.1 Boxed Hero -----*/
/* the base's grid home: the slider boxed in a white frame, the copy left on the pale wall, the chevrons inside */
.h2-frame {
  position: relative;
  max-width: 1840px;
  padding-left: 40px;
  padding-right: 40px;
}
.h2-hero {
  padding-top: 30px;
}
.h2-hero .swiper {
  overflow: hidden;
}
.h2-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(540px, 72vh, 780px);
  overflow: hidden;
  background: #F2EDED;
}
.h2-hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.h2-hero .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-inline-start: 7%;
  --ma-heading: #212121;
  color: #4C4749;
}
.h2-hero .ma-eyebrow {
  color: #5E585B;
}
.h2-hero h1,
.h2-hero .ma-h1 {
  color: #212121;
}
.h2-hero .hero-lead b {
  color: #212121;
  font-weight: 600;
}
.h2-hero .ma-btn.is-tonal:hover {
  background: #212121;
  color: #FFFFFF;
}
.h2-hero .hero-edge.hero-prev {
  left: 64px;
}
.h2-hero .hero-edge.hero-next {
  right: 64px;
}
.h2-hero .hero-count {
  position: absolute;
  right: 64px;
  bottom: 24px;
  z-index: 5;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #212121;
}

/*----- 10.2 Studio Grid -----*/
/* the base's grid under the boxed hero: a large frame, a tall one, two stacked */
.h2-photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 17vw));
  gap: 18px;
}
.hp-cell {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ma-plate);
}
.hp-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ma-ease);
}
.hp-cell:hover img {
  transform: scale(1.05);
}
.hp-cell.is-big { grid-area: 1 / 1 / 3 / 2; }
.hp-cell.is-tall { grid-area: 1 / 2 / 3 / 3; }
.hp-cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #6A6567;
  font-size: 13.5px;
  line-height: 1.4;
}
.hp-cap b {
  color: #212121;
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*----- 10.3 Intakes Table -----*/
.h2-intakes .ma-tabs {
  margin-bottom: 26px;
}
.intake-table {
  background: var(--ma-surface);
}
.intake-table th,
.intake-table td {
  padding-left: 22px;
  padding-right: 22px;
}
.intake-table tbody tr:hover {
  background: rgba(var(--ma-blush-rgb), 0.12);
}
.intake-table td .ma-tag {
  font-size: 11.5px;
}
.h2-intakes-foot {
  margin-top: 46px;
}

/*----- 10.4 Semester Grid -----*/
/* the diploma's four semesters, each a column of slots sized by the module's credits (5, 10 or 15): the slots are drawn
   as dashed outlines and the modules drop into them with the scroll */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.sg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--ma-heading);
}
.sg-head .ma-num {
  color: var(--ma-muted);
  font-size: 14px;
}
.sg-slots {
  display: grid;
  gap: 10px;
}
.sg-mod {
  position: relative;
  min-height: 70px;
}
.sg-mod.sz-10 {
  min-height: 130px;
}
.sg-mod.sz-15 {
  min-height: 190px;
}
.sg-mod::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px dashed var(--ma-line-2);
}
.sg-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--tone);
  color: #212121;
}
.sg-in b {
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.sg-in span {
  font-size: 13.5px;
}
.sg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: 40px;
}
.sg-total {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 320px;
}
.sg-total .ma-label {
  margin: 0;
}
.sg-total b {
  color: var(--ma-heading);
  font-size: 18px;
  white-space: nowrap;
}
.sg-bar {
  display: block;
  flex: 1;
  height: 4px;
  background: var(--ma-line);
}
.sg-bar i {
  display: block;
  height: 100%;
  background: var(--ma-blush);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.no-js .sg-bar i {
  transform: none;
}
.sg-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.sg-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ma-text);
  font-size: 14px;
}
.sg-key i {
  width: 14px;
  height: 14px;
  background: var(--tone);
}

/*----- 10.5 Quick Tuition -----*/
/* a white card on the photo band takes the page's own inks back */
.tq-card {
  --ma-heading: #212121;
  --ma-heading-rgb: 33, 33, 33;
  --ma-text: #6A6567;
  --ma-muted: #6F6A6C;
  --ma-line: #ECE5E6;
  --ma-line-2: rgba(33, 33, 33, 0.2);
  --ma-field: #F6F2F2;
  --ma-surface: #FFFFFF;
  --ma-primary: #212121;
  --ma-on-primary: #FFFFFF;
  --ma-accent-text: #9B5363;
  padding: 38px 36px 34px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
  color: var(--ma-text);
}
[data-theme="dark"] .tq-card {
  --ma-heading: #F4EEEF;
  --ma-heading-rgb: 244, 238, 239;
  --ma-text: #BDB5B8;
  --ma-muted: #ABA2A6;
  --ma-line: rgba(244, 238, 239, 0.12);
  --ma-line-2: rgba(244, 238, 239, 0.24);
  --ma-field: #262223;
  --ma-surface: #211E1F;
  --ma-primary: #F4EEEF;
  --ma-on-primary: #161415;
  --ma-accent-text: #E8C0C6;
}
.tq-out {
  margin: 26px 0 24px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--ma-line);
}
.tq-out p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
}
.tq-out b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tq-out p:first-child b {
  font-size: 30px;
}
.h2-tuition .ma-rows {
  margin-top: 30px;
}

/*----- 10.6 Rooms -----*/
.room-card {
  height: 100%;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.rc-photo {
  display: block;
  aspect-ratio: 16 / 11;
  background: var(--ma-plate);
}
.rc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-body {
  padding: 28px 28px 26px;
}
.rc-body .ma-ico img {
  width: 48px;
  height: 48px;
}
.rc-body h3 {
  margin: 16px 0 10px;
}
.rc-body p {
  margin: 0;
}
.h2-voices {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.h2-voices > .container {
  position: relative;
  z-index: 1;
}

/*======================
11. Home Three
========================*/
/*----- 11.1 Split Hero -----*/
/* the base's split slider showcase: the spaced-letter title among pastel daubs on the white half, a white-matted look
   on a mist half with its own daubs; the looks change, the countdown runs to the show's doors */
.h3-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(640px, 86vh, 920px);
}
.h3-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px 100px;
  overflow: hidden;
}
.h3-daubs {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(560px, 80%);
  transform: translate(-58%, -60%);
  opacity: 0.85;
  pointer-events: none;
}
.h3-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-align: center;
}
.h3-title {
  margin: 6px 0 26px;
  font-size: clamp(38px, 4.2vw, 74px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
}
.h3-date {
  display: block;
  margin-bottom: 26px;
  color: var(--ma-text);
  font-size: 15.5px;
}
.h3-date i {
  margin-inline-end: 8px;
}
.show-count {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.show-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 82px;
  padding: 14px 10px 10px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.show-count b {
  color: var(--ma-heading);
  font-size: 30px;
  line-height: 1;
}
.show-count small {
  margin-top: 6px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ma-photo-band .show-count span {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.h3-copy .ma-btns {
  justify-content: center;
}
.h3-down {
  position: absolute;
  left: 40px;
  bottom: 34px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ma-heading);
  font-size: 15px;
  animation: ma-nudge 2.4s ease-in-out infinite;
}
@keyframes ma-nudge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .h3-down {
    animation: none;
  }
}
.h3-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 60px 40px;
  overflow: hidden;
  background: var(--ma-band);
}
.h3-daubs-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, 112%);
  transform: translate(-50%, -52%);
  pointer-events: none;
}
.h3-right .swiper {
  position: relative;
  z-index: 2;
  width: min(420px, 78%);
}
.h3-look {
  margin: 0;
  padding: 14px 14px 18px;
  background: #FFFFFF;
  box-shadow: var(--ma-shadow-lg);
}
.h3-look img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4.4;
  object-fit: cover;
}
.h3-look figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  color: #6A6567;
  font-size: 14px;
}
.h3-look figcaption b {
  color: #212121;
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.h3-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
}
.h3-nav .ma-arrow {
  background: var(--ma-surface);
}
.h3-nav .ma-arrow:hover {
  background: var(--ma-blush);
}

/*----- 11.2 The Night -----*/
.h3-glance .ma-avatars {
  margin-top: 30px;
}
.h3-facts li > b {
  text-align: end;
}

/*----- 11.3 Portfolios Fan Out -----*/
/* the portfolios: white-matted cards stacked on one pivot; main.js fans them with the section's travel */
.h3-fan {
  overflow: clip;
}
.fan-stack {
  position: relative;
  height: 560px;
  margin-top: 10px;
}
.fan-card {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 280px;
  margin-left: -140px;
  transform-origin: 50% 135%;
}
.fan-card a {
  display: block;
  padding: 10px 10px 14px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.14);
  transition: transform 0.4s var(--ma-ease), box-shadow 0.4s var(--ma-ease);
}
.fan-stack.is-open .fan-card a:hover {
  box-shadow: 0 28px 56px rgba(33, 33, 33, 0.22);
  transform: translateY(-14px);
}
.fan-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.fan-cap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 12px;
  color: #6A6567;
  font-size: 13.5px;
}
.fan-cap b {
  color: #212121;
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fan-foot {
  margin-top: 40px;
}

/*----- 11.4 Running Order -----*/
.show-order {
  padding: 14px 34px;
  background: rgba(29, 27, 28, 0.5);
  backdrop-filter: blur(6px);
}
.show-order li {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ma-line);
}
.show-order li:last-child {
  border-bottom: 0;
}
.show-order b {
  color: var(--ma-heading);
  font-size: 18px;
}
.so-name {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.show-order small {
  color: var(--ma-muted);
  font-size: 14px;
}
.so-now {
  display: none;
  grid-column: 2;
  justify-self: start;
  padding: 3px 10px;
  background: var(--ma-blush);
  color: #212121;
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.so-item.is-now .so-now {
  display: inline-block;
}
.so-item.is-done {
  opacity: 0.5;
}

/*----- 11.5 Reserve A Seat -----*/
.h3-rsvp {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.h3-rsvp > .container {
  position: relative;
  z-index: 1;
}
.rsvp-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 60px 50px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
}
.rsvp-card .ma-title {
  margin-bottom: 40px;
}
.rsvp-form .ma-btn {
  margin-top: 30px;
}
.rsvp-card .ma-input {
  background: var(--ma-field);
}

/*======================
12. Inner Pages
========================*/
/*----- 12.1 Sidebar & Widgets -----*/
/* the sidebar is quiet: a small heading, a short stroke, plain lists, each widget on a pale plate */
.ma-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.ma-sidebar .widget {
  padding: 34px 32px;
  background: var(--ma-plate);
}
.ma-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.ma-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--ma-blush);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
  color: var(--ma-heading);
  font-family: var(--ma-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--ma-heading);
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--ma-ink);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--ma-line-2);
  color: var(--ma-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--ma-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--ma-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--ma-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--ma-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--ma-surface);
  color: var(--ma-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--ma-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--ma-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--ma-ink);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ma-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ma-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--ma-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts h3 a {
  color: var(--ma-heading);
}
.side-posts h3 a:hover {
  color: var(--ma-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--ma-text);
}
.widget-tags a:hover {
  color: var(--ma-accent-text);
}
.ma-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--ma-night);
  text-align: center;
}
.widget-cta .ma-script {
  display: block;
  color: var(--ma-blush);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ma-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .ma-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--ma-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--ma-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--ma-accent-text);
}

/*----- 12.2 Rows, Choices & Pages -----*/
.ma-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--ma-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-body);
  font-size: 30px;
  font-weight: 400;
}
.ma-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ma-line);
}
.ma-kv li:first-child {
  border-top: 1px solid var(--ma-line);
}
.ma-kv li b {
  color: var(--ma-heading);
  font-weight: 500;
  text-align: end;
}
.ma-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--ma-plate);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.ma-bg-band .choice-card,
.ma-bg-band .choice-card {
  background: var(--ma-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--ma-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--ma-blush-rgb), 0.5);
}
.choice-card.is-checked {
  background: var(--ma-band);
  box-shadow: inset 3px 0 0 var(--ma-blush);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ma-plate);
  color: var(--ma-accent-text);
  font-size: 18px;
}
.choice-card.is-checked .choice-ico {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--ma-heading);
  font-size: 17px;
  font-weight: 500;
}
.choice-body span {
  color: var(--ma-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ma-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--ma-blush);
  box-shadow: none;
  color: var(--ma-ink);
}
.ma-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.ma-pagination a,
.ma-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ma-pagination a i {
  color: var(--ma-accent-text);
  font-size: 13px;
}
.ma-pagination .is-current,
.ma-pagination a:hover,
.ma-pagination a:hover i {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.ma-zoom {
  display: block;
  overflow: hidden;
}
.ma-zoom img {
  width: 100%;
  transition: transform 0.9s var(--ma-ease);
}
.ma-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--ma-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.ma-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 0;
  background: var(--ma-line-2);
  accent-color: var(--ma-ink);
  appearance: none;
  -webkit-appearance: none;
}
.ma-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--ma-surface);
  border-radius: 50%;
  background: var(--ma-blush);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.ma-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--ma-surface);
  border-radius: 50%;
  background: var(--ma-blush);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--ma-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ma-panel .chip-choice > span {
  background: var(--ma-plate);
}
.chip-choice:hover > span {
  background: var(--ma-band);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--ma-blush-rgb), 0.55);
}
.chip-choice.is-checked > span {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.chip-choice > span small {
  color: var(--ma-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*======================
13. Inner Page Sections
========================*/
/*----- 13.1 About & Team -----*/
.ab-photo,
.pr-photo {
  aspect-ratio: 4 / 5;
  background: var(--ma-plate);
}
.ma-about h2,
.ma-profile h2 {
  margin-bottom: 18px;
}
.ma-about .ma-lead,
.ma-profile .ma-lead {
  margin-bottom: 22px;
}
.ab-facts,
.ma-profile .ma-rows {
  margin: 30px 0 34px;
}
.mf-copy {
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
}
.mf-copy h2 {
  margin-bottom: 26px;
}
.mf-mark {
  display: block;
  width: auto;
  height: 72px;
  margin: 34px auto 0;
}
.ma-roster .ma-lead {
  margin: 18px 0 30px;
}
.ma-roster .ma-rows {
  margin-bottom: 30px;
}
.pr-social {
  margin-top: 6px;
}

/*----- 13.2 Application Wizard -----*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 50px;
  border-bottom: 1px solid var(--ma-line);
}
.wz-steps button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 12px 18px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ma-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: start;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wz-steps button b {
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.wz-steps button.is-done {
  color: var(--ma-heading);
}
.wz-steps button.is-done b::after {
  content: " \f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--ma-free-text);
}
.wz-steps button.is-active {
  border-color: var(--ma-heading);
  color: var(--ma-heading);
}
.wz-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step legend {
  float: left;
  width: 100%;
  margin-bottom: 26px;
}
.wz-step legend + * {
  clear: both;
}
.ws-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ws-txt small {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 11.5px;
}
.ws-txt b {
  color: var(--ma-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-txt em {
  color: var(--ma-text);
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
  font-style: normal;
}
.wz-sub {
  margin-bottom: 14px;
}
.wz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--ma-line);
}
.wz-count {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 13px;
}
.wz-nav [data-wz-next],
.wz-nav [data-wz-submit] {
  margin-inline-start: 0;
}
.wz-done {
  padding: 44px;
  background: var(--ma-band);
  text-align: center;
}
.wz-done h3 {
  margin-bottom: 14px;
}
.wz-done .ma-btns {
  justify-content: center;
  margin-top: 26px;
}
.wz-side {
  position: sticky;
  top: 110px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.wz-side img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ws-body {
  padding: 26px;
}
.ws-body .ma-eyebrow {
  margin-bottom: 8px;
}
.ws-when {
  margin: 8px 0 18px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
}
.ws-lines li {
  font-size: 13px;
}
.ws-lines li > span {
  font-size: 11px;
  letter-spacing: 0.14em;
}
.ws-sums {
  margin: 14px 0 16px;
}
.ws-sums li:first-child {
  border-top: 0;
}

/*----- 13.3 Contact & Account -----*/
.info-card {
  height: 100%;
  padding: 40px 32px;
  background: var(--ma-band);
  text-align: center;
  transition: transform 0.45s var(--ma-ease), box-shadow 0.45s var(--ma-ease);
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ma-shadow-lg);
}
.info-card .ma-ico {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
}
.info-card h3 {
  margin-bottom: 12px;
}
.info-card p {
  margin-bottom: 14px;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}
.contact-hours {
  margin-top: 24px;
}
.article-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 30px 0;
  padding: 22px 26px;
}
.ab-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 13.5px;
  line-height: 1.5;
}
.ab-txt b {
  color: var(--ma-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.dash-who img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--ma-muted);
  font-size: 13.5px;
}
.dash-counts {
  margin-bottom: 24px;
}
.dash-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--ma-plate);
  color: var(--ma-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: start;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs .ma-ico {
  width: 34px;
  height: 34px;
}
.dash-tabs button.is-active {
  background: var(--ma-primary);
  color: var(--ma-on-primary);
}
.dash-tabs button.is-active .ico-ink {
  display: none;
}
.dash-tabs button.is-active .ico-light {
  display: block;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-light {
  display: none;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-ink {
  display: block;
}
.dash-panel > h2 {
  margin-bottom: 24px;
}
.acc-bookings,
.acc-orders {
  display: grid;
  gap: 8px;
  margin-bottom: 30px;
}
.ab-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 12px;
  background: var(--ma-band);
}
.ab-row img {
  width: 90px;
  height: 66px;
  object-fit: cover;
}
.ab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ab-main > span:last-child {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
}
.ab-price {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-weight: 500;
}
.acc-orders li {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  background: var(--ma-band);
  font-family: var(--ma-ff-head);
  font-size: 13px;
}
.acc-orders li b {
  color: var(--ma-heading);
  font-weight: 500;
}
.acc-empty {
  margin-bottom: 26px;
  padding: 22px;
  background: var(--ma-band);
  color: var(--ma-muted);
}
.account-form.is-plain {
  padding: 0;
  box-shadow: none;
}
.faq-group + .faq-group {
  margin-top: 60px;
}
.faq-group .ma-accordion {
  margin-top: 26px;
}

/*======================
14. Courses, Tuition & The Show
========================*/
/*----- 14.1 Filter Bars & Info Cards -----*/
/* the listing pages' bar: the school tabs left, the selects and the search right (tonal fields, never outlines) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 26px;
}
.filter-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-tools .ma-field {
  width: 220px;
  margin: 0;
}
.filter-tools .ma-input {
  height: 46px;
}
.filter-tools .ma-field > i {
  top: 15px;
}
.ma-count {
  margin-bottom: 26px;
}
.grid-empty {
  margin-top: 30px;
}
/* an info card: the line icon, the title, a line of copy */
.pay-card {
  height: 100%;
  padding: 38px 34px 34px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
  transition: transform 0.5s var(--ma-ease), box-shadow 0.5s var(--ma-ease);
}
.pay-card:hover {
  box-shadow: var(--ma-shadow-lg);
  transform: translateY(-6px);
}
.pay-card .ma-ico img {
  width: 58px;
  height: 58px;
}
.pay-card h3 {
  margin: 20px 0 10px;
}
.pay-card p {
  margin: 0;
}

/*----- 14.2 Course Pages -----*/
.cs-title {
  margin-top: 18px;
}
.cs-sub {
  margin: 46px 0 22px;
}
.cs-facts {
  position: sticky;
  top: 110px;
  padding: 34px 32px 30px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
}
.cs-facts .ma-rows {
  margin: 4px 0 26px;
}
.cs-facts .ma-rows .is-total b {
  font-family: var(--ma-ff-head);
  font-size: 20px;
  font-weight: 600;
}
.cs-facts .ma-btns {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.cs-facts .ma-field {
  margin-bottom: 14px;
}
.cs-facts .ma-choices {
  margin-bottom: 20px;
}
.cs-intakes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ma-line);
}
.cs-intakes li:first-child {
  border-top: 1px solid var(--ma-line);
}
.cs-intakes li > span:first-child {
  display: flex;
  flex-direction: column;
}
.cs-intakes b {
  color: var(--ma-heading);
  font-size: 18px;
}
.cs-intakes small {
  color: var(--ma-muted);
  font-size: 14px;
}
.cs-tutors {
  margin-bottom: 26px;
}
.cs-tutors li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ma-line);
}
.cs-tutors .ma-face {
  width: 58px;
  height: 58px;
}
.cs-tutors span {
  display: flex;
  flex-direction: column;
}
.cs-tutors b {
  font-family: var(--ma-ff-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cs-tutors small {
  color: var(--ma-muted);
  font-size: 14px;
}
.ma-course-more .ma-rule {
  margin-bottom: 28px;
}
/* the short course: a wide photo slider, the weeks as label / value rows */
.short-slider {
  position: relative;
  margin-bottom: 60px;
}
.short-slider .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6.6;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.mini-nav .slider-arrow {
  background: rgba(255, 255, 255, 0.86);
  color: #212121;
}
.short-weeks {
  margin: 30px 0;
}
.short-weeks li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ma-line);
}
.short-weeks li:first-child {
  border-top: 1px solid var(--ma-line);
}
.short-weeks b {
  color: var(--ma-heading);
  font-size: 16px;
  text-transform: uppercase;
}
.tutor-photo {
  aspect-ratio: 4 / 4.4;
  background: var(--ma-plate);
}
.tutor-photo img,
.rr-photo img,
.adm-photo img,
.ab-photo img,
.pr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 14.3 Tuition Calculator -----*/
.tu-form h2 {
  margin-bottom: 18px;
}
.tu-head {
  margin-top: 40px;
}
.ma-choices.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ma-choices.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ma-choices.is-three .ma-choice {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.tu-kit {
  padding: 18px 20px;
  background: var(--ma-band);
}
.tu-rules {
  margin-top: 36px;
}
.tu-aside {
  position: sticky;
  top: 110px;
}
.tu-summary {
  padding: 38px 36px 34px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
}
.tu-summary h2 {
  margin: 6px 0 6px;
}
.tu-sub {
  margin-bottom: 18px;
  color: var(--ma-muted);
}
.tu-sub b {
  font-weight: 500;
}
.tu-rows .is-total {
  border-top: 2px solid var(--ma-heading);
}
.tu-rows .is-total b {
  font-family: var(--ma-ff-head);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tu-pay {
  margin: 22px 0 14px;
  padding: 20px 22px 8px;
  background: rgba(var(--ma-blush-rgb), 0.28);
}
.tu-pay p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}
.tu-pay b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 19px;
  font-weight: 600;
}
.tu-dates {
  margin-bottom: 18px;
}
.tu-dates li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ma-line-2);
  font-size: 14.5px;
}
.tu-dates b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-weight: 600;
}
.tu-ref {
  margin-bottom: 20px;
  color: var(--ma-muted);
  font-size: 14px;
}
.tu-ref b {
  color: var(--ma-heading);
}
.tu-faq {
  max-width: 880px;
  margin: 60px auto 0;
}

/*----- 14.4 The Application -----*/
.wz-help {
  margin-bottom: 20px;
}
.ap-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px 34px;
  background: var(--ma-band);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.ap-drop::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px dashed var(--ma-line-2);
  pointer-events: none;
}
.ap-drop:hover {
  background: rgba(var(--ma-blush-rgb), 0.3);
}
.ap-drop .ma-ico img {
  width: 54px;
  height: 54px;
}
.ap-drop b {
  margin-top: 8px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ap-drop span {
  color: var(--ma-muted);
  font-size: 14.5px;
}
.ap-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ap-count {
  margin: 18px 0 14px;
}
.ap-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.ap-previews li {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ma-plate);
}
.ap-previews img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ap-remove {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #212121;
  font-size: 11px;
}
.ap-remove:hover {
  background: var(--ma-blush);
}
.ap-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ws-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/*----- 14.5 The Timetable -----*/
/* the week: six columns, each class a card in its school's colour; today's column and the class on now lit */
.tt-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.tt-head {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--ma-band);
  text-align: center;
}
.tt-day.is-today .tt-head {
  background: var(--ma-primary);
  color: var(--ma-on-primary);
}
.tt-day ul {
  display: grid;
  gap: 10px;
}
.tt-class {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 14px;
  background: rgba(var(--tone-rgb), 0.3);
  border-inline-start: 4px solid var(--tone);
  font-size: 14px;
}
.tt-time {
  color: var(--ma-muted);
  font-size: 13.5px;
}
.tt-class b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.tt-course {
  color: var(--ma-text);
}
.tt-room {
  color: var(--ma-muted);
  font-size: 13px;
}
.tt-now {
  display: none;
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 10px;
  background: var(--ma-free);
  color: #FFFFFF;
  font-family: var(--ma-ff-head);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tt-class.is-now {
  box-shadow: var(--ma-shadow-lg);
}
.tt-class.is-now .tt-now {
  display: inline-block;
}
.tt-live {
  margin: 0;
}

/*----- 14.6 Admissions & Open Days -----*/
.adm-steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.adm-steps .ma-ico img {
  width: 52px;
  height: 52px;
}
.adm-steps .ma-num {
  margin-top: 16px;
}
.adm-cta {
  margin-top: 56px;
}
.adm-photo,
.ab-photo,
.rr-photo,
.pr-photo {
  aspect-ratio: 4 / 4.6;
  background: var(--ma-plate);
}
.adm-phone {
  margin-top: 20px;
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.od-programme {
  margin-top: 30px;
}
.book-card {
  padding: 42px 40px 36px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
}
.book-card .ma-input {
  background: var(--ma-field);
}
.book-card .ma-btn {
  margin-top: 24px;
}
.ma-od-sec .ma-title.is-split .ma-status {
  margin: 0;
}

/*----- 14.7 The Show & The Graduates -----*/
.show-count.is-left {
  justify-content: flex-start;
  margin: 30px 0 0;
}
.show-order.is-light {
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.show-order.is-light li:first-child {
  border-top: 1px solid var(--ma-line);
}
.show-order.is-light li:last-child {
  border-bottom: 1px solid var(--ma-line);
}
.grad-side .ma-tag {
  margin-bottom: 16px;
}
.gs-title {
  margin-bottom: 12px;
}
.grad-side .ma-lead {
  font-size: 16px;
}
.gs-share {
  margin-top: 4px;
}
.grad-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.gg-item {
  margin: 0;
}
.gg-item a {
  display: block;
  height: 100%;
  background: var(--ma-plate);
}
.gg-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gg-item.is-wide {
  grid-column: 1 / -1;
}
.gg-item.is-wide img {
  aspect-ratio: 16 / 11;
}
.gr-nav {
  margin-top: 60px;
}
.tutor-word {
  padding: 40px 38px 34px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.tutor-word blockquote p {
  font-size: 20px;
}
.tutor-word.is-card {
  height: 100%;
}

/*----- 14.8 Studios & About -----*/
.ma-room-row h2 {
  margin-top: 20px;
}
.ma-room-row .ma-ico img {
  width: 58px;
  height: 58px;
}
.ma-room-row .ma-rows {
  margin-top: 26px;
}
.rr-photo {
  aspect-ratio: 16 / 12;
}
.ma-map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ma-plate);
}
.ma-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.6);
}
.ma-campus .hours-list {
  max-width: 360px;
  margin-top: 26px;
}
.ab-pair {
  position: relative;
  padding: 0 14% 18% 0;
}
.ab-pair .ab-photo.is-a {
  aspect-ratio: 4 / 4.4;
}
.ab-pair .ab-photo.is-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3.4;
  border: 10px solid var(--ma-bg);
  box-shadow: var(--ma-shadow-lg);
}
.ma-about .ma-rows {
  margin-top: 30px;
}

/*----- 14.9 Student Work & Student Area -----*/
/* the base's pinterest gallery: CSS columns of frames, the student and school under each */
.ma-masonry {
  columns: 4 260px;
  column-gap: 22px;
}
.mz-item {
  margin: 0 0 22px;
  break-inside: avoid;
}
.mz-item a {
  display: block;
}
.mz-item img {
  display: block;
  width: 100%;
  height: auto;
}
.mz-item figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 2px 0;
}
.mz-item figcaption b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 40px;
}
.app-stages li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px 0 0;
  border-top: 3px solid var(--ma-line);
}
.app-stages li.is-done {
  border-color: var(--ma-heading);
}
.app-stages li.is-on {
  border-color: var(--ma-blush);
}
.app-stages b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-stages span {
  color: var(--ma-muted);
  font-size: 14px;
}
.dash-sub {
  margin-bottom: 14px;
}
.acc-plan li small,
.acc-week li small {
  color: var(--ma-muted);
}
.acc-week li.is-today {
  background: rgba(var(--ma-blush-rgb), 0.18);
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* the journal: wide photo posts with a date tile, and quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--ma-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--ma-blush);
  color: var(--ma-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .ma-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--ma-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .ma-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--ma-accent-text);
}
.bp-body h3 a {
  color: var(--ma-heading);
}
.bp-body h3 a:hover {
  color: var(--ma-accent-text);
}
.bp-body .ma-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title set large in light caps and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--ma-ink);
  --ma-heading: #EEF0F2;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: #FFEC13;
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #EEF0F2;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #EEF0F2;
}
.blog-post.is-quote h3 a:hover {
  color: #FFEC13;
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(238, 240, 242, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(238, 240, 242, 0.1);
  font-size: 120px;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .ma-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--ma-band);
  border-inline-start: 4px solid var(--ma-heading);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--ma-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--ma-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ma-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--ma-line);
}
.article-rows dt {
  color: var(--ma-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--ma-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ma-blush);
  color: var(--ma-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--ma-ink);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--ma-plate);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .ma-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--ma-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--ma-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ma-plate);
  color: var(--ma-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--ma-blush);
  color: var(--ma-ink);
}
.post-nav .pn-all {
  color: var(--ma-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ma-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--ma-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--ma-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--ma-ink);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .ma-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .ma-script {
  color: var(--ma-blush);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .ma-avatars .faces img,
.as-copy .ma-avatars .more {
  border-color: var(--ma-ink);
}
.account-form {
  padding: 56px 54px;
}
.account-form .ma-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--ma-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--ma-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--ma-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ma-booked);
  transition: width 0.4s var(--ma-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--ma-blush);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--ma-free);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--ma-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other, the seal on the seam */
.ma-bare-page {
  min-height: 100vh;
  background: var(--ma-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .ma-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .ma-rule {
  margin: 24px 0;
}
.bare-inner .ma-lead {
  max-width: 560px;
}
.bare-inner .ma-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--ma-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .ma-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--ma-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--ma-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--ma-surface);
  color: var(--ma-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold,
.launch-count .is-gold b {
  background: var(--ma-blush);
  color: var(--ma-on-blush);
}
.launch-count b {
  font-family: var(--ma-ff-head);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--ma-surface);
  color: var(--ma-heading);
  font-family: var(--ma-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--ma-blush);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--ma-surface);
  color: var(--ma-ink);
}
/* the white aperture seal on a black disc, so it reads on the photograph and on the paper alike */
.bare-seal {
  box-shadow: var(--ma-shadow-lg);
}

/*======================
16. Subheader
========================*/
/* the inner page title, the base's way: the centred spaced-caps title with the short blush rule, the crumbs above it,
   the lead under it. With a photograph it is the base's photo title band (cover + wash, white copy); without one it
   sits on the mist band under the pastel clouds */
.ma-subheader {
  position: relative;
  isolation: isolate;
  padding: 100px 0 104px;
  overflow: clip;
  background: var(--ma-band);
  text-align: center;
}
.ma-subheader.has-photo {
  padding: 150px 0 140px;
  background: var(--ma-night);
}
.ma-subheader .ma-gl {
  inset: 0;
  height: auto;
}
.sub-copy {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.ma-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 24px;
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ma-crumbs a:hover {
  color: var(--ma-heading);
}
.ma-crumbs > span:last-child {
  color: var(--ma-heading);
}
.ma-crumbs .sep {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ma-blush);
}
.ma-subheader h1 {
  margin: 0;
}
.ma-subheader .ma-rule {
  margin: 24px auto 0;
  transform-origin: 50% 50%;
}
.ma-subheader .ma-lead {
  max-width: 640px;
  margin: 24px auto 0;
}

/*======================
17. Footer
========================*/
/* the base's dark footer grown up: the logo and line, the academy crest shattering into Voronoi cells beside the next
   deadline, the campus, the four schools, admissions and the letter, then the copyright row */
.ma-footer {
  position: relative;
  padding-top: 80px;
}
.footer-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ma-line);
}
.footer-logo img {
  height: 24px;
  width: auto;
}
.footer-line {
  margin: 0;
  color: var(--ma-muted);
  font-size: 15px;
}
.footer-crest {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  min-height: 320px;
  border-bottom: 1px solid var(--ma-line);
}
.footer-crest canvas {
  display: block;
  width: 100%;
  height: 320px;
}
.crest-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 300px;
  padding: 26px 28px;
  background: var(--ma-blush);
  color: #212121;
  transition: background-color 0.35s ease, transform 0.35s var(--ma-ease);
}
.crest-cta .ma-eyebrow {
  margin: 0;
  color: #212121;
}
.crest-cta .cc-day {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.crest-cta .cc-course {
  font-size: 15px;
}
.crest-cta .cc-go {
  margin-top: 8px;
  font-family: var(--ma-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.crest-cta .cc-go i {
  margin-inline-start: 6px;
  transition: transform 0.35s var(--ma-ease);
}
.crest-cta:hover {
  color: #212121;
  background: #FFFFFF;
  transform: translateY(-4px);
}
.crest-cta:hover .cc-go i {
  transform: translateX(5px);
}
.footer-links-list li + li {
  margin-top: 10px;
}
.footer-links-list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ma-text);
  font-size: 15px;
}
.footer-links-list a:hover {
  color: var(--ma-accent-text);
}
.footer-cols {
  padding: 60px 0 50px;
}
.ma-footer .widget h2 {
  margin-bottom: 22px;
}
.footer-address {
  margin-bottom: 14px;
  color: var(--ma-heading);
  font-size: 15.5px;
}
.ma-footer .ma-status {
  margin-bottom: 18px;
  font-size: 14px;
}
.hours-list li,
.light-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ma-line);
  font-size: 14px;
}
.hours-list li span,
.light-list li span {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hours-list li b,
.light-list li b {
  color: var(--ma-heading);
  font-family: var(--ma-ff-head);
  font-size: 13px;
  font-weight: 500;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--ma-blush);
}
.light-note {
  margin: 14px 0 0;
  color: var(--ma-muted);
  font-size: 13.5px;
}
.footer-contact li + li {
  margin-top: 10px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ma-text);
  font-size: 15px;
}
.footer-contact a i {
  width: 16px;
  color: var(--ma-blush);
  font-size: 13px;
}
.footer-contact a:hover {
  color: #FFFFFF;
}
.nl-note {
  margin-bottom: 18px;
  font-size: 15px;
}
.ma-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.ma-newsletter .ma-input {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}
.nl-btn {
  width: 56px;
  height: 56px;
  background: var(--ma-blush);
  color: var(--ma-on-blush);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nl-btn:hover {
  background: #FFFFFF;
  color: var(--ma-ink);
}
.ma-newsletter .form-status {
  flex-basis: 100%;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--ma-line);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: #FFFFFF;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.footer-links a {
  font-family: var(--ma-ff-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-bottom .coords {
  color: var(--ma-muted);
  font-family: var(--ma-ff-head);
  font-size: 11px;
  letter-spacing: 0.12em;
}