/* MetaPilates — the public website's stylesheet.
 *
 * This replaces the Webflow export's four-file chain (the praxis-leandra-isler
 * base, unloaded.css, style-v2.css, spacing.css and metapilates-overrides.css)
 * on every marketing page. The client's 2026 design shares no layout system
 * with the export, so re-skinning it would have meant fighting 122KB of
 * minified Webflow selectors for every rule. This is written against the design
 * directly and owns the whole page.
 *
 * Still on the old chain: /account, /signin and /checkout — the client web app.
 * Those keep mp-account.css / mp-checkout.css and are out of scope here.
 *
 * Colours are sampled off the approved design rather than guessed. Note the
 * ground is a NEUTRAL off-white (#f4f5f5), not the warm MetaPilates cream
 * (#efeae0) the rest of the brand uses — that is what the design does, and it
 * is one token to change if the studio would rather stay warm.
 */

/* ── Base ────────────────────────────────────────────────────────────────
   Tokens come from assets/mp-runtime.css, which every page loads first. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so #main and any in-page anchor would otherwise land
     underneath it. */
  scroll-padding-top: calc(var(--mp-header-h) + 12px);
}

body {
  margin: 0;
  background: var(--mp-ground);
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--mp-focus);
  outline-offset: 3px;
}

/* Georgian: the caps treatment is tracking only — mkhedruli has no uppercase,
   so text-transform does nothing and only the letter-spacing carries the look. */
:lang(ka) .mp-label,
:lang(ka) .mp-nav__link,
:lang(ka) .mp-btn,
:lang(ka) .mp-arrow-link,
:lang(ka) .mp-card__title,
:lang(ka) .mp-hero__title,
:lang(ka) .mp-foot__heading {
  text-transform: none;
}

/* ── Layout primitives ─────────────────────────────────────────────────── */

.mp-container {
  width: 100%;
  max-width: var(--mp-container);
  margin-inline: auto;
  padding-inline: var(--mp-gutter);
}

.mp-section {
  /* The comp runs its lower sections close together: card grid to info strip
     is ~24px at 1440 and the strip meets the footer at ~10px. Two adjacent
     sections stack this value, so it is half the gap, not the gap. */
  padding-block: clamp(10px, 0.9vw, 13px);
}

.mp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--mp-green);
  color: var(--mp-on-dark);
}

.mp-skip:focus {
  left: 12px;
  top: 12px;
}

/* "MOVE. CONNECT. GROW." is the design's headline and says nothing a search
   result could place, so the h1 carries the proposition after it for a reader
   who cannot see the hero — and for PW-1-R1, which asks the heading to state
   one. The export did the same thing with a hidden <strong>. */
.mp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A label: small, uppercase, widely tracked. The design uses it for section
   eyebrows, card numbers, nav items and every link that ends in an arrow. */
.mp-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

/* ── Buttons and arrow links ───────────────────────────────────────────── */

.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 26px;
  border: 1px solid transparent;
  border-radius: var(--mp-radius);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  transition: background-color 0.2s var(--mp-ease), color 0.2s var(--mp-ease),
    border-color 0.2s var(--mp-ease);
}

.mp-btn--solid {
  background: var(--mp-sage);
  color: var(--mp-on-dark);
}

.mp-btn--solid:hover {
  background: var(--mp-sage-hover);
}

.mp-btn--ghost {
  border-color: currentColor;
}

.mp-btn--ghost:hover {
  background: var(--mp-green);
  border-color: var(--mp-green);
  color: var(--mp-on-dark);
}



/* "VIEW BRANCHES →" — the design's one link style, with the rule sliding out. */
.mp-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  /* The comp sets these at modest tracking. At .16em the glyphs shrink to hit
     the same total width and the small caps read thin and gappy. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-ink);
}

/* The arrow is a span, not an icon file: a rule plus a rotated corner. */
.mp-arrow-link .mp-arrow {
  position: relative;
  width: 34px;
  height: 10px;
  flex: none;
  transition: transform 0.25s var(--mp-ease);
}

.mp-arrow-link:hover .mp-arrow {
  transform: translateX(5px);
}

.mp-arrow__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.mp-arrow__head {
  position: absolute;
  top: 50%;
  /* 1px in, so the rotated square stops overflowing the link box by 2px. */
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1.2px solid currentColor;
  border-right: 1.2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.mp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mp-ground);
  border-bottom: 1px solid var(--mp-line);
}

.mp-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--mp-header-h);
}

.mp-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.mp-brand__mark {
  width: 42px;
  height: auto;
}

.mp-brand__name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}

