/* M Squared Marketing — Website
   Imports design system tokens, then extends them. */
@import url("assets/colors_and_type.css");

* { box-sizing: border-box; }
/* `hidden` attribute beats any other display rule — standard practice */
[hidden] { display: none !important; }
html, body { background: var(--color-canvas); }
html { overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
button { font-family: inherit; cursor: pointer; }

/* Subtle entrance — applies once on first paint.
   Opacity-only (no transform) so the body doesn't become a containing block
   for position: fixed descendants like the mobile menu. */
body { animation: m2-fade-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes m2-fade-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Tweakable accent --------- */
:root {
  --m2-glow-scale: 1;
  --m2-accent-mix: 0;       /* 0 = scarlet, 1 = ember (warmer) */
}

/* ---------- Layout primitives ---------- */
.m2-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%; }
.m2-container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; width: 100%; }
.m2-section { padding: 72px 0; position: relative; }
.m2-section-compact { padding: 48px 0 96px; }
.m2-section-tight { padding: 64px 0 32px; }
.m2-section-head { margin-bottom: 40px; max-width: 800px; }
.m2-section-head-center { margin: 0 auto 40px; text-align: center; max-width: 800px; }
.m2-section-head .m2-eyebrow-pill { margin-bottom: 20px; }
.m2-section-head h2,
.m2-section-head h1 { margin: 0 0 16px; }
.m2-section-head .m2-subhead { margin: 0; }
.m2-rule {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-hairline-strong) 50%, transparent 100%);
  margin: 0;
}

/* ---------- Type helpers ---------- */
.m2-display-xl {
  font-family: var(--font-display); font-size: 56px; font-weight: 600;
  line-height: 1.07; letter-spacing: -0.28px; color: var(--color-ink); margin: 0;
  text-wrap: balance;
}
.m2-display-lg {
  font-family: var(--font-display); font-size: 40px; font-weight: 600;
  line-height: 1.10; letter-spacing: 0; color: var(--color-ink); margin: 0;
  text-wrap: balance;
}
.m2-display-md {
  font-family: var(--font-display); font-size: 34px; font-weight: 600;
  line-height: 1.47; letter-spacing: -0.374px; color: var(--color-ink); margin: 0;
}
.m2-subhead {
  font-family: var(--font-text); font-size: 24px; font-weight: 300;
  line-height: 1.5; letter-spacing: 0; color: var(--color-ink-muted);
}
.m2-body { font-family: var(--font-text); font-size: 17px; font-weight: 400; color: var(--color-ink-muted); line-height: 1.47; letter-spacing: -0.374px; }
.m2-meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-subtle); letter-spacing: 0.4px; }
.m2-eyebrow {
  display: inline-block;
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 12px;
}
.m2-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(229, 72, 77, 0.10);
  border: 1px solid rgba(229, 72, 77, 0.25);
  color: var(--color-primary);
  border-radius: 9999px;
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap;
}
.m2-eyebrow-pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 9999px; background: var(--color-primary);
}

