/* The service mosaic uses the same photographic, rounded-card language as the portfolio. */
.services-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(18px,1.85vw,24px);grid-auto-flow:dense;gap:24px;padding:16px;margin-top:16px}
.service-card{position:relative;display:block;grid-row:span 6;width:100%;min-width:0;overflow:hidden;border-radius:16px;background:#292724;color:#fff;text-decoration:none;isolation:isolate;container-type:inline-size}
.service-card--wide{grid-column:span 2}.service-card--tall{grid-row:span 12}
.service-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.service-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 28%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.86))}
.service-card[href="/services/gaming/"] .service-card-shade{background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.45) 28%,rgba(0,0,0,.7) 60%,rgba(0,0,0,.92))}
.service-card-top{position:absolute;top:20px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.service-card-copy{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px}
.service-card h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(1.7rem,8.6cqw,3.7rem);line-height:1.02;letter-spacing:-.015em;margin:0;color:#fff;text-wrap:balance}
.service-card-summary{font-size:13px;line-height:1.45;max-width:42ch;color:#fffffff0}
.service-card-count{font-size:10px;line-height:1.4;letter-spacing:.06em;color:#ffffffbd;margin-top:4px}
.service-card:focus-visible{outline:3px solid var(--gold,#936a00);outline-offset:5px}
@media(hover:hover){.service-card:hover .service-card-image{transform:scale(1.035)}.service-card:hover }
.service-container{width:min(100%,1280px);padding-inline:48px;margin-inline:auto}
.service-intro{padding-top:100px;padding-bottom:40px}
.service-breadcrumb{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:40px;font-size:12px;letter-spacing:.06em;color:var(--muted-foreground)}
.service-breadcrumb a{color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.service-breadcrumb a:hover{text-decoration:underline;text-underline-offset:5px}
.service-intro h1,.service-index-intro h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(3.2rem,8vw,7.7rem);line-height:.95;letter-spacing:-.03em;max-width:18ch;margin:0;text-wrap:balance}
.service-intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;align-items:start}
.service-lede{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.18;font-style:italic;color:var(--gold);max-width:27ch;margin:0}
.service-body{font-size:16px;line-height:1.75;color:var(--muted-foreground);max-width:55ch}.service-body p{margin:0 0 20px}
.service-cta{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:13px 22px;min-height:48px;margin-top:12px;border:1px solid var(--gold);border-radius:0 30px 0 30px;color:var(--foreground);text-decoration:none;transition:background .2s}
.service-cta:hover{background:var(--muted)}
.service-process,.service-deliverables{margin-top:72px}.service-eyebrow{font-size:11px;line-height:1.6;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin:0 0 16px}
.svc-page h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.015em;margin:0}
.service-process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;padding:0;margin:36px 0 0}
.service-process li{border-top:1px solid var(--border);padding-top:24px}.service-step-number{font-size:11px;color:var(--gold);letter-spacing:.1em}
.service-process h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:29px;line-height:1.1;margin:25px 0 16px}
.service-process li p{font-size:15px;line-height:1.75;color:var(--muted-foreground);margin:0}
.service-deliverables{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-block:40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.service-deliverables h2{font-size:clamp(1.8rem,3vw,2.6rem);max-width:18ch}.service-deliverables ul{list-style:none;padding:0;margin:0;display:grid;gap:16px;color:var(--muted-foreground);font-size:16px}
.service-deliverables li{padding-left:22px;position:relative;line-height:1.55}.service-deliverables li:before{content:'↗';position:absolute;left:0;color:var(--gold)}
.svc-work{margin-top:90px}.service-work-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.service-work-count{color:var(--muted-foreground);font-size:12px;white-space:nowrap;padding-bottom:5px}
/* Controls remain in SSR and React to preserve hydration; the service is the active filter. */
.svc-work astro-island>.space-y-8>div:first-child{display:none!important}
.svc-work .project-grid{padding:0!important}.svc-work .grid-item{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
.svc-work .project-card-placeholder{display:none!important}.svc-work img.project-card-image{opacity:1!important}
.svc-work .project-card-trigger:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
.service-explore{margin-top:88px;margin-bottom:88px}.service-explore h2{font-size:32px;margin-bottom:24px}.service-explore>div{display:flex;flex-wrap:wrap;gap:12px 28px}.service-explore a{display:inline-flex;gap:15px;align-items:center;min-height:44px;color:var(--muted-foreground);font-size:14px;text-decoration:none;border-bottom:1px solid var(--border)}.service-explore a span{color:var(--gold)}.service-explore a:hover{color:var(--foreground)}
.service-contact-anchor{scroll-margin-top:40px}.svc-shared-tail{padding-bottom:50px}
.service-index-intro{padding-top:120px}.service-index-intro .service-lede{margin-top:36px;max-width:36ch}.service-index-mosaic{margin-top:56px;margin-bottom:100px}.service-index-mosaic .services-mosaic{padding:0}
@media(max-width:1100px){.services-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:24px;gap:20px}.service-card--wide{grid-column:span 2}.service-container{padding-inline:32px}.service-intro-columns{gap:40px}.service-process ol{gap:24px}.service-deliverables{gap:40px}}
@media(max-width:639px){.services-mosaic{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:20px;padding:0;margin-top:0}.service-card,.service-card--wide,.service-card--tall{grid-column:auto;grid-row:auto;aspect-ratio:4/3;min-height:280px}.service-card--tall{aspect-ratio:4/5;max-height:520px}.service-card h3{font-size:clamp(2rem,9cqw,3rem)}.service-card-copy{left:22px;right:22px;bottom:22px}.service-card-summary{font-size:14px}.service-card-count{font-size:11px}.service-container{padding-inline:24px}.service-intro{padding-top:72px;padding-bottom:0}.service-breadcrumb{margin-bottom:28px}.service-intro h1,.service-index-intro h1{font-size:clamp(2.65rem,12vw,4.6rem)}.service-intro-columns{grid-template-columns:1fr;gap:32px;margin-top:36px}.service-body{font-size:15px}.service-process{margin-top:64px}.service-process ol{grid-template-columns:1fr;gap:30px}.service-process h3{margin-top:16px}.service-deliverables{grid-template-columns:1fr;gap:25px;padding-block:30px;margin-top:56px}.service-deliverables ul{font-size:15px}.svc-work{margin-top:64px}.service-explore{margin-top:64px;margin-bottom:56px}.service-index-intro{padding-top:84px}.service-index-mosaic{margin-top:40px;margin-bottom:70px}}
@media(prefers-reduced-motion:reduce){.service-card-image,.service-card:hover .service-card-image{transform:none}}

/* Service editorial: actual credited work, rather than decorative stock imagery. */
.service-intro-columns{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}
.service-body .service-lede{font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.15;margin-bottom:28px;max-width:28ch}
.service-body{font-size:15px;line-height:1.7;max-width:none}
.service-example{margin:0;min-width:0}
.service-example>a{display:block;overflow:hidden;border-radius:16px;background:var(--muted)}
.service-example img{display:block;width:100%;height:100%;object-fit:cover}
.service-example figcaption{font-size:10px;line-height:1.5;color:var(--muted-foreground);padding-top:10px}
.service-example figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.service-example a:focus-visible{outline:2px solid var(--mm-gold-ink-sm);outline-offset:4px}
.service-example--hero>a{width:100%;aspect-ratio:4/5;max-height:640px;border-radius:0 96px 0 96px}
.service-example--hero figcaption{text-align:right}
.service-cta{background:var(--mm-gold-line);border-color:var(--mm-gold-line);color:var(--color-zinc-950,#18181b);border-radius:999px;min-height:50px;padding:12px 25px;gap:32px;font-weight:500;transition:filter .2s,box-shadow .2s}
.service-cta:hover{background:var(--mm-gold-line);filter:brightness(1.06);box-shadow:0 4px 20px var(--mm-gold-glow)}
.service-cta:focus-visible{outline:2px solid var(--mm-gold-ink-sm);outline-offset:4px}
.service-process ol{gap:28px}
.service-process li{padding-top:0;border:0}
.service-example--process{margin-bottom:24px}
.service-example--process>a{aspect-ratio:4/3}
.service-process h3{font-size:clamp(1.55rem,2.4vw,2rem);margin-top:14px}
.service-process li p{font-size:14px}
.service-deliverables{align-items:center;gap:56px;padding-block:40px}
.service-deliverables h2{max-width:20ch;margin-bottom:28px}
.service-deliverables ul{gap:0;font-size:15px}
.service-deliverables li{padding:16px 0 16px 26px;border-bottom:1px solid var(--border)}
.service-deliverables li:before{top:16px;color:var(--mm-gold-ink-sm)}
.service-deliverables li:last-child{border-bottom:0}
.service-example--delivery>a{aspect-ratio:16/10}
.svc-work .project-card-video{position:absolute;inset:0}
@media(max-width:1100px){.service-intro-columns,.service-deliverables{gap:32px}.service-example--hero>a{aspect-ratio:3/4}.service-process ol{gap:22px}}
@media(max-width:767px){.service-intro-columns{grid-template-columns:1fr;gap:30px}.service-example--hero>a{aspect-ratio:4/3;max-height:480px;border-radius:0 64px 0 64px}.service-body .service-lede{font-size:1.9rem;max-width:30ch}.service-process ol{grid-template-columns:1fr;gap:36px}.service-example--process>a{aspect-ratio:16/9}.service-deliverables{grid-template-columns:1fr;gap:28px}}