.mp-brand__tagline {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-ink-muted);
  line-height: 1.3;
}

.mp-nav {
  flex: 1 1 auto;
}

.mp-nav__list {
  display: flex;
  justify-content: center;
  /* Never wrap. The comp's nav is a single row and a second row makes the
     sticky bar silently double in height; the collapse breakpoint below is
     what handles "there is no room", not wrapping. */
  flex-wrap: nowrap;
  gap: clamp(8px, 1.3vw, 24px);
}

.mp-nav__link {
  display: inline-block;
  padding-block: 11px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mp-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--mp-ease);
}

/* aria-current stays for assistive tech; the comp shows no underline on it. */
.mp-nav__link:hover {
  border-bottom-color: currentColor;
}

.mp-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
  /* The nav is the bar's only growable child, so hiding it below 1180px used
     to leave brand + actions packed against the left with half the header
     empty. This keeps the actions on the right edge whether the nav is there
     or not — it is also what fixes the same bunching again at 620px, where
     BOOK NOW is hidden. */
  margin-left: auto;
}

.mp-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-inline: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--mp-track-nav);
  text-transform: uppercase;
}

.mp-more__bars {
  display: grid;
  gap: 5px;
  width: 30px;
}

.mp-more__bars span {
  display: block;
  height: 2px;
  background: currentColor;
}

/* ── The MORE overlay ──────────────────────────────────────────────────────
   Everything the top bar has no room for. Hidden with [hidden] so it is out of
   the accessibility tree until mp-site.js opens it; no JS, no menu. */

.mp-menu[hidden] {
  display: none;
}

.mp-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--mp-green);
  color: var(--mp-on-dark);
  overflow-y: auto;
  padding-block: 32px 64px;
}

.mp-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.mp-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

.mp-menu__grid {
  display: grid;
  /* 2 or 4 columns, never 3: auto-fit gave 3 tracks for 4 sections between
     ~704 and 903px, orphaning one on a mostly-empty second row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: 48px;
}

.mp-menu__heading {
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-on-dark-soft);
}

.mp-menu__list {
  display: grid;
  gap: 2px;
}

.mp-menu__link {
  display: inline-flex;
  align-items: center;
  /* On a phone this overlay IS the navigation; 24px rows are not tappable. */
  min-height: 44px;
  font-size: 18px;
  font-weight: 400;
}

.mp-menu__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.mp-hero {
  position: relative;
  min-height: clamp(560px, 62vh, 640px);
  display: flex;
  align-items: stretch;
  background: var(--mp-green-deep);
}

.mp-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The design's headline is white over a bright photo. A left-weighted scrim
   keeps it at AA without dimming the whole room. */
.mp-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(28, 34, 28, 0.34) 0%,
    rgba(28, 34, 28, 0.12) 40%,
    rgba(28, 34, 28, 0) 60%
  );
}

.mp-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* The comp sits the headline and buttons low in the frame, not centred. */
  justify-content: flex-end;
  padding-block: 64px clamp(26px, 3vw, 44px);
}

.mp-hero__title {
  max-width: 11ch;
  color: var(--mp-on-dark);
  /* Floor lowered from 44px: at 320px the Georgian "დაუკავშირდი." needs
     315px against a 288px box, and body{overflow-x:hidden} meant the clipped
     glyphs could not even be scrolled to. */
  font-size: clamp(32px, 6.2vw, 92px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.mp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 56px);
}

.mp-hero__actions .mp-arrow-link {
  color: var(--mp-on-dark);
}

/* The apparatus panel, top-right of the hero. */
.mp-hero__panel {
  position: absolute;
  top: clamp(24px, 6vh, 64px);
  /* Pinned to the content column, not the viewport: at 1600px a viewport-
     relative offset put the panel 120px outside the header/cards/footer edge. */
  right: max(var(--mp-gutter), calc((100% - var(--mp-container)) / 2 + var(--mp-gutter)));
  z-index: 2;
  width: min(430px, calc(100% - var(--mp-gutter) * 2));
  padding: 34px 32px 26px;
  background: rgba(50, 60, 51, 0.965);
  backdrop-filter: blur(2px);
  color: var(--mp-on-dark);
}

.mp-hero__panel-lead {
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mp-hero__panel-rule {
  width: 34px;
  height: 1px;
  margin-block: 22px;
  background: var(--mp-on-dark-soft);
}

.mp-hero__panel-body {
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mp-on-dark-soft);
}

.mp-apparatus {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 30px;
}

.mp-apparatus__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.mp-apparatus__item svg {
  width: 100%;
  max-width: 46px;
  height: 34px;
  color: var(--mp-on-dark);
}

