:root {
    color-scheme: light;
    --page: #fff;
    --text: #151d27;
    --muted: #526073;
    --surface: #f0f4f8;
    --rule: #e2e8ef;
    --focus: #0870cb;
    --photo: url("../media/services/16/cover-day.webp");
    font: 16px/1.55 system-ui, sans-serif;
    background: var(--page);
    color: var(--text);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #151b24;
    --text: #f5f7fb;
    --muted: #bbc7d6;
    --surface: #222c3a;
    --rule: #344255;
    --focus: #91d2ff;
    --photo: url("../media/services/16/cover-evening.webp");
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.service-wrap { width: min(calc(100% - 36px), 1120px); margin-inline: auto; }
.service-nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding-block: 5px; }
.service-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-size: .86rem; }
.service-nav .service-brand { font-size: 1rem; font-weight: 850; letter-spacing: .06em; }
#service-back { color: var(--focus); }
#service-theme { margin-left: auto; flex: 0 0 44px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 1.3rem; }
.service-theme-moon, [data-theme="dark"] .service-theme-sun { display: none; }
[data-theme="dark"] .service-theme-moon { display: inline; }
.service-hero {
    display: grid;
    align-items: end;
    min-height: clamp(420px, 45vw, 680px);
    color: #fff;
    background: linear-gradient(90deg, #071623c9 0%, #07162375 33%, transparent 70%), var(--photo) center 52% / cover no-repeat;
}
.service-hero-copy { padding-block: 42px; }
.service-kicker { font-size: .77rem; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 8px 0 24px; font-size: clamp(2.65rem, 8vw, 6.4rem); line-height: 1; letter-spacing: -.055em; text-transform: uppercase; overflow-wrap: anywhere; }
#service-order { max-width: 450px; }
#service-order, #service-order-details, .service-fields { display: grid; gap: 9px; }
.service-city { justify-self: start; padding: 3px 10px; border-radius: 999px; background: #132033e8; color: #fff; font-size: .75rem; font-weight: 650; }
input, textarea, select, button { font: inherit; min-height: 44px; }
input, textarea, select { width: 100%; min-width: 0; border: 0; border-radius: 15px; padding: 11px 15px; }
input, textarea { color-scheme: light; background: #fff; color: #132033; }
[data-theme="dark"] :is(input, textarea) { color-scheme: dark; background: #182332; color: #fff; }
textarea { display: block; height: 54px; min-height: 54px; resize: vertical; padding-top: 14px; font-weight: 600; }
textarea:focus { height: 72px; }
::placeholder { color: #556376; opacity: 1; }
[data-theme="dark"] ::placeholder { color: #c0ccdb; }
select { background: var(--surface); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button { width: fit-content; border: 0; border-radius: 15px; padding: 9px 16px; background: #d6edff; color: #102941; font-weight: 750; cursor: pointer; }
button:disabled { opacity: .7; }
#service-feedback { margin: 0; padding: 8px 12px; border-radius: 12px; background: #132033; color: #fff; }
#service-feedback[data-error] { color: #ffb3b3; }
.service-content { padding-block: 26px 52px; }
.service-choice { display: grid; gap: 6px; max-width: 36rem; padding-block: 12px 24px; color: var(--muted); font-size: .9rem; }
.service-choice select { font-size: 1rem; }
.service-content section { padding-block: 23px; border-top: 1px solid var(--rule); }
h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 4vw, 2.1rem); }
.service-content p { margin: 7px 0; max-width: 62ch; color: var(--muted); }
.service-content .service-price { font-size: 1.9rem; font-weight: 750; color: var(--text); }
.service-media { display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; background: var(--surface); color: var(--muted); object-fit: contain; }
.service-steps { padding-left: 22px; margin: 0; }
.service-steps li + li { margin-top: 8px; }
@media (min-width: 580px) {
    .service-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .service-nav nav { column-gap: 11px; }
    .service-nav a { font-size: .79rem; }
    .service-hero {
        align-items: stretch;
        background-image: linear-gradient(180deg, #071623af, transparent 36%, transparent 59%, #071623b8), var(--photo);
        background-position: 61% center;
    }
    .service-hero-copy { display: flex; flex-direction: column; padding-block: 23px 18px; }
    h1 { margin-bottom: 180px; }
    #service-order { margin-top: auto; }
    #service-order button { width: 100%; }
}