/*
Theme Name: Modern Innovation Editorial
Theme URI: https://moderninnovationproduction.com
Description: Editorial Documentary Cinema redesign for Modern Innovation. Child theme of modernseok. Film first, Oxblood and Bone palette, editorial serif display type, restrained motion.
Author: Modern Innovation
Version: 1.3.0
Template: modernseok
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: mip-editorial
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --mip-dark: #171211;
  --mip-dark-deeper: #120E0D;
  --mip-dark-surface: #221B18;
  --mip-ink: #211915;
  --mip-bone: #F3EEE6;
  --mip-bone-deep: #E9E1D3;
  --mip-bone-form: #EDE6D9;
  --mip-oxblood: #8B302B;
  --mip-oxblood-hover: #6E2521;
  --mip-oxblood-quiet: #7A2A25;
  --mip-clay: #C88468;
  --mip-taupe: #A89D94;
  --mip-muted-light: #6B5F55;
  --mip-muted-dark: #B3A79D;
  --mip-lead-dark: #D9CFC3;

  --mip-line-light: rgba(33, 25, 21, 0.18);
  --mip-line-light-soft: rgba(33, 25, 21, 0.14);
  --mip-line-light-faint: rgba(33, 25, 21, 0.12);
  --mip-line-dark: rgba(243, 238, 230, 0.12);
  --mip-line-dark-mid: rgba(243, 238, 230, 0.16);
  --mip-line-dark-strong: rgba(243, 238, 230, 0.2);

  --mip-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mip-sans: 'Archivo', Helvetica, Arial, sans-serif;

  --mip-gutter: clamp(20px, 5vw, 72px);
  --mip-nav-h: 74px;
  --mip-section-y: clamp(64px, 8vw, 112px);
  --mip-section-y-lg: clamp(68px, 9vw, 120px);
  --mip-wide: 1400px;
  --mip-mid: 1240px;
  --mip-narrow: 1100px;
  --mip-radius: 10px;
  --mip-ease: cubic-bezier(.22, .61, .21, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html.mip-html,
body.mip-body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.mip-body {
  font-family: var(--mip-sans);
  font-size: 15.5px;
  line-height: 1.7;
  background: var(--mip-dark);
  color: var(--mip-bone);
  overflow-x: hidden;
}

body.mip-body.mip-page-light {
  background: var(--mip-bone);
  color: var(--mip-ink);
}

.mip-main {
  display: block;
  overflow-x: hidden;
}

/* :where() keeps these at zero specificity for the selector inside, so any
   component class defined later wins without needing !important. */
.mip-body :where(a) { color: inherit; text-decoration: none; }
.mip-body :where(a:hover) { color: var(--mip-clay); }

.mip-body ::selection { background: var(--mip-oxblood); color: var(--mip-bone); }

.mip-body a:focus-visible,
.mip-body button:focus-visible,
.mip-body input:focus-visible,
.mip-body textarea:focus-visible,
.mip-body select:focus-visible {
  outline: 2px solid var(--mip-clay);
  outline-offset: 3px;
  border-radius: 2px;
}

.mip-body img,
.mip-body video { max-width: 100%; }

/* Components below set display, so [hidden] needs to win. */
.mip-body [hidden] { display: none !important; }

.mip-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--mip-oxblood);
  color: var(--mip-bone);
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.mip-skip-link:focus { left: 0; color: var(--mip-bone); }

.mip-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.mip-section { padding: var(--mip-section-y) var(--mip-gutter); }
.mip-section--lg { padding: var(--mip-section-y-lg) var(--mip-gutter); }
.mip-section--tight { padding: clamp(48px, 6vw, 72px) var(--mip-gutter); }
.mip-section--flush-top { padding-top: 0; }

.mip-section--dark { background: var(--mip-dark); color: var(--mip-bone); }
.mip-section--light { background: var(--mip-bone); color: var(--mip-ink); }
.mip-section--quiet { background: var(--mip-oxblood-quiet); color: var(--mip-bone); }
.mip-section--cta { background: var(--mip-oxblood); color: var(--mip-bone); }

.mip-shell { max-width: var(--mip-wide); margin: 0 auto; }
.mip-shell--mid { max-width: var(--mip-mid); margin: 0 auto; }
.mip-shell--narrow { max-width: var(--mip-narrow); margin: 0 auto; }

.mip-bleed { margin: 0 calc(50% - 50vw); }

/* ==========================================================================
   4. Type scale
   ========================================================================== */

.mip-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 20px;
}
.mip-eyebrow--onlight { color: var(--mip-oxblood); }
.mip-eyebrow--ondark { color: var(--mip-clay); }
.mip-eyebrow--muted { color: var(--mip-taupe); }

.mip-micro {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mip-taupe);
}
.mip-micro--strong { font-weight: 600; }
.mip-micro--oxblood { color: var(--mip-oxblood); font-weight: 600; }
.mip-micro--clay { color: var(--mip-clay); font-weight: 600; }

