/* ============================================================
   components.css — the m_* component library.
   Every component is built from tokens; states use is-*; JS/anim
   hooks use data-*. Specs extracted 1:1 from the 3 current designs.
   ============================================================ */

/* ---------------- m_btn (directional circle-fill hover) ----------------
   Buttons NEVER scale on hover — the only motion is the expanding circle.
   Filled markup:
     <a class="m_btn m_btn--primary" data-btn-hover>
       <span class="m_btn_bg"></span>
       <span class="m_btn_circle_wrap"><span class="m_btn_circle"></span></span>
       <span class="m_btn_text">Label</span>
     </a>
   data-btn-hover wires the cursor-direction origin (init-scripts.js).
   Themed bg/colour also sit on the base class as a fallback, so a plain
   .m_btn--primary with no inner layers still renders a solid pill.        */
.m_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 991px) { .m_btn { padding: var(--btn-pad-y-mob) var(--btn-pad-x-mob); } }

.m_btn_bg { position: absolute; inset: 0; z-index: -2; border-radius: inherit; transition: background-color .35s linear .25s; }
.m_btn_circle_wrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden; }
.m_btn_circle {
  position: absolute; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
  transition: transform .7s var(--ease-circle), background-color .4s var(--ease-circle);
}
.m_btn:hover .m_btn_circle,
.m_btn:focus-visible .m_btn_circle { transform: translate(-50%, -50%) scale(1.08) rotate(0.001deg); }
.m_btn_text, .m_btn_icon { position: relative; z-index: 1; transition: color .7s var(--ease-circle); }
.m_btn_icon { width: var(--btn-icon-size); height: var(--btn-icon-size); flex-shrink: 0; display: inline-block; }
.m_btn:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; }

/* size: large (hero CTAs) */
.m_btn--lg { font-size: 1.125rem; padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg); }

/* theme: primary — pomegranate -> oil */
.m_btn--primary { background: var(--cta-bg); color: var(--cta-text); }
.m_btn--primary .m_btn_bg { background: var(--cta-bg); }
.m_btn--primary .m_btn_circle { background: var(--text-oil); }
.m_btn--primary .m_btn_text, .m_btn--primary .m_btn_icon { color: var(--cta-text); }
.m_btn--primary:hover .m_btn_bg, .m_btn--primary:focus-visible .m_btn_bg { background: var(--text-oil); }

/* theme: secondary — pampas outline -> fills pomegranate, text -> white */
.m_btn--secondary { background: var(--surface-spring-wood); color: var(--text-primary); border: var(--bw-2) solid var(--border); transition: border-color .4s var(--ease-circle); }
.m_btn--secondary.is-ghost, .m_btn--secondary.is-ghost .m_btn_bg { background: transparent; }
.m_btn--secondary .m_btn_bg { background: var(--surface-spring-wood); }   /* #F8F6F2 */
.m_btn--secondary .m_btn_circle { background: var(--brand-pomegranate); }
.m_btn--secondary .m_btn_text, .m_btn--secondary .m_btn_icon { color: var(--text-primary); }
.m_btn--secondary:hover, .m_btn--secondary:focus-visible { border-color: var(--brand-pomegranate); }
.m_btn--secondary:hover .m_btn_bg, .m_btn--secondary:focus-visible .m_btn_bg { background: var(--brand-pomegranate); }
.m_btn--secondary:hover .m_btn_text, .m_btn--secondary:hover .m_btn_icon,
.m_btn--secondary:focus-visible .m_btn_text, .m_btn--secondary:focus-visible .m_btn_icon { color: var(--surface-white); }

/* theme: dark — oil -> pomegranate */
.m_btn--dark { background: var(--text-oil); color: var(--surface-white); }
.m_btn--dark .m_btn_bg { background: var(--text-oil); }
.m_btn--dark .m_btn_circle { background: var(--brand-pomegranate); }
.m_btn--dark .m_btn_text, .m_btn--dark .m_btn_icon { color: var(--surface-white); }
.m_btn--dark:hover .m_btn_bg, .m_btn--dark:focus-visible .m_btn_bg { background: var(--brand-pomegranate); }

/* theme: gradient — pomegranate→cabaret pill + soft shadow, circle fills to oil */
.m_btn--gradient { background: linear-gradient(131deg, var(--brand-pomegranate) 0%, var(--brand-cabaret) 100%); color: var(--cta-text); box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(226,57,18,0.25), 0 0.25rem 0.375rem -0.25rem rgba(226,57,18,0.25); }
.m_btn--gradient .m_btn_bg { background: linear-gradient(131deg, var(--brand-pomegranate) 0%, var(--brand-cabaret) 100%); }
.m_btn--gradient .m_btn_circle { background: var(--text-oil); }
.m_btn--gradient .m_btn_text, .m_btn--gradient .m_btn_icon { color: var(--cta-text); }
.m_btn--gradient:hover .m_btn_bg, .m_btn--gradient:focus-visible .m_btn_bg { background: var(--text-oil); }

/* ---- link-style buttons (no circle, no scale) ---- */
.m_btn--nav, .m_btn--text, .m_btn--nav-cta, .m_btn--icon { overflow: visible; isolation: auto; }
.m_btn--nav { font-family: var(--font-display); font-size: var(--t-nav-size); color: var(--text-secondary); padding: var(--space-8) var(--space-16); transition: color .3s var(--ease-circle); }
.m_btn--nav:hover { color: var(--accent); }
.m_btn--nav.is-active { color: var(--accent); }
.m_btn--text { color: var(--text-secondary); padding: var(--space-8) var(--space-16); transition: color .3s var(--ease-circle), opacity .3s var(--ease-circle); }
.m_btn--text:hover { color: var(--text-primary); }
.m_btn--text .m_icon { width: var(--btn-icon-size); height: var(--btn-icon-size); }

/* nav CTA — small filled pill, colour-only hover */
.m_btn--nav-cta { font-family: var(--font-display); font-size: var(--t-nav-size); background: var(--cta-bg); color: var(--cta-text); padding: var(--space-12) var(--space-24); transition: background-color .3s var(--ease-circle); }
.m_btn--nav-cta:hover { background: var(--text-oil); }

/* icon button — 40 circle, bg hover (no scale) */
.m_btn--icon { width: 2.5rem; height: 2.5rem; padding: 0; background: var(--surface-cararra-50); border: var(--bw-1) solid var(--border-moon-mist-50); transition: background-color .3s var(--ease-circle), border-color .3s var(--ease-circle); }
.m_btn--icon:hover { background: var(--surface-alt); border-color: var(--border-moon-mist); }
.m_btn--icon .m_icon { width: 1rem; height: 1rem; color: var(--text-secondary); }

/* mobile / no-hover: kill hover state, keep tap feedback */
@media (hover: none) {
  .m_btn .m_btn_circle, .m_btn .m_btn_bg, .m_btn .m_btn_text, .m_btn .m_btn_icon { transition: none; }
  .m_btn:hover .m_btn_circle, .m_btn:focus-visible .m_btn_circle { transform: translate(-50%, -50%) scale(0) rotate(0.001deg); }
  .m_btn--primary:hover .m_btn_bg { background: var(--cta-bg); }
  .m_btn--secondary:hover { border-color: var(--border); }
  .m_btn--secondary:hover .m_btn_bg { background: var(--surface-alt); }
  .m_btn--secondary:hover .m_btn_text, .m_btn--secondary:hover .m_btn_icon { color: var(--text-primary); }
  .m_btn--dark:hover .m_btn_bg { background: var(--text-oil); }
  .m_btn--nav:hover { color: var(--text-secondary); }
  .m_btn--nav-cta:hover { background: var(--cta-bg); }
  .m_btn:active { transform: scale(0.97); transition: transform .15s ease; }
}

/* ---------------- m_eyebrow (red pill label) ---------------- */
.m_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: var(--space-6) var(--space-16);
  border-radius: var(--radius-pill);
}

/* ---------------- m_section_head ---------------- */
.m_section_head { display: flex; flex-direction: column; gap: var(--space-16); }
.m_section_head--center { align-items: center; text-align: center; }
.m_section_head .m_section_head_title { font-family: var(--font-display); font-weight: var(--t-h2-weight); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); color: var(--text-primary); }
.m_section_head .m_section_head_sub { font-family: var(--font-sans); font-size: var(--t-bodylg-size); line-height: var(--t-bodylg-lh); color: var(--text-secondary); max-width: 35rem; }

/* ---------------- m_logo_row (brand marquee) ---------------- */
.m_logo_row { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.m_logo_row_track { display: flex; align-items: center; gap: var(--space-64); width: max-content; }
.m_logo_row[data-marquee] .m_logo_row_track { animation: m_marquee 28s linear infinite; }
.m_logo_row:hover .m_logo_row_track { animation-play-state: paused; }
.m_logo_row_item { color: var(--text-secondary); opacity: .7; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
@keyframes m_marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- m_focus_card ---------------- */
.m_focus_card {
  display: flex; flex-direction: column; gap: var(--space-16);
  background: var(--surface-card);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-32);
}
.m_focus_card_icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--surface-white); }
.m_focus_card_icon .m_icon { width: 1.375rem; height: 1.375rem; }
.m_focus_card_title { font-family: var(--font-display); font-weight: var(--t-h5-weight); font-size: var(--t-h5-size); line-height: var(--t-h5-lh); letter-spacing: var(--t-h5-ls); color: var(--text-primary); }
.m_focus_card_desc { font-family: var(--font-sans); font-size: var(--t-bodys-size); line-height: var(--t-bodys-lh); color: var(--text-secondary); }

