.mm-case { --mm-accent:#306e79; --mm-muted:#647173; --mm-line:rgba(29,67,72,.18); background:#f6f7f3; color:#172b2d; }
.mm-wrap { max-width:1440px; margin:auto; padding:0 var(--gutter) 5rem; }
.mm-case h1,.mm-case h2,.mm-case h3 { font-family:var(--body); font-weight:700; text-wrap:balance; }
.mm-case h2 { font-size:clamp(2.2rem,4.1vw,3.8rem); letter-spacing:-.055em; line-height:1.1; margin:1.2rem 0 1.6rem; }
.mm-case h3 { letter-spacing:-.035em; }
.mm-case p { font-size:clamp(.96rem,1.2vw,1.08rem); line-height:1.8; text-wrap:pretty; }
.mm-case em { font-style:normal; color:var(--mm-accent); }
.mm-case a { transition:color .2s,background .2s,transform .2s; }
.mm-case a:focus-visible { outline:2px solid var(--mm-accent); outline-offset:5px; }
.mm-breadcrumbs { padding:0; margin:1.4rem 0 1.6rem; font-size:.74rem; }
.mm-project-line { display:flex; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--mm-line); font-family:var(--mono); font-size:.65rem; text-transform:uppercase; }
.mm-eyebrow { display:inline-block; font-family:var(--mono); font-size:.67rem; line-height:1.6; text-transform:uppercase; letter-spacing:.02em; }
.mm-hero { display:grid; grid-template-columns:1.08fr 1fr; gap:3rem; align-items:center; padding:2rem 0; }
.mm-hero h1 { font-size:clamp(3.2rem,5.3vw,4.9rem); line-height:1.04; letter-spacing:-.065em; margin:1.2rem 0 1.5rem; }
.mm-hero > div:first-child > p { max-width:32rem; color:#4c6062; margin:0; }
.mm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.8rem; }
.mm-button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.4rem; padding:1rem 1.2rem; min-height:54px; border-radius:.55rem; background:var(--mm-accent); color:#fff; font-size:.83rem; line-height:1.4; font-weight:600; }
.mm-button:hover { background:#245864; transform:translateY(-2px); }
.mm-button:active { transform:translateY(1px); }
.mm-link { display:inline-flex; align-items:center; min-height:44px; gap:.75rem; font-size:.81rem; font-weight:600; }
.mm-link:hover { text-decoration:underline; text-underline-offset:5px; color:var(--mm-accent); }
.mm-hero-art { position:relative; height:450px; isolation:isolate; overflow:hidden; border-radius:1rem 1rem 5rem 1rem; background:#234e55; }
.mm-hero-art > img { display:block; width:100%; height:100%; object-fit:cover; object-position:65% center; opacity:.77; }
.mm-hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,46,53,.15),rgba(11,46,53,.55)); z-index:0; }
.mm-hero-brand { position:absolute; z-index:1; inset:2rem 2rem auto; }
.mm-hero-brand img { width:clamp(140px,17vw,245px); height:auto; filter:brightness(0) invert(1); }
.mm-hero-brand > span { display:block; margin-top:1.2rem; color:#f6f7f3; font-size:.75rem; line-height:1.7; }
.mm-hero-route { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; position:absolute; z-index:1; bottom:2.1rem; left:2rem; right:2rem; color:#fff; font-size:.67rem; }
.mm-hero-route i { font-style:normal; opacity:.65; }
.mm-hero-route strong { padding:.65rem .85rem; color:#193b40; background:#e4efea; border-radius:.3rem; }
.mm-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin:0; padding:1.8rem 0 2.2rem; border-top:1px solid var(--mm-line); border-bottom:1px solid var(--mm-line); }
.mm-facts dt { font-family:var(--mono); font-size:.65rem; color:var(--mm-muted); margin-bottom:.8rem; }
.mm-facts dd { margin:0; font-size:.86rem; font-weight:600; line-height:1.6; }
.mm-section { margin-top:clamp(4.5rem,8vw,8rem); scroll-margin-top:2rem; }
.mm-two { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.mm-two > div > p:first-child { margin-top:0; }
.mm-two p { color:#4c6062; }
.mm-screen { margin:3rem 0 0; padding:clamp(.7rem,2vw,1.6rem); background:#e5ece9; border-radius:.8rem; }
.mm-browser { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:36px; padding:.2rem .6rem .7rem; color:#647173; font-family:var(--mono); font-size:.58rem; }
.mm-browser b { font-weight:400; }
.mm-browser > span:first-child { display:flex; gap:5px; }
.mm-browser i { width:6px; height:6px; border-radius:50%; background:#93aaa8; }
.mm-screen-image > img { width:100%; height:auto; display:block; border:1px solid #d6e0dd; border-radius:.4rem; }
.mm-screen figcaption { margin:1rem .2rem .2rem; font-size:.72rem; line-height:1.7; color:var(--mm-muted); text-wrap:pretty; }
.mm-brand { display:grid; grid-template-columns:.8fr 1fr; gap:5rem; align-items:center; }
.mm-brand-art { min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; border-radius:50% 50% .8rem .8rem; background:#dcebe8; }
.mm-brand-art > img { width:75%; max-width:310px; height:auto; }
.mm-brand-art > span { margin-top:2rem; color:var(--mm-muted); font-family:var(--mono); font-size:.65rem; text-align:center; }
.mm-brand p { color:#4c6062; }
.mm-rows { margin-top:2.8rem; border-top:1px solid var(--mm-line); }
.mm-row { display:grid; grid-template-columns:3rem 1fr 1.25fr; gap:1.5rem; padding:1.65rem 0; border-bottom:1px solid var(--mm-line); align-items:start; }
.mm-row > span { font-family:var(--mono); font-size:.7rem; color:var(--mm-muted); padding-top:.35rem; }
.mm-row h3 { margin:0; font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.25; }
.mm-row p { margin:0; font-size:.94rem; color:#4c6062; }
.mm-feature-list { margin-top:2.8rem; border-top:1px solid var(--mm-line); }
.mm-feature { display:grid; grid-template-columns:.8fr 1.3fr; gap:3rem; padding:2rem 0; border-bottom:1px solid var(--mm-line); }
.mm-feature h3 { font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.2; margin:0; }
.mm-feature p { margin:0 0 .5rem; font-size:.95rem; color:#4c6062; }
.mm-screens-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.mm-screens-pair .mm-screen { padding:.8rem; }
.mm-screens-pair .mm-browser { font-size:.5rem; gap:.5rem; }
.mm-screens-pair figcaption { font-size:.68rem; }
.mm-app { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.mm-app h2 { max-width:37rem; }
.mm-app > div:last-child > p:first-child { margin-top:0; }
.mm-screen-app { background:#d6e8e8; }
.mm-app-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin-top:2.5rem; }
.mm-app-points > div { border-top:3px solid #7aa6a8; padding-top:1.2rem; }
.mm-app-points span { font-family:var(--mono); color:var(--mm-muted); font-size:.63rem; }
.mm-app-points h3 { font-size:1.3rem; line-height:1.3; margin:1rem 0 .6rem; }
.mm-app-points p { font-size:.85rem; color:#4c6062; margin:0; }
.mm-note { max-width:55rem; color:var(--mm-muted); font-size:.74rem!important; line-height:1.7!important; }
.mm-mira { display:grid; grid-template-columns:.72fr 1fr; align-items:center; gap:5rem; padding:3rem; border-radius:1rem; background:#e6eeea; }
.mm-mira-person { text-align:center; }
.mm-mira-person img { display:block; width:100%; max-width:280px; margin:auto; height:auto; border-radius:50% 50% 1rem 1rem; }
.mm-mira-person > span { display:block; font-size:2rem; font-weight:600; letter-spacing:-.05em; margin-top:1.4rem; }
.mm-mira-person p { color:var(--mm-muted); font-family:var(--mono); font-size:.66rem; }
.mm-mira h2 { margin-top:1rem; }
.mm-mira > div:last-child > p { font-size:.94rem; }
.mm-mira blockquote { margin:1.8rem 0 .4rem; padding:.3rem 0 .3rem 1.2rem; border-left:3px solid var(--mm-accent); font-size:1.25rem; font-weight:500; line-height:1.55; letter-spacing:-.025em; }
.mm-system { display:grid; grid-template-columns:1fr auto 1.15fr auto 1fr; gap:1.25rem; align-items:center; margin-top:2.5rem; padding:2rem; background:#e5eeea; border-radius:.8rem; }
.mm-system > div { min-width:0; }
.mm-system span { color:var(--mm-muted); font-family:var(--mono); font-size:.62rem; }
.mm-system strong { display:block; margin:1rem 0 .5rem; font-size:1.23rem; line-height:1.4; letter-spacing:-.035em; }
.mm-system p { margin:0; font-size:.8rem; color:#4c6062; }
.mm-system i { font-style:normal; color:var(--mm-muted); }
.mm-system-core { border-left:3px solid var(--mm-accent); padding-left:1.4rem; }
.mm-call-analysis { padding:3rem; border:1px solid var(--mm-line); border-radius:.8rem; }
.mm-call-analysis .mm-two { gap:3rem; margin-top:2.2rem; }
.mm-call-analysis .mm-two p { font-size:.93rem; }
.mm-call-flow { margin:0; list-style:none; padding:0; }
.mm-call-flow li { display:flex; align-items:start; gap:1.1rem; padding:1.25rem 0; border-bottom:1px solid var(--mm-line); }
.mm-call-flow li:first-child { padding-top:0; }
.mm-call-flow span { font-family:var(--mono); font-size:.7rem; color:var(--mm-accent); padding-top:.2rem; }
.mm-call-flow strong { font-size:1.25rem; letter-spacing:-.035em; }
.mm-call-flow p { margin:.4rem 0 0; font-size:.79rem!important; }
.mm-result { margin-top:5rem; padding:clamp(2rem,5vw,4.5rem); border-radius:.8rem; background:#d5e7e2; }
.mm-result p { max-width:52rem; margin:1.5rem 0 2rem; }
.mm-section-intro { max-width:48rem; color:#4c6062; }
.mm-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:2.5rem; border-top:1px solid var(--mm-line); }
.mm-resource-grid > a { position:relative; padding:1.8rem 3rem 1.8rem 0; border-bottom:1px solid var(--mm-line); }
.mm-resource-grid > a:nth-child(even) { padding-left:2rem; }
.mm-resource-grid h3 { font-size:1.18rem; line-height:1.45; margin:.8rem 0 .4rem; }
.mm-resource-grid p { font-size:.8rem; color:var(--mm-muted); margin:0; }
.mm-resource-arrow { position:absolute; top:1.8rem; right:1rem; font-size:1.3rem; }
.mm-resource-grid a:hover { background:#e7eeea; }
.mm-studio { margin-top:4rem; padding:2rem 0; border-top:1px solid var(--mm-line); }
.mm-studio > p { font-size:.9rem; max-width:55rem; }
.mm-studio-links { display:flex; flex-wrap:wrap; gap:.5rem 1.7rem; font-size:.77rem; font-weight:600; }
.mm-studio-links a { display:inline-flex; align-items:center; min-height:44px; }
.mm-studio-links a:hover { text-decoration:underline; text-underline-offset:5px; }
.mm-final-cta { margin-top:2rem; }
@media(max-width:1000px) {
  .mm-hero { gap:1.5rem; }
  .mm-hero h1 { font-size:clamp(3rem,5.5vw,4.5rem); }
  .mm-hero-art { height:430px; }
  .mm-two,.mm-app { gap:2rem; }
  .mm-brand,.mm-mira { gap:2rem; }
  .mm-brand-art { min-height:370px; }
  .mm-mira,.mm-call-analysis { padding:2rem; }
  .mm-system { padding:1.5rem; gap:.8rem; }
  .mm-system strong { font-size:1rem; }
}
@media(max-width:680px) {
  .mm-wrap { padding-bottom:3rem; }
  .mm-project-line { font-size:.51rem; }
  .mm-hero { grid-template-columns:1fr; gap:2rem; padding:2rem 0; }
  .mm-hero h1 { font-size:clamp(2.65rem,10vw,3.8rem); }
  .mm-hero p { font-size:.94rem; }
  .mm-hero-art { height:350px; border-bottom-right-radius:3.5rem; }
  .mm-hero-brand { inset:1.6rem 1.6rem auto; }
  .mm-hero-brand img { width:170px; }
  .mm-hero-route { left:1.6rem; right:1.6rem; font-size:.6rem; }
  .mm-button { font-size:.79rem; padding:.9rem 1rem; }
  .mm-facts { grid-template-columns:repeat(2,1fr); gap:1.5rem 1rem; }
  .mm-facts dd { font-size:.77rem; }
  .mm-case h2 { font-size:clamp(2rem,8vw,3.2rem); }
  .mm-two,.mm-brand,.mm-app,.mm-mira { grid-template-columns:1fr; gap:1.6rem; }
  .mm-brand-art { min-height:340px; max-width:370px; width:100%; margin:auto; }
  .mm-screen { padding:.6rem; margin-top:2rem; }
  .mm-browser { font-size:.49rem; gap:.5rem; padding:.2rem .25rem .7rem; }
  .mm-screen figcaption { font-size:.65rem; }
  .mm-row { grid-template-columns:1.6rem 1fr; gap:.7rem; padding:1.4rem 0; }
  .mm-row h3 { font-size:1.45rem; }
  .mm-row p { grid-column:2; font-size:.87rem; }
  .mm-feature { grid-template-columns:1fr; gap:.9rem; padding:1.7rem 0; }
  .mm-feature h3 { font-size:1.6rem; }
  .mm-feature p { font-size:.89rem; }
  .mm-screens-pair { grid-template-columns:1fr; gap:0; }
  .mm-app-points { grid-template-columns:1fr; gap:1.4rem; }
  .mm-app-points h3 { margin:.7rem 0 .5rem; }
  .mm-mira { padding:1.6rem; }
  .mm-mira-person img { max-width:200px; }
  .mm-mira blockquote { font-size:1.1rem; }
  .mm-system { grid-template-columns:1fr; gap:1rem; text-align:center; padding:1.5rem; }
  .mm-system-core { border-left:0; border-top:2px solid var(--mm-accent); border-bottom:2px solid var(--mm-accent); padding:1rem 0; }
  .mm-system i { transform:rotate(90deg); }
  .mm-system strong { font-size:1.3rem; margin:.6rem 0 .4rem; }
  .mm-call-analysis { padding:1.6rem; }
  .mm-call-analysis .mm-two { gap:2rem; }
  .mm-result { padding:1.7rem; }
  .mm-resource-grid { grid-template-columns:1fr; }
  .mm-resource-grid > a:nth-child(even) { padding-left:0; }
  .mm-resource-grid h3 { font-size:1.08rem; }
  .mm-final-cta strong { font-size:clamp(1.5rem,6vw,2rem); }
}
@media(prefers-reduced-motion:reduce) { .mm-case a { transition:none; } }

.mm-screen-image { display: block; cursor: zoom-in; }