.mip-h1 {
  margin: 0 0 26px;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.mip-h2 {
  margin: 0;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.mip-section--dark .mip-h2,
.mip-section--quiet .mip-h2,
.mip-section--cta .mip-h2 { font-weight: 380; }

.mip-h3 {
  margin: 0;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.12;
}

.mip-lead {
  margin: 0;
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.7;
}
.mip-section--light .mip-lead { color: var(--mip-muted-light); }
.mip-section--dark .mip-lead { color: var(--mip-lead-dark); }

.mip-body-copy { margin: 0; font-size: 15.5px; line-height: 1.7; }
.mip-section--light .mip-body-copy { color: var(--mip-muted-light); }
.mip-section--dark .mip-body-copy { color: var(--mip-muted-dark); }

.mip-small { margin: 0; font-size: 14px; line-height: 1.7; }
.mip-section--light .mip-small { color: var(--mip-muted-light); }
.mip-section--dark .mip-small { color: var(--mip-muted-dark); }

.mip-small strong { color: var(--mip-ink); font-weight: 600; }
.mip-section--dark .mip-small strong { color: var(--mip-bone); }

.mip-em-clay { color: var(--mip-clay); }

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */

.mip-btn {
  display: inline-block;
  padding: 16px 30px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--mip-sans);
  border: none;
  cursor: pointer;
  transition: background-color .3s, transform .3s, color .3s, border-color .3s;
}

.mip-btn--primary { background: var(--mip-oxblood); color: var(--mip-bone); }
.mip-btn--primary:hover { background: var(--mip-oxblood-hover); color: var(--mip-bone); transform: translateY(-2px); }

.mip-btn--bone { background: var(--mip-bone); color: var(--mip-ink); padding: 17px 34px; }
.mip-btn--bone:hover { background: #FFFFFF; color: var(--mip-ink); transform: translateY(-2px); }

.mip-btn--outline {
  background: none;
  color: var(--mip-bone);
  border: 1px solid rgba(243, 238, 230, 0.4);
  padding: 14px 28px;
  font-size: 11.5px;
}
.mip-btn--outline:hover { background: var(--mip-oxblood); border-color: var(--mip-oxblood); color: var(--mip-bone); }

.mip-link-rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(243, 238, 230, 0.35);
}
.mip-link-rule:hover { color: var(--mip-clay); }

.mip-link-cta {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-oxblood);
  border-bottom: 1px solid var(--mip-oxblood);
  padding-bottom: 3px;
}
.mip-link-cta--clay { color: var(--mip-clay); border-bottom-color: var(--mip-clay); }

.mip-link-quiet {
  font-size: 14px;
  color: rgba(243, 238, 230, 0.85);
  border-bottom: 1px solid rgba(243, 238, 230, 0.4);
  padding-bottom: 3px;
}
.mip-link-quiet:hover { color: var(--mip-bone); }

/* ==========================================================================
   6. Header / navigation
   ========================================================================== */

.mip-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  /* No backdrop-filter here on purpose: an active filter would make the header
     the containing block for the fixed-position mobile menu. */
  transition: background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
  font-family: var(--mip-sans);
  color: var(--mip-bone);
}

.mip-header--light { color: var(--mip-ink); }

.mip-header.is-scrolled {
  background: rgba(23, 18, 17, 0.92);
  border-bottom-color: var(--mip-line-dark);
  backdrop-filter: blur(14px);
  color: var(--mip-bone);
}

.mip-header.is-open {
  background: var(--mip-dark);
  border-bottom-color: transparent;
  backdrop-filter: none;
  color: var(--mip-bone);
}

.mip-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mip-nav-h);
  padding: 0 clamp(20px, 4.5vw, 64px);
}

.mip-lockup { display: flex; align-items: center; gap: 12px; color: inherit; }
.mip-lockup:hover { color: inherit; }
.mip-lockup__icon { display: block; height: 40px; width: 40px; }
.mip-lockup__icon--light { display: none; }
.mip-header--light:not(.is-scrolled):not(.is-open) .mip-lockup__icon--dark { display: none; }
.mip-header--light:not(.is-scrolled):not(.is-open) .mip-lockup__icon--light { display: block; }

.mip-lockup__words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
}

.mip-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}

.mip-nav__link {
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.mip-nav__link:hover { color: var(--mip-clay); }
.mip-nav__link.is-active { border-bottom-color: var(--mip-oxblood); }

.mip-nav__cta {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: inherit;
  border: 1px solid rgba(243, 238, 230, 0.4);
  padding: 12px 22px;
  transition: background-color .3s, border-color .3s, color .3s;
}
.mip-header--light:not(.is-scrolled):not(.is-open) .mip-nav__cta { border-color: rgba(33, 25, 21, 0.35); }
.mip-nav__cta:hover { background: var(--mip-oxblood); border-color: var(--mip-oxblood); color: var(--mip-bone); }

.mip-burger {
  display: none;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.mip-burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform .3s;
}
.mip-header.is-open .mip-burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.mip-header.is-open .mip-burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mip-menu {
  display: none;
  z-index: 1;
  position: fixed;
  top: var(--mip-nav-h); left: 0; right: 0; bottom: 0;
  background: var(--mip-dark);
  color: var(--mip-bone);
  flex-direction: column;
  justify-content: space-between;
  padding: 7vh clamp(24px, 7vw, 64px) 42px;
  animation: mipMenuIn .35s ease both;
  overflow-y: auto;
}
.mip-header.is-open .mip-menu { display: flex; }

.mip-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.mip-menu__link {
  font-family: var(--mip-serif);
  font-size: clamp(34px, 8vw, 48px);
  color: var(--mip-bone);
  padding: 10px 0;
  border-bottom: 1px solid var(--mip-line-dark);
}
.mip-menu__link:hover { color: var(--mip-clay); }
.mip-menu__link--cta { color: var(--mip-clay); border-bottom: none; }
.mip-menu__link--cta:hover { color: var(--mip-bone); }

.mip-menu__meta {
  color: var(--mip-taupe);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 2;
  padding-top: 32px;
}

@keyframes mipMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 939px) {
  .mip-nav { display: none; }
  .mip-burger { display: flex; }
}