/* ---------------- m_work_card ---------------- */
.m_work_card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); align-items: center; }
.m_work_card_media { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-alt); }
.m_work_card_media img { width: 100%; height: 100%; object-fit: cover; }
.m_work_card_body { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.m_work_card_brand { font-family: var(--font-sans); font-weight: 700; font-size: 0.875rem; color: var(--accent); }
.m_work_card_title { font-family: var(--font-display); font-weight: var(--t-h3-weight); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); color: var(--text-primary); }
.m_work_card_meta { font-family: var(--font-sans); font-size: var(--t-bodys-size); line-height: var(--t-bodys-lh); color: var(--text-secondary); }
@media (max-width: 991px) { .m_work_card { grid-template-columns: 1fr; gap: var(--space-24); } }

/* ---------------- m_stat ---------------- */
.m_stat { display: flex; flex-direction: column; gap: var(--space-4); }
.m_stat_num { font-family: var(--font-display); font-weight: var(--t-stat-weight); font-size: var(--t-stat-size); line-height: var(--t-stat-lh); letter-spacing: var(--t-stat-ls); color: var(--text-primary); }
.m_stat_label { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.25rem; color: var(--text-secondary); }

/* m_stat--chip — bordered mint card variant (off-palette greens, flagged in tokens) */
.m_stat--chip {
  gap: var(--space-8);
  padding: 1.3125rem 1.5625rem;
  border-radius: var(--radius-card);
  border: var(--bw-1) solid var(--accent-magic-mint-50);
  /* off-palette mint gradient (#ECFDF5 → #D1FAE5 50%) — recolour to warm before removing */
  background: linear-gradient(160deg, #ECFDF5 0%, rgba(209,250,229,0.5) 100%);
  overflow: hidden;
}
/* Sora is wider than the design's Manrope — 1.625rem + nowrap keeps long labels on one line */
.m_stat--chip .m_stat_num { font-size: 1.625rem; line-height: 1.25; letter-spacing: -0.01875rem; color: var(--accent-green-haze); white-space: nowrap; }
.m_stat--chip .m_stat_label { font-size: 1rem; line-height: 1.3; color: var(--accent-green-haze); opacity: .7; }

/* ---------------- m_nav (Figma 2001:597 / mobile 4447:482) ---------------- */
.m_nav { position: sticky; top: 0; z-index: 50; transition: transform .3s ease; }
.m_nav.is-hidden { transform: translateY(-100%); }
.m_nav.is-open { transform: none; }   /* never transform while open → fixed curtain stays viewport-relative */
/* scrim lives on a pseudo so .m_nav itself never has backdrop-filter (which would make it a
   containing block and break the fixed mobile curtain once scrolled). */
.m_nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); transition: opacity .3s ease; }
.m_nav.is-scrolled::before { opacity: 1; }
html.is-menu-open { overflow: hidden; }   /* lock page scroll while the curtain is open (works without Lenis too) */
.m_nav .u-container { padding-inline: var(--space-32); }   /* content 1088, margin 176 @1440 */
.m_nav_inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); height: 5rem; }
.m_nav_logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 2rem; color: var(--text-primary); }
.m_nav_links { display: flex; align-items: center; gap: var(--space-4); }
.m_btn--nav.is-active { background: var(--accent-soft); color: var(--accent); }

/* Let's Talk — small gradient pill (no circle-fill) */
.m_nav_cta { font-family: var(--font-display); font-size: var(--t-nav-size); line-height: var(--t-nav-lh); padding: 0.625rem 1.25rem; margin-left: var(--space-4);
  color: var(--surface-white); overflow: visible; isolation: auto;
  background: linear-gradient(137deg, var(--brand-pomegranate) 0%, var(--brand-cabaret) 100%);
  box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(226,57,18,0.2), 0 0.125rem 0.25rem -0.125rem rgba(226,57,18,0.2); transition: filter .3s var(--ease-circle); }
.m_nav_cta:hover { filter: brightness(1.06); }

/* burger → cross */
.m_nav_burger { display: none; position: relative; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; flex: none; background: transparent; border: 0; cursor: pointer; }
.m_nav_burger span { position: absolute; width: 1.375rem; height: 0.125rem; border-radius: 0.125rem; background: var(--text-primary); transition: transform .4s var(--ease-circle); }
.m_nav_burger span:nth-child(1) { transform: translateY(-0.25rem); }
.m_nav_burger span:nth-child(2) { transform: translateY(0.25rem); }
.m_nav.is-open .m_nav_burger span:nth-child(1) { transform: rotate(45deg); }
.m_nav.is-open .m_nav_burger span:nth-child(2) { transform: rotate(-45deg); }

@media (max-width: 991px) {
  .m_nav_inner { height: 3.5rem; }
  .m_nav_logo { font-size: 1.125rem; line-height: 1.6875rem; position: relative; z-index: 2; }
  .m_nav_burger { display: inline-flex; z-index: 2; }
  /* full-height curtain that drops from the top */
  .m_nav_links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-16);
    padding: 5.5rem var(--space-24) var(--space-24); background: var(--canvas);
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform .45s var(--ease-circle), opacity .35s ease, visibility 0s linear .45s;
  }
  .m_nav.is-open .m_nav_links { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .45s var(--ease-circle), opacity .35s ease; }
  .m_nav.is-open { background: var(--canvas); }
  .m_nav_links .m_btn--nav { font-family: var(--font-display); font-size: 1.625rem; padding: var(--space-8) 0; color: var(--text-primary); }
  .m_nav_links .m_btn--nav.is-active { background: transparent; color: var(--accent); }
  .m_nav_cta { margin: var(--space-8) 0 0; font-size: 1rem; padding: 0.75rem 1.5rem; }
}

/* ---------------- m_footer (Figma 2001:540) ---------------- */
.m_footer { background: #FBF3EF; display: flex; flex-direction: column; gap: var(--space-80); padding-top: var(--space-80); border-top: 1px solid var(--border-moon-mist); }   /* footer surface — distinct warm tone; top divider 1px #DAD5C8 (literal 1px, not the rem-scaled --bw-1) */
.m_footer .u-container { padding-inline: var(--space-32); }   /* content 1088, margin 176 @1440 */
.m_footer_top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32); align-items: start; }
.m_footer_brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.m_footer_brand_name { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; color: var(--text-primary); }
.m_footer_desc { max-width: 24rem; }
.m_footer .m_footer_brand .m_btn--gradient { min-height: 3rem; }
.m_footer .m_footer_brand .m_btn_text { line-height: var(--t-body-lh); }
.m_footer .m_footer_brand .m_btn_icon { width: 1.125rem; height: 1.125rem; }
.m_footer_cols { display: flex; justify-content: flex-end; gap: var(--space-64); }
.m_footer_col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.m_footer_col_title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.025rem; color: var(--text-primary); }
.m_footer_nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.m_footer_link { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: var(--text-secondary); transition: color .2s var(--ease-circle); }
.m_footer_link:hover { color: var(--accent); }
.m_footer_socials { display: flex; gap: var(--space-12); }
.m_footer_socials .m_btn--icon .m_icon { width: 1.125rem; height: 1.125rem; }
.m_footer_bottom { border-top: var(--bw-1) solid var(--border-moon-mist-50); }
.m_footer_bottom_inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; padding-block: var(--space-24); }
.m_footer_meta { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-secondary); }
.m_footer_crafted { display: flex; align-items: center; gap: var(--space-4); }
.m_footer_heart { color: var(--accent); }

@media (max-width: 991px) {
  .m_footer { gap: var(--space-48); padding-top: var(--space-48); }
  .m_footer_top { grid-template-columns: 1fr; gap: var(--space-32); }
  .m_footer_cols { justify-content: flex-start; gap: var(--space-48); }
}
@media (max-width: 479px) {
  .m_footer_bottom_inner { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
}

/* ---------------- scroll-reveal (data-reveal) ---------------- */
[data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------------- m_hero (home hero v2 — Figma 4536:15 / mobile 4547:524) ---------------- */
.m_hero { position: relative; overflow: hidden; background: var(--canvas); padding-block: var(--space-64); }
.m_hero_inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2.5rem; padding-inline: var(--space-32); }

/* top row: text column (37.5rem) + portrait (fills rest) */
.m_hero_row { display: flex; gap: var(--space-80); align-items: flex-start; }
.m_hero_content { flex: 0 0 37.5rem; max-width: 37.5rem; display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
.m_hero_eyebrow { padding-block: var(--space-8); gap: var(--space-8); }
.m_hero_eyebrow .m_icon { width: 1rem; height: 1rem; flex: none; }

/* headline — Playfair serif; "Elizaveta" on its own line in accent */
.m_hero_heading { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-8); }
.m_hero_h1 { font-family: var(--font-serif); font-weight: 700; font-size: 5rem; line-height: 1; letter-spacing: 0.04375rem; color: var(--text-primary); }
.m_hero_subline { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; line-height: 1.1; letter-spacing: -0.05625rem; color: var(--text-primary); }

.m_hero_bio { display: flex; flex-direction: column; gap: var(--space-32); max-width: 30rem; }
.m_hero_bio p { font-family: var(--font-sans); font-weight: 400; font-size: 0.9375rem; line-height: 1.3; color: var(--text-secondary); }
.m_hero_bio strong { font-weight: 700; color: var(--text-secondary); }

/* actions — h50, gradient + off-white outline */
.m_hero_actions { display: flex; gap: var(--space-16); align-items: stretch; padding-top: var(--space-16); flex-wrap: wrap; }
.m_hero_actions .m_btn { min-height: 3.125rem; padding-block: 0; font-size: 1rem; }
.m_hero_actions .m_btn--gradient { padding-inline: 1.625rem; }
.m_hero_actions .m_btn--secondary { padding-inline: 1.75rem; }   /* bg from base m_btn--secondary (#F8F6F2) */
.m_hero_actions .m_btn_text { line-height: var(--t-body-lh); }
.m_hero_actions .m_btn_icon { width: 1.25rem; height: 1.25rem; }

/* portrait media: backdrop glow + removebg portrait */
.m_hero_media { flex: 1 1 0; min-width: 0; align-self: stretch; position: relative; min-height: 29.875rem; overflow: visible; }
.m_hero_media_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }   /* single composited illustration (liza-hero.webp) — contain = full image, no crop */

