/* Mira Services — single dynamic editorial service template. */

body.mira-service-detail main.mira-page-main { min-height: 70vh; padding-top: 0; }
body.mira-service-detail .mira-header:not(.is-scrolled):not(.is-menu-open) { background: transparent; color: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.mira-service-detail .mira-header:not(.is-scrolled):not(.is-menu-open)::after { background: rgba(255,255,255,.16); }
body.mira-service-detail .mira-header:not(.is-scrolled):not(.is-menu-open) .mira-brand img { filter: brightness(0) invert(1); }
body.mira-service-detail .mira-header:not(.is-scrolled):not(.is-menu-open) .mira-header__cta { border-color: rgba(255,255,255,.44); background: transparent; color: #fff; }

.mira-service-page {
	--mira-service-gap: clamp(42px, 5vw, 82px);
	--mira-service-pad: clamp(92px, 9vw, 144px);
	overflow: clip;
	background: var(--mira-paper);
}
.mira-service-shell { width: var(--mira-shell); margin-inline: auto; }
.mira-service-page a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(1,0,214,.14); }
.mira-service-page h1,.mira-service-page h2,.mira-service-page h3 { letter-spacing: -.035em; text-wrap: balance; }
.mira-service-page h2 { scroll-margin-top: calc(var(--mira-header-h) + 24px); }
.mira-service-kicker { margin: 0 0 18px; color: var(--mira-primary); font-family: var(--mira-heading); font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }

.mira-service-breadcrumbs { position: relative; z-index: 3; color: rgba(255,255,255,.64); font-size: 12px; }
.mira-service-breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mira-service-breadcrumbs li { display: inline-flex; align-items: center; min-height: 40px; }
.mira-service-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: rgba(255,255,255,.32); }
.mira-service-breadcrumbs a { min-height: 40px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s,text-decoration-color .2s; }
.mira-service-breadcrumbs a:hover { color: #fff; text-decoration-color: currentColor; }
.mira-service-breadcrumbs [aria-current="page"] { color: #fff; }

.mira-service-hero {
	--mira-service-light-x: 72%;
	--mira-service-light-y: 30%;
	position: relative;
	min-height: clamp(690px, 82svh, 850px);
	padding: calc(var(--mira-header-h) + 20px) 0 clamp(58px, 6vw, 88px);
	overflow: hidden;
	background: linear-gradient(118deg,#0d1914 0%,#112019 48%,#091511 100%);
	color: #fff;
}
.mira-service-hero::before { content: ""; position: absolute; inset: auto -12vw -38% 32%; height: 74%; border-radius: 50%; background: rgba(40,119,66,.35); filter: blur(110px); pointer-events: none; }
.mira-service-hero__ambient { position: absolute; inset: 0; z-index: 1; opacity: .42; background: radial-gradient(560px circle at var(--mira-service-light-x) var(--mira-service-light-y),rgba(40,119,66,.48),rgba(0,232,63,.08) 30%,transparent 72%); transition: opacity .45s ease; pointer-events: none; }
.mira-service-hero.is-pointer-active .mira-service-hero__ambient { opacity: .84; }
.mira-service-hero__stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: var(--mira-service-gap); align-items: center; min-height: clamp(500px,60vh,625px); }
.mira-service-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding-block: clamp(42px,6vw,78px); }
.mira-service-hero__copy .mira-service-kicker { color: var(--mira-accent); }
.mira-service-hero h1 { max-width: 13ch; margin: 0 0 26px; font-size: clamp(3.2rem,4.6vw,4.65rem); font-weight: 500; line-height: .98; }
.mira-service-hero__lead { max-width: 49ch; margin: 0 0 32px; color: rgba(255,255,255,.76); font-size: clamp(1.02rem,1.35vw,1.18rem); line-height: 1.65; }
.mira-service-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 13px 22px; border: 1px solid var(--mira-primary); border-radius: 2px; background: var(--mira-primary) linear-gradient(90deg,var(--mira-accent),var(--mira-accent)) left center/0 100% no-repeat; color: #fff; font-family: var(--mira-heading); font-size: 11px; font-weight: 700; letter-spacing: .075em; line-height: 1.2; text-align: center; text-transform: uppercase; transition: background-size .38s var(--mira-ease),border-color .25s,color .25s,transform .25s var(--mira-ease); }
.mira-service-button:hover { border-color: var(--mira-accent); background-size: 100% 100%; color: var(--mira-ink); transform: translateY(-2px); }
.mira-service-hero__visual { position: relative; height: clamp(460px,58vh,600px); margin: 0; overflow: hidden; border-radius: 2px 2px 58px 2px; background: #111a27; box-shadow: 0 34px 80px rgba(0,0,0,.28); transition: transform .3s ease-out; }
.mira-service-hero__visual::before { content: ""; position: absolute; z-index: 2; inset: 0; background: #111a27; transform: scaleX(0); transform-origin: right center; transition: transform .85s var(--mira-ease); pointer-events: none; }
.mira-service-hero__visual::after { content: ""; position: absolute; z-index: 3; inset: 0; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.mira-service-hero__visual img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--mira-service-tilt-x,0),calc(var(--mira-service-tilt-y,0px) + var(--mira-service-scroll-shift,0px)),0) scale(1.065); transition: transform .45s ease-out; }
.mira-service-hero__visual figcaption { position: absolute; z-index: 4; top: 26px; right: 26px; max-width: 245px; padding: 11px 14px; background: rgba(13,21,32,.88); color: #fff; font-family: var(--mira-heading); font-size: 9px; font-weight: 700; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; }
.mira-service-hero--without-visual .mira-service-hero__stage { grid-template-columns: minmax(0,820px); }

.mira-service-intro { display: grid; grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr); gap: var(--mira-service-gap); padding-block: var(--mira-service-pad); }
.mira-service-section-head h2,.mira-service-process h2,.mira-service-related h2 { margin: 0; font-size: clamp(2.15rem,3.8vw,3.55rem); font-weight: 500; line-height: 1.04; }
.mira-service-intro .mira-service-section-head h2 { max-width: 13ch; font-size: clamp(2.1rem,3.2vw,3.05rem); }
.mira-service-intro__copy { padding-top: 25px; border-top: 1px solid var(--mira-rule); }
.mira-service-intro__copy p { max-width: 64ch; margin: 0; color: var(--mira-ink-muted); font-size: clamp(1.05rem,1.35vw,1.18rem); line-height: 1.78; }
.mira-service-intro__copy p + p { margin-top: 18px; }

.mira-service-scope { position: relative; padding-block: clamp(88px,8vw,126px); overflow: hidden; background: linear-gradient(135deg,#e4eee2 0%,#edf2e8 58%,#eee9dd 100%); }
.mira-service-scope::after { content: ""; position: absolute; top: -180px; right: -150px; width: 520px; height: 520px; border-radius: 50%; background: rgba(40,119,66,.14); filter: blur(95px); pointer-events: none; }
.mira-service-scope > .mira-service-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: var(--mira-service-gap); }
.mira-service-scope .mira-service-section-head h2 { max-width: 10ch; }
.mira-service-scope__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 clamp(26px,4vw,62px); margin: 0; padding: 0; border-top: 1px solid rgba(18,24,32,.22); list-style: none; counter-reset: mira-scope; }
.mira-service-scope__list li { counter-increment: mira-scope; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; min-height: 110px; padding: 24px 4px 20px; border-bottom: 1px solid rgba(18,24,32,.18); font-family: var(--mira-heading); font-size: clamp(1.05rem,1.5vw,1.28rem); font-weight: 500; line-height: 1.35; }
.mira-service-scope__list li::before { content: counter(mira-scope,decimal-leading-zero); color: #267441; font-size: 10px; font-weight: 700; letter-spacing: .1em; transform: translateY(4px); }
.mira-service-scope__list li span { transition: color .25s,transform .3s var(--mira-ease); }
.mira-service-scope__list li:hover span { color: var(--mira-primary); transform: translateX(6px); }

.mira-service-audience { position: relative; padding-block: clamp(92px,9vw,138px); overflow: hidden; background: #0d1915; color: #fff; }
.mira-service-audience::before { content: ""; position: absolute; inset: -28% auto auto -12%; width: 48vw; height: 48vw; border-radius: 50%; background: rgba(40,119,66,.2); filter: blur(100px); }
.mira-service-audience__inner { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr); gap: var(--mira-service-gap); align-items: end; }
.mira-service-audience .mira-service-kicker { color: var(--mira-accent); }
.mira-service-audience .mira-service-section-head h2 { max-width: 12ch; }
.mira-service-audience .mira-service-section-head > p:last-child { max-width: 53ch; margin: 26px 0 0; color: rgba(255,255,255,.7); font-size: 1.06rem; line-height: 1.7; }
.mira-service-audience__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.22); list-style: none; }
.mira-service-audience__list li { position: relative; min-height: 82px; padding: 26px 36px 22px 0; border-bottom: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); font-family: var(--mira-heading); font-size: clamp(.95rem,1.2vw,1.08rem); font-weight: 500; text-transform: uppercase; }
.mira-service-audience__list li:nth-child(odd) { margin-right: 28px; }
.mira-service-audience__list li::after { content: "+"; position: absolute; top: 25px; right: 4px; color: var(--mira-accent); font-size: 18px; font-weight: 300; }