/* ==========================================================================
   7. Heroes
   ========================================================================== */

.mip-hero-film {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.mip-hero-film--92 { min-height: 92vh; }
.mip-hero-film--94 { min-height: 94vh; }

.mip-hero-film__media,
.mip-hero-film__media video,
.mip-hero-film__media img,
.mip-hero-film__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.mip-hero-film__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 18, 17, 0.92) 0%, rgba(23, 18, 17, 0.2) 48%, rgba(23, 18, 17, 0.42) 100%);
}
.mip-hero-film__scrim--deep {
  background: linear-gradient(to top, rgba(23, 18, 17, 0.94) 0%, rgba(23, 18, 17, 0.15) 55%, rgba(23, 18, 17, 0.42) 100%);
}
.mip-hero-film__scrim--event {
  background: linear-gradient(to top, rgba(23, 18, 17, 0.92) 0%, rgba(23, 18, 17, 0.18) 50%, rgba(23, 18, 17, 0.42) 100%);
}

.mip-hero-film__inner {
  position: relative;
  width: 100%;
  padding: 0 var(--mip-gutter) clamp(56px, 8vh, 96px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px;
  justify-content: space-between;
}
.mip-hero-film__inner--shell {
  max-width: var(--mip-wide);
  margin: 0 auto;
  display: block;
}

.mip-hero-film__copy { max-width: 980px; }
.mip-hero-film__lead { max-width: 600px; margin: 0 0 36px; color: var(--mip-lead-dark); }
.mip-hero-film__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

.mip-scrollcue { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mip-scrollcue__line {
  display: block;
  width: 1px; height: 56px;
  background: var(--mip-clay);
  animation: mipCue 2.4s ease-in-out infinite;
}

@keyframes mipCue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes mipRiseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.mip-rise { animation: mipRiseIn .9s .15s var(--mip-ease) both; }
.mip-rise-1 { animation: mipRiseIn 1s .3s var(--mip-ease) both; }
.mip-rise-2 { animation: mipRiseIn 1s .5s var(--mip-ease) both; }
.mip-rise-3 { animation: mipRiseIn 1s .65s var(--mip-ease) both; }
.mip-rise-4 { animation: mipRiseIn 1s .9s both; }

.mip-hero-text { padding: calc(var(--mip-nav-h) + clamp(56px, 9vw, 130px)) var(--mip-gutter) clamp(64px, 8vw, 110px); }
.mip-hero-text--tight { padding-top: calc(var(--mip-nav-h) + clamp(48px, 7vw, 110px)); }
.mip-hero-text--wide { padding: calc(var(--mip-nav-h) + clamp(64px, 10vw, 140px)) var(--mip-gutter) clamp(56px, 7vw, 96px); }

.mip-hero-split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 80px);
  align-items: flex-end;
}
.mip-hero-split__copy { flex: 1.3 1 440px; min-width: 320px; }
.mip-hero-split__media { flex: 1 1 360px; min-width: 300px; }
.mip-hero-split__media img {
  display: block;
  width: 100%;
  height: clamp(340px, 44vw, 600px);
  object-fit: cover;
  background: var(--mip-bone-deep);
  border-radius: var(--mip-radius);
}
.mip-hero-split__caption { padding-top: 12px; }

/* ==========================================================================
   8. Editorial rows
   ========================================================================== */

.mip-block-head { display: flex; flex-direction: column; gap: 28px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.mip-block-head--tight { gap: 24px; margin-bottom: clamp(30px, 3.6vw, 48px); }
.mip-block-head--plain { display: block; margin-bottom: clamp(32px, 4vw, 52px); }

.mip-rows { border-top: 1px solid var(--mip-line-light); }
.mip-section--dark .mip-rows { border-top-color: rgba(243, 238, 230, 0.18); }

.mip-serverow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 20px;
  align-items: start;
  padding: clamp(28px, 3.4vw, 44px) 8px;
  border-bottom: 1px solid var(--mip-line-light);
  color: var(--mip-ink);
  transition: transform .4s var(--mip-ease), background-color .4s;
}
.mip-serverow:hover { transform: translateX(10px); background: rgba(33, 25, 21, 0.03); color: var(--mip-ink); }
.mip-serverow__inner { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.mip-serverow__title {
  font-family: var(--mip-serif);
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.08;
  flex: 1 1 300px;
  min-width: 260px;
}
.mip-serverow__desc {
  flex: 1.2 1 300px;
  min-width: 260px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--mip-muted-light);
  padding-top: 8px;
}
.mip-serverow__arrow { font-size: 24px; color: var(--mip-oxblood); padding-top: 6px; }