.mp-apparatus__name {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-on-dark-soft);
}

/* The ringed monogram straddling the hero's bottom edge. */
.mp-hero__badge {
  position: absolute;
  z-index: 3;
  right: max(clamp(24px, 5vw, 92px), calc((100% - var(--mp-container)) / 2 + var(--mp-gutter)));
  /* The comp keeps the badge inside the hero, clear of its bottom edge — it
     was straddling it and half-landing on the white mission section. */
  bottom: clamp(14px, 1.6vw, 24px);
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  gap: 2px;
  /* Bright ring, transparent centre — the comp reads as a glowing outline,
     not a grey disc. The glow does the legibility work the dark fill did
     badly. */
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.28), inset 0 0 18px rgba(0, 0, 0, 0.18);
}

.mp-hero__badge img {
  width: 58px;
  /* the mark ships sage; on the badge the design shows it white */
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

.mp-hero__badge span {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  color: var(--mp-on-dark);
}

/* ── Mission ───────────────────────────────────────────────────────────── */

.mp-mission {
  padding-top: clamp(16px, 1.5vw, 22px);
  padding-bottom: clamp(20px, 2vw, 28px);
  text-align: center;
}

.mp-mission__eyebrow {
  font-size: clamp(16px, 1.6vw, 23px);
  letter-spacing: 0.3em;
}

.mp-mission__statement {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.7;
  color: var(--mp-ink-soft);
}

.mp-pillars {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: clamp(18px, 1.9vw, 26px);
}

.mp-pillars li {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

.mp-pillars li:not(:last-child)::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mp-ink-muted);
}

.mp-mission__rule {
  width: 120px;
  height: 1px;
  margin: clamp(16px, 1.9vw, 24px) auto 0;
  border: 0;
  background: var(--mp-line-strong);
}

.mp-quote {
  position: relative;
  max-width: 34ch;
  margin: clamp(14px, 1.7vw, 22px) auto 0;
  font-family: var(--mp-serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 400;
  line-height: 1.22;
  color: var(--mp-ink-soft);
}

.mp-quote__mark {
  font-family: var(--mp-serif);
  font-style: normal;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--mp-ink-muted);
  vertical-align: -0.28em;
  line-height: 0;
}

/* ── Card grid ─────────────────────────────────────────────────────────── */

.mp-grid {
  display: grid;
  /* minmax(0,1fr), not a bare 1fr: 1fr is minmax(auto,1fr), and the longest
     Georgian card title was forcing its own track ~10px wider than its
     siblings between 961 and 991px. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 18px;
}

/* Column counts other than the homepage's four. */
.mp-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* A centred section opener on an interior page. */
.mp-section__heading {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  text-align: center;
  font-size: clamp(16px, 1.6vw, 23px);
  letter-spacing: 0.3em;
}

.mp-card {
  display: flex;
  flex-direction: column;
  /* The photo runs to the card's edge — the border frames the image, it does
     not float inside a margin. Only the copy is inset. */
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
}

.mp-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mp-green);
}

.mp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--mp-ease);
}

.mp-card:hover .mp-card__media img {
  transform: scale(1.04);
}

/* A card whose photograph the studio still owes us. It is a monogram on sage,
   never a stock photo standing in for a real person, place or product — the
   shot it is waiting for is named in data-mp-shot and listed in
   docs/shot-list.md. */
.mp-card__media--pending {
  display: grid;
  place-items: center;
  background: var(--mp-green);
}

.mp-card__media--pending img {
  width: 52px;
  height: auto;
  opacity: 0.45;
  filter: brightness(0) invert(1);
  transition: none;
}

.mp-card:hover .mp-card__media--pending img {
  transform: none;
}

.mp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 20px;
}

.mp-card__number {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mp-ink-muted);
}

.mp-card__title {
  margin-top: 8px;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.mp-card__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mp-ink-soft);
}

.mp-card__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--mp-ink-soft);
}

.mp-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.mp-card__list li::before {
  content: '✓';
  color: var(--mp-sage);
  font-size: 12px;
  line-height: 1.55;
}

.mp-card__cta {
  margin-top: auto;
  padding-top: 14px;
}

/* ── Info strip ────────────────────────────────────────────────────────── */

.mp-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  /* The comp insets the strip inside the card grid's measure. */
  max-width: calc(100% - clamp(0px, 4vw, 54px));
  margin-inline: auto;
}

.mp-info__card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: clamp(18px, 1.8vw, 25px) clamp(16px, 1.6vw, 22px);
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
}