/* stat bar — white rounded bar, 4 stats + 2px dividers */
.m_stat_bar { display: flex; align-items: center; gap: var(--space-16); background: #fdfdfc; border-radius: var(--radius-card); padding: var(--space-24); overflow: hidden; box-shadow: 0 1.5625rem 3.125rem -0.75rem rgba(32,23,19,0.05); }
.m_stat_bar_item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--space-16); }
.m_stat_bar_icon { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: #fdf2ee; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-pomegranate); }
.m_stat_bar_icon svg { display: block; height: 1.5rem; width: auto; max-width: 1.75rem; }
.m_stat_bar_text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.m_stat_bar_num { font-family: var(--font-sans); font-weight: 500; font-size: 1.125rem; line-height: 1.15; color: #1b1b1b; white-space: nowrap; }
.m_stat_bar_label { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.3; color: #1b1b1b; opacity: .7; }
.m_stat_bar_div { flex: none; align-self: stretch; width: 0.125rem; background: rgba(235,232,224,.5); border-radius: 0.0625rem; }

/* desktop (>=992) — full-viewport hero, content vertically centred under the transparent nav */
@media (min-width: 992px) {
  .m_hero { min-height: 100vh; margin-top: -5rem; padding-top: 5rem;
    display: flex; flex-direction: column; justify-content: center; }
}

/* tablet (<=991) — stack, portrait on top */
@media (max-width: 991px) {
  .m_hero { padding-block: var(--space-48); }
  .m_hero_row { flex-direction: column; gap: var(--space-32); }
  .m_hero_content { flex: 1 1 auto; max-width: none; width: 100%; }
  .m_hero_media { order: -1; flex: 0 0 auto; align-self: center; width: 100%; min-height: 0; aspect-ratio: 408 / 478; }
}
/* mobile (<=479) — Figma 4547:524 */
@media (max-width: 479px) {
  .m_hero { padding-block: var(--space-32); }
  .m_hero_inner { gap: 2.5rem; padding-inline: 2.25rem; }
  .m_hero_content { gap: var(--space-12); }
  .m_hero_eyebrow { display: none; }                  /* no eyebrow on mobile (Figma 4547:524) */
  /* portrait → small thumbnail tucked top-right beside the H1 */
  .m_hero_row { position: relative; }
  .m_hero_media { position: absolute; order: 0; top: 0; right: 0; z-index: 2; flex: none; align-self: auto;
    width: 5.25rem; aspect-ratio: 77 / 101; min-height: 0; overflow: hidden; border-radius: var(--radius-sm);
    transform: scale(0.70); transform-origin: top right; }   /* ~30% smaller, kept tucked top-right */
  .m_hero_media_img { object-fit: cover; }            /* thumbnail frames the face on mobile */
  .m_hero_heading { gap: var(--space-16); padding-top: 0; }
  .m_hero_h1 { font-size: 2.625rem; line-height: 2.5rem; letter-spacing: -0.0625rem; }
  .m_hero_subline { font-size: 1.375rem; line-height: 1.8125rem; letter-spacing: -0.045rem; }
  .m_hero_bio { gap: var(--space-16); }
  .m_hero_bio p { font-size: 0.8125rem; line-height: 1.18; }
  .m_hero_actions { gap: var(--space-8); }
  .m_hero_actions .m_btn { min-height: 3rem; font-size: 0.9375rem; }
  .m_hero_actions .m_btn--gradient { flex: 0 0 auto; padding-inline: 1.25rem; }
  .m_hero_actions .m_btn--secondary { flex: 1 1 0; padding-inline: 1.375rem; }
  .m_stat_bar { flex-direction: column; align-items: stretch; padding: 1.25rem; }
  .m_stat_bar_div { width: 100%; height: 0.0625rem; align-self: auto; }
  .m_stat_bar_num { font-size: 1rem; }
  .m_stat_bar_label { font-size: 0.875rem; }
}

/* ---------------- m_brands (logo marquee — Figma 2008:549 / mobile 4447:258) ---------------- */
.m_brands { position: relative; display: flex; flex-direction: column; gap: var(--space-64); padding-block: 2.5rem 5rem;
  background: #FBF7F4; }   /* user-specified v2 surface */
.m_brands_head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); }
/* brand logo inside the marquee — monochrome, tint = text/soft (#2D2D2D @ .8) */
.m_logo_row_logo { display: block; flex: none; height: 2rem; width: auto; color: var(--text-soft); }

@media (max-width: 991px) {
  .m_brands { padding-block: var(--space-80) var(--space-48); gap: var(--space-48); }
}
@media (max-width: 479px) {
  .m_brands { padding-block: 3.75rem 2.5rem; gap: var(--space-32); }   /* ×0.5 of desktop 120/80 (Figma 4447:257) */
  .m_brands .m_logo_row_track { gap: var(--space-32); }           /* logos closer on mobile; height stays 32 */
}

/* ---------------- m_caps v2 (Strategy. Story. Impact. — Figma 4536:100 / mobile 4547:609) ---------------- */
.m_caps { position: relative; padding-block: var(--space-80);
  background: #FBF7F4;   /* unified site surface */
  overflow-x: clip; }    /* clips the overflow-visible carousel at the section edge */
.m_caps .u-container { padding-inline: var(--space-32); }
.m_caps_inner { display: flex; gap: 2.5rem; align-items: center; }

/* left column: header + carousel nav */
.m_caps_head { flex: 0 0 25rem; max-width: 25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; position: relative; z-index: 2; }
.m_caps_head_group { display: flex; flex-direction: column; gap: var(--space-24); }
.m_caps_head_text { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.m_caps_h2 { font-family: var(--font-serif); font-weight: 700; font-size: 3rem; line-height: 1.2; letter-spacing: -0.075rem; color: var(--text-primary); }
.m_caps_sub { font-family: var(--font-sans); font-weight: 400; font-size: 1.125rem; line-height: 1.4; color: var(--text-secondary); max-width: 21rem; }
.m_caps_nav { display: flex; gap: var(--space-12); }
.m_caps_arrow { display: inline-flex; align-items: center; justify-content: center; width: 3.125rem; height: 3.125rem; border-radius: 50%;
  background: #fbf7f4; border: var(--bw-2) solid var(--border-moon-mist); color: var(--text-primary); cursor: pointer;
  transition: border-color .2s var(--ease-circle), color .2s var(--ease-circle), opacity .2s ease; }
.m_caps_arrow:hover { border-color: var(--brand-pomegranate); color: var(--brand-pomegranate); }
.m_caps_arrow svg { width: 1.25rem; height: 1.25rem; }
.m_caps_arrow.m_caps_prev svg { transform: rotate(180deg); }
.m_caps_arrow.swiper-button-disabled { opacity: .4; cursor: default; }

/* right column: Swiper carousel of cards — true overflow:visible (neighbour cards peek + shadows show);
   the opaque .m_caps_head (z-index 2) hides any looped slides that drift left under the heading */
.m_caps_carousel { flex: 1 1 0; min-width: 0; overflow: visible; }
.m_caps_carousel .swiper-slide { width: 21.25rem; height: auto; transition-property: opacity; transition-timing-function: ease; }   /* 340px cards; opacity fade driven by Swiper progress (duration set in JS) */
.m_cap_card { display: flex; flex-direction: column; gap: var(--space-24); min-height: 17.5rem; height: 100%; padding: 1.0625rem; overflow: hidden;
  border-radius: var(--radius-card); border: var(--bw-1) solid rgba(218,213,200,0.6); background: var(--surface-spring-wood);
  box-shadow: 0 1.5625rem 1.5625rem rgba(32,23,19,0.05); }
.m_cap_card_icon { width: 6.25rem; height: 6.25rem; object-fit: contain; flex: none; }
.m_cap_card_body { display: flex; flex-direction: column; gap: var(--space-12); }
.m_cap_card_title { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.03125rem; color: var(--text-primary); }
.m_cap_card_desc { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.3; color: var(--text-secondary); }

@media (max-width: 991px) {
  .m_caps { padding-block: var(--space-48); }
  .m_caps_inner { flex-direction: column; align-items: stretch; gap: var(--space-32); }
  .m_caps_head { flex: 0 0 auto; max-width: none; }
  .m_caps_nav { display: none; }                       /* arrows hidden — swipe (Figma 4547:609) */
  .m_caps_h2 { font-size: 1.75rem; }                   /* mobile H2 28 */
  .m_caps_sub { font-size: 1rem; max-width: none; }
  .m_caps_carousel { flex: 0 0 auto; width: 100%; overflow: visible; }   /* width:100% keeps Swiper swipeable; overflow visible → cards peek (exit card fades via opacity); section overflow-x:clip stops page scroll */
  .m_caps_carousel .swiper-slide { width: 16.5rem; }   /* 264px cards on mobile */
  .m_cap_card { gap: var(--space-12); min-height: 13.75rem; }   /* floor breaks Swiper height collapse; grows to content via stretch */
  .m_cap_card_icon { width: 4rem; height: 4rem; }      /* 64px on mobile */
}

/* ---------------- m_portfolio + m_case (Featured Work — Figma 2001:457) ---------------- */
.m_portfolio { position: relative; padding-block: var(--space-16); }
.m_portfolio .u-container { padding-inline: var(--space-32); display: flex; flex-direction: column; gap: var(--space-64); }
.m_portfolio_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; }
.m_portfolio_head_text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); max-width: 27.5rem; }  /* 440px — wraps H2 like Figma */
.m_portfolio_title { padding-top: var(--space-4); font-family: var(--font-serif); font-weight: 700; line-height: 1.1; }  /* v2: Playfair Bold 48, -1.2px (h2 token) */
.m_portfolio_head .m_btn { padding-block: 0.875rem; min-height: 3.25rem; }
.m_portfolio_head .m_btn_icon { width: 1.125rem; height: 1.125rem; }
.m_portfolio_head .m_btn_text { line-height: var(--t-body-lh); }