.mip-steprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: clamp(26px, 3vw, 40px) 8px;
  border-bottom: 1px solid var(--mip-line-light);
}
.mip-steprow__inner { display: flex; flex-wrap: wrap; gap: 14px 48px; }
.mip-steprow__title { flex: 1 1 280px; min-width: 240px; }
.mip-steprow__copy { flex: 1.3 1 300px; min-width: 260px; padding-top: 6px; }

/* ==========================================================================
   9. Film blocks
   ========================================================================== */

.mip-film { position: relative; overflow: hidden; border-radius: var(--mip-radius); }
.mip-film:has(.mip-film__frame--square-edge) { border-radius: 0; }
.mip-film__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mip-dark-surface);
  border-radius: var(--mip-radius);
  overflow: hidden;
  border: 0;
}
.mip-section--light .mip-film__frame { background: var(--mip-bone-deep); }
.mip-film__frame--wide { aspect-ratio: 21 / 9; }

.mip-film--cover { aspect-ratio: 16 / 9; }
.mip-film--cover:has(.mip-film__frame--wide) { aspect-ratio: 21 / 9; }
.mip-film__frame--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: scale(1.35);
  transform-origin: center;
}
.mip-film__frame--square-edge { border-radius: 0; }

.mip-film__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 2px 0;
}

.mip-sound-toggle {
  background: none;
  border: 1px solid rgba(243, 238, 230, 0.35);
  color: var(--mip-bone);
  padding: 10px 20px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--mip-sans);
  transition: border-color .3s, color .3s;
}
.mip-sound-toggle:hover { border-color: var(--mip-clay); color: var(--mip-clay); }

.mip-film-link { display: block; overflow: hidden; color: inherit; }
.mip-film-link:hover { color: inherit; }
.mip-film-link .mip-film__frame { transition: transform 1.2s var(--mip-ease); }
.mip-film-link:hover .mip-film__frame { transform: scale(1.015); }
.mip-film-link:hover .mip-film__frame--cover { transform: scale(1.371); }

.mip-film-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mip-ink);
  background-image: repeating-linear-gradient(45deg, transparent 0 16px, rgba(243, 238, 230, 0.045) 16px 17px);
  border-radius: var(--mip-radius);
}
.mip-film-placeholder--wide { aspect-ratio: 21 / 9; }
.mip-film-placeholder__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--mip-taupe);
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
}

/* ==========================================================================
   10. Systems panels
   ========================================================================== */

.mip-systems { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }

.mip-systems__panel {
  flex: 1 1 280px;
  min-width: 270px;
  cursor: pointer;
  text-align: left;
  padding: clamp(26px, 3vw, 40px);
  background: var(--mip-bone-deep);
  color: var(--mip-ink);
  border: 1px solid var(--mip-line-light);
  transition: flex .6s var(--mip-ease), background-color .5s, color .5s;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--mip-sans);
}
.mip-systems__panel.is-active {
  flex-grow: 2.3;
  background: var(--mip-dark);
  color: var(--mip-bone);
}
.mip-systems__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.45;
  transition: opacity .6s .1s;
}
.mip-systems__panel.is-active .mip-systems__list { opacity: 1; }

/* ==========================================================================
   11. Image collages
   ========================================================================== */

.mip-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}
.mip-collage img {
  width: 100%;
  object-fit: cover;
  background: var(--mip-dark-surface);
  border-radius: var(--mip-radius);
  display: block;
}
.mip-collage--home img { height: clamp(220px, 34vw, 480px); }
.mip-collage--home img.mip-collage__sm { height: clamp(180px, 26vw, 360px); }
.mip-collage--bts img { height: clamp(160px, 24vw, 340px); }

.mip-col-3 { grid-column: span 3; }
.mip-col-4 { grid-column: span 4; }
.mip-col-5 { grid-column: span 5; }
.mip-col-7 { grid-column: span 7; }

@media (max-width: 700px) {
  .mip-col-3, .mip-col-4, .mip-col-5, .mip-col-7 { grid-column: span 12; }
}

/* ==========================================================================
   12. Recent work articles
   ========================================================================== */

.mip-work { margin-bottom: clamp(48px, 6vw, 88px); }
.mip-work:last-of-type { margin-bottom: 0; }

.mip-work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 28px;
}
.mip-work__lead { max-width: 520px; }
.mip-work__title {
  margin: 10px 0 0;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.05;
}
.mip-work__title a:hover { color: var(--mip-oxblood); }
.mip-work__sub { margin: 8px 0 0; font-size: 15.5px; color: var(--mip-muted-light); }
.mip-work__cols { display: flex; flex-wrap: wrap; gap: 32px; max-width: 620px; }
.mip-work__col { flex: 1 1 240px; min-width: 220px; }
.mip-work__coltitle {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mip-oxblood);
  font-weight: 600;
  margin-bottom: 10px;
}