/* ---------- Buttons ---------- */
.m2-btn {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; border: 0;
  line-height: 1.2; display: inline-flex; align-items: center; gap: 8px;
  transition: all 120ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap; text-decoration: none;
}
.m2-btn-primary {
  background: linear-gradient(180deg, #ff6064 0%, #e5484d 50%, #c83a3f 100%);
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(229, 72, 77, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.m2-btn-primary:hover {
  background: linear-gradient(180deg, #ff7a7e 0%, #ff6064 50%, #e5484d 100%);
  box-shadow: 0 12px 32px rgba(229, 72, 77, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-decoration: none;
}
.m2-btn-primary:active {
  background: var(--color-primary-pressed);
  box-shadow: 0 4px 12px rgba(229, 72, 77, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.m2-btn-secondary {
  background: var(--color-surface-1); color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}
.m2-btn-secondary:hover {
  background: var(--color-surface-2); border-color: var(--color-hairline-strong);
  color: var(--color-ink); text-decoration: none;
}
.m2-btn-ghost { background: transparent; color: var(--color-ink); border: 1px solid var(--color-hairline); }
.m2-btn-ghost:hover { border-color: var(--color-hairline-strong); background: var(--color-surface-1); color: var(--color-ink); text-decoration: none; }
.m2-btn-pill { border-radius: 9999px; padding: 11px 22px; }
.m2-btn-lg { padding: 14px 28px; font-size: 18px; font-weight: 300; letter-spacing: 0; line-height: 1; }
.m2-btn-block { width: 100%; justify-content: center; }
.m2-arrow { width: 14px; height: 14px; }
.m2-link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  line-height: 1.29; letter-spacing: -0.224px;
  color: var(--color-primary); cursor: pointer; text-decoration: none;
  transition: gap 120ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.m2-link-arrow:hover { color: var(--color-primary-hover); gap: 10px; text-decoration: none; }

/* ---------- Navigation ---------- */
.m2-nav-wrap {
  position: sticky; top: 0; z-index: 100;
  padding: 16px 32px 0;
}
.m2-nav {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px;
  background: rgba(15, 10, 10, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.m2-mark { display: inline-flex; align-items: center; }
.m2-mark img { height: 28px; width: auto; display: block; }
.m2-nav-links {
  display: flex; gap: 28px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.m2-nav-links a {
  font-family: var(--font-text); font-size: 12px; font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--color-ink-subtle); cursor: pointer;
  transition: color 120ms; text-decoration: none;
  position: relative;
}
.m2-nav-links a:hover { color: var(--color-ink); text-decoration: none; }
.m2-nav-links a.is-active { color: var(--color-ink); }
.m2-nav-links a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; background: var(--color-primary); border-radius: 2px;
}
.m2-nav-right { display: flex; gap: 10px; align-items: center; }
.m2-nav .m2-btn-primary { padding: 7px 14px; font-size: 13px; }
.m2-nav .m2-btn-secondary { padding: 7px 14px; font-size: 13px; }

/* ---------- Cards ---------- */
.m2-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  position: relative; overflow: hidden;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  display: block;
  color: inherit;
}
a.m2-card { color: inherit; }
.m2-card:hover {
  border-color: var(--color-hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.m2-card-feature::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(229, 72, 77, 0.0) 0%, rgba(229, 72, 77, 0) 55%);
  transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-card-feature:hover::after {
  background: radial-gradient(120% 80% at 100% 0%, calc(rgba(229, 72, 77, 0.12) * var(--m2-glow-scale, 1)) 0%, rgba(229, 72, 77, 0) 55%);
  background: radial-gradient(120% 80% at 100% 0%, rgba(229, 72, 77, 0.12) 0%, rgba(229, 72, 77, 0) 55%);
}
.m2-card-title {
  font-family: var(--font-text); font-size: 21px; font-weight: 600;
  line-height: 1.19; letter-spacing: 0.231px; color: var(--color-ink);
  margin: 0 0 8px;
}
.m2-card-body {
  font-family: var(--font-text); font-size: 14px; font-weight: 400;
  color: var(--color-ink-muted); line-height: 1.55; letter-spacing: -0.224px;
  margin: 0 0 16px;
}

/* Grids */
.m2-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.m2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.m2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) {
  .m2-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .m2-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .m2-grid-2,
  .m2-grid-3,
  .m2-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.m2-hero { position: relative; padding: 96px 0 80px; overflow: hidden; }
.m2-hero-tall { padding: 128px 0 96px; }
.m2-hero-short { padding: 72px 0 48px; }
.m2-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--m2-glow-scale, 1);
  background:
    radial-gradient(50% 60% at 18% 30%, rgba(229, 72, 77, 0.28) 0%, rgba(229, 72, 77, 0) 60%),
    radial-gradient(40% 45% at 82% 40%, rgba(255, 96, 100, 0.22) 0%, rgba(255, 96, 100, 0) 65%),
    radial-gradient(30% 40% at 95% 15%, rgba(229, 72, 77, 0.14) 0%, rgba(229, 72, 77, 0) 60%);
}
.m2-hero-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 32px;
}
.m2-hero-inner .m2-display-xl { max-width: 1100px; margin-top: 8px; }
.m2-hero-inner .m2-subhead { max-width: 720px; margin: 0; }
/* Short heroes (utility pages: portfolio, services detail, etc.) tighten the
   headline/subhead pair so they read as one composed moment. */
.m2-hero-short .m2-hero-inner { gap: 20px; }
.m2-hero-ctas { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.m2-hero-meta {
  display: flex; gap: 24px; margin-top: 16px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-subtle);
  letter-spacing: 0.4px;
}
.m2-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.m2-hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 8px rgba(39, 166, 68, 0.6); }

/* Hero variants */
.m2-hero-split { padding: 96px 0; }
.m2-hero-split .m2-hero-inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center;
  text-align: left;
}
.m2-hero-split .m2-hero-inner .m2-display-xl { margin-top: 0; max-width: none; }
.m2-hero-split .m2-hero-ctas { justify-content: flex-start; }
.m2-hero-split .m2-hero-subhead-wrap { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.m2-hero-split-visual {
  position: relative; aspect-ratio: 1 / 1.05; width: 100%;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
/* hero-split responsive handled in the global breakpoint block above */

.m2-hero-stack-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-subtle);
  letter-spacing: 0.6px;
}
.m2-hero-stack-eyebrow .dash { width: 24px; height: 1px; background: var(--color-primary); }

/* Bracket framing motif */
.m2-bracket-frame { position: relative; }
.m2-bracket-frame::before,
.m2-bracket-frame::after,
.m2-bracket-frame > .br-tr,
.m2-bracket-frame > .br-bl {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--color-primary); pointer-events: none;
}
.m2-bracket-frame::before { top: -12px; left: -12px; border-right: 0; border-bottom: 0; }
.m2-bracket-frame::after { bottom: -12px; right: -12px; border-left: 0; border-top: 0; }
.m2-bracket-frame > .br-tr { top: -12px; right: -12px; border-left: 0; border-bottom: 0; }
.m2-bracket-frame > .br-bl { bottom: -12px; left: -12px; border-right: 0; border-top: 0; }

/* ---------- Logo strip ---------- */
.m2-logos { padding: 32px 0 16px; }
.m2-logos-caption {
  font-family: var(--font-text); font-size: 13px;
  color: var(--color-ink-subtle); text-align: center; margin: 0 0 28px;
  letter-spacing: 0.2px;
}
.m2-logos-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.m2-logos-grid-wide {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.m2-logo-tile {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  min-height: 132px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-logo-tile:hover {
  border-color: var(--color-hairline-strong);
  background: var(--color-surface-2);
}
.m2-logo-glyph {
  font-family: var(--font-text); font-weight: 600; font-size: 21px;
  letter-spacing: 0; color: var(--color-ink);
}
.m2-logo-img {
  max-width: 80%;
  max-height: 64px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  /* Logos are pre-white; no inversion filter needed */
  opacity: 0.92;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-logo-tile:hover .m2-logo-img { opacity: 1; }
.m2-logo-name {
  font-family: var(--font-text); font-size: 12px;
  color: var(--color-ink-subtle);
  letter-spacing: 0.3px;
  text-align: center;
}

/* Marquee variant — logos row with subtle motion */
.m2-logos-row {
  display: flex; gap: 48px; align-items: center; flex-wrap: wrap;
  justify-content: center;
}
.m2-logos-row .m2-logo-tile { min-width: 140px; flex: 0 0 auto; }

@media (max-width: 900px) {
  .m2-logos-grid,
  .m2-logos-grid-wide { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Testimonials ---------- */
.m2-card-testimonial { padding: 32px; }
.m2-quote {
  font-family: var(--font-text); font-size: 17px; font-weight: 400;
  line-height: 1.5; letter-spacing: -0.1px;
  color: var(--color-ink); margin: 0 0 24px;
}
.m2-quote-large {
  font-family: var(--font-text); font-size: 28px; font-weight: 600;
  line-height: 1.19; letter-spacing: 0.196px;
  color: var(--color-ink);
  margin: 0 0 32px;
}
.m2-quote-meta { display: flex; align-items: center; gap: 12px; }
.m2-avatar {
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--color-surface-3); color: var(--color-ink);
  font-family: var(--font-text); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-hairline-strong);
  flex-shrink: 0;
  overflow: hidden;
}
.m2-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.m2-quote-name { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: var(--color-ink); }
.m2-quote-role { font-family: var(--font-text); font-size: 12px; color: var(--color-ink-subtle); margin-top: 2px; }

/* Video testimonial card */
.m2-video-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  overflow: hidden;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.m2-video-card:hover { border-color: var(--color-hairline-strong); transform: translateY(-2px); text-decoration: none; }
.m2-video-thumb {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: var(--color-surface-3);
}
.m2-video-thumb .image-slot,
.m2-video-thumb image-slot { width: 100% !important; height: 100% !important; display: block; }
.m2-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 9999px;
  background: rgba(15, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-video-card:hover .m2-video-play {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translate(-50%, -50%) scale(1.06);
}
.m2-video-play svg { width: 20px; height: 20px; margin-left: 3px; color: var(--color-ink); }
.m2-video-card:hover .m2-video-play svg { color: #fff; }
.m2-video-meta {
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.m2-video-quote {
  font-family: var(--font-text); font-size: 15px; color: var(--color-ink);
  line-height: 1.5; margin: 0 0 14px;
}
.m2-video-byline { display: flex; align-items: center; gap: 12px; }
.m2-video-name { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--color-ink); }
.m2-video-role { font-family: var(--font-text); font-size: 12px; color: var(--color-ink-subtle); }
.m2-video-runtime {
  position: absolute; right: 12px; bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--color-ink);
  background: rgba(15, 10, 10, 0.72);
  backdrop-filter: blur(8px);
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  z-index: 2;
}

/* ---------- Portfolio cards ---------- */
.m2-port-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (max-width: 700px) { .m2-port-grid { grid-template-columns: 1fr; } }
.m2-port-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-hairline);
  border-radius: 16px; overflow: hidden;
  background: var(--color-surface-1);
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none; color: inherit;
}
.m2-port-card:hover {
  border-color: var(--color-hairline-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.m2-port-cover {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: var(--color-surface-3);
  border-bottom: 1px solid var(--color-hairline);
}
.m2-port-cover .image-slot,
.m2-port-cover image-slot { width: 100% !important; height: 100% !important; display: block; }
.m2-port-meta { padding: 24px; display: flex; flex-direction: column; }
.m2-port-meta > * { margin: 0; }
.m2-port-meta > .m2-port-client + .m2-port-credits { margin-top: 6px; }
.m2-port-client {
  font-family: var(--font-text); font-size: 22px; font-weight: 600;
  line-height: 1.18; letter-spacing: -0.2px;
  color: var(--color-ink);
}
.m2-port-credits {
  font-family: var(--font-text); font-size: 13px;
  color: var(--color-ink-subtle); line-height: 1.45;
  letter-spacing: 0;
}
/* Pill tags retained for project detail page */
.m2-port-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.m2-port-tag {
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--color-ink-subtle);
  padding: 4px 10px; border-radius: 9999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  white-space: nowrap;
}

/* Featured portfolio item (1 across full width) */
.m2-port-card-feature {
  grid-column: 1 / -1;
  flex-direction: row;
}
.m2-port-card-feature .m2-port-cover {
  aspect-ratio: 16 / 10;
  width: 60%; border-right: 1px solid var(--color-hairline);
  border-bottom: 0;
}
.m2-port-card-feature .m2-port-meta { flex: 1; padding: 40px; justify-content: center; }
.m2-port-card-feature .m2-port-meta > .m2-port-client + .m2-port-credits { margin-top: 8px; }
.m2-port-card-feature .m2-port-meta > .m2-port-credits + .m2-port-summary { margin-top: 18px; }
.m2-port-card-feature .m2-port-meta > .m2-port-summary + .m2-port-cta { margin-top: 16px; }
.m2-port-summary {
  font-family: var(--font-text); font-size: 17px; line-height: 1.5;
  color: var(--color-ink-muted); max-width: 540px;
}
.m2-port-cta { color: var(--color-primary); }
@media (max-width: 900px) {
  .m2-port-card-feature { flex-direction: column; }
  .m2-port-card-feature .m2-port-cover { width: 100%; border-right: 0; border-bottom: 1px solid var(--color-hairline); }
  .m2-port-card-feature .m2-port-meta { padding: 28px; }
}
/* Mobile: featured cards render identical to standard cards.
   Whole card is already clickable, so the summary + CTA become noise. */
@media (max-width: 700px) {
  .m2-port-card-feature .m2-port-cover { aspect-ratio: 4 / 3; }
  .m2-port-card-feature .m2-port-meta { padding: 24px; }
  .m2-port-card-feature .m2-port-client { font-size: 22px; letter-spacing: -0.2px; }
  .m2-port-summary,
  .m2-port-cta { display: none; }
  /* Per-card credits are desktop discovery aids; on phone the curated grid
     speaks for itself. Filter chips become a horizontal scroll (below). */
  .m2-port-credits { display: none; }
}

/* ─ Empty filter state ─ */
.m2-port-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 64px 32px; text-align: center;
}
.m2-port-empty p {
  font-family: var(--font-text); font-size: 15px;
  color: var(--color-ink-subtle); margin: 0;
}
.m2-port-empty .m2-link-arrow { display: inline-flex; }

/* ---------- Service feature blocks ---------- */
.m2-feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--color-hairline);
}
.m2-feature-row:first-of-type { border-top: 0; }
.m2-feature-row.reverse > :first-child { order: 2; }
.m2-feature-visual {
  aspect-ratio: 4 / 3; border-radius: 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  overflow: hidden; position: relative;
}
.m2-feature-visual .image-slot,
.m2-feature-visual image-slot { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 900px) {
  .m2-feature-row { grid-template-columns: 1fr; gap: 32px; }
  .m2-feature-row.reverse > :first-child { order: 0; }
}

/* ---------- Service hub cards ---------- */
.m2-service-card {
  position: relative;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  padding: 32px;
  display: flex; flex-direction: column;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none; color: inherit;
  min-height: 280px;
  overflow: hidden;
}
/* Intentional spacing per relationship */
.m2-service-card > * { margin: 0; position: relative; }
.m2-service-card > .m2-service-icon + h3 { margin-top: 24px; }
.m2-service-card > h3 + p { margin-top: 8px; }
.m2-service-card > .m2-service-arrow { margin-top: auto; padding-top: 24px; }
a.m2-service-card { color: inherit; }
.m2-service-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(229, 72, 77, 0) 0%, rgba(229, 72, 77, 0) 55%);
  transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-service-card:hover {
  border-color: var(--color-hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.m2-service-card:hover::after {
  background: radial-gradient(120% 80% at 100% 0%, rgba(229, 72, 77, 0.14) 0%, rgba(229, 72, 77, 0) 55%);
}
.m2-service-card.is-featured {
  background: var(--color-surface-2);
  border-color: var(--color-hairline-strong);
}
.m2-service-card.is-featured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 70% at 50% 0%, rgba(229, 72, 77, 0.16) 0%, rgba(229, 72, 77, 0) 60%);
}
.m2-service-card > * { position: relative; }
.m2-service-num {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-subtle);
  letter-spacing: 0.6px;
}
.m2-service-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-hairline-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.m2-service-icon svg { width: 20px; height: 20px; }
.m2-service-card.is-featured .m2-service-icon { background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.36); }
.m2-service-title {
  font-family: var(--font-text); font-size: 24px; font-weight: 600;
  line-height: 1.19; letter-spacing: -0.3px;
  color: var(--color-ink); margin: 0;
}
.m2-service-body {
  font-family: var(--font-text); font-size: 14px; color: var(--color-ink-muted);
  line-height: 1.55; margin: 0;
}
.m2-service-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
}
.m2-service-foot .m2-link-arrow { color: var(--color-primary); }
.m2-service-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.m2-service-tag {
  font-family: var(--font-text); font-size: 11px;
  color: var(--color-ink-subtle);
  padding: 3px 8px; border-radius: 4px;
  background: var(--color-surface-3);
  white-space: nowrap;
}

/* ---------- About: story section ---------- */
.m2-about-story {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.m2-about-story-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
}
.m2-about-story-body {
  display: flex; flex-direction: column;
  gap: 20px;
}
.m2-about-story-body p {
  font-family: var(--font-text);
  font-size: 17px; font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.2px;
  color: var(--color-ink);
  margin: 0;
}
.m2-about-story-body p + p { margin-top: 18px; }
@media (max-width: 900px) {
  .m2-about-story { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- About bios ---------- */
.m2-bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .m2-bio-grid { grid-template-columns: 1fr; } }
.m2-bio {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.m2-bio-portrait {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: var(--color-surface-3);
  border-bottom: 1px solid var(--color-hairline);
}
.m2-bio-portrait .image-slot,
.m2-bio-portrait image-slot { width: 100% !important; height: 100% !important; display: block; }
.m2-bio-body {
  padding: 32px;
  display: flex; flex-direction: column;
}
/* Intentional spacing zones: identity → story → personality */
.m2-bio-body > * { margin: 0; }
.m2-bio-body > .m2-bio-role + .m2-bio-name { margin-top: 4px; }
.m2-bio-body > .m2-bio-name + .m2-bio-text { margin-top: 18px; }
.m2-bio-body > .m2-bio-text + .m2-bio-facts { margin-top: 28px; }
.m2-bio-name {
  font-family: var(--font-text); font-size: 28px; font-weight: 600;
  line-height: 1.14; letter-spacing: -0.3px;
  color: var(--color-ink); margin: 0;
}
.m2-bio-role {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-primary);
  letter-spacing: 0.6px;
}
.m2-bio-text {
  font-family: var(--font-text); font-size: 15px; color: var(--color-ink-muted);
  line-height: 1.65; margin: 0;
}
/* Personal facts — stacked rows with hairline rules between (no 2-col jumble) */
.m2-bio-facts {
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
  border-top: 1px solid var(--color-hairline);
}
.m2-bio-facts > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-hairline);
}
.m2-bio-facts > div:last-child { border-bottom: 0; }
.m2-bio-facts dt {
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin: 0 0 4px;
}
.m2-bio-facts dd {
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Approach / principles — boxed cards, 3-col desktop / scroll on phone ---------- */
.m2-principles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.m2-principle {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 14px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  min-height: 220px;
  position: relative; overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-principle:hover { border-color: var(--color-hairline-strong); background: var(--color-surface-2); }
/* Intentional spacing per relationship — matches Week/How-We-Work cards */
.m2-principle > * { margin: 0; }
.m2-principle > .m2-principle-num + .m2-principle-h { margin-top: 20px; }
.m2-principle > .m2-principle-h + .m2-principle-p { margin-top: 8px; }
.m2-principle-num {
  font-family: var(--font-text); font-size: 36px; font-weight: 600;
  color: var(--color-ink-subtle); letter-spacing: -0.8px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m2-principle-h {
  font-family: var(--font-text); font-size: 18px; font-weight: 600;
  line-height: 1.24; letter-spacing: -0.3px;
  color: var(--color-ink);
}
.m2-principle-p {
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-muted);
  letter-spacing: -0.1px;
  line-height: 1.55;
}
@media (max-width: 1000px) {
  .m2-principles { grid-template-columns: repeat(2, 1fr); }
}
/* Phone: horizontal scroll carousel — one principle at a time */
@media (max-width: 700px) {
  .m2-principles {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 4px 32px 20px;
    margin: 0 -32px;
    scroll-padding-inline: 32px;
    mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
  }
  .m2-principles::-webkit-scrollbar { display: none; }
  .m2-principles > .m2-principle {
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }
}
@media (max-width: 600px) {
  .m2-principles {
    padding: 4px 20px 20px;
    margin: 0 -20px;
    scroll-padding-inline: 20px;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
  }
}

/* ---------- Service detail: hero ---------- */
.m2-svc-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-subtle);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 150ms ease;
}
.m2-svc-back:hover { color: var(--color-ink); text-decoration: none; }
.m2-svc-back-arrow { display: inline-flex; transform: rotate(180deg); }