/* flat grid: image col-1 (spans), text parts col-2 (desktop). On mobile the
   same source order — head → media → q → tags → cta — stacks 1-col (Figma 4447:343). */
.m_case { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-64); row-gap: var(--space-4); }
/* decorative 1px divider centred in the gap between cases (Figma 4536:151, moon-mist-60) */
.m_case + .m_case::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-0.5 * var(--space-64)); height: 1px; background: rgba(218,213,200,0.6); pointer-events: none; }
.m_case_media { grid-column: 1; grid-row: 1 / 5; align-self: center; position: relative; aspect-ratio: 544 / 384; border-radius: var(--radius-card); overflow: hidden; }
.m_case_media::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(238,236,231,0.4); border: var(--bw-2) dashed var(--border-moon-mist); }  /* cararra-40 placeholder frame */
.m_case_media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.m_case_head { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.m_case_brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -0.03125rem; }  /* v2: Playfair SemiBold 20/24, -0.5px */
.m_case_q { grid-column: 2; grid-row: 2; padding-top: var(--space-12); font-family: var(--font-serif); font-weight: 700; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.05625rem; }  /* v2: Playfair Bold 36/1.1, -0.9px */
.m_case_tags { grid-column: 2; grid-row: 3; padding-top: var(--space-16); padding-bottom: var(--space-24); }
.m_case_cta { grid-column: 2; grid-row: 4; justify-self: start; align-self: start; }
.m_case .m_btn { min-height: 3rem; }
.m_case .m_btn_text { line-height: var(--t-body-lh); }

@media (max-width: 991px) {
  /* header centered, View All hidden (Figma 4547:659) */
  .m_portfolio_head { justify-content: center; }
  .m_portfolio_head_text { align-items: center; text-align: center; max-width: none; }
  .m_portfolio_head .m_btn { display: none; }

  /* case stacks: image → question → tags → [brand+sub | button] bottom row */
  .m_case { grid-template-columns: 1fr auto; column-gap: var(--space-16); row-gap: var(--space-12);
    grid-template-areas: "media media" "q q" "tags tags" "brand cta"; }
  .m_case_media { grid-area: media; aspect-ratio: 303 / 160; }   /* shorter on mobile (Figma) */
  .m_case_q { grid-area: q; padding-top: var(--space-4); font-size: 1.25rem; }
  .m_case_tags { grid-area: tags; padding-top: 0; padding-bottom: var(--space-8); }
  .m_case_head { grid-area: brand; align-self: center; }
  .m_case_cta { grid-area: cta; align-self: center; justify-self: end; }
}
@media (max-width: 479px) {
  .m_portfolio .u-container { gap: var(--space-32); }
  .m_case + .m_case::before { top: calc(-0.5 * var(--space-32)); }   /* re-centre divider in the smaller mobile gap */
  .m_case_q { font-size: 1.125rem; line-height: 1.2; }   /* ~18px (Figma 4547:684) */
  .m_case_brand { font-size: 1.125rem; }                 /* ~18px mobile brand */
}

/* ---------------- m_cta (v2 gradient banner — Figma 4536:223) ---------------- */
.m_cta { padding-block: var(--space-64); }
.m_cta .u-container { padding-inline: var(--space-32); }   /* aligns banner with section content (1088) */
.m_eyebrow--on-gradient { background: rgba(255,255,255,0.1); color: var(--surface-white); }
.m_cta_banner { position: relative; display: flex; align-items: center; gap: var(--space-24);
  padding: 2.4375rem;   /* 39px */
  border-radius: 1.5rem; border: var(--bw-1) solid var(--border-moon-mist-50); overflow: hidden;
  /* warm gradient — colours sampled from the Figma CTA mesh asset (off-palette, decorative) */
  background:
    radial-gradient(130% 170% at 82% 8%, rgba(255,201,170,0.5) 0%, rgba(255,201,170,0) 48%),
    linear-gradient(100deg, #ff8a5f 0%, #ff6f58 38%, #ff7a6b 63%, #fba892 100%); }
.m_cta_main { display: flex; align-items: center; gap: var(--space-24); flex: 1 1 0; min-width: 0; }
.m_cta_icon { width: 6.25rem; height: 6.25rem; flex: none; object-fit: contain; }   /* 100px chat illustration */
.m_cta_text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); min-width: 0; }
.m_cta_h2 { font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.05625rem; color: var(--surface-white); }  /* Playfair Bold 28, -0.9px, white */
.m_cta_sub { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.3; color: var(--surface-white); max-width: 36rem; }  /* Outfit 14/1.3 white */
.m_cta_btn { flex: none; align-self: center; min-height: 3rem; }   /* oil pill (m_btn--dark) */

@media (max-width: 991px) {
  /* centered vertical stack: icon → eyebrow → H2 → sub → button (Figma 4547:729) */
  .m_cta_banner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-24); padding: var(--space-48) var(--space-32); }
  .m_cta_main { flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); }
  .m_cta_text { align-items: center; text-align: center; }
  .m_cta_btn { align-self: auto; }
}
@media (max-width: 479px) {
  .m_cta .u-container { padding-inline: var(--page-margin); }   /* 20px mobile gutter (Figma 4547:729) */
  .m_cta_banner { padding: var(--space-48) var(--space-24); border-radius: var(--radius-card); }
  .m_cta_icon { width: 4rem; height: 4rem; }
  .m_cta_h2 { font-size: 1.5rem; }   /* 24px mobile */
}

/* ---------------- m_case_hero (case study hero — Figma 4233:650 / mobile 4476:214) ---------------- */
.m_case_hero { padding-block: var(--space-48) var(--space-64); }
.m_case_hero .u-container { padding-inline: var(--space-32); }
.m_case_hero_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-64); }

/* back link (arrow + text, sand-dune) */
.m_case_hero_back { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: calc(-1 * var(--space-16));
  padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: var(--text-secondary);
  transition: color .25s var(--ease-circle); }
.m_case_hero_back:hover { color: var(--text-primary); }
.m_case_hero_back_icon { display: inline-flex; flex: none; }
.m_case_hero_back_icon svg { width: 1.125rem; height: 1.125rem; transition: transform .25s var(--ease-circle); }
.m_case_hero_back:hover .m_case_hero_back_icon svg { transform: translateX(-0.1875rem); }

/* header: brand + sub label, big serif H1, sub */
.m_case_hero_header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); width: 100%; }
.m_case_hero_brandgroup { display: flex; flex-direction: column; gap: var(--space-4); }
.m_case_hero_brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -0.03125rem; color: var(--accent); }  /* Playfair SemiBold 20/24, -0.5px */
.m_case_hero_brandsub { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.3; color: var(--text-secondary); }
.m_case_hero_h1 { width: 100%; max-width: 66rem; font-family: var(--font-serif); font-weight: 700; font-size: 3rem; line-height: 1.2; letter-spacing: -0.075rem; color: var(--text-primary); }  /* Playfair Bold 48/1.2, -1.2px; ~1056px → 2 lines (Figma text node 1055) */
.m_case_hero_sub { width: 100%; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; line-height: 2rem; color: var(--text-secondary); }  /* Outfit 24/32; one line on desktop, wraps on mobile */

/* meta chips — bordered pills, label (grey) + value (accent) */
.m_case_meta { display: flex; flex-wrap: wrap; gap: var(--space-16); width: 100%; margin: 0; }
.m_case_meta_item { display: flex; align-items: center; gap: 2.5rem; padding: 0.8125rem 1.0625rem; border-radius: 1rem;
  background: var(--surface-spring-wood); border: var(--bw-1) solid rgba(218,213,200,0.4); }