.mip-work--split { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 56px); align-items: flex-end; }
.mip-work--split-rev { flex-wrap: wrap-reverse; }
.mip-work__media { flex: 1.5 1 460px; min-width: 300px; }
.mip-work__media--sm { flex: 1.6 1 440px; min-width: 300px; }
.mip-work__copy { flex: 1 1 300px; min-width: 280px; padding-bottom: 4px; }
.mip-work__copy h3 {
  margin: 12px 0 20px;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.05;
}
.mip-work__copy h3.mip-work__copy-h--sm {
  margin: 10px 0 14px;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.08;
}

.mip-viewall { margin-top: clamp(40px, 5vw, 68px); text-align: center; }
.mip-viewall a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mip-serif);
  font-size: clamp(24px, 2.6vw, 36px);
  color: var(--mip-ink);
  border-bottom: 1px solid rgba(33, 25, 21, 0.4);
  padding-bottom: 8px;
}
.mip-viewall a:hover { color: var(--mip-oxblood); }

.mip-headrow {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.mip-stack { display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 60px); }

/* ==========================================================================
   13. Quote / marquee
   ========================================================================== */

.mip-quote { margin: 0; }
.mip-quote__text {
  margin: 0;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-style: italic;
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.mip-quote__text--mid { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; margin-bottom: 32px; }
.mip-quote__text--big { font-size: clamp(26px, 3.4vw, 48px); line-height: 1.2; margin-bottom: 32px; }
.mip-quote__text--sm { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; margin-bottom: 26px; }
.mip-quote__by {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-clay);
}

.mip-quotes-2 { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 88px); }
.mip-quotes-2 blockquote { margin: 0; flex: 1 1 400px; min-width: 300px; }

.mip-proof { margin-top: clamp(40px, 5.5vw, 72px); }
.mip-proof__label { margin-bottom: 28px; }
.mip-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.mip-marquee__track {
  display: flex;
  gap: clamp(48px, 6vw, 96px);
  width: max-content;
  align-items: center;
  animation: mipMarquee 42s linear infinite;
  opacity: 0.62;
}
.mip-marquee__track img { height: 60px; width: auto; filter: brightness(0) invert(1); }
@keyframes mipMarquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   14. Accordions
   ========================================================================== */

.mip-accordion { border-top: 1px solid var(--mip-line-light); }
.mip-section--dark .mip-accordion { border-top-color: rgba(243, 238, 230, 0.18); }

.mip-accordion__item { border-bottom: 1px solid var(--mip-line-light); }
.mip-section--dark .mip-accordion__item { border-bottom-color: rgba(243, 238, 230, 0.18); }

.mip-accordion__trigger {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 20px;
  align-items: baseline;
  width: 100%;
  padding: clamp(24px, 2.8vw, 36px) 8px;
  color: inherit;
  font-family: var(--mip-sans);
}
.mip-accordion--compact .mip-accordion__trigger { padding: clamp(22px, 2.6vw, 32px) 8px; }
.mip-accordion--stacked .mip-accordion__trigger { padding: clamp(20px, 2.4vw, 30px) 8px; }

.mip-accordion__label { display: flex; flex-direction: column; gap: 8px; }

.mip-accordion__title {
  font-family: var(--mip-serif);
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.12;
}
.mip-accordion--compact .mip-accordion__title { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2; }
.mip-accordion--why .mip-accordion__title { font-size: clamp(22px, 2.6vw, 36px); }
.mip-accordion--stacked .mip-accordion__title { font-size: clamp(22px, 2.4vw, 32px); }

.mip-accordion__blurb { font-size: 14px; line-height: 1.7; color: var(--mip-muted-light); }

.mip-accordion__mark {
  font-size: 24px;
  color: var(--mip-oxblood);
  text-align: right;
  font-family: var(--mip-serif);
}
.mip-section--dark .mip-accordion__mark { color: var(--mip-clay); font-size: 22px; }
.mip-accordion--stacked .mip-accordion__mark { font-size: 22px; }

.mip-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--mip-ease);
}
.mip-accordion__item.is-open .mip-accordion__panel { grid-template-rows: 1fr; }
.mip-accordion__panel > div { overflow: hidden; }

.mip-accordion__copy {
  margin: 0;
  padding: 0 8px 34px;
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--mip-muted-light);
}
.mip-section--dark .mip-accordion__copy { color: var(--mip-muted-dark); max-width: 680px; padding-bottom: 30px; }

.mip-accordion__grid {
  list-style: none;
  margin: 0;
  padding: 0 8px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px 36px;
}
.mip-accordion__grid li { font-size: 14px; line-height: 1.55; color: var(--mip-muted-light); }

/* ==========================================================================
   15. Lists and column systems
   ========================================================================== */

.mip-split { display: flex; flex-wrap: wrap; gap: clamp(32px, 4.5vw, 72px); }
.mip-split--wide { gap: clamp(36px, 5vw, 90px); align-items: flex-start; }
.mip-split__a { flex: 1.2 1 420px; min-width: 300px; }
.mip-split__b { flex: 1 1 360px; min-width: 300px; }
.mip-split__a--about { flex: 1.3 1 460px; min-width: 320px; }
.mip-split__b--about { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 14px; align-self: stretch; }

.mip-listhead {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-taupe);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mip-line-dark-mid);
}
.mip-listhead--tight { margin-bottom: 10px; }