.m2-svc-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.m2-svc-hero.is-centered {
  display: block;
  max-width: 960px; margin: 0 auto;
  text-align: center;
}
.m2-svc-hero-text > .m2-eyebrow-pill { display: inline-block; }
.m2-svc-hero-headline {
  font-family: var(--font-text);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--color-ink);
  margin: 20px 0 0;
  text-wrap: balance;
}
.m2-svc-hero-sub {
  font-family: var(--font-text);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.2px;
  color: var(--color-ink-muted);
  margin: 20px 0 0;
  max-width: 560px;
}
.m2-svc-hero.is-centered .m2-svc-hero-sub {
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.m2-svc-hero-ctas {
  display: flex; gap: 12px; margin-top: 28px;
  flex-wrap: wrap;
}
.m2-svc-hero.is-centered .m2-svc-hero-ctas { justify-content: center; }
.m2-svc-hero-image {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  position: relative;
}
@media (max-width: 900px) {
  .m2-svc-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .m2-svc-hero-image { aspect-ratio: 4 / 3; max-width: 560px; margin: 0 auto; width: 100%; }
}

/* ---------- Service detail: includes list (editorial 2-col, hairline rules) ---------- */
.m2-svc-includes {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  border-top: 1px solid var(--color-hairline);
}
.m2-svc-includes li {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-hairline);
}
.m2-svc-includes-title {
  font-family: var(--font-text); font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px; color: var(--color-ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.m2-svc-includes-body {
  font-family: var(--font-text); font-size: 14px; font-weight: 400;
  letter-spacing: -0.1px; color: var(--color-ink-muted);
  margin: 0;
  line-height: 1.5;
}
/* Phone: horizontal scroll carousel — each include becomes a swipeable card */
@media (max-width: 700px) {
  .m2-svc-includes {
    display: flex !important;
    grid-template-columns: none !important;
    border-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    column-gap: 0;
    gap: 12px;
    padding: 4px 32px 20px;
    margin: 0 -32px;
    scroll-padding-inline: 32px;
    mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
  }
  .m2-svc-includes::-webkit-scrollbar { display: none; }
  .m2-svc-includes > li {
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 78%;
    scroll-snap-align: center;
    /* Card treatment in carousel mode (replaces hairline-row layout) */
    background: var(--color-surface-1);
    border: 1px solid var(--color-hairline);
    border-radius: 14px;
    padding: 24px 22px;
  }
}
@media (max-width: 600px) {
  .m2-svc-includes {
    padding: 4px 20px 20px;
    margin: 0 -20px;
    scroll-padding-inline: 20px;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
  }
}

/* Who it's for */
.m2-fitlist { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.m2-fitlist > div {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--color-hairline);
  background: var(--color-surface-1);
}
.m2-fitlist h4 {
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-ink-subtle); margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.m2-fitlist h4 svg { width: 16px; height: 16px; }
.m2-fitlist h4.is-good { color: var(--color-success); }
.m2-fitlist h4.is-bad { color: var(--color-ink-subtle); }
.m2-fitlist ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.m2-fitlist li {
  font-family: var(--font-text); font-size: 14px; color: var(--color-ink-muted);
  line-height: 1.5;
}
@media (max-width: 700px) { .m2-fitlist { grid-template-columns: 1fr; } }

/* ---------- Project spotlight card ---------- */
.m2-spotlight {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-surface-2);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.m2-spotlight::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 100% 0%, rgba(229, 72, 77, 0.18) 0%, rgba(229, 72, 77, 0) 60%);
}
.m2-spotlight > * { position: relative; }
.m2-spotlight-img {
  aspect-ratio: 1 / 1; background: var(--color-surface-3);
  border-right: 1px solid var(--color-hairline);
  overflow: hidden;
}
.m2-spotlight-img .image-slot,
.m2-spotlight-img image-slot { width: 100% !important; height: 100% !important; display: block; }
/* Intentional, varied spacing per element relationship — not a uniform gap. */
.m2-spotlight-body { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.m2-spotlight-body > * { margin: 0; }
.m2-spotlight-body > h3 + p { margin-top: 10px; }
.m2-spotlight-body > p + .m2-spotlight-stats,
.m2-spotlight-body > h3 + .m2-spotlight-stats { margin-top: 32px; }
.m2-spotlight-body > .m2-spotlight-stats + .m2-spotlight-cta,
.m2-spotlight-body > p + .m2-spotlight-cta { margin-top: 24px; }
.m2-spotlight-num {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-primary);
  letter-spacing: 0.6px;
}
.m2-spotlight-title {
  font-family: var(--font-text); font-size: clamp(28px, 3vw, 34px);
  font-weight: 600; letter-spacing: -0.4px; line-height: 1.15;
  color: var(--color-ink);
}
.m2-spotlight-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding-top: 16px; border-top: 1px solid var(--color-hairline);
}
.m2-spotlight-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 16px;
  border-left: 1px solid var(--color-hairline);
  min-width: 0;
}
.m2-spotlight-stat:first-child { padding-left: 0; border-left: 0; }
.m2-spotlight-stat-num {
  font-family: var(--font-text); font-size: 34px; font-weight: 700;
  letter-spacing: -0.374px; color: var(--color-ink); line-height: 1.1;
}
.m2-spotlight-stat-num .pct { color: var(--color-primary); }
.m2-spotlight-stat-lbl {
  font-family: var(--font-text); font-size: 12px; color: var(--color-ink-subtle);
}
.m2-spotlight-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .m2-spotlight { grid-template-columns: 1fr; }
  .m2-spotlight-img { aspect-ratio: 16/10; border-right: 0; border-bottom: 1px solid var(--color-hairline); }
  .m2-spotlight-body { padding: 32px 28px 28px; }
  .m2-spotlight-body > p + .m2-spotlight-stats { margin-top: 28px; }
  .m2-spotlight-body > .m2-spotlight-stats + .m2-spotlight-cta { margin-top: 22px; }
}

/* ---------- Process steps ---------- */
.m2-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .m2-process { grid-template-columns: repeat(2, 1fr); } }
/* Phone: horizontal scroll carousel — one step at a time, swipeable */
@media (max-width: 700px) {
  .m2-process {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 4px 32px 20px;
    margin: 0 -32px;
    scroll-padding-inline: 32px;
    mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
  }
  .m2-process::-webkit-scrollbar { display: none; }
  .m2-process > .m2-step {
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }
}
@media (max-width: 600px) {
  .m2-process {
    padding: 4px 20px 20px;
    margin: 0 -20px;
    scroll-padding-inline: 20px;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
  }
}
.m2-step {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 14px;
  padding: 28px 22px 24px;
  display: flex; flex-direction: column;
  min-height: 220px;
  position: relative; overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-step:hover { border-color: var(--color-hairline-strong); background: var(--color-surface-2); }
/* Intentional spacing per relationship */
.m2-step > * { margin: 0; }
.m2-step > .m2-step-num + .m2-step-title { margin-top: 20px; }
.m2-step > .m2-step-title + .m2-step-body { margin-top: 8px; }

.m2-step-num {
  font-family: var(--font-text); font-size: 36px; font-weight: 600;
  color: var(--color-ink-subtle); letter-spacing: -0.8px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m2-step-title {
  font-family: var(--font-text); font-size: 18px; font-weight: 600;
  line-height: 1.24; letter-spacing: -0.4px;
  color: var(--color-ink);
}
.m2-step-body {
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-muted); letter-spacing: -0.1px;
  line-height: 1.5;
}

/* ---------- FAQ ---------- */
.m2-faq {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  overflow: hidden;
}
.m2-faq-row {
  padding: 22px 28px;
  border-top: 1px solid var(--color-hairline);
  cursor: pointer;
  transition: background 120ms;
}
.m2-faq-row:first-child { border-top: 0; }
.m2-faq-row:hover { background: var(--color-surface-2); }
.m2-faq-row.is-open { background: var(--color-surface-2); }
.m2-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-text); font-size: 16px; font-weight: 600;
  color: var(--color-ink);
}
.m2-faq-toggle {
  width: 28px; height: 28px; border-radius: 9999px;
  background: var(--color-surface-3); color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 120ms;
}
.m2-faq-toggle svg { width: 14px; height: 14px; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.m2-faq-row.is-open .m2-faq-toggle { background: var(--color-primary); color: #fff; }
.m2-faq-row.is-open .m2-faq-toggle svg { transform: rotate(45deg); }
.m2-faq-a {
  font-family: var(--font-text); font-size: 14px; line-height: 1.65;
  color: var(--color-ink-muted); margin: 14px 0 0;
  max-width: 720px;
  overflow: hidden;
  max-height: 500px;
  transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
              margin 280ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
}
.m2-faq-row:not(.is-open) .m2-faq-a {
  max-height: 0;
  margin: 0;
  opacity: 0;
}

/* ---------- Closing CTA ---------- */
.m2-cta-section {
  position: relative; padding: 120px 0 200px; overflow: hidden;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(229, 72, 77, 0.22) 0%, rgba(229, 72, 77, 0) 60%),
    var(--color-canvas);
}
.m2-cta-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.m2-cta-inner .m2-subhead { max-width: 560px; }
.m2-cta-dome {
  position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 1100px; opacity: calc(0.85 * var(--m2-glow-scale, 1)); z-index: 1;
}

/* ---------- Footer (compact) ---------- */
.m2-footer {
  background: var(--color-canvas);
  border-top: 1px solid var(--color-hairline);
  padding: 48px 0 24px;
}
.m2-footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 32px;
}
.m2-footer-col-links h4 {
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-ink); margin: 0 0 16px;
}
.m2-footer-col-links ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.m2-footer-col-links a {
  font-family: var(--font-text); font-size: 13px; color: var(--color-ink-subtle);
  text-decoration: none; transition: color 150ms ease;
}
.m2-footer-col-links a:hover { color: var(--color-ink); }
.m2-footer-brand .m2-footer-mark { height: 28px; width: auto; display: block; }
.m2-footer-tag {
  font-family: var(--font-text); font-size: 14px; font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--color-ink-subtle);
  line-height: 1.55; margin: 18px 0 0; max-width: 340px;
}
.m2-footer-contact {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
}
.m2-footer-contact-link {
  font-family: var(--font-text); font-size: 14px; color: var(--color-ink);
  text-decoration: none; transition: color 150ms ease;
}
.m2-footer-contact-link:hover { color: var(--color-primary); }
.m2-footer-contact-meta {
  font-family: var(--font-text); font-size: 13px; color: var(--color-ink-subtle);
}
.m2-footer-contact .m2-footer-social { margin-top: 14px; }