.mp-info__icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--mp-ink);
}

/* The handshake is the widest glyph in the comp's strip — a 30px square
   squashes it into an unreadable ribbon. */
.mp-info__icon[viewBox='0 0 48 32'] {
  width: 46px;
  height: 30px;
}

/* The directions card: the comp fills it with a pale street map carrying two
   pins, and drops the address text entirely — the addresses live on /contact.
   Drawn inline because a real map tile would be a third-party request, which
   test/tracking-safeguards.spec.ts forbids outside the consent gate. */
.mp-info__card--map {
  position: relative;
  overflow: hidden;
}

.mp-info__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mp-info__map > svg:first-child {
  width: 100%;
  height: 100%;
}

.mp-info__pin {
  position: absolute;
  width: 19px;
  height: 19px;
  opacity: 0.9;
}

.mp-info__pin--a {
  left: 46%;
  top: 44%;
}

.mp-info__pin--b {
  left: 64%;
  top: 58%;
}

/* The card's own content has to stay above the map. */
.mp-info__card--map .mp-info__icon,
.mp-info__card--map .mp-info__body {
  position: relative;
  z-index: 1;
}

.mp-info__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mp-info__heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

.mp-info__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mp-ink-soft);
}

.mp-info__phone {
  margin-top: 10px;
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: 0.04em;
}

.mp-info__cta {
  padding-top: 10px;
}

.mp-info__cta .mp-arrow-link {
  font-size: 11px;
}

.mp-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.mp-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px;
  color: var(--mp-ink);
}

.mp-socials svg {
  width: 19px;
  height: 19px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.mp-foot {
  margin-top: 0;
  /* The trailing value clears the fixed booking CTA (48px tall, 16-33px up),
     which was landing on top of the legal row. */
  padding-block: clamp(36px, 4vw, 52px) calc(clamp(22px, 2vw, 30px) + 72px);
  background: var(--mp-sage);
  color: var(--mp-on-dark);
}

.mp-foot__inner {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: clamp(40px, 7vw, 103px);
  align-items: start;
}

.mp-foot__badge {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}

.mp-foot__badge img {
  width: 52px;
  filter: brightness(0) invert(1);
}

.mp-foot__badge span {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mp-foot__heading {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-on-dark-soft);
}

.mp-foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

.mp-foot__list {
  display: grid;
  gap: 0;
  align-content: start;
  font-size: 13px;
  /* body's 1.6 line-height made the footer twice the comp's height. */
  line-height: 1.28;
}

.mp-foot__list a {
  display: inline-block;
  padding-block: 5px;
}

.mp-foot__list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-foot__contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}

.mp-foot__contact svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  opacity: 0.85;
}

.mp-foot__socials {
  display: flex;
  gap: 16px;
}

.mp-foot__socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px;
}

.mp-foot__socials svg {
  width: 18px;
  height: 18px;
}

.mp-foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(18px, 2vw, 26px);
  /* The comp has no divider here — copyright and legal links share the
     footer's bottom baseline. */
  font-size: 12px;
  color: var(--mp-on-dark-soft);
}

.mp-foot__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mp-foot__legal a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Interior pages ────────────────────────────────────────────────────────
   Everything below the homepage: a page header, prose at a readable measure,
   an alternating image/text split, a sage call-to-action band, and an
   accordion. Shared by /about, /services, /faq, the legal pages and the new
   routes, so a page is content plus these primitives and nothing else. */

.mp-page-hero {
  padding-block: clamp(40px, 5vw, 76px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--mp-line);
}

.mp-page-hero__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

:lang(ka) .mp-page-hero__eyebrow {
  text-transform: none;
}

.mp-page-hero__title {
  max-width: 18ch;
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

:lang(ka) .mp-page-hero__title {
  text-transform: none;
}

.mp-page-hero__lead {
  max-width: 58ch;
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--mp-ink-soft);
}

/* Prose at a measure that stays readable — the export ran body copy the full
   width of a 1360px container. */
.mp-prose {
  max-width: 68ch;
}

.mp-prose h2 {
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

:lang(ka) .mp-prose h2 {
  text-transform: none;
}

.mp-prose h3 {
  margin-top: clamp(20px, 2vw, 28px);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
}

.mp-prose h2:first-child,
.mp-prose h3:first-child {
  margin-top: 0;
}

.mp-prose p,
.mp-prose li {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--mp-ink-soft);
}

.mp-prose ul {
  margin-top: 8px;
  padding-left: 0;
}

.mp-prose ul li {
  position: relative;
  padding-left: 20px;
}