.mira-service-process { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr); gap: var(--mira-service-gap); padding-block: var(--mira-service-pad); }
.mira-service-process__intro { position: sticky; top: calc(var(--mira-header-h) + 34px); align-self: start; }
.mira-service-process__intro h2 { max-width: 13ch; font-size: clamp(2.05rem,3.2vw,3rem); }
.mira-service-process__intro > p:last-child { max-width: 50ch; margin: 24px 0 0; color: var(--mira-ink-muted); font-size: 1.05rem; line-height: 1.7; }
.mira-service-process__steps { position: relative; margin: 0; padding: 0; list-style: none; }
.mira-service-process__steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 1px; background: var(--mira-rule); }
.mira-service-process__steps li { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 24px; min-height: 128px; padding: 0 0 36px; }
.mira-service-process__steps li > span { position: relative; z-index: 1; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid var(--mira-rule); border-radius: 50%; background: var(--mira-paper); color: var(--mira-primary); font-family: var(--mira-heading); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.mira-service-process__steps h3 { margin: 6px 0 8px; font-size: clamp(1.2rem,1.8vw,1.55rem); font-weight: 500; }
.mira-service-process__steps p { max-width: 58ch; margin: 0; color: var(--mira-ink-muted); line-height: 1.65; }

.mira-service-visual-break { padding-bottom: var(--mira-service-pad); }
.mira-service-visual-break figure { position: relative; width: min(84%,1180px); min-height: 420px; margin: 0 auto; overflow: hidden; border-radius: 2px 62px 2px 2px; background: #dfe6df; }
.mira-service-visual-break img { display: block; width: 100%; height: clamp(420px,62vw,690px); object-fit: cover; }
.mira-service-visual-break figcaption { position: absolute; right: 26px; bottom: 26px; max-width: 290px; padding: 13px 16px; background: rgba(13,25,21,.9); color: #fff; font-family: var(--mira-heading); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.mira-service-why { position: relative; padding-block: clamp(84px,8vw,122px); overflow: hidden; background: linear-gradient(100deg,#e8eddf 0%,#f1ecdf 52%,#e7efe5 100%); }
.mira-service-why::after { content: ""; position: absolute; right: 4%; bottom: -65%; width: 420px; height: 420px; border-radius: 50%; background: rgba(1,0,214,.07); filter: blur(90px); }
.mira-service-why__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px,.45fr) minmax(330px,.75fr) minmax(320px,.8fr); gap: clamp(30px,4vw,70px); align-items: start; }
.mira-service-why h2 { margin: 0; font-size: clamp(2rem,3.3vw,3.1rem); font-weight: 500; line-height: 1.05; }
.mira-service-why__inner > p:last-child { margin: 4px 0 0; color: var(--mira-ink-muted); font-size: clamp(1.02rem,1.25vw,1.15rem); line-height: 1.72; }

.mira-service-related { padding-block: var(--mira-service-pad); }
.mira-service-related__head { display: grid; grid-template-columns: minmax(0,.8fr) minmax(280px,.7fr); gap: 24px var(--mira-service-gap); align-items: end; margin-bottom: 46px; }
.mira-service-related__head .mira-service-kicker { grid-column: 1 / -1; margin-bottom: -4px; }
.mira-service-related__head h2 { max-width: 14ch; }
.mira-service-related__head > p:last-child { max-width: 44ch; margin: 0; color: var(--mira-ink-muted); font-size: 1.05rem; line-height: 1.65; }
.mira-service-related ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mira-service-related a { position: relative; display: block; min-height: 390px; overflow: hidden; background: #dce6dd; color: #fff; }
.mira-service-related__media,.mira-service-related__media::after { position: absolute; inset: 0; }
.mira-service-related__media::after { content: ""; background: linear-gradient(180deg,rgba(8,18,14,.06),rgba(8,18,14,.86)); }
.mira-service-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--mira-ease),filter .45s ease; }
.mira-service-related__content { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 390px; padding: 24px; }
.mira-service-related__index { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.mira-service-related strong { margin-top: auto; font-family: var(--mira-heading); font-size: clamp(1.35rem,2vw,1.8rem); font-weight: 500; line-height: 1.1; }
.mira-service-related__description { display: -webkit-box; max-width: 38ch; margin-top: 13px; overflow: hidden; color: rgba(255,255,255,.75); font-size: .92rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mira-service-related__action { margin-top: 24px; color: #fff; font-family: var(--mira-heading); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mira-service-related a:hover .mira-service-related__media img { transform: scale(1.055); filter: saturate(1.08); }
.mira-service-related a:hover .mira-service-related__action { color: var(--mira-accent); }

.mira-service-page--outdoor .mira-service-scope { background: linear-gradient(135deg,#dcebd9,#eef0df 62%,#eee8d9); }
.mira-service-page--technical .mira-service-audience { background: linear-gradient(120deg,#101923,#12231c); }
.mira-service-page--emergency .mira-service-hero,.mira-service-page--emergency .mira-service-audience { background: linear-gradient(120deg,#09131d,#0d2518); }
.mira-service-page--emergency .mira-service-button { border-color: var(--mira-accent); background-color: var(--mira-accent); color: var(--mira-dark); }

@media (min-width: 961px) {
	.mira-service-page--variant-2 .mira-service-hero__stage { grid-template-columns: minmax(420px,1.04fr) minmax(0,.96fr); }
	.mira-service-page--variant-2 .mira-service-hero__visual { order: -1; height: clamp(490px,62vh,630px); border-radius: 68px 2px 2px 2px; }
	.mira-service-page--variant-2 .mira-service-hero__copy { padding-left: clamp(16px,3vw,46px); }
	.mira-service-page--variant-3 .mira-service-hero__stage { grid-template-columns: minmax(0,1.04fr) minmax(440px,.96fr); align-items: end; }
	.mira-service-page--variant-3 .mira-service-hero__visual { height: clamp(470px,55vh,570px); margin-bottom: -24px; border-radius: 2px 62px 2px 2px; }
}

.mira-service-page.is-motion-ready .mira-service-hero__copy > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--mira-ease),transform .7s var(--mira-ease); }
.mira-service-page.is-motion-ready .mira-service-hero__copy > :nth-child(2) { transition-delay: .08s; }
.mira-service-page.is-motion-ready .mira-service-hero__copy > :nth-child(3) { transition-delay: .15s; }
.mira-service-page.is-motion-ready .mira-service-hero__visual::before { transform: scaleX(1); }
.mira-service-page.is-motion-ready .mira-service-hero.is-cinema-ready .mira-service-hero__copy > * { opacity: 1; transform: none; }
.mira-service-page.is-motion-ready .mira-service-hero.is-cinema-ready .mira-service-hero__visual::before { transform: scaleX(0); }
.mira-service-hero.is-pointer-active .mira-service-hero__visual img { will-change: transform; }
.mira-service-page.is-motion-ready [data-mira-service-reveal] > * { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--mira-ease),transform .65s var(--mira-ease); }
.mira-service-page.is-motion-ready [data-mira-service-reveal].is-visible > * { opacity: 1; transform: none; }
.mira-service-page.is-motion-ready [data-mira-service-reveal] > :nth-child(2) { transition-delay: .08s; }
.mira-service-page.is-motion-ready .mira-service-scope__list li { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--mira-ease),transform .45s var(--mira-ease); }
.mira-service-page.is-motion-ready .mira-service-scope.is-visible .mira-service-scope__list li { opacity: 1; transform: none; }
.mira-service-page.is-motion-ready .mira-service-scope.is-visible .mira-service-scope__list li:nth-child(2) { transition-delay: .04s; }
.mira-service-page.is-motion-ready .mira-service-scope.is-visible .mira-service-scope__list li:nth-child(3) { transition-delay: .08s; }
.mira-service-page.is-motion-ready .mira-service-scope.is-visible .mira-service-scope__list li:nth-child(4) { transition-delay: .12s; }
.mira-service-page.is-motion-ready .mira-service-scope.is-visible .mira-service-scope__list li:nth-child(n+5) { transition-delay: .16s; }

@media (max-width: 1080px) {
	.mira-service-page { --mira-service-pad: clamp(82px,9vw,112px); }
	.mira-service-related ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.mira-service-related li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
	.mira-service-hero { min-height: 0; padding-bottom: 68px; }
	.mira-service-hero__stage { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
	.mira-service-hero__copy { padding: 42px 0 24px; }
	.mira-service-hero__visual { height: auto; aspect-ratio: 16 / 9; }
	.mira-service-intro,.mira-service-scope > .mira-service-shell,.mira-service-audience__inner,.mira-service-process,.mira-service-why__inner { grid-template-columns: 1fr; }
	.mira-service-intro .mira-service-section-head h2,.mira-service-scope .mira-service-section-head h2,.mira-service-audience .mira-service-section-head h2,.mira-service-process__intro h2 { max-width: 18ch; }
	.mira-service-process__intro { position: static; }
	.mira-service-why__inner { gap: 24px; }
}

@media (max-width: 767px) {
	.mira-service-page { --mira-service-pad: 76px; --mira-service-gap: 34px; }
	.mira-service-scope,.mira-service-audience,.mira-service-why { padding-block: 76px; }
	.mira-service-hero h1 { font-size: clamp(2.65rem,12vw,3.55rem); }
	.mira-service-scope__list,.mira-service-audience__list { grid-template-columns: 1fr; }
	.mira-service-audience__list li:nth-child(odd) { margin-right: 0; }
	.mira-service-related__head { grid-template-columns: 1fr; }
	.mira-service-related ul { grid-template-columns: 1fr; }
	.mira-service-related li:last-child:nth-child(odd) { grid-column: auto; }
	.mira-service-related a,.mira-service-related__content { min-height: 340px; }
	.mira-service-visual-break figure { width: 100%; min-height: 320px; border-radius: 2px 38px 2px 2px; }
	.mira-service-visual-break img { height: clamp(320px,92vw,520px); }
}

@media (max-width: 430px) {
	.mira-service-page { --mira-service-pad: 66px; --mira-service-gap: 28px; }
	.mira-service-hero { padding-top: calc(var(--mira-header-h) + 10px); padding-bottom: 46px; }
	.mira-service-breadcrumbs { font-size: 11px; }
	.mira-service-hero__copy { padding: 30px 0 18px; }
	.mira-service-hero__visual { aspect-ratio: 4 / 3; border-radius: 2px 2px 36px 2px; }
	.mira-service-hero__visual figcaption { top: 14px; right: 14px; max-width: calc(100% - 28px); }
	.mira-service-section-head h2,.mira-service-process h2,.mira-service-related h2 { font-size: clamp(1.95rem,9.8vw,2.55rem); }
	.mira-service-scope,.mira-service-audience,.mira-service-why { padding-block: 66px; }
	.mira-service-scope__list li { min-height: 88px; padding-block: 19px; }
	.mira-service-process__steps li { gap: 18px; }
	.mira-service-related__content { padding: 20px; }
	.mira-service-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mira-service-page *,.mira-service-page *::before,.mira-service-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.mira-service-hero__visual img { transform: none !important; }
}