.mip-rulelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mip-rulelist li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mip-line-dark);
  font-size: 15.5px;
  line-height: 1.55;
}
.mip-rulelist li:last-child { border-bottom: none; }
.mip-rulelist--events li { padding: 15px 0; }

.mip-buildgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(28px, 3vw, 56px);
}
.mip-builditem { padding: 24px 0; border-bottom: 1px solid var(--mip-line-dark); }
.mip-builditem h3 {
  margin: 0 0 10px;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: 22px;
}

.mip-cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.mip-cols-3 > div { border-top: 1px solid var(--mip-line-dark-strong); padding-top: 26px; }
.mip-cols-3 h3 {
  margin: 16px 0 14px;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
}

.mip-capgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(32px, 4vw, 64px);
  border-top: 1px solid var(--mip-line-light);
}
.mip-capgrid > div { padding: 22px 0; border-bottom: 1px solid var(--mip-line-light-soft); }
.mip-capgrid h3 {
  margin: 0 0 8px;
  font-family: var(--mip-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
}

.mip-microask {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  align-items: center;
  justify-content: space-between;
}
.mip-microask h2 {
  margin: 0;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
}

/* ==========================================================================
   16. Work index
   ========================================================================== */

.mip-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(30px, 3.6vw, 48px);
}
.mip-filter {
  all: unset;
  cursor: pointer;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 9px 2px;
  color: var(--mip-bone);
  border-bottom: 1px solid rgba(243, 238, 230, 0.25);
  font-family: var(--mip-sans);
  transition: color .3s, border-color .3s;
}
.mip-filter.is-active { color: var(--mip-clay); border-bottom-color: var(--mip-clay); }

.mip-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  justify-content: space-between;
  padding-top: 26px;
}
.mip-featured__lead { max-width: 560px; }
.mip-featured__title {
  margin: 10px 0 12px;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.04;
}
.mip-featured__title a { color: var(--mip-bone); }
.mip-featured__title a:hover { color: var(--mip-clay); }
.mip-featured__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  max-width: 360px;
}
.mip-featured__side .mip-link-cta { align-self: flex-start; }

.mip-index__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.mip-index__count { font-size: 12px; color: var(--mip-taupe); }

.mip-idxrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 30vw, 400px);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px) 8px;
  border-bottom: 1px solid var(--mip-line-light);
  color: var(--mip-ink);
  transition: background-color .35s;
}
.mip-idxrow:hover { background: rgba(33, 25, 21, 0.035); color: var(--mip-ink); }
.mip-idxrow[hidden] { display: none; }

.mip-idxrow__copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mip-idxrow__line { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.mip-idxrow__name { font-family: var(--mip-serif); font-size: clamp(26px, 3vw, 46px); line-height: 1.05; }
.mip-idxrow__cat {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mip-oxblood);
  font-weight: 600;
}
.mip-idxrow__badge {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mip-muted-light);
  border: 1px solid rgba(33, 25, 21, 0.3);
  padding: 4px 10px;
}
.mip-idxrow__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mip-muted-light);
  max-width: 640px;
  display: block;
}
.mip-idxrow__media { display: block; min-width: 0; }
.mip-idxrow__clip { display: block; overflow: hidden; border-radius: var(--mip-radius); }
.mip-idxrow__clip video,
.mip-idxrow__clip img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mip-bone-deep);
  transition: transform .9s var(--mip-ease);
}
.mip-idxrow:hover .mip-idxrow__clip video,
.mip-idxrow:hover .mip-idxrow__clip img { transform: scale(1.04); }

@media (max-width: 760px) {
  .mip-idxrow { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   17. Case study
   ========================================================================== */

.mip-identity {
  padding: clamp(30px, 3.6vw, 48px) var(--mip-gutter);
  border-bottom: 1px solid var(--mip-line-light-soft);
}
.mip-identity__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.mip-identity__label { margin-bottom: 10px; font-weight: 600; }
.mip-identity__value { font-family: var(--mip-serif); font-size: 19px; }

.mip-context__statement {
  margin: 0;
  font-family: var(--mip-serif);
  font-weight: 390;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.35;
  text-wrap: pretty;
}
.mip-context__side { display: flex; flex-direction: column; gap: 32px; }

.mip-next {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid var(--mip-line-light);
  padding: clamp(28px, 3.4vw, 44px) 8px;
  color: var(--mip-ink);
  transition: transform .4s var(--mip-ease);
}
.mip-next:hover { transform: translateX(10px); color: var(--mip-ink); }
.mip-next__title {
  display: block;
  font-family: var(--mip-serif);
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.04;
  margin-top: 10px;
}
.mip-next__arrow { font-size: clamp(28px, 3vw, 44px); color: var(--mip-oxblood); }
.mip-next-rule { border-bottom: 1px solid var(--mip-line-light); }

/* ==========================================================================
   18. About
   ========================================================================== */

.mip-letter p {
  margin: 0 0 28px;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  text-wrap: pretty;
}
.mip-letter p:last-of-type { margin-bottom: 40px; }
.mip-signoff { display: flex; align-items: center; gap: 18px; }
.mip-signoff__rule { display: block; width: 44px; height: 1px; background: var(--mip-clay); }
.mip-signoff__name { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }

.mip-portrait {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 360px;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--mip-dark-surface);
  border-radius: var(--mip-radius);
}

.mip-believe__statement {
  margin: 0 0 36px;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.mip-believe__body { display: flex; flex-direction: column; gap: 20px; }
.mip-believe__body p { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(243, 238, 230, 0.85); }

/* ==========================================================================
   19. Contact
   ========================================================================== */

.mip-contact { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 80px); }
.mip-contact__copy { flex: 1.1 1 440px; min-width: 320px; }
.mip-contact__formwrap { flex: 1 1 380px; min-width: 300px; }

.mip-contact__details { display: flex; flex-direction: column; gap: 22px; }
.mip-contact__label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-taupe);
  margin-bottom: 10px;
}
.mip-contact__value { font-family: var(--mip-serif); font-size: clamp(19px, 2vw, 26px); }
a.mip-contact__value {
  color: var(--mip-ink);
  border-bottom: 1px solid rgba(33, 25, 21, 0.35);
  padding-bottom: 3px;
  word-break: break-all;
}
a.mip-contact__value:hover { color: var(--mip-oxblood); }
.mip-contact__social { display: flex; gap: 22px; margin-top: 6px; }
.mip-contact__social a {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-muted-light);
}
.mip-contact__social a:hover { color: var(--mip-oxblood); }