.mp-prose ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.82em;
  width: 6px;
  height: 1px;
  background: var(--mp-sage);
}

.mp-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Image beside text; every other one flips. */
.mp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(28px, 3.4vw, 52px);
}

.mp-split + .mp-split {
  border-top: 1px solid var(--mp-line);
}

.mp-split:nth-of-type(even) .mp-split__media {
  order: 2;
}

.mp-split__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mp-green);
}

.mp-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The sage band that closes an interior page. */
.mp-band {
  padding-block: clamp(40px, 4.6vw, 68px);
  background: var(--mp-sage);
  color: var(--mp-on-dark);
  text-align: center;
}

.mp-band__title {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

:lang(ka) .mp-band__title {
  text-transform: none;
}

.mp-band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(20px, 2.4vw, 30px);
}

.mp-band .mp-btn--solid {
  background: var(--mp-card);
  color: var(--mp-green);
}

.mp-band .mp-btn--solid:hover {
  background: var(--mp-on-dark);
}

.mp-band .mp-btn--ghost {
  color: var(--mp-on-dark);
  border-color: rgba(255, 255, 255, 0.7);
}

.mp-band .mp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--mp-on-dark);
}

/* Accordion — a real <details>, so it works with the script dead. */
.mp-faq {
  max-width: 74ch;
}

.mp-faq__item {
  border-bottom: 1px solid var(--mp-line);
}

.mp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding-block: 16px;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.mp-faq__q::-webkit-details-marker {
  display: none;
}

.mp-faq__q::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.4px solid var(--mp-ink-muted);
  border-bottom: 1.4px solid var(--mp-ink-muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s var(--mp-ease);
}

.mp-faq__item[open] .mp-faq__q::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

.mp-faq__a {
  padding-bottom: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mp-ink-soft);
}

.mp-faq__a p + p {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .mp-split {
    grid-template-columns: 1fr;
  }

  .mp-split:nth-of-type(even) .mp-split__media {
    order: 0;
  }
}

/* ── Runtime content (assets/js/mp-live.js) ───────────────────────────────
   The markup below is NOT in any page file — mp-live.js writes it at runtime
   from the API, into the [data-mp-live] containers. Its class names were
   styled only in assets/metapilates-overrides.css, which a converted page no
   longer loads, so without these rules a converted /instructors or /gallery
   fetches real data and renders it unstyled. That failure only appears once
   the API responds, which is why it is worth saying out loud here.

   Some names are the Webflow export's (`ang-lst__*`, `utl-usp__*`). They are
   kept because the renderer emits them and its tests assert them; restyling
   them here is cheaper and safer than rewriting the renderer. */

/* Collection containers → the same grid the card sections use. */
[data-mp-live='instructors'],
.ang-lst__collection__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* Loading / empty / error lines, and the gallery's own empty state. */
.utl-usp__copy[style*='opacity'],
.mp-gallery__empty {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mp-ink-muted);
}

/* ── Instructors ── */

.mp-instructor {
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
}

.mp-instructor__card {
  padding: 0 0 18px !important;
}

.mp-instructor__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--mp-green);
}

.mp-instructor .utl-usp__heading {
  padding-inline: 18px;
  margin-top: 6px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:lang(ka) .mp-instructor .utl-usp__heading {
  text-transform: none;
}

.mp-instructor__specialisations,
.mp-instructor__bio,
.mp-instructor__certifications,
.mp-instructor__languages {
  padding-inline: 18px;
  line-height: 1.6;
  color: var(--mp-ink-soft);
}

.mp-instructor__panel {
  padding: 0 18px 18px;
  border-top: 1px solid var(--mp-line);
}

.mp-instructor__panel[hidden] {
  display: none;
}

.mp-instructor__upcoming-heading {
  display: block;
  padding-top: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

:lang(ka) .mp-instructor__upcoming-heading {
  text-transform: none;
}

/* ── Gallery ── */

.ang-lst__collection__item {
  overflow: hidden;
  background: var(--mp-green);
}

.ang-lst__link,
.ang-lst__block,
.ang-lst__img-wrapper {
  height: 100%;
}

.ang-lst__img-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ang-lst__img-wrapper .utl__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--mp-ease);
}

.ang-lst__collection__item:hover .utl__img {
  transform: scale(1.04);
}

.ang-lst__img__gradient {
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(28, 34, 28, 0.35), transparent);
  pointer-events: none;
}

/* ── Filters (schedule, pricing, blog search) ── */

.mp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.mp-filters__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 170px;
}

.mp-filters__label,
.mp-blog__search-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

