.magic-content-heading{text-align:center}
.service-heading.magic-content-heading :is(h2:not(:where(.promoted-kicker)),p:where(.display-h2)){font-size:clamp(15px,1.15vw,18px);font-weight:760;line-height:1.45;letter-spacing:.1em;background:none;color:var(--blue);margin:0 0 24px}
.magic-content-heading :is(h3,p:where(.display-h3)){font-size:var(--heading-size);font-weight:400;line-height:1.28;letter-spacing:.02em;background:linear-gradient(90deg,#111820,var(--blue-deep) 58%,var(--blue));background-clip:text;-webkit-background-clip:text;color:transparent;margin:0;text-wrap:balance}
.service-heading.magic-content-heading .section-intro{max-width:42em;margin:24px auto 0}
.magic-duration-note{font-size:14px;font-weight:500;line-height:1.8;color:var(--muted);margin:16px auto 0}
.magic-diagonal{position:relative;isolation:isolate;height:clamp(600px,49vw,740px);overflow:hidden;border-radius:32px;background:var(--navy);--cut-top:60%;--cut-bottom:40%}
.magic-diagonal-panel{position:absolute;inset:0;overflow:hidden;transition:clip-path 650ms cubic-bezier(.22,1,.36,1)}
.magic-diagonal-stage{clip-path:polygon(0 0,var(--cut-top) 0,var(--cut-bottom) 100%,0 100%)}
.magic-diagonal-interaction{clip-path:polygon(var(--cut-top) 0,100% 0,100% 100%,var(--cut-bottom) 100%)}
.magic-diagonal-panel figure{position:absolute;inset:0 auto 0 0;width:66%;margin:0}
.magic-diagonal-interaction figure{left:auto;right:0}
.magic-diagonal-panel img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:brightness(.93);transition:filter 500ms ease}
.magic-diagonal-interaction img{object-position:68% 45%}
.magic-diagonal-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,43,76,.95),rgba(14,43,76,.28) 48%,transparent 78%);pointer-events:none}
.magic-diagonal-panel::before{content:"";position:absolute;z-index:3;inset:0;background:rgba(38,96,172,.58);opacity:0;pointer-events:none;transition:opacity 380ms ease}
.magic-diagonal-copy{position:absolute;z-index:1;left:4%;bottom:9%;width:30%;color:white}
.magic-diagonal-interaction .magic-diagonal-copy{left:auto;right:4%;width:36%}
.magic-diagonal-copy :is(h3,p:where(.display-h3)){margin:0 0 20px;font-size:clamp(36px,4vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.04em;color:white}
.magic-diagonal-copy :is(p:not(:where(.display-h2,.display-h3)),h2:where(.promoted-kicker)){margin:0;font-size:15px;font-weight:500;line-height:1.8;color:rgba(255,255,255,.9);max-width:28em}
@media(hover:hover) and (pointer:fine) and (min-width:981px) and (orientation:landscape){
 .magic-diagonal:has(.magic-diagonal-stage:hover){--cut-top:64%;--cut-bottom:44%}
 .magic-diagonal:has(.magic-diagonal-interaction:hover){--cut-top:56%;--cut-bottom:36%}
 .magic-diagonal-panel:hover img{filter:brightness(1)}
 .magic-diagonal:has(.magic-diagonal-stage:hover) .magic-diagonal-interaction::before,
 .magic-diagonal:has(.magic-diagonal-interaction:hover) .magic-diagonal-stage::before{opacity:1}
}
@media(max-width:980px),(orientation:portrait){
 .magic-diagonal{height:1100px;border-radius:24px}
 .magic-diagonal-panel{height:54%;bottom:auto}
 .magic-diagonal-stage{clip-path:polygon(0 0,100% 0,100% 85.185%,0 100%)}
 .magic-diagonal-interaction{top:auto;bottom:0;clip-path:polygon(0 14.815%,100% 0,100% 100%,0 100%)}
 .magic-diagonal-panel figure{width:100%}
 .magic-diagonal-copy,.magic-diagonal-interaction .magic-diagonal-copy{left:clamp(28px,4vw,40px);right:clamp(28px,4vw,40px);width:auto;bottom:110px}
 .magic-diagonal-interaction .magic-diagonal-copy{bottom:40px}
 .magic-diagonal-copy :is(p:not(:where(.display-h2,.display-h3)),h2:where(.promoted-kicker)){max-width:30em}
}
@media(max-width:767px){
 .magic-diagonal{height:1060px}
 .magic-diagonal-copy,.magic-diagonal-interaction .magic-diagonal-copy{left:24px;right:24px}
 .magic-diagonal-copy :is(h3,p:where(.display-h3)){font-size:36px;margin-bottom:16px}
 .magic-diagonal-copy{bottom:100px}
 .magic-diagonal-interaction .magic-diagonal-copy{bottom:32px}
}
@media(prefers-reduced-motion:reduce){.magic-diagonal-panel,.magic-diagonal-panel img,.magic-diagonal-panel::before{transition:none}}
.service-page--magic .magic-related-link{display:block;width:fit-content;max-width:100%;margin-top:12px;color:var(--blue-deep);font-size:16px;font-weight:500;line-height:1.85;text-decoration:underline;text-underline-offset:5px}
@media (max-width:767px){
 .service-page--magic .service-faq .magic-guide-intro .magic-related-link{margin-inline:auto}
}
.service-page--magic .magic-guide-intro{margin:28px 0 0;color:var(--muted);font-size:16px;line-height:1.85}