.m2-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-family: var(--font-text); font-size: 12px; color: var(--color-ink-tertiary);
  padding-top: 20px;
  border-top: 1px solid var(--color-hairline);
}
@media (max-width: 1000px) {
  .m2-footer-top { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
}
@media (max-width: 800px) {
  .m2-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .m2-footer { padding: 40px 0 24px; }
  /* Phone: keep brand + contact, hide the link columns (nav has those) */
  .m2-footer-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; }
  .m2-footer-col-links { display: none; }
  .m2-footer-bottom { font-size: 11px; padding-top: 16px; }
}

/* ---------- Contact page ---------- */
.m2-contact-page { position: relative; padding: 96px 0 96px; overflow: hidden; }
.m2-contact-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: start;
}
/* .m2-contact-grid responsive handled in the global breakpoint block above */
.m2-contact-pitch { display: flex; flex-direction: column; }
.m2-contact-pitch > * { margin: 0; }
.m2-contact-pitch .m2-eyebrow-pill { align-self: flex-start; }
/* Contact pitch column — generous spacing, headline-led, one social proof moment */
.m2-contact-headline {
  margin: 4px 0 0;
  max-width: 540px;
}
.m2-contact-sub {
  margin: 18px 0 0;
  max-width: 480px;
}
.m2-contact-direct {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--color-ink-subtle);
  margin: 12px 0 0;
}
.m2-contact-direct a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-hairline);
  transition: color 150ms ease, border-color 150ms ease;
}
.m2-contact-direct a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}


/* Form heading wrapper inside the form card */
.m2-form-head {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 8px;
}
.m2-form-finep {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--color-ink-subtle);
  text-align: center;
  margin: 0;
}

/* Success state */
.m2-contact-success-head {
  display: flex; flex-direction: column; gap: 8px;
}
.m2-contact-success-body {
  font-family: var(--font-text);
  font-size: 16px; line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--color-ink-muted);
  margin: 4px 0 0;
}
.m2-contact-success-body strong {
  color: var(--color-ink);
  font-weight: 600;
}
.m2-contact-success-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 8px;
}

.m2-contact-form-card { padding: 32px; }
.m2-form { display: flex; flex-direction: column; gap: 18px; }
.m2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m2-form-field { display: flex; flex-direction: column; gap: 8px; }
.m2-form-field > span {
  font-family: var(--font-text); font-size: 13px; color: var(--color-ink);
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; white-space: nowrap;
}
.m2-form-field > span .req { color: var(--color-primary); font-size: 11px; font-weight: 400; }
.m2-form-field > span .opt { color: var(--color-ink-subtle); font-size: 11px; font-weight: 400; }
.m2-form-field input,
.m2-form-field textarea,
.m2-form-field select {
  background: var(--color-canvas); color: var(--color-ink);
  font-family: var(--font-text); font-size: 14px;
  padding: 11px 14px; border: 1px solid var(--color-hairline);
  border-radius: 8px; outline: none; resize: vertical;
  transition: all 120ms;
}
.m2-form-field input::placeholder,
.m2-form-field textarea::placeholder { color: var(--color-ink-tertiary); }
.m2-form-field input:focus,
.m2-form-field textarea:focus,
.m2-form-field select:focus {
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.5);
  border-color: var(--color-hairline-strong);
}
.m2-form-field input.has-error,
.m2-form-field select.has-error,
.m2-form-field textarea.has-error {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.4);
}
.m2-form-err {
  font-family: var(--font-text); font-size: 12px; color: var(--color-primary);
}
.m2-chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.m2-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 9999px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  font-family: var(--font-text); font-size: 13px; color: var(--color-ink-muted);
  cursor: pointer; transition: all 120ms;
  user-select: none;
  white-space: nowrap;
}
.m2-chip:hover { border-color: var(--color-hairline-strong); color: var(--color-ink); }
.m2-chip.is-selected {
  background: rgba(229, 72, 77, 0.12);
  border-color: var(--color-primary);
  color: var(--color-ink);
}
.m2-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m2-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  font-family: var(--font-text); font-size: 13px; color: var(--color-ink-muted);
  cursor: pointer; transition: all 120ms;
  user-select: none;
  white-space: nowrap;
}
.m2-radio:hover { border-color: var(--color-hairline-strong); color: var(--color-ink); }
.m2-radio.is-selected {
  background: rgba(229, 72, 77, 0.10);
  border-color: var(--color-primary);
  color: var(--color-ink);
}
.m2-radio .dot {
  width: 14px; height: 14px; border-radius: 9999px;
  border: 1.5px solid var(--color-ink-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.m2-radio.is-selected .dot { border-color: var(--color-primary); }
.m2-radio.is-selected .dot::after {
  content: ''; width: 7px; height: 7px; border-radius: 9999px; background: var(--color-primary);
}
.m2-contact-success {
  text-align: left; padding: 12px 8px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.m2-contact-check {
  width: 56px; height: 56px; border-radius: 9999px;
  background: rgba(39, 166, 68, 0.18);
  color: #6be38a;
  display: flex; align-items: center; justify-content: center;
}
.m2-contact-check svg { width: 28px; height: 28px; }
.m2-success-summary {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  padding: 16px 18px;
  width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.m2-success-summary dt { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-ink-subtle); }
.m2-success-summary dd { font-family: var(--font-text); font-size: 14px; color: var(--color-ink); margin: 0 0 6px; }

/* ---------- Image-slot styling (placeholder appearance) ---------- */
image-slot {
  --is-bg: var(--color-surface-3);
  --is-border: var(--color-hairline);
  --is-fg: var(--color-ink-subtle);
}

/* ───────────────────────────────────────────────────────────────────
   Astro <img> tags inside aspect-ratio'd containers
   (Replaces the image-slot web component behavior: fill + cover-fit
    via normal flow — matches the original image-slot CSS pattern
    of `width/height: 100%; display: block;`.)
   ─────────────────────────────────────────────────────────────────── */
.m2-reel > img,
.m2-spotlight-img > img,
.m2-port-cover > img,
.m2-feature-visual > img,
.m2-bio-portrait > img,
.m2-video-thumb > img,
.m2-video-feature-thumb > img,
.m2-testimonial-video-frame > img,
.m2-project-cover > img,
.m2-project-gallery-tile > img,
.m2-project-next-bg > img,
.m2-about-story-portrait > img,
.m2-svc-hero-image > img,
.m2-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Stat row (subtle, used on About / service pages) ---------- */
.m2-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.m2-stat-row > div {
  padding: 40px 32px;
  border-left: 1px solid var(--color-hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.m2-stat-row > div:first-child { border-left: 0; }
.m2-stat-row .num {
  font-family: var(--font-text); font-size: 60px; font-weight: 600;
  letter-spacing: -1.5px; color: var(--color-ink); line-height: 0.98;
  font-variant-numeric: tabular-nums;
}
.m2-stat-row .num .accent { color: var(--color-primary); }
.m2-stat-row .lbl {
  font-family: var(--font-text); font-size: 14px; color: var(--color-ink-muted);
  letter-spacing: 0; line-height: 1.4;
}
@media (max-width: 800px) {
  .m2-stat-row { grid-template-columns: repeat(2, 1fr); }
  .m2-stat-row > div { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .m2-stat-row > div:nth-child(1),
  .m2-stat-row > div:nth-child(2) { border-top: 0; }
  .m2-stat-row > div:nth-child(2n) { border-left: 1px solid var(--color-hairline); }
}

/* ---------- Filter chips (portfolio) ---------- */
.m2-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px;
}
.m2-filter-chip {
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  line-height: 1.29; letter-spacing: -0.1px;
  padding: 8px 16px; border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink-subtle);
  cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  white-space: nowrap;
}
.m2-filter-chip:hover { color: var(--color-ink); border-color: var(--color-hairline-strong); }
.m2-filter-chip.is-active {
  background: var(--color-surface-2);
  color: var(--color-ink);
  border-color: var(--color-ink);
}

/* ─ Filter chips: horizontal scroll carousel on tablet/phone ─
   At <=900px the 8 chips wrap into multiple rows and waste vertical space.
   Convert to a single swipeable row with edge fade so they stay accessible
   without consuming the page. */
@media (max-width: 900px) {
  .m2-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 32px 10px;
    margin: 0 -32px 32px;
    scroll-padding-left: 32px;
    mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 48px), transparent calc(100% - 16px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 48px), transparent calc(100% - 16px));
  }
  .m2-filter-bar::-webkit-scrollbar { display: none; }
  .m2-filter-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
@media (max-width: 600px) {
  .m2-filter-bar {
    padding: 2px 20px 10px;
    margin: 0 -20px 28px;
    scroll-padding-left: 20px;
    mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 40px), transparent calc(100% - 8px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 40px), transparent calc(100% - 8px));
  }
}