:lang(ka) .mp-filters__label,
:lang(ka) .mp-blog__search-label {
  text-transform: none;
}

.mp-filters select,
.mp-blog__search-input {
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--mp-ink);
  background: var(--mp-card);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius);
}

/* ── Schedule ── */

.mp-schedule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 16px 0;
  border-top: 1px solid var(--mp-line);
}

.mp-schedule__spots {
  color: var(--mp-ink-muted);
  font-size: 14px;
}

.mp-schedule__row[data-full='1'] .mp-schedule__spots {
  font-weight: 600;
  color: var(--mp-ink);
}

.mp-schedule__book,
.mp-pricing__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-on-dark);
  background: var(--mp-sage);
  border: 1px solid var(--mp-sage);
  text-decoration: none;
}

:lang(ka) .mp-schedule__book,
:lang(ka) .mp-pricing__buy {
  text-transform: none;
}

.mp-schedule__book:hover,
.mp-pricing__buy:hover {
  background: var(--mp-sage-hover);
  border-color: var(--mp-sage-hover);
}

/* ── Pricing ── */

.mp-pricing__comparison {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.mp-pricing__comparison th,
.mp-pricing__comparison td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--mp-line);
}

.mp-pricing__comparison th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

/* A wide table scrolls inside its own box rather than the page scrolling
   sideways — sync-pages.mjs wraps it in this (PW-A-R3). */
.mp-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Reviews ── */

.mp-review {
  padding: 22px;
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
}

.mp-review__quote {
  font-family: var(--mp-serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--mp-ink);
}

.mp-review__stars {
  display: block;
  margin-bottom: 10px;
  color: var(--mp-sage);
  letter-spacing: 0.12em;
}

.mp-review__author,
.mp-review__context {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--mp-ink-muted);
}

/* ── Blog ── */

.mp-post {
  display: flex;
  flex-direction: column;
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
}

.mp-post__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mp-green);
}

.mp-post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 18px;
  text-decoration: none;
}

.mp-post__title {
  padding: 14px 18px 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.3;
}

.mp-post__date,
.mp-post__tags {
  padding: 8px 18px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mp-ink-muted);
}

.mp-post__excerpt {
  padding: 10px 18px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mp-ink-soft);
}

.mp-post__more {
  padding: 14px 18px 0;
  margin-top: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

:lang(ka) .mp-post__more {
  text-transform: none;
}

/* A single article. */
.mp-post__full {
  max-width: 68ch;
}

.mp-post__full .mp-post__title {
  padding: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1.12;
}

.mp-post__full .mp-post__date,
.mp-post__full .mp-post__tags {
  padding: 10px 0 0;
}

.mp-post__cover + * {
  margin-top: 20px;
}

.mp-post__heading {
  margin-top: 28px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
}

.mp-post__quote {
  margin-top: 20px;
  padding-left: 18px;
  border-left: 2px solid var(--mp-sage);
  font-family: var(--mp-serif);
  font-style: italic;
  color: var(--mp-ink-soft);
}

.mp-post__list {
  margin-top: 16px;
}

/* ── Sync-owned block markup ──────────────────────────────────────────────
   scripts/sync-pages.mjs stamps the headings and containers for /pricing,
   /reviews, /blog and /contact, and it emits the export's class names. They
   are restyled here for the same reason the gallery wrappers are: the script
   and its tests are built around those names, so restyling is cheaper and
   safer than rewriting the generator. The result matches .mp-page-hero. */

.blg-lst__preheading {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

:lang(ka) .blg-lst__preheading {
  text-transform: none;
}

.lay__block > h1,
.mp-contact h2 {
  max-width: 20ch;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
}

:lang(ka) .lay__block > h1,
:lang(ka) .mp-contact h2 {
  text-transform: none;
}

.utl__lead,
.utl-cta__copy {
  max-width: 58ch;
  margin-top: 16px;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--mp-ink-soft);
}

.lay__block + .lay__block,
.utl-usp__wrapper {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Collections the live modules fill. */
.utl-usp__wrapper,
.blg-lst__collection-wrapper,
.mp-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.mp-pricing__filters:not(:empty),
.mp-blog__search:not(:empty) {
  margin-bottom: 22px;
}

/* ── Contact ── */

.mp-contact__branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: clamp(20px, 2.4vw, 32px);
}

.mp-contact__branch {
  padding: 22px;
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
}

.mp-contact__branch h3 {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.mp-contact__address,
.mp-contact__details p,
.mp-contact__hours-row {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mp-ink-soft);
}

.mp-contact__hours {
  margin-top: 12px;
}

.mp-contact__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 4px;
  border-top: 1px solid var(--mp-line);
}

