.home-service { position: relative; height: 100vh; height: 100dvh; }
.home-service.service-motion { height: 230vh; height: 230dvh; }
.service-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: var(--screen-bottom) var(--gutter); }
.service-frame { position: relative; height: 100%; isolation: isolate; overflow: clip; border-radius: 30px; background: var(--ink); }
.service-media, .service-shade { position: absolute; inset: 0; }
.service-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1s ease-in-out; }
.service-media img.is-current { opacity: 1; }
.service-shade { background: linear-gradient(110deg, #0a0f0db8 0%, #0a0f0d8c 48%, #0a0f0d66 100%); }
.service-copy { position: absolute; top: clamp(28px, 7dvh, 88px); left: var(--content-inset); max-width: min(54%, 760px); color: #fff; }
.service-messages { display: grid; }
.service-message { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.service-message.is-current { opacity: 1; transform: none; pointer-events: auto; }
.service-copy h2 { max-width: 16ch; margin: 0; font-size: clamp(26px, min(3.6vw, 6.1dvh), 60px); font-weight: 600; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.service-copy p { max-width: 40ch; margin: 24px 0; font-size: clamp(15px, 1.15vw, 20px); line-height: 1.6; }
.service-link { display: inline-block; padding: 5px 0; font-size: clamp(14px, 1vw, 17px); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.service-link:hover { opacity: .8; }
.service-contact { position: absolute; right: var(--content-inset); bottom: var(--content-inset); min-height: 64px; padding: 20px 36px; border: 0; border-radius: 20px; background: #fff; color: var(--ink); font: 600 clamp(16px, 1.15vw, 20px)/1.3 Montserrat, sans-serif; cursor: pointer; }
.service-contact:hover { background: #eee; }
.service-contact:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.service-form { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(24px, 4vw, 42px); overflow: auto; border: 0; border-radius: 28px; background: #fff; color: var(--ink); }
.service-form::backdrop { background: #10151388; backdrop-filter: blur(5px); }
.service-form h2 { margin: 0 50px 28px 0; font-size: 30px; font-weight: 600; letter-spacing: -.045em; }
.service-form-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: #f8f8f8; color: var(--ink); font: 30px/1 Montserrat, sans-serif; cursor: pointer; }
.service-form form, .service-form label { display: grid; gap: 9px; }
.service-form form { gap: 20px; }
.service-form label { font-size: 14px; font-weight: 500; }
.service-form input, .service-form textarea { width: 100%; padding: 14px 16px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: var(--ink); font: 16px/1.4 Montserrat, sans-serif; }
.service-form textarea { resize: vertical; }
.service-form input:focus, .service-form textarea:focus { border-color: #F66B21; outline: 2px solid #f66b2133; outline-offset: 2px; }
.service-form-submit { min-height: 54px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font: 600 16px/1.3 Montserrat, sans-serif; cursor: pointer; }
.service-form-status { margin: 0; color: #656565; font-size: 14px; line-height: 1.45; }
.service-motion .service-frame { transform-origin: 50% 100%; transform: perspective(1200px) translate3d(0, var(--service-rise, 500px), var(--service-depth, -300px)) rotateX(var(--service-tilt, 5deg)) scale(var(--service-scale, .94)); opacity: var(--service-opacity, 0); }
.service-motion .service-shade { opacity: 0; }
.service-motion .service-copy, .service-motion .service-contact { opacity: 0; transform: translate3d(0, 20px, 0); }
.service-motion[data-motion-ready="true"] .service-shade { transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }
.service-motion[data-motion-ready="true"] .service-copy, .service-motion[data-motion-ready="true"] .service-contact { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.service-motion[data-revealed="true"] .service-shade { opacity: 1; }
.service-motion[data-revealed="true"] .service-copy { opacity: 1; transform: none; transition-delay: .25s; }
.service-motion[data-revealed="true"] .service-contact { opacity: 1; transform: none; transition-delay: .4s; }
@media (max-width: 720px) {
  .service-frame { border-radius: 22px; }
  .service-media img { object-position: 44% 50%; }
  .service-media img:first-child { object-position: 35% 50%; }
  .service-copy { top: 28px; max-width: calc(100% - 2 * var(--content-inset)); }
  .service-copy h2 { font-size: clamp(24px, min(5.7vw, 4.1dvh), 34px); }
  .service-copy p { margin: 18px 0; font-size: 15px; }
  .service-shade { background: linear-gradient(180deg, #0a0f0dc2 0%, #0a0f0d94 42%, #0a0f0d66 100%); }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .service-copy { top: 24px; max-width: 54%; }
  .service-copy h2 { font-size: clamp(23px, 3.4vw, 30px); }
  .service-copy p { font-size: 14px; margin: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-service, .home-service.service-motion { height: 100vh; height: 100dvh; }
  .service-media img, .service-message { transition: none; }
  .service-motion .service-frame, .service-motion .service-copy, .service-motion .service-contact { transform: none; opacity: 1; transition: none; }
  .service-motion .service-shade { opacity: 1; transition: none; }
}