/* ---------- Modal (video play) ---------- */
.m2-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: m2-modal-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes m2-modal-in { from { opacity: 0; } to { opacity: 1; } }
.m2-modal-body {
  width: 100%; max-width: 960px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 16px;
  overflow: hidden;
}
.m2-modal-video {
  aspect-ratio: 16 / 9; background: var(--color-surface-3); position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-subtle);
  font-family: var(--font-mono); font-size: 13px;
}
.m2-modal-meta { padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.m2-modal-close {
  position: absolute; top: 24px; right: 24px;
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong);
  color: var(--color-ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.m2-modal-close:hover { background: var(--color-surface-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .m2-display-xl { font-size: 48px; letter-spacing: -0.24px; }
  .m2-display-lg { font-size: 36px; letter-spacing: 0; }
  .m2-display-md { font-size: 30px; letter-spacing: -0.33px; }
  .m2-contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .m2-hero-split .m2-hero-inner { grid-template-columns: 1fr !important; }
  .m2-about-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-width: 900px) {
  .m2-display-xl { font-size: 40px; letter-spacing: -0.20px; }
  .m2-display-lg { font-size: 32px; letter-spacing: 0; }
  .m2-display-md { font-size: 26px; letter-spacing: -0.28px; }
  .m2-nav-links { display: none; }
  .m2-logos-grid { grid-template-columns: repeat(3, 1fr); }
  .m2-hero { padding: 64px 0 48px; }
}

@media (max-width: 600px) {
  .m2-container { padding: 0 20px; }
  .m2-nav-wrap { padding: 12px 16px 0; }
  .m2-display-xl { font-size: 32px; letter-spacing: -0.16px; }
  .m2-display-lg { font-size: 28px; letter-spacing: 0; }
  .m2-form-row { grid-template-columns: 1fr; }
  .m2-radio-group { grid-template-columns: 1fr; }
  .m2-spotlight-body { padding: 28px 24px 24px; }
}

::selection { background: rgba(229, 72, 77, 0.4); color: var(--color-ink); }


/* ============================================================
   HOMEPAGE — content blocks (reel grid, pricing, week timeline)
   ============================================================ */

/* ---------- Reel grid (Instagram-reel-aspect video tiles) ---------- */
.m2-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.m2-reel {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  color: inherit;
  display: block;
}
.m2-reel:hover {
  transform: translateY(-2px);
  border-color: var(--color-hairline-strong);
  text-decoration: none;
}
.m2-reel .image-slot,
.m2-reel image-slot {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
.m2-reel-scrim {
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, transparent 0%, rgba(15,10,10,0.85) 100%);
  pointer-events: none;
}
.m2-reel-meta {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--color-ink);
}
.m2-reel-client {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  letter-spacing: -0.224px; line-height: 1.2;
}
.m2-reel-kind {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-ink-muted); letter-spacing: 0.4px;
  text-transform: uppercase;
}
.m2-reel-runtime {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-ink);
  background: rgba(15, 10, 10, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 4px 8px; border-radius: 4px;
  letter-spacing: 0.3px;
}
.m2-reel-play {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%) scale(0.92);
  border-radius: 9999px;
  background: rgba(15, 10, 10, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-reel:hover .m2-reel-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.m2-reel-play svg { width: 18px; height: 18px; color: var(--color-ink); margin-left: 2px; }
@media (max-width: 900px) {
  .m2-reels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .m2-reels { grid-template-columns: 1fr; }
}

/* ---------- Pricing tiers ---------- */
.m2-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.m2-tier {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-tier:hover { border-color: var(--color-hairline-strong); background: var(--color-surface-2); }
.m2-tier.is-featured {
  border-color: rgba(229, 72, 77, 0.45);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(229, 72, 77, 0.18) 0%, rgba(229, 72, 77, 0) 60%),
    var(--color-surface-2);
}
.m2-tier-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-primary);
  padding: 4px 9px;
  background: rgba(229, 72, 77, 0.12);
  border: 1px solid rgba(229, 72, 77, 0.32);
  border-radius: 9999px;
}
.m2-tier-name {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-ink-subtle);
}
.m2-tier-price {
  display: flex; align-items: baseline; gap: 6px;
}
.m2-tier-price .num {
  font-family: var(--font-text); font-size: 56px; font-weight: 600;
  letter-spacing: -0.28px; line-height: 1;
  color: var(--color-ink);
}
.m2-tier-price .per {
  font-family: var(--font-text); font-size: 14px; font-weight: 400;
  color: var(--color-ink-subtle); letter-spacing: -0.224px;
}
.m2-tier-tag {
  font-family: var(--font-text); font-size: 17px; font-weight: 400;
  line-height: 1.47; letter-spacing: -0.374px;
  color: var(--color-ink-muted);
  min-height: 50px;
}
.m2-tier-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--color-hairline); padding-top: 18px;
}
.m2-tier-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-muted); letter-spacing: -0.224px;
  line-height: 1.4;
}
.m2-tier-list .check {
  flex-shrink: 0; margin-top: 2px;
  color: var(--color-primary);
}
.m2-tier-cta { margin-top: auto; }
@media (max-width: 900px) {
  .m2-pricing { grid-template-columns: 1fr; }
}

/* ---------- Week-at-M² timeline ---------- */
.m2-week {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.m2-week-day {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 14px;
  padding: 28px 22px 24px;
  display: flex; flex-direction: column;
  min-height: 240px;
  position: relative; overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-week-day:hover { border-color: var(--color-hairline-strong); background: var(--color-surface-2); }
/* Intentional spacing per relationship */
.m2-week-day > * { margin: 0; }
.m2-week-day > .m2-week-num + .m2-week-title { margin-top: 20px; }
.m2-week-day > .m2-week-title + .m2-week-body { margin-top: 8px; }
.m2-week-day > .m2-week-tag { margin-top: auto; padding-top: 20px; }

.m2-week-num {
  font-family: var(--font-text); font-size: 36px; font-weight: 600;
  color: var(--color-ink-subtle); letter-spacing: -0.8px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m2-week-title {
  font-family: var(--font-text); font-size: 18px; font-weight: 600;
  line-height: 1.24; letter-spacing: -0.4px;
  color: var(--color-ink);
}
.m2-week-body {
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-muted); letter-spacing: -0.1px;
  line-height: 1.5;
}
.m2-week-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-ink-subtle); letter-spacing: 0.4px;
}
.m2-week-tag .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--color-primary); opacity: 0.8; }
@media (max-width: 1100px) {
  .m2-week { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .m2-week { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .m2-week { grid-template-columns: 1fr; }
}


/* ---------- Featured single-video testimonial (homepage) ---------- */
.m2-video-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.m2-video-feature::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 100% 0%, rgba(229, 72, 77, 0.10) 0%, rgba(229, 72, 77, 0) 60%);
}
.m2-video-feature > * { position: relative; }
.m2-video-feature:hover { border-color: var(--color-hairline-strong); text-decoration: none; }
.m2-video-feature-thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--color-surface-3);
  border-right: 1px solid var(--color-hairline);
}
.m2-video-feature-thumb .image-slot,
.m2-video-feature-thumb image-slot {
  width: 100% !important; height: 100% !important; display: block;
}
.m2-video-feature:hover .m2-video-play {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.m2-video-feature:hover .m2-video-play svg { color: #fff; }
.m2-video-feature-body {
  padding: 48px 44px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.m2-video-feature-body > * { margin: 0; }
.m2-video-feature-body .m2-quote-large {
  font-size: 28px;
  line-height: 1.28;
  letter-spacing: -0.2px;
}
.m2-video-feature-body .m2-quote-meta { margin-top: 28px; }
@media (max-width: 900px) {
  .m2-video-feature { grid-template-columns: 1fr; }
  .m2-video-feature-thumb { border-right: 0; border-bottom: 1px solid var(--color-hairline); aspect-ratio: 16 / 10; }
  .m2-video-feature-body { padding: 32px; }
  .m2-video-feature-body .m2-quote-large { font-size: 22px; line-height: 1.32; }
  .m2-video-feature-body .m2-quote-meta { margin-top: 24px; }
}


/* ---------- Custom Vimeo player controls ---------- */
.m2-vp-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(15,10,10,0) 0%, rgba(15,10,10,0.85) 100%);
  z-index: 3;
  font-family: var(--font-text);
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-video-feature-thumb:hover .m2-vp-controls { opacity: 1; }
.m2-vp-btn {
  width: 32px; height: 32px; border-radius: 9999px;
  background: rgba(15, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms;
  padding: 0;
}
.m2-vp-btn:hover { background: var(--color-primary); border-color: var(--color-primary); }
.m2-vp-time {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-ink-muted); letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 32px;
}
.m2-vp-scrub {
  flex: 1; min-width: 80px;
  padding: 8px 0;
  cursor: pointer;
}
.m2-vp-scrub-track {
  height: 3px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: height 120ms;
}
.m2-vp-scrub:hover .m2-vp-scrub-track { height: 5px; }
.m2-vp-scrub-fill {
  height: 100%; background: var(--color-primary);
  border-radius: inherit;
  transition: width 80ms linear;
}
.m2-vp-vol {
  width: 72px;
  padding: 8px 0;
  cursor: pointer;
  flex-shrink: 0;
}
.m2-vp-vol-track {
  height: 3px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.m2-vp-vol-fill {
  height: 100%; background: var(--color-ink);
  border-radius: inherit;
}

/* Mobile: tighten and always show */
@media (max-width: 700px) {
  .m2-vp-controls { opacity: 1; padding: 10px 12px; gap: 8px; }
  .m2-vp-vol { width: 48px; }
}


/* ============================================================
   CLOSING CTA — poster headline + marquee strip + glow
   ============================================================ */
.m2-cta-poster {
  position: relative;
  padding: 88px 0 96px;
  background: var(--color-canvas);
  overflow: hidden;
}

/* Scarlet glow anchored low — pulls the eye toward the button */
.m2-cta-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--m2-glow-scale, 1);
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(229,72,77,0.30) 0%, rgba(229,72,77,0) 65%),
    radial-gradient(40% 35% at 18% 90%, rgba(255,96,100,0.18) 0%, rgba(255,96,100,0) 60%),
    radial-gradient(35% 30% at 85% 90%, rgba(229,72,77,0.14) 0%, rgba(229,72,77,0) 60%);
}

/* Poster headline — massive, scarlet-outlined accent on the trailing words */
.m2-cta-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
}
.m2-cta-inner .m2-subhead { max-width: 560px; }
.m2-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, 144px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.72px;
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
  max-width: 1100px;
}
.m2-cta-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-primary);
  text-stroke: 2px var(--color-primary);
  font-style: italic;
  font-weight: 600;
}

@media (max-width: 900px) {
  .m2-cta-poster { padding: 64px 0 72px; }
  .m2-cta-headline { font-size: clamp(40px, 12vw, 88px); }
  .m2-cta-outline { -webkit-text-stroke-width: 1.5px; }
}


/* ---------- Footer social row ---------- */
.m2-footer-social {
  display: flex; gap: 8px; margin-top: 18px;
}
.m2-footer-social-link {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink-subtle);
  background: transparent;
  transition: border-color 120ms cubic-bezier(0.22, 1, 0.36, 1),
              color 120ms cubic-bezier(0.22, 1, 0.36, 1),
              background 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-footer-social-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(229, 72, 77, 0.08);
}


/* ---------- Portfolio text-only tile (priority 4) ---------- */
.m2-port-card-text {
  /* Same container shape as a standard tile, but no cover image */
  min-height: 200px;
  justify-content: center;
}
.m2-port-card-text .m2-port-meta {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1; justify-content: center;
}
.m2-port-card-text .m2-port-client {
  font-size: 24px;
  letter-spacing: -0.3px;
  line-height: 1.19;
}
.m2-port-card-text .m2-link-arrow {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 14px;
}

/* Featured (priority 1) tweaks — desktop/tablet only; mobile matches standard */
@media (min-width: 701px) {
  .m2-port-card-feature .m2-port-client { font-size: 32px; letter-spacing: -0.4px; }
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE / TABLET RESPONSIVE LAYER
   Hamburger nav, gallery-grid overrides, form typography polish.
   ───────────────────────────────────────────────────────────────────── */

/* Hamburger button — hidden on desktop, shown on mobile */
.m2-nav-toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 160ms ease, background 160ms ease;
}
.m2-nav-toggle:hover { border-color: var(--color-ink-subtle); }
.m2-nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--color-ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.m2-nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.m2-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.m2-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .m2-nav-toggle { display: inline-flex; }
  /* Hide the entire nav-right cluster when the hamburger takes over.
     The mobile menu has the "Book a call" CTA at the bottom, so the nav stays
     clean: logo on the left, hamburger on the right. */
  .m2-nav-right { display: none; }
}