.m_case_meta_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.3; color: var(--text-secondary); white-space: nowrap; }
.m_case_meta_value { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.3; color: var(--accent); white-space: nowrap; }

@media (max-width: 991px) {
  .m_case_hero_inner { gap: var(--space-48); }
  .m_case_hero_h1 { font-size: 2.5rem; }   /* 40px tablet */
  .m_case_hero_sub { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (max-width: 479px) {
  .m_case_hero { padding-block: var(--space-32) var(--space-48); }
  .m_case_hero .u-container { padding-inline: var(--page-margin); }   /* 20px gutter (Figma 4476:214) */
  .m_case_hero_inner { gap: var(--space-32); }
  .m_case_hero_back { margin-left: 0; padding-inline: 0; }
  .m_case_hero_h1 { font-size: 1.75rem; line-height: 1.25; }   /* 28px mobile */
  .m_case_hero_sub { font-size: 1rem; line-height: 1.5rem; }
  /* chips stack full-width, label over value */
  .m_case_meta { flex-direction: column; }
  .m_case_meta_item { flex-direction: column; align-items: flex-start; gap: var(--space-12); width: 100%; padding: 0.8125rem 1.0625rem; }
}

/* ---------------- m_case_challenge (case "Challenge" section — Figma 4255:205 / mobile 4476:265) ---------------- */
.m_case_challenge { padding-block: var(--space-48); }
.m_case_challenge .u-container { padding-inline: var(--space-32); }
.m_case_challenge_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 100%; }

/* section eyebrow — Playfair Regular 30, accent */
.m_case_eyebrow { font-family: var(--font-serif); font-weight: 400; font-size: 1.875rem; line-height: 1; color: var(--accent); }

/* accent-bar H2 (Playfair ExtraBold 22) */
.m_case_h2_row { display: flex; align-items: center; gap: var(--space-12); width: 100%; }
.m_case_h2_bar { flex: none; width: 0.25rem; height: 2rem; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--brand-pomegranate) 0%, var(--brand-cabaret) 100%); }
.m_case_h2 { font-family: var(--font-serif); font-weight: 800; font-size: 1.375rem; line-height: 1.25; color: var(--text-primary); }

/* intro + problem grouped with a tight gap */
.m_case_challenge_group { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; }

/* intro — left-bordered 2-col: copy + dresses image */
.m_case_intro { width: 100%; border-left: var(--bw-2) solid var(--border-moon-mist-50); padding-left: 1.125rem; }
.m_case_intro_row { display: flex; gap: var(--space-64); align-items: flex-start; }
.m_case_intro_text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.08rem; }
.m_case_intro_p { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--text-primary); }
.m_case_intro_p strong { font-weight: 700; }
.m_case_intro_p--muted { color: var(--text-secondary); }
.m_case_intro_media { flex: none; width: 26.625rem; height: 20.875rem; }
.m_case_intro_media img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; }

/* strategic problem card */
.m_case_problem { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; padding: 1.5rem; border-radius: 1.25rem; background: var(--surface-spring-wood);
  box-shadow: 0 1.25rem 0.78125rem rgba(226,57,18,0.05), 0 0.5rem 0.3125rem rgba(226,57,18,0.05); }
.m_case_problem_h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.031875rem; color: var(--text-primary); }
.m_case_problem_text { display: flex; flex-direction: column; gap: 0.875rem; }
.m_case_problem_text p { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.55; color: var(--text-secondary); }
.m_case_problem_text strong { font-weight: 700; }

/* TUC variant — Challenge as a 2-col row: bordered lede + problem card side-by-side (Figma 4358:266) */
.m_case_challenge_split { display: flex; gap: var(--space-32); align-items: stretch; width: 100%; }
.m_case_challenge_lede { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.08rem; border-left: var(--bw-2) solid var(--border-moon-mist-50); padding-left: 1.125rem; }
.m_case_challenge_split .m_case_problem { flex: 1 1 0; min-width: 0; width: auto; }
.m_case_problem--alt .m_case_problem_h3 { font-family: var(--font-sans); }

/* "from the deck" slide */
.m_case_deck { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4375rem; width: 100%; overflow: hidden;
  padding: 2.0625rem; border-radius: 0.1875rem; border: var(--bw-1) solid var(--border-moon-mist); background: rgba(226,57,18,0.02); }
.m_case_deck::before { content: ""; position: absolute; top: 0; left: 0; width: 2.75rem; height: 0.1875rem; background: var(--brand-pomegranate); }
.m_case_deck_head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); width: 100%; padding-bottom: 0.9375rem; border-bottom: var(--bw-1) solid var(--border-moon-mist); }
.m_case_deck_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.65625rem; line-height: 1.6; letter-spacing: 0.065625rem; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.m_case_deck_label--dark { color: var(--text-primary); }
.m_case_deck_slide { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 1.5rem 1.125rem;
  background: var(--surface-white); border: var(--bw-1) solid var(--border-moon-mist); border-radius: 0.125rem; }
.m_case_deck_title { font-family: var(--font-display); font-weight: 600; font-size: 0.886rem; line-height: 1.25; color: var(--text-primary); text-align: center; }
.m_case_deck_circles { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; justify-content: center; }
.m_case_deck_circle { flex: none; width: 10.4375rem; height: 10.4375rem; border-radius: 50%; background: var(--brand-cabaret);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; }
.m_case_deck_circle span { font-family: var(--font-sans); font-weight: 400; font-size: 0.8rem; line-height: 1.35; color: var(--surface-white); }

@media (max-width: 991px) {
  .m_case_intro_row { flex-direction: column; gap: var(--space-32); }
  .m_case_intro_media { width: 100%; height: auto; aspect-ratio: 852 / 668; max-width: 30rem; }
  .m_case_challenge_split { flex-direction: column; gap: var(--space-32); }
}
@media (max-width: 479px) {
  .m_case_challenge { padding-block: var(--space-32); }
  .m_case_challenge .u-container { padding-inline: var(--page-margin); }
  .m_case_eyebrow { font-size: 1.5rem; }
  .m_case_intro_media { max-width: none; }
  .m_case_problem { padding: 1.25rem; }
  .m_case_deck { padding: 1.25rem; }
  .m_case_deck_head { flex-direction: column; gap: var(--space-4); }
  .m_case_deck_label { white-space: normal; }
  .m_case_deck_slide { padding: 1.5rem 1rem; }
  /* circles stack into an overlapping vertical column (Figma 4476:265) */
  .m_case_deck_circles { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .m_case_deck_circle + .m_case_deck_circle { margin-top: -1.25rem; }
}

/* ---------------- m_case_approach (case "Approach" 3-card section — Figma 4261:205 / mobile 4476:327) ---------------- */
.m_case_approach { padding-block: var(--space-48); }
.m_case_approach .u-container { padding-inline: var(--space-32); }
.m_case_approach_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 100%; }

.m_case_cards { display: flex; align-items: stretch; gap: var(--space-24); width: 100%; }
.m_case_card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: 1.5rem;
  background: var(--surface-spring-wood); border: var(--bw-1) solid var(--border-moon-mist); border-radius: 1.25rem;
  box-shadow: 0 1.25rem 1.5625rem -0.3125rem rgba(226,57,18,0.05), 0 0.5rem 0.625rem -0.375rem rgba(226,57,18,0.05); }
.m_case_card_step { display: flex; align-items: center; gap: var(--space-8); }
.m_case_card_dot { flex: none; width: 0.5rem; height: 0.5rem; background: var(--accent); }
.m_case_card_num { font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; line-height: 1.333; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--accent); }
.m_case_card_title { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.27; color: var(--text-primary); }  /* Sora SemiBold 22/28 */
.m_case_card_body { font-family: var(--font-sans); font-weight: 400; font-size: 0.9375rem; line-height: 1.4; color: var(--text-secondary); }
.m_case_card_body strong { font-weight: 700; color: var(--text-primary); }
.m_case_card_body strong.u-color-accent { color: var(--accent); }       /* override the oil default for accent bolds */
.m_case_card_body strong.u-color-cabaret { color: var(--brand-cabaret); }
.m_case_card_rule { flex: none; width: 2.75rem; height: 0.1875rem; background: var(--accent); margin-top: var(--space-4); }

/* TUC variant — Approach cards carry a 48px line-icon, a Playfair title and a roomier body (Figma 4358:328) */
.m_case_card_icon { flex: none; width: 3rem; height: 3rem; color: var(--accent); }
.m_case_card_icon svg { display: block; width: 100%; height: 100%; }
.m_case_approach--tuc .m_case_card_title { font-family: var(--font-serif); }
.m_case_approach--tuc .m_case_card_body { line-height: 1.6; }

@media (max-width: 991px) {
  .m_case_cards { flex-direction: column; }
}
@media (max-width: 479px) {
  .m_case_approach { padding-block: var(--space-32); }
  .m_case_approach .u-container { padding-inline: var(--page-margin); }
  .m_case_approach_inner { gap: var(--space-24); }
  .m_case_card { padding: 1.25rem; }
}

/* ---------------- m_case_insight (case "Insight" section — Figma 4281:781 / mobile 4476:355) ---------------- */
.m_case_insight { padding-block: var(--space-48); }
.m_case_insight .u-container { padding-inline: var(--space-32); }
.m_case_insight_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-64); width: 100%; }