.mp-contact__details {
  margin-top: clamp(20px, 2.4vw, 32px);
}

.mp-contact__email {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-contact__branch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.mp-contact__branch-tab {
  min-height: 44px;
  padding: 10px 20px;
  font: inherit;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  background: transparent;
  color: var(--mp-ink);
  border: 1px solid var(--mp-line-strong);
  cursor: pointer;
}

:lang(ka) .mp-contact__branch-tab {
  text-transform: none;
}

.mp-contact__branch-tab[aria-selected='true'] {
  background: var(--mp-green);
  border-color: var(--mp-green);
  color: var(--mp-on-dark);
}

/* Form */
.mp-contact__form {
  display: grid;
  gap: 16px;
  max-width: 60ch;
  margin-top: clamp(24px, 3vw, 40px);
}

.mp-contact__field {
  display: grid;
  gap: 6px;
}

/* The generated form uses bare <label>/<input>/<textarea> inside
   .mp-contact__field — there are no __label/__input class names to hook. */
.mp-contact__field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

:lang(ka) /* The generated form uses bare <label>/<input>/<textarea> inside
   .mp-contact__field — there are no __label/__input class names to hook. */
.mp-contact__field label {
  text-transform: none;
}

.mp-contact__field input,
.mp-contact__field textarea,
.mp-contact__field select {
  min-height: 46px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--mp-ink);
  background: var(--mp-card);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius);
}

.mp-contact__field textarea {
  min-height: 140px;
  resize: vertical;
}

.mp-contact__field input[aria-invalid='true'],
.mp-contact__field textarea[aria-invalid='true'] {
  border-color: #b3524a;
}

.mp-contact__error {
  font-size: 13px;
  color: #b3524a;
}

.mp-contact__submit {
  justify-self: start;
  min-height: 46px;
  padding: 12px 30px;
  font: inherit;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-on-dark);
  background: var(--mp-sage);
  border: 1px solid var(--mp-sage);
  cursor: pointer;
}

:lang(ka) .mp-contact__submit {
  text-transform: none;
}

.mp-contact__submit:hover {
  background: var(--mp-sage-hover);
}

.mp-contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mp-contact__status,
.mp-contact__sla {
  font-size: 14px;
  color: var(--mp-ink-soft);
}

.mp-contact__map {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--mp-line);
}

/* ── Shop (SH) ─────────────────────────────────────────────────────────────
   The storefront markup assets/js/mp-shop.js writes at runtime, plus the
   cart. Prices are rendered from the API response; nothing here is a price
   the page decided on its own. */

.mp-shop__state {
  padding: 24px 0;
  font-size: 15px;
  color: var(--mp-ink-muted);
}

.mp-shop__price {
  margin-top: 10px;
  font-size: clamp(17px, 1.4vw, 20px);
  letter-spacing: 0.02em;
}

.mp-shop__was {
  margin-left: 8px;
  font-size: 0.8em;
  color: var(--mp-ink-muted);
}

.mp-shop__low {
  margin-top: 6px;
  font-size: 13px;
  color: #8a6520;
}

.mp-shop__soldout {
  display: inline-block;
  padding-block: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

:lang(ka) .mp-shop__soldout {
  text-transform: none;
}

.mp-shop__item .mp-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Cart ── */

/* The cart button, injected into the header by mp-shop.js. */
.mp-cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 6px;
  color: var(--mp-ink);
}

.mp-cart-button[hidden] {
  display: none;
}

.mp-cart-button svg {
  width: 22px;
  height: 22px;
}

.mp-cart-button__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--mp-sage);
  color: var(--mp-on-dark);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* The drawer itself. */
.mp-cart-drawer[hidden] {
  display: none;
}

.mp-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
}

.mp-cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 34, 28, 0.42);
}

.mp-cart-drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px clamp(18px, 2.4vw, 28px);
  background: var(--mp-ground);
  border-left: 1px solid var(--mp-line);
  box-shadow: -18px 0 46px rgba(20, 26, 22, 0.18);
  overflow-y: auto;
}

.mp-cart-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mp-cart-drawer__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
}

:lang(ka) .mp-cart-drawer__title {
  text-transform: none;
}

.mp-cart-drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
}

:lang(ka) .mp-cart-drawer__close {
  text-transform: none;
}

.mp-cart {
  max-width: 60ch;
}

.mp-cart__rows {
  display: grid;
  gap: 0;
}

.mp-cart__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
  border-top: 1px solid var(--mp-line);
  font-size: 15px;
}