/* Mobile menu overlay — full canvas, branded, animated */
.m2-mobile-menu {
  position: fixed; inset: 0;
  background: var(--color-canvas);
  z-index: 110;
  padding-top: 0;
  overflow-y: auto;
  overflow-x: clip;
  /* Hide the vertical scrollbar — content still scrolls if needed */
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 1;
  animation: m2-mobile-menu-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.m2-mobile-menu::-webkit-scrollbar { display: none; }
.m2-mobile-menu-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.m2-mobile-menu-mark {
  display: inline-flex; align-items: center;
}
.m2-mobile-menu-mark img { height: 28px; width: auto; display: block; }
.m2-mobile-menu-close {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 9999px;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.m2-mobile-menu-close:hover {
  border-color: var(--color-ink-subtle);
  color: var(--color-primary);
}
@keyframes m2-mobile-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.m2-mobile-menu-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 24px 48px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.m2-mobile-menu-glow {
  position: absolute; pointer-events: none;
  top: -140px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(229,72,77,0.20) 0%, rgba(229,72,77,0) 65%);
  filter: blur(40px);
  z-index: 0;
}
.m2-mobile-menu-links {
  position: relative; z-index: 1;
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column;
}
.m2-mobile-menu-links li {
  border-bottom: 1px solid var(--color-hairline);
}
.m2-mobile-menu-links li:first-child {
  border-top: 1px solid var(--color-hairline);
}
.m2-mobile-menu-links a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--color-ink);
  text-decoration: none;
  padding: 22px 4px;
  transition: color 160ms ease, padding-left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-mobile-menu-link-arrow {
  display: inline-flex;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
  color: var(--color-ink-subtle);
}
.m2-mobile-menu-links a:hover { color: var(--color-primary); padding-left: 8px; }
.m2-mobile-menu-links a:hover .m2-mobile-menu-link-arrow {
  opacity: 1; transform: translateX(0); color: var(--color-primary);
}
.m2-mobile-menu-links a.is-active { color: var(--color-primary); }
.m2-mobile-menu-links a.is-active .m2-mobile-menu-link-arrow {
  opacity: 1; transform: translateX(0); color: var(--color-primary);
}

.m2-mobile-menu-footer {
  position: relative; z-index: 1;
  margin-top: auto;
  padding-top: 48px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 28px;
}
.m2-mobile-menu-cta {
  align-self: stretch;
  justify-content: center;
}
.m2-mobile-menu-contact {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.m2-mobile-menu-contact a {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-ink-muted);
  text-decoration: none;
  letter-spacing: -0.224px;
  transition: color 160ms ease;
}
.m2-mobile-menu-contact a:hover { color: var(--color-ink); }
.m2-mobile-menu-social {
  display: flex; gap: 10px;
}
.m2-mobile-menu-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  color: var(--color-ink-muted);
  transition: color 160ms ease, border-color 160ms ease;
}
.m2-mobile-menu-social a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* On very small phones, dial back the link size a touch */
@media (max-width: 380px) {
  .m2-mobile-menu-links a { font-size: 30px; padding: 20px 4px; }
}

/* ─ Mobile type scale — preserve hierarchy at every breakpoint ─
   Body never grows large enough to challenge headings.
   !important beats known inline fontSize overrides on form-question pages. */
@media (max-width: 1100px) {
  .m2-subhead { font-size: 20px; line-height: 1.5; }
}
@media (max-width: 900px) {
  .m2-subhead { font-size: 18px; line-height: 1.5; }
}
@media (max-width: 700px) {
  .m2-display-md { font-size: 24px !important; letter-spacing: -0.3px !important; }
  .m2-display-xl { font-size: 40px !important; letter-spacing: -0.2px !important; }
  .m2-subhead    { font-size: 17px; line-height: 1.5; }
  .m2-body       { font-size: 16px; }
}
@media (max-width: 480px) {
  .m2-display-xl { font-size: 32px !important; letter-spacing: -0.16px !important; }
  .m2-display-lg { font-size: 26px !important; }
  .m2-display-md { font-size: 22px !important; letter-spacing: -0.3px !important; }
  .m2-subhead    { font-size: 16px; line-height: 1.5; }
}

/* Form list items with long option text — make sure they wrap and stay tappable */
@media (max-width: 600px) {
  /* The form option labels are inline-styled but the inner span text will wrap naturally.
     Just ensure containers don't blow out: parent already has 100% via inline styles. */
}

/* Ensure tap targets on form input rows are big enough on phones */
@media (max-width: 600px) {
  /* radio/checkbox option containers (inline-styled labels) already have 14px padding,
     which combined with font-size: 16px gives ~44px+ tap height. No change needed. */
}

/* Spotlight: cleaner stacking on tablet (already collapses at 900px via existing rule).
   On phone, give the body breathing room. */
@media (max-width: 480px) {
  .m2-spotlight-body { padding: 26px 20px 22px; }
  .m2-spotlight-body > h3 + p { margin-top: 8px; }
  .m2-spotlight-body > p + .m2-spotlight-stats { margin-top: 24px; }
  .m2-spotlight-body > .m2-spotlight-stats + .m2-spotlight-cta { margin-top: 20px; }
}

/* Hero section padding adjustments on phone */
@media (max-width: 480px) {
  .m2-hero, .m2-hero-short { padding: 40px 0 32px; }
}

/* ──────────────────────────────────────────────────────────────────────
   PREMIUM MOBILE LAYER — Apple-style polish
   Balanced typography, tactile buttons, scroll-snap carousels,
   reveal animations, sticky CTA, logo marquee, heroized stats.
   ────────────────────────────────────────────────────────────────────── */

/* Balanced text wrap on display typography — no awkward orphans */
.m2-display-xl, .m2-display-lg, .m2-display-md, .m2-subhead { text-wrap: balance; }

/* Tactile button feedback — buttons compress on press */
.m2-btn { transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.m2-btn:active { transform: scale(0.97); }
.m2-link-arrow { transition: color 160ms ease, gap 200ms ease; }
.m2-link-arrow:active { transform: translateX(2px); }

/* ─ Merged closing panel: "Get started" headline + 3-step promise (homepage) ─ */
.m2-expect {
  position: relative;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 24px;
  padding: 64px 48px;
  overflow: hidden;
}
.m2-expect-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(229, 72, 77, 0.22) 0%, rgba(229, 72, 77, 0) 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(229, 72, 77, 0.10) 0%, rgba(229, 72, 77, 0) 55%);
}
.m2-expect > *:not(.m2-expect-glow) { position: relative; }
.m2-expect-head { text-align: center; margin-bottom: 56px; }
.m2-expect-head > .m2-eyebrow-pill { margin-bottom: 20px; }
.m2-expect-headline {
  font-family: var(--font-text);
  font-size: 56px; font-weight: 600;
  line-height: 1.05; letter-spacing: -1px;
  color: var(--color-ink);
  margin: 0; text-wrap: balance;
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.m2-expect-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.m2-expect-step {
  padding: 32px 28px;
  border-left: 1px solid var(--color-hairline);
  display: flex; flex-direction: column;
}
.m2-expect-step:first-child { border-left: 0; }
.m2-expect-step > * { margin: 0; }
.m2-expect-step > .m2-expect-num + .m2-expect-title { margin-top: 16px; }
.m2-expect-step > .m2-expect-title + .m2-expect-body { margin-top: 8px; }
.m2-expect-num {
  font-family: var(--font-text); font-size: 32px; font-weight: 600;
  color: var(--color-ink-subtle); letter-spacing: -0.6px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m2-expect-title {
  font-family: var(--font-text); font-size: 18px; font-weight: 600;
  line-height: 1.24; letter-spacing: -0.3px;
  color: var(--color-ink);
}
.m2-expect-body {
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-muted); line-height: 1.5;
}
.m2-expect-cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 800px) {
  .m2-expect { padding: 48px 28px; }
  .m2-expect-head { margin-bottom: 40px; }
  .m2-expect-headline { font-size: 40px; letter-spacing: -0.6px; line-height: 1.05; }
  .m2-expect-steps { grid-template-columns: 1fr; }
  .m2-expect-step { border-left: 0; border-top: 1px solid var(--color-hairline); padding: 24px 0; }
  .m2-expect-step:first-child { border-top: 0; padding-top: 8px; }
  .m2-expect-step:last-child { padding-bottom: 8px; }
  .m2-expect-cta { margin-top: 32px; }
}

/* ─ ByTheNumbers stat row — 5-stat homepage variant ─
   Desktop: 5 cols. Tablet: 3 cols (hero stats first, last 2 wrap).
   Phone: 1 col with HEROIZED stats, last 2 hidden via .m2-stat-mobile-hide. */
.m2-stat-row-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .m2-stat-row-5 { grid-template-columns: repeat(3, 1fr); }
  .m2-stat-row-5 > div { border-left: 0; border-top: 1px solid var(--color-hairline); }
  .m2-stat-row-5 > div:nth-child(-n+3) { border-top: 0; }
  .m2-stat-row-5 > div:nth-child(3n+2),
  .m2-stat-row-5 > div:nth-child(3n) { border-left: 1px solid var(--color-hairline); }
}
@media (max-width: 700px) {
  .m2-stat-row-5 { grid-template-columns: 1fr; }
  .m2-stat-row-5 > div {
    border-left: 0 !important;
    border-top: 1px solid var(--color-hairline);
    padding: 32px 24px;
    text-align: center;
    align-items: center;
    gap: 14px;
  }
  .m2-stat-row-5 > div:first-child { border-top: 0; }
  .m2-stat-row-5 > .m2-stat-mobile-hide { display: none; }
  /* Heroize the number — Apple-style oversized stat */
  .m2-stat-row-5 .num { font-size: 72px; font-weight: 600; letter-spacing: -1.8px; line-height: 0.95; }
  .m2-stat-row-5 .lbl { font-size: 15px; letter-spacing: 0; color: var(--color-ink-muted); }
}

/* ─ Stat row — boxed cards variant (About page) ─
   2×2 grid of rounded cards instead of the hairline-divided row. */
.m2-stat-row-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  border-top: 0; border-bottom: 0; /* cards don't need outer hairlines */
}
.m2-stat-row-cards > div {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-stat-row-cards > div:hover {
  border-color: var(--color-hairline-strong);
  background: var(--color-surface-2);
}
.m2-stat-row-cards > div:first-child,
.m2-stat-row-cards > div { border-left: 0; }  /* override base hairline */
@media (max-width: 700px) {
  .m2-stat-row-cards { grid-template-columns: 1fr; gap: 12px; }
  .m2-stat-row-cards > div { padding: 28px 24px; align-items: flex-start; text-align: left; }
}

/* ─ Reel grid — horizontal swipe carousel on mobile ─
   Apple-style scroll-snap with a peek of the next card on the right edge. */
@media (max-width: 700px) {
  .m2-reels {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
    padding: 4px 24px 20px;
    margin: 0 -24px;
    scroll-padding-left: 24px;
  }
  .m2-reels::-webkit-scrollbar { display: none; }
  .m2-reels > .m2-reel {
    flex: 0 0 78%;
    min-width: 78%;
    scroll-snap-align: center;
  }
}

/* ─ Services overview cards — horizontal swipe carousel on mobile ─ */
@media (max-width: 700px) {
  .m2-grid-3:has(.m2-service-card) {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
    padding: 4px 24px 20px;
    margin: 0 -24px;
    scroll-padding-left: 24px;
  }
  .m2-grid-3:has(.m2-service-card)::-webkit-scrollbar { display: none; }
  .m2-grid-3 > .m2-service-card {
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: center;
  }
}

/* ─ "Month at M Squared" timeline — horizontal swipe on mobile ─ */
@media (max-width: 700px) {
  .m2-week {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 14px;
    padding: 4px 24px 20px;
    margin: 0 -24px;
    scroll-padding-left: 24px;
  }
  .m2-week::-webkit-scrollbar { display: none; }
  .m2-week > .m2-week-day {
    flex: 0 0 78%;
    min-width: 78%;
    scroll-snap-align: center;
  }
}

/* Scroll hint — subtle right-edge fade indicator on carousels */
@media (max-width: 700px) {
  .m2-reels, .m2-week, .m2-grid-3:has(.m2-service-card) {
    mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 60px), transparent calc(100% - 8px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 60px), transparent calc(100% - 8px));
  }
}