/* head: eyebrow + intro (704 max) */
.m_case_insight_head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 100%; }
.m_case_insight_intro { display: flex; flex-direction: column; gap: 1.0875rem; max-width: 44rem; }
.m_case_insight_p { font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); }  /* Outfit 17/27.2 */

/* wide pink-history image */
.m_case_insight_media { width: 100%; aspect-ratio: 1978 / 458; overflow: hidden; }
.m_case_insight_media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* exhibit — labels + 4 colour swatches */
.m_case_exhibit { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.m_case_exhibit_head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); padding-bottom: var(--space-8); border-bottom: var(--bw-1) solid var(--border-moon-mist); }
.m_case_exhibit_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.65625rem; line-height: 1.6; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.m_case_exhibit_label--dark { color: var(--text-primary); }
.m_case_exhibit_swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); width: 100%; }
.m_case_swatch { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.m_case_swatch_color { width: 100%; height: 5.625rem; }  /* 90px */
.m_case_swatch_color--this { border: var(--bw-2) solid var(--accent); }
.m_case_swatch_era { font-family: var(--font-sans); font-weight: 400; font-size: 0.65625rem; line-height: 1.6; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--text-secondary); }
.m_case_swatch_name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.375; letter-spacing: -0.005rem; color: var(--text-primary); }  /* Sora SemiBold 16/22 */

/* closing pull-quote + para */
.m_case_insight_close { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; }
.m_case_pullquote { display: flex; align-items: stretch; gap: var(--space-16); width: 100%; margin: 0; }   /* zero the <blockquote> UA margin */
.m_case_pullquote_bar { flex: none; width: 0.25rem; background: var(--accent); }
.m_case_pullquote_text { flex: 1 1 0; min-width: 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.8; letter-spacing: -0.0125rem; color: var(--text-primary); }  /* Playfair SemiBold 20/36 */

/* TUC variant — Insight is heading + copy only (no media/exhibit), tighter rhythm (Figma 4358:356) */
.m_case_insight--tuc .m_case_insight_inner { gap: 2.5rem; }
.m_case_insight--tuc .m_case_insight_head { gap: 1.25rem; }

@media (max-width: 991px) {
  .m_case_exhibit_swatches { grid-template-columns: repeat(2, 1fr); gap: var(--space-24) var(--space-16); }
}
@media (max-width: 479px) {
  .m_case_insight { padding-block: var(--space-32); }
  .m_case_insight .u-container { padding-inline: var(--page-margin); }
  .m_case_insight_inner { gap: var(--space-48); }
  .m_case_insight_head { gap: var(--space-24); }
  .m_case_exhibit_head { flex-direction: column; gap: var(--space-4); }
  .m_case_exhibit_label { white-space: normal; }
  .m_case_insight_close { gap: var(--space-24); }
}

/* ---------------- m_case_dirs (TUC "The directions" exhibit rows — Figma 4358:394 / mobile 4492:333) ---------------- */
.m_case_dirs_section { padding-block: var(--space-48); }
.m_case_dirs_section .u-container { padding-inline: var(--space-32); }
.m_case_dirs_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 100%; }
.m_case_dirs_lead { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; width: 100%; max-width: 47.5rem; }   /* heading + intro, max 760 */

.m_case_dirs { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.m_case_dir { display: flex; align-items: center; gap: 1.75rem; width: 100%; padding: 1.25rem; border-radius: 1rem; background: var(--surface-off-white); }
.m_case_dir--featured { background: var(--brand-pomegranate-10); }
.m_case_dir_icon { flex: none; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: var(--surface-peach); display: flex; align-items: center; justify-content: center; }
.m_case_dir_icon svg { display: block; width: 2.5rem; height: 2.5rem; color: var(--accent); }
.m_case_dir_head { flex: none; width: 15.625rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }   /* 250 */
.m_case_dir_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--accent); }   /* Outfit 11 */
.m_case_dir_title { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--text-primary); }   /* Playfair SemiBold 24 */
.m_case_dir_divider { flex: none; align-self: stretch; width: var(--bw-1); background: var(--border-moon-mist); }
.m_case_dir_body { flex: 1 1 0; min-width: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--text-secondary); }   /* Outfit 16/1.5 */

@media (max-width: 991px) {
  /* rows become vertical: icon → head → horizontal rule → body (Figma 4492:333) */
  .m_case_dir { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .m_case_dir_head { width: 100%; flex: none; }
  .m_case_dir_divider { align-self: stretch; width: 100%; height: var(--bw-1); }
  .m_case_dir_body { flex: none; width: 100%; }
}
@media (max-width: 479px) {
  .m_case_dirs_section { padding-block: var(--space-32); }
  .m_case_dirs_section .u-container { padding-inline: var(--page-margin); }
  .m_case_dir { gap: var(--space-12); padding: 1rem; }
  /* exhibit caption: keep "EXHIBIT" on one line, drop the right-hand label */
  .m_case_dirs_section .m_case_exhibit_head { flex-direction: row; }
  .m_case_dirs_section .m_case_exhibit_label--dark { display: none; }
}

/* ---------------- m_case_proof (TUC "Outcome" shipped-redesign gallery — Figma 4358:415 / mobile 4492:373) ---------------- */
.m_case_proof { padding-block: var(--space-48); }
.m_case_proof .u-container { padding-inline: var(--space-32); }
.m_case_proof_inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; width: 100%; }   /* gap 18 */
.m_case_proof_intro { display: flex; flex-direction: column; gap: 1.0625rem; max-width: 44rem; width: 100%; }   /* 2 × m_case_insight_p */
.m_case_proof_row { display: flex; gap: var(--space-16); width: 100%; align-items: flex-end; }
.m_case_proof_cell { flex: 1 1 0; min-width: 0; margin: 0; }   /* zero the <figure> UA margin */
.m_case_proof_cell img { display: block; width: 100%; height: auto; }
.m_case_proof_caption { font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); width: 100%; }   /* Outfit 12 */

@media (max-width: 479px) {
  .m_case_proof { padding-block: var(--space-32); }
  .m_case_proof .u-container { padding-inline: var(--page-margin); }
  /* posters stay 2-up; landscape banners stack (Figma 4492:373) */
  .m_case_proof_row--banners { flex-direction: column; align-items: stretch; }
}

/* ---------------- m_case_solution (case "Solution" section — Figma 4265:206 / mobile 4476:393) ---------------- */
.m_case_solution { padding-block: var(--space-48); }
.m_case_solution .u-container { padding-inline: var(--space-32); }
.m_case_solution_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 100%; }
.m_case_solution_intro { width: 100%; max-width: 44rem; }
.m_case_solution_media { width: 100%; aspect-ratio: 2142 / 734; overflow: hidden; }
.m_case_solution_media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* final outcome — heading + video card (Kinescope embed) */
.m_case_outcome { display: flex; flex-direction: column; gap: 1.875rem; width: 100%; }
.m_case_outcome_h3 { margin-top: 2.375rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.06; letter-spacing: -0.0275rem; color: var(--text-primary); }  /* Sora SemiBold 20/21.2, -0.44px */
.m_case_video_card { width: 100%; padding: var(--bw-1); border: var(--bw-1) solid var(--border-moon-mist); border-radius: 1.25rem; background: var(--surface-spring-wood); overflow: hidden; }
.m_case_video_meta { display: flex; justify-content: space-between; align-items: center; padding: 0.96875rem 1.125rem; }
.m_case_video_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.03rem; color: var(--text-primary); }
.m_case_video_label--muted { color: var(--text-secondary); }

@media (max-width: 479px) {
  .m_case_solution { padding-block: var(--space-32); }
  .m_case_solution .u-container { padding-inline: var(--page-margin); }
  .m_case_outcome_h3 { margin-top: var(--space-16); }
}

/* ---------------- m_case_results (case "Outcome" metrics section — Figma 4281:585 / mobile 4476:414) ---------------- */
.m_case_results { padding-block: var(--space-48); }
.m_case_results .u-container { padding-inline: var(--space-32); }
.m_case_results_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); width: 100%; }
.m_case_results_text { display: flex; flex-direction: column; gap: 1.0625rem; max-width: 44rem; }
.m_case_results_outro { width: 100%; max-width: 44rem; }
.m_case_stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; width: 100%; }
.m_case_stat { display: flex; flex-direction: column; gap: 0.5625rem; padding: 1.3125rem 1.1875rem 2.0625rem;
  border: var(--bw-1) solid var(--border-moon-mist); border-radius: 1.25rem; background: var(--surface-spring-wood);
  box-shadow: 0 1.25rem 0.78125rem rgba(226,57,18,0.05), 0 0.5rem 0.3125rem rgba(226,57,18,0.05); }
.m_case_stat_num { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--brand-cabaret); }  /* Sora SemiBold 40 */
.m_case_stat--weak .m_case_stat_num { color: var(--text-secondary); }   /* below-norm metrics */
.m_case_stat_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.78125rem; line-height: 1.456; color: var(--text-secondary); }

@media (max-width: 991px) {
  .m_case_stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .m_case_results { padding-block: var(--space-32); }
  .m_case_results .u-container { padding-inline: var(--page-margin); }
}