.mip-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: var(--mip-bone-form);
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--mip-line-light-faint);
}
.mip-form label { display: flex; flex-direction: column; gap: 9px; }
.mip-form__label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-muted-light);
}
.mip-form input,
.mip-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(33, 25, 21, 0.3);
  padding: 10px 0;
  font-size: 15.5px;
  font-family: var(--mip-serif);
  color: var(--mip-ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.mip-form textarea { resize: vertical; }
.mip-form input::placeholder,
.mip-form textarea::placeholder { color: var(--mip-taupe); }
.mip-form button { align-self: flex-start; }
.mip-form__hp { position: absolute; left: -9999px; opacity: 0; }
.mip-form__error { margin: 0; font-size: 14px; color: var(--mip-oxblood); }

.mip-form-success {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--mip-dark);
  color: var(--mip-bone);
  padding: clamp(36px, 4vw, 56px);
  min-height: 320px;
  justify-content: center;
}
.mip-form-success p {
  margin: 0;
  font-family: var(--mip-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
}
.mip-form-success button {
  align-self: flex-start;
  background: none;
  border: 1px solid rgba(243, 238, 230, 0.4);
  color: var(--mip-bone);
  cursor: pointer;
  padding: 12px 24px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--mip-sans);
  transition: border-color .3s, color .3s;
}
.mip-form-success button:hover { border-color: var(--mip-clay); color: var(--mip-clay); }

/* ==========================================================================
   20. CTA bands
   ========================================================================== */

.mip-cta__title {
  margin: 0 0 28px;
  font-family: var(--mip-serif);
  font-weight: 380;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.mip-cta__lead { margin: 0 0 44px; color: rgba(243, 238, 230, 0.85); }
.mip-cta__actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

.mip-cta--row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 80px;
  align-items: center;
  justify-content: space-between;
}
.mip-cta--row .mip-cta__title {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.05;
  max-width: 620px;
}

/* ==========================================================================
   21. Footer
   ========================================================================== */

.mip-footer {
  background: var(--mip-dark-deeper);
  color: var(--mip-bone);
  font-family: var(--mip-sans);
  padding: clamp(56px, 7vw, 96px) var(--mip-gutter) 36px;
  overflow: hidden;
}
.mip-footer__cols { display: flex; flex-wrap: wrap; gap: 44px 32px; }
.mip-footer__brand {
  flex: 1.2 1 260px;
  min-width: 240px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mip-footer__lockup { display: flex; align-items: center; gap: 12px; }
.mip-footer__lockup img { display: block; height: 44px; width: 44px; }
.mip-footer__lockup span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--mip-bone);
}
.mip-footer__brand p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--mip-muted-dark); }

.mip-footer__col { flex: 1 1 180px; display: flex; flex-direction: column; gap: 14px; }
.mip-footer__col--wide { flex: 1.4 1 300px; }
.mip-footer__coltitle {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mip-oxblood);
  margin-bottom: 6px;
}
.mip-footer__col a { font-size: 14px; color: var(--mip-lead-dark); }
.mip-footer__col a:hover { color: var(--mip-clay); }
.mip-footer__col span { font-size: 14px; color: var(--mip-muted-dark); }
.mip-footer__email { white-space: nowrap; }
.mip-footer__social { display: flex; gap: 18px; margin-top: 4px; }
.mip-footer__social a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

.mip-footer__base {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--mip-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mip-taupe);
}

@media (max-width: 560px) {
  .mip-footer__email { white-space: normal; word-break: break-all; }
}

/* ==========================================================================
   22. Scroll reveals
   ========================================================================== */

[data-mip-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .95s var(--mip-ease), transform 1.05s var(--mip-ease);
  will-change: opacity, transform;
}
[data-mip-reveal="scale"] { transform: scale(0.965); }
[data-mip-reveal="left"] { transform: translateX(-36px); }
[data-mip-reveal="right"] { transform: translateX(36px); }
[data-mip-reveal].is-revealed { opacity: 1; transform: none; }