/* Marquee duplicates are hidden on desktop, shown on mobile for seamless loop */
.m2-logo-tile-clone { display: none; }

/* ─ Logo strip — auto-scrolling marquee on mobile ─ */
@media (max-width: 700px) {
  .m2-logos { overflow: hidden; }
  .m2-logos .m2-container { padding-left: 0; padding-right: 0; }
  .m2-logos-caption { padding: 0 24px; text-align: center; }
  .m2-logos-grid {
    display: flex !important;
    grid-template-columns: none !important;
    width: max-content;
    gap: 32px;
    padding: 16px 0;
    animation: m2-marquee 50s linear infinite;
  }
  .m2-logos-grid > .m2-logo-tile,
  .m2-logos-grid > .m2-logo-tile-clone {
    flex: 0 0 auto;
    width: 140px;
    border: 0;
    padding: 0;
    display: flex;
  }
  .m2-logos-grid > .m2-logo-tile .m2-logo-name,
  .m2-logos-grid > .m2-logo-tile-clone .m2-logo-name { display: none; }
  .m2-logos-grid > .m2-logo-tile .m2-logo-img,
  .m2-logos-grid > .m2-logo-tile-clone .m2-logo-img {
    max-height: 48px; width: auto; opacity: 0.85;
  }
}
@keyframes m2-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .m2-logos-grid { animation: none !important; }
}

/* ─ Scroll-triggered reveal animations ─ */
.m2-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.m2-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .m2-reveal { transition: none; opacity: 1; transform: none; }
}

/* ─ MidCTA: tighter on mobile, primary CTA full-width ─ */
@media (max-width: 700px) {
  .m2-section [style*="radial-gradient(80% 60% at 100% 0%"] {
    padding: 32px 24px !important;
    border-radius: 20px !important;
    gap: 24px !important;
  }
  .m2-section [style*="radial-gradient(80% 60% at 100% 0%"] > div:last-child {
    width: 100%;
    min-width: 0 !important;
  }
}

/* ─ CTA text swap: long copy on desktop, short copy on mobile ─
   Lets us keep both primary + secondary buttons on a single row on phones. */
.m2-cta-short { display: none; }
@media (max-width: 700px) {
  .m2-cta-long  { display: none; }
  .m2-cta-short { display: inline; }
  /* Tighten the lg button padding on mobile so two pills fit comfortably */
  .m2-hero-ctas .m2-btn-lg { padding: 12px 18px; font-size: 14px; }
}

/* ─ Section padding calibration ─ Cohesive rhythm across devices ─ */
@media (max-width: 1100px) {
  .m2-section { padding: 64px 0; }
  .m2-section-head { margin-bottom: 36px; }
  .m2-section-head-center { margin-bottom: 36px; }
}
@media (max-width: 900px) {
  .m2-section { padding: 56px 0; }
  .m2-section-head { margin-bottom: 32px; }
  .m2-section-head-center { margin-bottom: 32px; }
}
@media (max-width: 600px) {
  .m2-section { padding: 48px 0; }
  .m2-section-head { margin-bottom: 28px; }
  .m2-section-head-center { margin-bottom: 28px; }
}
@media (max-width: 380px) {
  .m2-section { padding: 40px 0; }
}

/* ─ Spotlight stats on mobile: 3-up stat ticker with hairline dividers ─ */
@media (max-width: 700px) {
  .m2-spotlight-stat-num { font-size: 28px; letter-spacing: -0.4px; line-height: 1.0; }
  .m2-spotlight-stat-lbl { font-size: 11px; line-height: 1.3; letter-spacing: 0.2px; }
  .m2-spotlight-stat { padding: 0 10px; }
}
@media (max-width: 480px) {
  .m2-spotlight-stat-num { font-size: 24px; letter-spacing: -0.3px; }
  .m2-spotlight-stat-lbl { font-size: 10px; }
  .m2-spotlight-stat { padding: 0 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE — Apple-grade editorial template
   ═══════════════════════════════════════════════════════════════════ */

/* ─ Hero ─ */
.m2-project-hero {
  position: relative;
  padding: 56px 0 48px;
}
.m2-project-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-text); font-size: 14px;
  color: var(--color-ink-subtle);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 150ms ease;
}
.m2-project-back:hover { color: var(--color-ink); text-decoration: none; }
.m2-project-back-arrow { display: inline-flex; transform: rotate(180deg); }
.m2-project-meta {
  display: block;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--color-ink-subtle);
  letter-spacing: 0.4px;
  margin-bottom: 18px;
}
.m2-project-title {
  font-family: var(--font-text);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--color-ink);
  margin: 0 0 18px;
  max-width: 1100px;
  text-wrap: balance;
}
.m2-project-tagline {
  font-family: var(--font-text);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--color-ink-muted);
  margin: 0;
  max-width: 720px;
}

/* ─ Full-bleed cover ─
   Sits directly in <main> (no container padding) so width: 100% already
   spans the visible viewport. Avoids 100vw which would include the
   scrollbar and clip the right edge of the image. */
.m2-project-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-2);
  overflow: hidden;
}
.m2-project-cover image-slot { width: 100% !important; height: 100% !important; display: block; }

/* ─ Overview ─ */
.m2-project-overview {
  max-width: 720px;
  margin: 0 auto;
}
.m2-project-overview .m2-eyebrow-pill { margin-bottom: 24px; }
.m2-project-overview-body {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.1px;
  color: var(--color-ink-muted);
  margin: 0;
}
.m2-project-overview-body + .m2-project-overview-body { margin-top: 22px; }

/* Expand/collapse wrapper — fade to canvas when collapsed, full when expanded */
.m2-project-overview-body-wrap {
  position: relative;
  max-height: 6.5em; /* roughly 4 lines at 1.65 line-height */
  overflow: hidden;
  transition: max-height 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-project-overview-body-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5em;
  background: linear-gradient(to bottom,
    rgba(15, 10, 10, 0) 0%,
    var(--color-canvas) 90%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
}
.m2-project-overview-body-wrap.is-expanded {
  max-height: 200em;
}
.m2-project-overview-body-wrap.is-expanded::after { opacity: 0; }

/* See full description / Show less — scarlet text button with rotating arrow */
.m2-project-overview-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  background: none; border: 0; padding: 0;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--color-primary);
  cursor: pointer;
  transition: color 150ms ease, gap 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-project-overview-toggle:hover {
  color: var(--color-primary-hover);
  gap: 12px;
}
.m2-project-overview-toggle-arrow {
  display: inline-flex;
  transform: rotate(90deg); /* point down by default */
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-project-overview-toggle[aria-expanded="true"] .m2-project-overview-toggle-arrow {
  transform: rotate(-90deg); /* point up when expanded */
}
@media (max-width: 700px) {
  .m2-project-overview-body-wrap { max-height: 7.5em; } /* slightly more on phone since columns are narrower */
  .m2-project-overview-body-wrap::after { height: 4em; }
}

/* ─ Gallery ─ */
.m2-project-gallery {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 40px;
}
.m2-project-gallery-group.is-continuation {
  margin-top: calc(-80px + 24px); /* tighten to ~24px effective gap */
}
.m2-project-gallery-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.m2-project-gallery-title {
  font-family: var(--font-text);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-ink);
  margin: 0;
}
.m2-project-gallery-subtitle {
  font-weight: 400;
  margin-left: 8px;
  color: var(--color-ink-muted);
}
.m2-project-gallery-grid {
  display: grid;
  gap: 24px;
}
.m2-project-gallery-tile {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-2);
  position: relative;
}
.m2-project-gallery-tile image-slot {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
@media (max-width: 900px) {
  .m2-project-gallery { gap: 64px; }
  .m2-project-gallery-group.is-continuation { margin-top: calc(-64px + 20px); }
  .m2-project-gallery-grid { gap: 20px; }
}
@media (max-width: 700px) {
  .m2-project-gallery { gap: 48px; margin-top: 32px; }
  .m2-project-gallery-group.is-continuation { margin-top: calc(-48px + 16px); }
  .m2-project-gallery-grid { gap: 16px; }
  .m2-project-gallery-title { font-size: 20px; }
}

/* Mobile gallery: horizontal scroll carousel — one image at a time with peek.
   Per-image aspect ratios stay (set inline via JSX), so portrait images become
   tall slides and landscape images become wide slides. */
@media (max-width: 700px) {
  .m2-project-gallery-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 4px 32px 20px;
    margin: 0 -32px;
    scroll-padding-inline: 32px;
    /* Only fade the left edge; right side stays opaque so the last tile
       isn't overshadowed when it snaps to center. The 15% peek of the next
       tile already signals "swipe right for more". */
    mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
  }
  .m2-project-gallery-grid::-webkit-scrollbar { display: none; }
  .m2-project-gallery-grid > .m2-project-gallery-tile {
    flex: 0 0 85%;
    min-width: 85%;
    max-width: 85%;
    scroll-snap-align: center;
  }
  /* Solo tiles (e.g. Menu) take full width — no carousel needed for one image */
  .m2-project-gallery-grid > .m2-project-gallery-tile:only-child {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .m2-project-gallery-grid {
    padding: 4px 20px 20px;
    margin: 0 -20px;
    scroll-padding-inline: 20px;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
  }
}

/* ─ Feature video (stacked, video-dominant) ─ */
.m2-project-video-feature {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 32px;
}
.m2-project-video-feature .m2-project-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-2);
  position: relative;
}
.m2-project-video-feature .m2-project-video-meta {
  max-width: 640px;
  text-align: center;
}
.m2-project-video-title {
  font-family: var(--font-text);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.m2-project-video-desc {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: 0;
}

/* ─ Multi-feature video (alternating rows) ─ */
.m2-project-video-multi {
  display: flex; flex-direction: column;
  gap: 64px;
}
.m2-project-video-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.m2-project-video-row.is-reversed > :first-child { order: 2; }
.m2-project-video-row .m2-project-video-frame {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-2);
  position: relative;
}
.m2-project-video-row .m2-project-video-meta { text-align: left; }
@media (max-width: 900px) {
  .m2-project-video-multi { gap: 48px; }
  .m2-project-video-row { grid-template-columns: 1fr; gap: 24px; }
  .m2-project-video-row.is-reversed > :first-child { order: 0; }
}

/* ─ Coming-soon block ─ */
.m2-project-coming-soon {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 48px;
}
.m2-project-coming-soon-title {
  font-family: var(--font-text);
  font-size: 48px; font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--color-ink);
}
.m2-project-coming-soon-body {
  font-family: var(--font-text);
  font-size: 16px; color: var(--color-ink-muted);
  margin-top: 12px; max-width: 520px;
}