/* ---------------- m_case_role (quote card — Figma 4302:205 / mobile 4476:466) ---------------- */
.m_case_role { padding-block: var(--space-48); }
.m_case_role .u-container { padding-inline: var(--space-32); }
.m_case_quote_card { width: 100%; padding: 7.1875rem 8rem; border: var(--bw-1) solid var(--border-moon-mist); border-radius: 1.25rem; background: var(--surface-spring-wood); }
.m_case_quote_inner { position: relative; max-width: 46.625rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1.1875rem; }
.m_case_quote_eyebrow { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--accent); }  /* Playfair 24 */
.m_case_quote_text { position: relative; font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); }  /* Outfit 17/27.2 */
.m_case_quote_text::before, .m_case_quote_text::after { content: "\201C"; position: absolute; font-family: var(--font-sans); font-size: 3.375rem; line-height: 1; color: var(--text-secondary); pointer-events: none; }
.m_case_quote_text::before { top: -1.25rem; left: -1.75rem; }
.m_case_quote_text::after { right: -1.25rem; bottom: -2.75rem; transform: rotate(180deg); }

/* ---------------- m_case_resp (role & responsibility — Figma 4352:7825 / mobile 4476:475) ---------------- */
.m_case_resp { padding-block: var(--space-48); }
.m_case_resp .u-container { padding-inline: var(--space-32); }
.m_case_resp_inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.175rem; width: 100%; }
.m_case_resp_h2 { max-width: 35.125rem; }  /* 562 */
.m_case_resp_cols { display: flex; gap: 2.5rem; align-items: flex-start; width: 100%; padding-top: var(--space-12); }
.m_case_resp_col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.m_case_resp_item { display: flex; gap: 2.5rem; align-items: flex-start; padding-block: 1.9375rem; border-top: var(--bw-1) solid var(--border-moon-mist); }
.m_case_resp_col .m_case_resp_item:last-child { border-bottom: var(--bw-1) solid var(--border-moon-mist); }
.m_case_resp_num { flex: none; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.6; color: var(--text-primary); }  /* Sora SemiBold 19/30.4 */
.m_case_resp_text { flex: 1 1 0; min-width: 0; font-family: var(--font-sans); font-weight: 400; font-size: 0.96875rem; line-height: 1.6; color: var(--text-secondary); }  /* Outfit 15.5/24.8 */

@media (max-width: 991px) {
  .m_case_quote_card { padding: 3.5rem 3rem; }
  .m_case_resp_cols { flex-direction: column; gap: 0; padding-top: var(--space-8); }
  .m_case_resp_col .m_case_resp_item:last-child { border-bottom: 0; }
  .m_case_resp_col:last-child .m_case_resp_item:last-child { border-bottom: var(--bw-1) solid var(--border-moon-mist); }
}
@media (max-width: 479px) {
  .m_case_role { padding-block: var(--space-32); }
  .m_case_role .u-container { padding-inline: var(--page-margin); }
  .m_case_quote_card { padding: 2.5rem 1.5rem; }
  .m_case_quote_text::before { left: -0.75rem; top: -1.5rem; }
  .m_case_quote_text::after { right: -0.25rem; }
  .m_case_resp { padding-block: var(--space-32); }
  .m_case_resp .u-container { padding-inline: var(--page-margin); }
  .m_case_resp_item { gap: var(--space-16); padding-block: var(--space-24); }
}

/* ---------------- m_case_next (next-case CTA + credit — Figma 4305:206 / mobile 4476:513) ---------------- */
.m_case_next { padding-block: var(--space-48); }
.m_case_next .u-container { padding-inline: var(--space-32); }
.m_case_next_inner { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; }
.m_case_next_row { display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: flex-end; justify-content: space-between; width: 100%; padding-bottom: 3.0625rem; border-bottom: var(--bw-1) solid var(--border-moon-mist); }
.m_case_next_label_group { display: flex; flex-direction: column; gap: var(--space-16); }
.m_case_next_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; line-height: 1.667; color: var(--text-secondary); }
.m_case_next_title { font-family: var(--font-serif); font-weight: 600; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01875rem; color: var(--text-primary); }  /* Playfair SemiBold 30/36 */
.m_case_next_link { flex: none; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.6; color: var(--brand-cabaret); padding-bottom: 0.375rem; border-bottom: var(--bw-1) solid var(--border-moon-mist); transition: color .25s var(--ease-circle), border-color .25s var(--ease-circle); }  /* Sora SemiBold 16.8 */
.m_case_next_row:hover .m_case_next_link { color: var(--accent); border-color: var(--brand-pomegranate); }
.m_case_next_credit { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); justify-content: space-between; width: 100%; }
.m_case_next_credit_item { font-family: var(--font-sans); font-weight: 400; font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.0325rem; color: var(--text-secondary); }

@media (max-width: 479px) {
  .m_case_next { padding-block: var(--space-32); }
  .m_case_next .u-container { padding-inline: var(--page-margin); }
  .m_case_next_row { flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-bottom: var(--space-32); }
  .m_case_next_title { font-size: 1.5rem; }
  .m_case_next_credit { flex-direction: column; gap: var(--space-8); }
}

/* ---------------- m_case_hero split variant — text + pack thumbnail (TUC, Figma 4358:215 / mobile 4492:214) ---------------- */
.m_case_hero_split { display: flex; gap: var(--space-24); align-items: flex-start; width: 100%; }
.m_case_hero_text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.m_case_hero_text .m_case_hero_h1 { max-width: 47.5rem; }   /* 760 within the split column */
.m_case_hero_text .m_case_hero_sub { max-width: 48rem; }    /* 768 */
.m_case_hero_thumb { flex: none; width: 13.25rem; height: 18.75rem; overflow: hidden; }   /* 212×300 */
.m_case_hero_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .m_case_hero_split { flex-direction: column; gap: var(--space-32); }
  .m_case_hero_thumb { width: 100%; max-width: 26.5rem; height: auto; aspect-ratio: 424 / 600; }   /* cap at native width; text → image order */
}

/* ============================================================
   ECCO case page — section-specific additions (Figma 4180:250+)
   Reuses m_case_eyebrow / m_case_h2_row / m_case_exhibit / m_case_pullquote / colour utils.
   ============================================================ */

/* — Challenge: bordered lede | divider | brief aside (Figma 2008:1832 / mobile 4618:264) — */
.m_case_intro_split { display: flex; gap: var(--space-16); align-items: flex-start; width: 100%; }
.m_case_intro_lede { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.m_case_intro_lede p { font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--text-primary); }   /* Outfit 17/27.2 oil */
.m_case_intro_divide { flex: none; align-self: stretch; width: 0.25rem; border-radius: var(--radius-pill); background: var(--border-moon-mist-50); }
.m_case_intro_aside { flex: none; width: 30.0625rem; display: flex; flex-direction: column; gap: 0.875rem; }   /* 481 / gap 14 */
.m_case_intro_aside_h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.25rem; line-height: 1.23; letter-spacing: -0.031875rem; color: var(--text-primary); }   /* Outfit 20/24.59 -0.51 */
.m_case_intro_aside_body { display: flex; flex-direction: column; gap: 0.75rem; }
.m_case_intro_aside_body p { font-family: var(--font-sans); font-weight: 400; font-size: 0.96875rem; line-height: 1.6; color: var(--text-secondary); }   /* Outfit 15.5/24.8 */

/* — Full-width image band (Figma 4337:7710 liza_case_ecco_1) — */
.m_case_fullimg { width: 100%; overflow: hidden; border-radius: 0.75rem; }
.m_case_fullimg img { display: block; width: 100%; height: auto; }

@media (max-width: 991px) {
  .m_case_intro_split { flex-direction: column; gap: var(--space-24); }
  .m_case_intro_divide { display: none; }
  .m_case_intro_aside { width: 100%; }
}
.m_case_imgband { padding-block: var(--space-48); }
.m_case_imgband .u-container { padding-inline: var(--space-32); }
@media (max-width: 479px) {
  .m_case_imgband { padding-block: var(--space-32); }
  .m_case_imgband .u-container { padding-inline: var(--page-margin); }
}

/* — Generic ECCO section wrapper (eyebrow + h2 + content, gap 32) — */
.m_case_sec { padding-block: var(--space-48); }
.m_case_sec .u-container { padding-inline: var(--space-32); }
.m_case_sec_inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 100%; }
.m_case_h2--wide { max-width: 47.6rem; }   /* 761 */

/* — The reframe (Figma 4184:206 / mobile 4618:282) — */
.m_case_reframe_block { display: flex; flex-direction: column; gap: 1.5875rem; width: 100%; border-top: var(--bw-1) solid rgba(62,49,39,0.2); padding-top: 2.74rem; }
.m_case_statement { font-family: var(--font-sans); font-weight: 400; font-size: 1.25rem; line-height: 1.18; color: var(--accent); }   /* Inter 20 → Outfit (system font) */
.m_case_intro_split--bare { gap: var(--space-24); }
.m_case_reframe_col { flex: 1 1 0; min-width: 0; }
.m_case_reframe_col p { font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); }   /* Outfit 17/27.2 */

@media (max-width: 479px) {
  .m_case_sec { padding-block: var(--space-32); }
  .m_case_sec .u-container { padding-inline: var(--page-margin); }
  .m_case_sec_inner { gap: var(--space-24); }
  .m_case_reframe_block { padding-top: var(--space-24); }
}