.mp-cart__colour {
  color: var(--mp-ink-muted);
}

.mp-cart__qty,
.mp-cart__line {
  font-variant-numeric: tabular-nums;
}

.mp-cart__remove {
  min-height: 44px;
  padding-inline: 8px;
  font: inherit;
  font-size: 12px;
  letter-spacing: var(--mp-track-label);
  text-transform: uppercase;
  color: var(--mp-ink-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

:lang(ka) .mp-cart__remove {
  text-transform: none;
}

.mp-cart__remove:hover {
  color: var(--mp-ink);
}

.mp-cart__total {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
  border-top: 1px solid var(--mp-line-strong);
  font-size: clamp(16px, 1.4vw, 19px);
}

.mp-cart__actions {
  margin-top: 8px;
}

@media (max-width: 560px) {
  .mp-cart__row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
}

/* Same treatment inside the drawer at every width — it is 420px wide, so the
   four-column row never fits there regardless of the viewport. */
.mp-cart-drawer .mp-cart__row {
  grid-template-columns: 1fr auto;
  row-gap: 4px;
}

.mp-cart-drawer .mp-cart__remove {
  justify-self: start;
  padding-inline: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────
   The design is a desktop comp. Below it: the grids step 4 → 2 → 1, the nav
   collapses into the MORE overlay, and the hero panel stops floating over the
   photo and stacks under the headline (over a photo it would either cover the
   headline or shrink past legibility). */

/* Eight Georgian nav labels are noticeably longer than the comp's English ones,
   and the list never wraps (a second row silently doubles a sticky bar). So the
   breakpoint is simply the width where the row stops fitting, measured rather
   than guessed: the bar is clean at 1320 and overflows at 1280. Below this the
   top nav is the MORE panel. */
@media (max-width: 1319px) {
  .mp-nav {
    display: none;
  }

  /* Five children into `auto repeat(2, 1fr)` left the contact column squeezed
     into the badge's narrow auto track with an empty cell beside it. Two equal
     columns with the badge on its own row is the honest step down. */
  .mp-foot__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-foot__badge {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  :root {
    --mp-gutter: 20px;
    --mp-header-h: 72px;
  }

  .mp-grid,
  .mp-grid--3,
  .mp-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The panel floats over the photo on the comp. Taking it out of the flow
     here would make it a flex SIBLING of the hero copy — the two then sit side
     by side and push the page wider than the phone. The hero stacks instead. */
  .mp-hero {
    display: block;
    min-height: 0;
  }

  .mp-hero__panel {
    /* NOT `static`: .mp-hero__media is position:absolute, so a non-positioned
       sibling paints underneath it. The panel was only visible because
       backdrop-filter happens to create a stacking context — drop that and the
       whole apparatus panel disappears behind the photo while still taking up
       its layout height. */
    position: relative;
    z-index: 1;
    width: auto;
    max-width: var(--mp-container);
    margin: 0 auto;
    padding-inline: var(--mp-gutter);
  }

  .mp-hero__inner {
    padding-block: 48px;
  }

  .mp-hero__badge {
    display: none;
  }

  .mp-foot__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-foot__badge {
    grid-column: 1 / -1;
  }
}

/* At 320px the brand, the language toggle and a labelled MORE need 326px
   against a 288px content box. The burger keeps its accessible name via
   aria-label, so the visible word is what gives the width back. */
@media (max-width: 400px) {
  .mp-more__label {
    display: none;
  }

  .mp-more {
    gap: 0;
  }

  .mp-brand__name {
    font-size: 12px;
  }
}

@media (max-width: 620px) {
  :root {
    --mp-gutter: 16px;
  }

  .mp-grid,
  .mp-grid--3,
  .mp-info,
  .mp-foot__inner,
  .mp-foot__cols {
    grid-template-columns: 1fr;
  }

  .mp-brand__tagline {
    display: none;
  }

  .mp-brand {
    min-width: 0;
    gap: 10px;
  }

  .mp-brand__mark {
    width: 32px;
  }

  .mp-brand__name {
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .mp-header__inner {
    gap: 12px;
  }

  .mp-header__actions {
    gap: 10px;
  }

  .mp-header__actions .mp-btn {
    padding-inline: 14px;
  }

  /* The floating booking CTA already covers "book" on a phone, so the bar's
     copy of it earns its width back. */
  .mp-header__actions .nav__cta {
    display: none;
  }

  .mp-apparatus {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 10px;
  }

  .mp-pillars {
    gap: 10px;
  }

  .mp-pillars li:not(:last-child)::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}