/* ─ Feature-link CTA ─ */
.m2-project-feature-link-cta {
  display: flex; justify-content: center;
  margin-top: 32px;
}

/* ─ Deliverables — pill cluster (scannable scope-at-a-glance) ─ */
.m2-project-deliverables {
  max-width: 960px; margin: 0 auto;
}
.m2-project-deliverables .m2-eyebrow-pill { margin-bottom: 24px; }
.m2-project-deliverables-pills {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 10px;
}
.m2-project-deliverables-pill {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--color-ink);
  padding: 9px 16px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 9999px;
  white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease;
}
.m2-project-deliverables-pill:hover {
  border-color: var(--color-hairline-strong);
}
@media (max-width: 700px) {
  /* Hide the entire deliverables section on phone — the gallery groups
     (Photography, Branding, Website, etc.) already communicate scope. */
  .m2-project-deliverables-section { display: none; }
}

/* ─ Next project poster ─ */
.m2-project-next {
  position: relative;
  display: block;
  padding: 88px 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-canvas);
  border-top: 1px solid var(--color-hairline);
  transition: background 200ms ease;
}
.m2-project-next:hover { text-decoration: none; }
.m2-project-next-bg {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.42;
  transition: opacity 300ms ease, transform 600ms ease;
}
.m2-project-next-bg image-slot {
  width: 100% !important; height: 100% !important; display: block;
}
.m2-project-next:hover .m2-project-next-bg {
  opacity: 0.55;
  transform: scale(1.02);
}
.m2-project-next-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,10,10,0.55) 0%, rgba(15,10,10,0.78) 100%),
    radial-gradient(60% 70% at 50% 100%, rgba(229,72,77,0.16) 0%, rgba(229,72,77,0) 70%);
}
.m2-project-next-inner {
  position: relative; z-index: 2;
  text-align: center;
}
.m2-project-next-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: 18px;
}
.m2-project-next-title {
  font-family: var(--font-text);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--color-ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.m2-project-next-cta {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-primary);
  font-family: var(--font-text); font-size: 16px;
  font-weight: 500;
  transition: gap 200ms ease;
}
.m2-project-next:hover .m2-project-next-cta { gap: 14px; }
@media (max-width: 700px) {
  .m2-project-next { padding: 64px 0; }
  .m2-project-next-label { margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE — video frame + written grid
   ═══════════════════════════════════════════════════════════════════ */

/* ─ Video testimonial ─ */
.m2-testimonial-video {
  margin-top: 40px;
}
.m2-testimonial-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-surface-2);
}
.m2-testimonial-video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.m2-testimonial-video-meta {
  display: flex; align-items: center; gap: 16px;
  margin-top: 24px;
}

/* ─ Written testimonials grid ─ */
.m2-testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.m2-testimonial-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 14px;
  padding: 24px 24px 20px;
  margin: 0;
  display: flex; flex-direction: column;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-testimonial-card:hover {
  border-color: var(--color-hairline-strong);
  background: var(--color-surface-2);
}
.m2-testimonial-quote {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.15px;
  color: var(--color-ink);
  margin: 0;
}
.m2-testimonial-attribution {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px;
}
.m2-testimonial-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.m2-testimonial-name {
  font-family: var(--font-text);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--color-ink);
}
@media (max-width: 1000px) {
  .m2-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phone: horizontal scroll carousel — each quote becomes its own swipe moment */
@media (max-width: 700px) {
  .m2-testimonials-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 4px 32px 20px;
    margin: 0 -32px;
    scroll-padding-inline: 32px;
    mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
  }
  .m2-testimonials-grid::-webkit-scrollbar { display: none; }
  .m2-testimonials-grid > .m2-testimonial-card {
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }
}
@media (max-width: 600px) {
  .m2-testimonials-grid {
    padding: 4px 20px 20px;
    margin: 0 -20px;
    scroll-padding-inline: 20px;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESOURCES PAGE — form directory cards
   ═══════════════════════════════════════════════════════════════════ */
.m2-form-card {
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  background: var(--color-surface-1);
  text-decoration: none;
  color: inherit;
  min-height: 210px;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.m2-form-card:hover {
  border-color: var(--color-hairline-strong);
  background: var(--color-surface-2);
  text-decoration: none;
}
/* Intentional spacing per relationship */
.m2-form-card > * { margin: 0; }
.m2-form-card > .m2-form-card-head + .m2-form-card-body { margin-top: 12px; }
.m2-form-card > .m2-form-card-cta { margin-top: auto; padding-top: 24px; }

.m2-form-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.m2-form-card-title {
  font-family: var(--font-text);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: var(--color-ink);
}
.m2-form-card-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  border: 1px solid var(--color-hairline);
  border-radius: 9999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.m2-form-card-body {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.55;
  letter-spacing: -0.1px;
}
.m2-form-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-text); font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.m2-form-card:hover .m2-form-card-cta { gap: 12px; }
.m2-form-card.is-disabled {
  cursor: default;
}
.m2-form-card.is-disabled .m2-form-card-cta {
  color: var(--color-ink-subtle);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   FORM ENGINE — shared Typeform-style stepper used by all client forms
   ═══════════════════════════════════════════════════════════════════ */

.m2-form-engine-section { padding-top: 56px; padding-bottom: 96px; }

/* Intro & Submitted screens — centered editorial */
.m2-form-engine-intro,
.m2-form-engine-submitted {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 0;
}
.m2-form-engine-headline {
  font-family: var(--font-text);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--color-ink);
  margin: 18px 0 0;
  text-wrap: balance;
}
.m2-form-engine-sub {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-ink-muted);
  margin: 16px 0 0;
}
.m2-form-engine-helper-block {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--color-ink-subtle);
  margin: 24px 0 0;
}
.m2-form-engine-cta { margin-top: 32px; }
.m2-form-engine-submitted-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

/* Engine container — the question stepper */
.m2-form-engine {
  max-width: 720px;
  margin: 0 auto;
}

/* Progress bar */
.m2-form-engine-progress { margin-bottom: 40px; }
.m2-form-engine-progress-track {
  height: 4px;
  background: var(--color-hairline);
  border-radius: 9999px;
  overflow: hidden;
}
.m2-form-engine-progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m2-form-engine-progress-meta {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

/* Question label + helper */
.m2-form-engine-q { padding-top: 8px; }
.m2-form-engine-label {
  font-family: var(--font-text);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}
.m2-form-engine-helper {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: var(--color-ink-subtle);
  margin: 12px 0 0;
}
.m2-form-engine-field { margin-top: 28px; }
.m2-form-engine-err {
  margin-top: 14px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-primary);
}

/* Text/textarea/date inputs */
.m2-form-engine-input {
  width: 100%;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 150ms ease, background 150ms ease;
  outline: none;
}
.m2-form-engine-input::placeholder { color: var(--color-ink-tertiary); }
.m2-form-engine-input:hover { border-color: var(--color-hairline-strong); }
.m2-form-engine-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}
.m2-form-engine-textarea {
  resize: vertical;
  min-height: 120px;
}
.m2-form-engine-input-nested { margin-top: 8px; }
.m2-form-engine-input-file { padding: 12px 16px; }

/* Radio / checkbox option list */
.m2-form-engine-options {
  display: flex; flex-direction: column;
  gap: 8px;
}
.m2-form-engine-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--color-ink);
  transition: border-color 150ms ease, background 150ms ease;
}
.m2-form-engine-option:hover {
  border-color: var(--color-hairline-strong);
}
.m2-form-engine-option.is-selected {
  border-color: var(--color-primary);
  background: rgba(229, 72, 77, 0.06);
}
.m2-form-engine-option input[type="radio"],
.m2-form-engine-option input[type="checkbox"] {
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* File upload helpers */
.m2-form-engine-file-list {
  list-style: disc;
  padding-left: 20px;
  margin: 12px 0 0;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-ink-muted);
}
.m2-form-engine-file-note {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--color-ink-subtle);
  margin: 10px 0 0;
}

/* Nav row — back / next */
.m2-form-engine-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 48px;
}
.m2-form-engine-back {
  background: none;
  border: 0;
  padding: 12px 0;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: color 150ms ease;
}
.m2-form-engine-back:hover:not(:disabled) { color: var(--color-ink); }
.m2-form-engine-back:disabled {
  color: var(--color-ink-tertiary);
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .m2-form-engine-section { padding-top: 40px; padding-bottom: 64px; }
  .m2-form-engine-nav { margin-top: 32px; }
}

/* ─ Form-engine v2 polish: question transition, optional indicator,
   success checkmark, drag-drop file zone, native date picker tweak ─ */

/* #1 — Question fade-up transition on every navigation */
.m2-form-engine-q {
  animation: m2-form-q-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes m2-form-q-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .m2-form-engine-q { animation: none; }
}

/* #3 — "Optional" indicator pill on non-required questions */
.m2-form-engine-optional {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  border: 1px solid var(--color-hairline);
  padding: 4px 10px;
  border-radius: 9999px;
  position: relative;
  top: -4px;
}

/* #4 — Drag-drop file dropzone */
.m2-form-engine-dropzone {
  border: 1.5px dashed var(--color-hairline);
  border-radius: 14px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  background: var(--color-surface-1);
  transition: border-color 180ms ease, background 180ms ease;
}
.m2-form-engine-dropzone:hover,
.m2-form-engine-dropzone.is-dragging {
  border-color: var(--color-primary);
  background: rgba(229, 72, 77, 0.04);
}
.m2-form-engine-dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: var(--color-surface-2);
  color: var(--color-primary);
  margin-bottom: 14px;
  transition: background 180ms ease;
}
.m2-form-engine-dropzone:hover .m2-form-engine-dropzone-icon,
.m2-form-engine-dropzone.is-dragging .m2-form-engine-dropzone-icon {
  background: rgba(229, 72, 77, 0.12);
}
.m2-form-engine-dropzone-text {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-ink-muted);
}
.m2-form-engine-dropzone-text strong {
  color: var(--color-ink); font-weight: 600;
}

/* Override the file-list to be more refined — items as rows with remove button */
.m2-form-engine-file-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.m2-form-engine-file-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
}
.m2-form-engine-file-name {
  flex: 1;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-ink);
  word-break: break-word;
}
.m2-form-engine-file-size {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-subtle);
  letter-spacing: 0.2px;
}
.m2-form-engine-file-remove {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: transparent; border: 0;
  color: var(--color-ink-subtle);
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.m2-form-engine-file-remove:hover {
  color: var(--color-primary);
  background: rgba(229, 72, 77, 0.08);
}

/* #5 — Success checkmark on submitted screen */
.m2-form-engine-success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 9999px;
  background: rgba(229, 72, 77, 0.12);
  color: var(--color-primary);
  margin: 0 auto 24px;
  animation: m2-form-success-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes m2-form-success-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .m2-form-engine-success-mark { animation: none; }
}

/* #6 — Native date input styling polish (best we can do without rebuilding the picker) */
.m2-form-engine-input[type="date"] {
  font-family: var(--font-text);
  color: var(--color-ink);
  color-scheme: dark; /* tells the browser to render the picker in dark mode */
}
.m2-form-engine-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 150ms ease;
}
.m2-form-engine-input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}