/* — The insight: text + funnel exhibit card (Figma 4194:205 / mobile 4618:297) — */
.m_case_insightx_row { display: flex; gap: var(--space-48); align-items: flex-start; justify-content: space-between; width: 100%; }
.m_case_insightx_text { flex: 1 1 0; min-width: 0; max-width: 36rem; display: flex; flex-direction: column; gap: 2.075rem; }   /* ~515, gap 33.19 */
.m_case_insightx_p { font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); }   /* Outfit 17/27.2 */
.m_case_exhibitcard { flex: 0 0 30.375rem; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  padding: 1.625rem 1.625rem 1rem; border-radius: 0.1875rem; border: var(--bw-1) solid var(--border-moon-mist); background: var(--surface-pampas); }   /* 486 */
.m_case_exhibitcard::before { content: ""; position: absolute; top: 0; left: 0; width: 2.1875rem; height: 0.1875rem; background: var(--accent); }
.m_case_exhibitcard_head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); width: 100%; padding-bottom: 0.75rem; border-bottom: var(--bw-1) solid var(--border-moon-mist); }
.m_case_exhibitcard_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.06875rem; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.m_case_exhibitcard_label--dark { color: var(--text-primary); }
.m_case_funnel { display: flex; flex-direction: column; align-items: center; width: 16.7rem; max-width: 100%; }   /* 267 */
.m_case_funnel_bar { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; line-height: 1.35; color: var(--surface-white); text-align: center; padding: 0.625rem 0.5rem; }
.m_case_funnel_bar--1 { width: 8.35rem; background: var(--accent); border-radius: 0.1875rem 0.1875rem 0 0; }
.m_case_funnel_bar--2 { width: 12.375rem; background: var(--brand-cabaret); }
.m_case_funnel_bar--3 { width: 100%; background: var(--text-primary); border-radius: 0 0 0.1875rem 0.1875rem; }
.m_case_funnel_foot { display: flex; justify-content: space-between; width: 100%; padding-top: 0.625rem; }
.m_case_funnel_foot span { font-family: var(--font-sans); font-weight: 400; font-size: 0.6875rem; line-height: 1.4; color: var(--text-secondary); }

@media (max-width: 991px) {
  .m_case_insightx_row { flex-direction: column; gap: var(--space-32); }
  .m_case_insightx_text { max-width: none; width: 100%; }
  .m_case_exhibitcard { flex: none; width: 100%; max-width: 30.375rem; align-self: center; }
}

/* — Process / roadmap (Figma 4209:205 / mobile 4618:324) — */
.m_case_lead { max-width: 36.875rem; }   /* 590 lead paragraph */
.m_case_process_block { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }
.m_case_roadimg { width: 100%; }
.m_case_roadimg img { display: block; width: 100%; height: auto; mix-blend-mode: darken; }
.m_case_exhibitcard--full { flex: none; width: 100%; align-items: stretch; gap: var(--space-24); padding: 2.0625rem; }
.m_case_exhibitcard--full::before { width: 2.75rem; height: 0.1875rem; }
.m_case_method_body { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; }
.m_case_method_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5625rem; width: 100%; }
.m_case_method_cell { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.75rem 0.8125rem; min-height: 3.9rem;
  background: var(--surface-pampas); border: var(--bw-1) solid var(--border-moon-mist); border-radius: 0.125rem;
  font-family: var(--font-sans); font-weight: 400; font-size: 0.75rem; line-height: 1.6; color: var(--text-primary); }
.m_case_method_cluster { width: 100%; text-align: center; padding-block: 0.25rem; font-family: var(--font-sans); font-weight: 400; font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); }
.m_case_method_bar { width: 100%; text-align: center; padding: 0.9375rem; border-radius: 0.1875rem; background: var(--text-primary);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.6; color: var(--surface-off-white); }

@media (max-width: 479px) {
  .m_case_method_grid { grid-template-columns: 1fr; }
  .m_case_exhibitcard--full { padding: 1.25rem; }
}

/* — The recommended platform: cabaret eyebrow + 3 pillars (Figma 4212:206 / mobile 4618:362) — */
.m_case_eyebrow--cabaret { color: var(--brand-cabaret); }
.m_case_body16 { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--text-secondary); max-width: 39.2rem; }   /* 16/25.6, max 627 */
.m_case_pillars { display: flex; gap: var(--space-24); align-items: flex-start; width: 100%; border-top: var(--bw-2) solid var(--border-moon-mist-50); padding-top: var(--space-32); padding-left: var(--space-16); }
.m_case_pillar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.m_case_pillar_h { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.6; color: var(--brand-cabaret); }   /* Sora SemiBold 15 */
.m_case_pillar_p { font-family: var(--font-sans); font-weight: 400; font-size: 0.90625rem; line-height: 1.6; color: var(--text-secondary); }   /* Outfit 14.5/23.2 */

@media (max-width: 991px) {
  .m_case_pillars { flex-direction: column; gap: var(--space-24); padding-left: 0; }
  .m_case_pillars .m_case_intro_divide { display: none; }
}

/* — Recommended concept, as worked: exhibit-image cards (Figma 4217:205 / mobile 4618:387) — */
.m_case_exhibit_img { width: 100%; overflow: hidden; border-radius: 0.25rem; }
.m_case_exhibit_img img { display: block; width: 100%; height: auto; }

@media (max-width: 479px) {
  .m_case_exhibitcard_head { flex-direction: column; gap: var(--space-4); }
  .m_case_exhibitcard_label { white-space: normal; }
}

/* — The territories explored: semantic-map exhibit + 3 territory cards (Figma 4220:205 / mobile 4618:410) — */
.m_case_terrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); width: 100%; align-items: stretch; }
.m_case_terr { display: flex; flex-direction: column; gap: 0.8125rem; padding: 1.5625rem 1.4375rem; background: var(--surface-pampas); border: var(--bw-1) solid var(--border-moon-mist); border-radius: 0.1875rem; }
.m_case_terr_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.65625rem; line-height: 1.6; letter-spacing: 0.065625rem; text-transform: uppercase; color: var(--text-secondary); }
.m_case_terr_label--rec { color: var(--accent); }
.m_case_terr_title { font-family: var(--font-display); font-weight: 600; font-size: 1.31875rem; line-height: 1.2; color: var(--text-primary); }   /* Sora SemiBold 21.1/25.34 */
.m_case_terr_pill { align-self: flex-start; padding: 0.3125rem 0.625rem; border-radius: 0.125rem; background: var(--accent);
  font-family: var(--font-sans); font-weight: 400; font-size: 0.625rem; line-height: 1.6; letter-spacing: 0.08125rem; text-transform: uppercase; color: var(--surface-white); }
.m_case_terr_foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding-top: 0.875rem; border-top: var(--bw-1) solid var(--border-moon-mist); }
.m_case_terr_enemy_label { font-family: var(--font-sans); font-weight: 400; font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.04125rem; text-transform: uppercase; color: var(--text-primary); }
.m_case_terr_enemy_p { font-family: var(--font-sans); font-weight: 400; font-size: 0.8125rem; line-height: 1.5; color: var(--text-secondary); }

@media (max-width: 991px) {
  .m_case_terrs { grid-template-columns: 1fr; }
}

/* — My role & zone of responsibility: label | description rows (Figma 4220:371 / mobile 4618:483) — */
.m_case_roles { display: flex; flex-direction: column; width: 100%; padding-top: 0.95rem; }
.m_case_role_row { display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: start; padding-block: 1.9375rem; border-top: var(--bw-1) solid var(--border-moon-mist); }
.m_case_role_row:last-child { border-bottom: var(--bw-1) solid var(--border-moon-mist); }
.m_case_role_label { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.6; color: var(--text-primary); }   /* Sora SemiBold 19/30.4 */
.m_case_role_desc { font-family: var(--font-sans); font-weight: 400; font-size: 0.96875rem; line-height: 1.6; color: var(--text-secondary); }   /* Outfit 15.5/24.8 */

@media (max-width: 991px) {
  .m_case_role_row { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-24); }
}

/* ============================================================
   Image zoom button + lightbox (reusable, data-zoom) — Figma 4638:7
   ============================================================ */
.m_case_exhibit_img, .m_case_roadimg, .m_case_fullimg { position: relative; }
.m_zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 0.5rem; background: rgba(32,23,19,0.55); color: var(--surface-white); cursor: pointer; z-index: 2;
  transition: background .2s ease, transform .2s ease; }
.m_zoom:hover { background: rgba(32,23,19,0.8); transform: translate(-50%, -50%) scale(1.06); }
.m_zoom svg { width: 1.25rem; height: 1.25rem; display: block; }

.m_lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(18,13,11,0.94); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.m_lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.m_lightbox_img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 0.375rem;
  transform: scale(0.97); transition: transform .25s var(--ease-circle, ease); }
.m_lightbox.is-open .m_lightbox_img { transform: scale(1); }
.m_lightbox_close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--surface-white); cursor: pointer; transition: background .2s ease; }
.m_lightbox_close:hover { background: rgba(255,255,255,0.26); }
.m_lightbox_close svg { width: 1.125rem; height: 1.125rem; display: block; }
html.is-lightbox-open { overflow: hidden; }

/* zoom magnifier: mobile/tablet only — hidden on desktop (images are large & readable there) */
@media (min-width: 992px) { .m_zoom { display: none; } }