/* ==========================================================================
   Mercedes AURA case study (Figma: "Mercedes Aura (new)", 1728px wide)
   Sizes are (Figma px) x var(--u): 1:1 with Figma at 1728px and up,
   shrinking in proportion below; max(…) keeps text readable on phones.
   Every block is 140px (Figma) apart, like in the file.
   Loaded after style.css + home.css (header, footer, fonts).
   ========================================================================== */

/* "Mercedes AURA" title font from the Figma (PP Cirka Regular). With a web licence,
   put the file at assets/fonts/pp-cirka-regular.woff2 — until then Playfair Display stands in. */
@font-face {
  font-family: "PP Cirka"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/pp-cirka-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/playfair-display-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
html body.mb-page,
html[data-theme] body.mb-page {
  --u: min(1px, calc(100vw / 1728));
  --bg: #0c0d0c;
  --mint: #8ccba0;
  --sage: #a7afa9;
  --serif: "Domine", Georgia, serif;
  --display: "Chonburi", "Domine", Georgia, serif;
  --cirka: "PP Cirka", "Playfair Display", Georgia, serif;

  /* header + footer: the site's dark blurred glass */
  --h-bar: rgba(29, 27, 28, .55);
  --h-bar-top: rgba(74, 40, 43, .7);
  --h-menu: #1d1b1c;
  --h-text: #f3eeee;
  --h-muted: #b8adad;
  --h-accent: #c9807b;
  --h-bg: #1d1b1c;

  background: var(--bg);
  color: #fff;
  font-family: var(--serif);
}
html:has(body.mb-page) { scroll-snap-type: none !important; scroll-padding-top: 66px; }

.mb {
  display: flex; flex-direction: column;
  gap: calc(140 * var(--u));
  overflow-x: clip;
}
.mb p, .mb h1, .mb h2, .mb h3, .mb dl, .mb dd, .mb ul, .mb figure, .mb blockquote, .mb hr { margin: 0; }
.mb img, .mb video { display: block; max-width: 100%; }
.mb-problem__img, .mb-overview__stones, .mb-concept__hand, .mb-hero__logo, .mb-form__shape, .mb-intro img, .mb-journey__path { height: auto; }

/* ---------- Shared type ---------- */
.mb-kicker {
  font-family: var(--display); font-weight: 400;
  font-size: max(24px, calc(36 * var(--u)));
  line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase;
  color: #f8f5f5;
}
.mb-text { font-size: max(16px, calc(20 * var(--u))); line-height: 1.6; }
.mb-text p + p { margin-top: calc(24 * var(--u)); }
.mb-text--gap32 p + p { margin-top: 1.6em; }
.mb-lead { max-width: calc(900 * var(--u)); font-size: max(16px, calc(20 * var(--u))); line-height: 1.6; color: var(--sage); }
.mb-col { display: flex; flex-direction: column; gap: calc(25 * var(--u)); max-width: calc(900 * var(--u)); }
.mb-display { font-family: var(--cirka); font-weight: 400; font-size: max(40px, calc(66 * var(--u))); line-height: 1.33; }

/* ---------- Hero ---------- */
.mb-hero {
  position: relative;
  height: calc(1117 * var(--u));
  min-height: 560px;
  background: #161616 url("../assets/img/mercedes/hero-bg.jpg") center / cover no-repeat;
  text-align: center;
}
.mb-hero__logo { position: absolute; top: calc(100 * var(--u)); left: 50%; transform: translateX(-50%); width: max(170px, calc(275 * var(--u))); }
.mb-hero__head {
  position: absolute; left: 50%; top: calc(475 * var(--u)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(20 * var(--u));
  width: max(320px, calc(652 * var(--u)));
}
.mb-hero__sub { font-size: max(20px, calc(36 * var(--u))); line-height: 1.6; }
.mb-hero__line {
  position: absolute; left: 50%; top: calc(787 * var(--u)); transform: translateX(-50%);
  width: calc(1405 * var(--u)); height: 0;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .35);
}
.mb-meta {
  position: absolute; left: 0; right: 0; top: calc(886 * var(--u));
  display: flex; justify-content: center; gap: calc(64 * var(--u));
  font-size: max(13px, calc(20 * var(--u))); line-height: 1.6;
}
.mb-meta div { width: calc(350 * var(--u)); }
.mb-meta div:nth-child(3) { width: calc(321 * var(--u)); }
.mb-meta dt { font-weight: 700; letter-spacing: -.02em; }
.mb-meta dd { margin-top: calc(30 * var(--u)); letter-spacing: -.01em; }

/* ---------- Overview ---------- */
.mb-overview { position: relative; min-height: calc(628 * var(--u)); padding-left: calc(150 * var(--u)); }
.mb-overview__stones { position: absolute; left: calc(1082 * var(--u)); top: calc(142 * var(--u)); width: calc(609 * var(--u)); }

/* ---------- Deliverables / Approach ---------- */
.mb-facts { display: flex; gap: calc(80 * var(--u)); padding: 0 calc(150 * var(--u)); }
.mb-facts > div { display: flex; flex-direction: column; gap: calc(30 * var(--u)); width: calc(560 * var(--u)); }
.mb-facts h3 { font-family: var(--display); font-weight: 400; font-size: max(22px, calc(32 * var(--u))); line-height: 1.2; letter-spacing: -.02em; }
.mb-facts p { font-size: max(17px, calc(24 * var(--u))); line-height: 1.6; letter-spacing: -.01em; }

/* ---------- Process ---------- */
.mb-process { display: flex; flex-direction: column; gap: calc(36 * var(--u)); padding: calc(40 * var(--u)) calc(150 * var(--u)); }
.mb-diamond svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-diamond text { text-anchor: middle; }
.mb-dd-num text { font: 700 14px var(--serif); letter-spacing: .06em; fill: var(--mint); }
.mb-dd-name text { font: 400 30px var(--display); fill: #fff; }
.mb-dd-sub text { font: 400 14px var(--serif); fill: var(--sage); }
.mb-dd-end text { font: 700 14px var(--serif); letter-spacing: .04em; fill: var(--mint); }
.mb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); }
.mb-steps > div { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(22 * var(--u)); background: #171a17; border-radius: calc(16 * var(--u)); }
.mb-steps__head { font-weight: 700; font-size: max(12px, calc(14 * var(--u))); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.mb-steps ul { padding: 0; list-style: none; font-size: max(14px, calc(15 * var(--u))); line-height: 1.6; }

/* ---------- Phase headers ---------- */
.mb-phase { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: 0 calc(150 * var(--u)); }
.mb-phase__title { display: flex; align-items: flex-end; gap: calc(36 * var(--u)); font-family: var(--display); font-weight: 400; text-transform: uppercase; }
.mb-phase__title span:last-child { font-size: max(40px, calc(80 * var(--u))); line-height: 1.2; }
.mb-phase__num { font-size: max(72px, calc(150 * var(--u))); line-height: .95; color: rgba(140, 203, 160, .16); }
.mb-phase__sub { max-width: calc(900 * var(--u)); font-family: var(--display); font-size: max(26px, calc(40 * var(--u))); line-height: 1.2; }

/* ---------- Problem ---------- */
.mb-problem { display: grid; grid-template-columns: minmax(0, 883fr) minmax(0, 788fr); gap: calc(60 * var(--u)); align-items: start; padding: calc(50 * var(--u)) 0; margin-left: calc(-3 * var(--u)); }
.mb-problem__text { display: flex; flex-direction: column; gap: calc(25 * var(--u)); padding: 0 calc(150 * var(--u)); font-size: max(16px, calc(20 * var(--u))); line-height: 1.6; }
.mb-problem__text p { max-width: calc(560 * var(--u)); }
.mb-problem__img { width: 100%; border-radius: calc(50.19 * var(--u)) 0 0 calc(50.19 * var(--u)); }

/* ---------- Band ---------- */
.mb-band { position: relative; height: calc(328 * var(--u)); min-height: 180px; }
.mb-band img { position: absolute; left: 0; top: calc(-15 * var(--u)); width: 100%; height: calc(100% + 15 * var(--u)); object-fit: cover; }
.mb-band p { position: absolute; left: 0; right: 0; top: calc(110 * var(--u)); text-align: center; font-family: var(--display); font-size: max(22px, calc(36 * var(--u))); line-height: 1.2; padding: 0 20px; }

/* ---------- Insight ---------- */
.mb-insight { padding-left: calc(150 * var(--u)); min-height: calc(264 * var(--u)); }
.mb-insight .mb-col { gap: calc(29 * var(--u)); }

/* ---------- Quote strip ---------- */
.mb-quote { position: relative; display: grid; grid-template-columns: minmax(0, 488fr) minmax(0, 712fr) minmax(0, 531fr); height: calc(626 * var(--u)); min-height: 340px; background: #000; }
.mb-quote img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.mb-quote blockquote {
  position: absolute; left: calc(512 * var(--u)); top: calc(176 * var(--u));   /* centred on x = 844, like in Figma */
  width: calc(664 * var(--u));
  font-family: var(--display); font-size: max(20px, calc(32 * var(--u))); line-height: 1.2; text-align: center;
}

/* ---------- Background wrappers (a big background image behind several blocks) ---------- */
.mb-bgwrap { position: relative; display: flex; flex-direction: column; gap: calc(140 * var(--u)); }
.mb-bgwrap > * { position: relative; z-index: 1; }
.mb-bgwrap > .mb-bgwrap__bg { position: absolute; z-index: 0; left: 0; width: 100%; max-width: none; height: auto; pointer-events: none; }
.mb-bgwrap--concept > .mb-bgwrap__bg { top: calc(304 * var(--u)); }
.mb-bgwrap--phigital > .mb-bgwrap__bg { top: calc(421 * var(--u)); }

/* ---------- Concept ---------- */
.mb-concept { position: relative; min-height: calc(434 * var(--u)); }
.mb-concept__hand { position: absolute; left: calc(-121 * var(--u)); top: calc(21 * var(--u)); width: calc(571 * var(--u)); }   /* matches the hand + pinecone in Figma */
.mb-concept__text { display: flex; flex-direction: column; gap: calc(29 * var(--u)); margin-left: calc(790 * var(--u)); max-width: calc(560 * var(--u)); }
.mb-concept__name { font-family: var(--display); font-size: max(22px, calc(32 * var(--u))); line-height: 1.2; }

.mb-journey-text { padding-left: calc(150 * var(--u)); min-height: calc(428 * var(--u)); }
.mb-journey-text .mb-col { gap: calc(29 * var(--u)); }

/* ---------- Journey pictures ---------- */
.mb-journey { padding: 0 calc(150 * var(--u)); }
.mb-journey__map { position: relative; width: calc(1428 * var(--u)); height: calc(938 * var(--u)); }
.mb-journey__path { position: absolute; left: calc(113.9 * var(--u)); top: calc(-2.5 * var(--u)); width: calc(1124 * var(--u)); }
.mb-journey__img {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(271.9 * var(--u)); height: calc(435 * var(--u));
  object-fit: cover; border-radius: calc(30 * var(--u));
}

/* ---------- Phigital ---------- */
.mb-phigital { position: relative; min-height: calc(709 * var(--u)); padding-left: calc(150 * var(--u)); }
.mb-phigital__text { display: flex; flex-direction: column; gap: calc(36 * var(--u)); max-width: calc(560 * var(--u)); }
.mb-phigital__a, .mb-phigital__b { position: absolute; object-fit: cover; opacity: .8; border-radius: calc(20 * var(--u)); }
.mb-phigital__a { left: calc(150 * var(--u)); top: calc(204 * var(--u)); width: calc(657 * var(--u)); height: calc(439 * var(--u)); }
.mb-phigital__b { left: calc(1074 * var(--u)); top: 0; width: calc(504 * var(--u)); height: calc(645 * var(--u)); }

/* ---------- Building the system ---------- */
.mb-system { position: relative; min-height: calc(1171 * var(--u)); padding-left: calc(150 * var(--u)); }
.mb-system__text { max-width: calc(900 * var(--u)); }
.mb-list { margin: 0 !important; padding-left: calc(120 * var(--u) + 1.1em); list-style: disc; }
.mb-system__video { position: absolute; left: calc(309 * var(--u)); top: calc(433 * var(--u)); width: calc(1110 * var(--u)); }
.mb-system__video video { width: 100%; height: auto; aspect-ratio: 1110 / 624; object-fit: cover; }

/* ---------- Final product ---------- */
.mb-final { display: flex; flex-direction: column; gap: calc(140 * var(--u)); }
.mb-final__kicker { padding-left: calc(150 * var(--u)); }
.mb-intro { display: flex; flex-direction: column; align-items: center; gap: calc(23 * var(--u)); text-align: center; }
.mb-intro img { width: max(64px, calc(101 * var(--u))); }
.mb-intro__kicker { font-size: max(16px, calc(24 * var(--u))); line-height: 1.6; text-transform: uppercase; margin-bottom: calc(-23 * var(--u)) !important; }
.mb-form { position: relative; height: calc(802 * var(--u)); min-height: 420px; }
.mb-form__shape { position: absolute; left: 50%; top: calc(7 * var(--u)); transform: translateX(-50%); width: calc(863 * var(--u)); min-width: 420px; }
.mb-form__text {
  position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(218 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(29 * var(--u));
  width: max(300px, calc(626 * var(--u))); text-align: center;
}

/* ---------- Feature rows ---------- */
.mb-feature { display: flex; flex-direction: column; gap: calc(40 * var(--u)); padding: 0 calc(150 * var(--u)); }
.mb-feature__row { display: flex; align-items: flex-start; gap: calc(50 * var(--u)); }
.mb-feature__row--memory { gap: calc(130 * var(--u)); }
.mb-feature__text { max-width: calc(560 * var(--u)); }
.mb-feature__media { flex: none; }
.mb-feature__media video { width: 100%; height: 100%; object-fit: cover; }
.mb-feature__media--scan { width: calc(788 * var(--u)); height: calc(697 * var(--u)); }
.mb-feature__media--gallery {
  width: calc(502 * var(--u)); height: calc(663 * var(--u));
  border: 4px solid rgba(95, 147, 82, .5);
  border-radius: calc(25 * var(--u));
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.mb-feature__media--proto { width: calc(788 * var(--u)); height: calc(443 * var(--u)); }
.mb-feature { min-height: calc(var(--fh, 782) * var(--u)); }

/* ---------- Reflection ---------- */
.mb-reflection { position: relative; height: calc(964 * var(--u)); min-height: 620px; margin: 0 calc(7 * var(--u)); text-align: center; }
.mb-reflection__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-reflection__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: calc(110 * var(--u));
  padding-top: calc(142 * var(--u));
}
.mb-reflection__inner > div { display: flex; flex-direction: column; align-items: center; gap: calc(29 * var(--u)); width: max(300px, calc(626 * var(--u))); }
.mb-collab { padding: 0; list-style: none; }

/* ---------- Tablets ---------- */
@media (max-width: 1000px) {
  .mb-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .mb { gap: 64px; }
  .mb-bgwrap { gap: 64px; }
  .mb-overview, .mb-facts, .mb-process, .mb-phase, .mb-insight, .mb-journey-text, .mb-journey, .mb-phigital, .mb-system, .mb-feature, .mb-final__kicker { padding-left: 20px; padding-right: 20px; }
  .mb-col, .mb-lead, .mb-phase__sub, .mb-system__text, .mb-feature__text, .mb-problem__text p, .mb-phigital__text, .mb-concept__text { max-width: none; }

  .mb-hero { height: auto; min-height: 0; padding: 40px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .mb-hero__logo, .mb-hero__head, .mb-hero__line, .mb-meta { position: static; transform: none; }
  .mb-hero__head { width: 100%; margin-top: 120px; }
  .mb-hero__line { width: 100%; }
  .mb-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .mb-meta div, .mb-meta div:nth-child(3) { width: auto; }
  .mb-meta dd { margin-top: 6px; }

  .mb-overview { min-height: 0; }
  .mb-overview__stones { position: static; width: 220px; margin: 24px 0 0 auto; }
  .mb-facts { flex-direction: column; gap: 28px; }
  .mb-facts > div { width: auto; gap: 10px; }

  .mb-diamond { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
  .mb-diamond svg { width: 720px; }
  .mb-steps { grid-template-columns: 1fr; gap: 10px; }
  .mb-steps > div { padding: 18px; border-radius: 14px; }

  .mb-phase__title { gap: 12px; }
  .mb-phase__title span:last-child { font-size: 34px; }
  .mb-phase__num { font-size: 64px; }

  .mb-problem { grid-template-columns: 1fr; gap: 24px; margin: 0; padding: 0; }
  .mb-problem__text { padding: 0 20px; }
  .mb-problem__img { margin-left: 20px; width: calc(100% - 20px); border-radius: 24px 0 0 24px; }

  .mb-quote { grid-template-columns: 1fr 1fr 1fr; }
  .mb-quote blockquote { left: 20px; right: 20px; top: 50%; width: auto; margin-top: -3.6em; }

  .mb-concept { min-height: 0; padding: 0 20px; }
  .mb-concept__hand { position: static; width: 220px; margin: 0 0 12px -40px; }
  .mb-concept__text { margin-left: 0; max-width: none; }
  .mb-journey-text { min-height: 0; }

  .mb-journey__map { width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .mb-journey__path { display: none; }
  .mb-journey__img { position: static; width: 100%; height: auto; aspect-ratio: 272 / 435; border-radius: 18px; }
  .mb-journey__img:nth-child(odd) { margin-top: 36px; }

  .mb-phigital { min-height: 0; display: flex; flex-direction: column; gap: 16px; }
  .mb-phigital__a, .mb-phigital__b { position: static; width: 100%; height: auto; border-radius: 16px; }
  .mb-system { min-height: 0; display: flex; flex-direction: column; gap: 24px; }
  .mb-list { padding-left: 1.3em; }
  .mb-system__video { position: static; width: 100%; }

  .mb-form { height: 420px; }
  .mb-form__shape { top: 20px; width: 340px; min-width: 0; }
  .mb-form__text { top: 120px; }

  .mb-feature { min-height: 0; gap: 20px; }
  .mb-feature__row, .mb-feature__row--memory { flex-direction: column; gap: 20px; }
  .mb-feature__media--scan, .mb-feature__media--proto { width: 100%; height: auto; }
  .mb-feature__media--gallery { width: min(320px, 100%); height: auto; aspect-ratio: 502 / 663; }
  .mb-feature__row--memory .mb-feature__media { order: 2; }

  .mb-reflection { height: auto; min-height: 0; margin: 0; padding: 64px 20px; }
  .mb-reflection__inner { padding-top: 0; gap: 56px; }
  .mb-reflection__inner > div { width: 100%; }
}