.no-js [data-mip-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-mip-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mip-rise, .mip-rise-1, .mip-rise-2, .mip-rise-3, .mip-rise-4 { animation: none !important; opacity: 1 !important; }
  .mip-scrollcue__line { animation: none; }
  .mip-marquee__track { animation: none; }
  .mip-serverow:hover, .mip-next:hover { transform: none; }
  .mip-film-link:hover .mip-film__frame,
  .mip-idxrow:hover .mip-idxrow__clip video,
  .mip-idxrow:hover .mip-idxrow__clip img { transform: none; }
  .mip-film-link:hover .mip-film__frame--cover { transform: scale(1.35); }
  .mip-btn:hover { transform: none; }
}

/* ==========================================================================
   23. Default page / post fallback
   ========================================================================== */

.mip-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--mip-muted-light);
}
.mip-prose h1, .mip-prose h2, .mip-prose h3, .mip-prose h4 {
  font-family: var(--mip-serif);
  font-weight: 400;
  color: var(--mip-ink);
  line-height: 1.15;
}
.mip-prose h1 { font-size: clamp(34px, 4.4vw, 60px); margin: 0 0 24px; }
.mip-prose h2 { font-size: clamp(26px, 3vw, 40px); margin: 48px 0 18px; }
.mip-prose h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 36px 0 14px; }
.mip-prose a { color: var(--mip-oxblood); border-bottom: 1px solid var(--mip-oxblood); }
.mip-prose img { border-radius: var(--mip-radius); height: auto; }
.mip-prose blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid var(--mip-oxblood);
  font-family: var(--mip-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--mip-ink);
}

/* ==========================================================================
   24. Page specific display type
   ========================================================================== */

.mip-h1--hc { font-weight: 390; font-size: clamp(36px, 4.8vw, 74px); line-height: 1.04; text-wrap: pretty; }
.mip-h1--le { font-weight: 380; font-size: clamp(38px, 5.4vw, 80px); line-height: 1.04; max-width: 1000px; text-wrap: pretty; }
.mip-h1--work { font-weight: 380; font-size: clamp(44px, 8vw, 124px); line-height: 0.98; max-width: 1100px; margin-bottom: 0; }
.mip-h1--about { font-weight: 390; font-size: clamp(40px, 6.4vw, 100px); line-height: 1; max-width: 1080px; margin-bottom: 30px; text-wrap: pretty; }
.mip-h1--contact { font-weight: 390; font-size: clamp(38px, 5.4vw, 80px); line-height: 1; margin-bottom: 30px; text-wrap: pretty; }
.mip-h1--case { font-weight: 380; font-size: clamp(48px, 8vw, 120px); line-height: 0.98; margin-bottom: 18px; }

.mip-h2--access {
  font-weight: 340;
  font-size: clamp(44px, 7vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.mip-h2--display { font-weight: 400; font-size: clamp(38px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.02em; }
.mip-h2--sm { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.05; }
.mip-h2--md { font-weight: 380; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; }
.mip-h2--faq { font-weight: 380; font-size: clamp(30px, 4vw, 56px); line-height: 1.05; }

.mip-h2--gap { margin-bottom: 22px; }
.mip-h2--gap-sm { margin-bottom: 24px; }
.mip-h2--gap-lg { margin-bottom: 20px; }

.mip-case-sub { margin: 0; font-size: clamp(15.5px, 1.3vw, 18px); color: var(--mip-lead-dark); letter-spacing: 0.04em; }

.mip-hero-text__lead { max-width: 600px; margin: 0; }
.mip-hero-text__lead--wide { max-width: 560px; margin: 0 0 36px; }
.mip-hero-text__lead--contact { max-width: 540px; margin: 0 0 44px; }

.mip-maxw-760 { max-width: 760px; }
.mip-maxw-820 { max-width: 820px; }
.mip-maxw-800 { max-width: 800px; }
.mip-maxw-1080 { max-width: 1080px; }

.mip-mt-flow { display: flex; flex-direction: column; gap: 20px; }
.mip-mt-flow-lg { display: flex; flex-direction: column; gap: 28px; }

.mip-mb-12 { margin-bottom: 12px; }
.mip-mb-14 { margin-bottom: 14px; }
.mip-mb-16 { margin-bottom: 16px; }
.mip-mb-10 { margin-bottom: 10px; }

.mip-maxw-560 { max-width: 560px; }
.mip-split--build { gap: clamp(32px, 4vw, 60px); }
.mip-split__wide { flex: 1.4 1 460px; min-width: 320px; }
.mip-split__narrow { flex: 1 1 320px; min-width: 300px; }

.mip-mb-20 { margin-bottom: 20px; }
.mip-mb-lg { margin-bottom: clamp(30px, 3.6vw, 48px); }

.mip-mb-32 { margin-bottom: 32px; }

.mip-collage--bts img:nth-child(1) { object-position: 60% 40%; }
.mip-collage--bts img:nth-child(2) { object-position: 50% 55%; }
.mip-collage--bts img:nth-child(3) { object-position: 52% 45%; }

.mip-empty { padding: 40px 8px; }

.mip-mt-14 { margin-top: 14px; }
.mip-mb-24 { margin-bottom: 24px; }
.mip-mb-28 { margin-bottom: 28px; }