/* =========================================================================
   Services module — storefront styles
   Service pages, the catalogue, section pages and the services blocks.

   Written against the theme's design tokens only, so a design preset, a dark
   scheme or a coloured section restyles all of it. Tones are the design
   system's own classes (.cms-tone-soft / .cms-tone-dark, from /design.css):
   they redefine the colour tokens, and every rule below reads those names.
   Every class is prefixed .svc-. Mobile first; no rule needs JavaScript.
   ========================================================================= */

/* --- frame --------------------------------------------------------------- */
.svc-wrap {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.svc-wrap--narrow { max-width: 52rem; }

.svc-hero,
.svc-section,
.svc-order,
.svc-band {
    position: relative;
    background-color: var(--section-bg, transparent);
    color: var(--c-text);
}

.svc-section { padding-block: var(--sp-md); }
.svc-section--tight { padding-block: var(--sp-sm); }

/* Two plain sections in a row share one gap, not two. */
.svc-section:not(.svc-section--sunk) + .svc-section:not(.svc-section--sunk) { padding-block-start: 0; }

.svc-h2 {
    margin: 0 0 var(--s-6);
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-snug);
    color: var(--c-text-strong);
    text-wrap: balance;
}

.svc-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3) var(--s-5);
    margin-block-end: var(--s-6);
}

.svc-head-row .svc-h2 { margin: 0; }

.svc-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-link);
    text-decoration: none;
    white-space: nowrap;
}

.svc-more:hover { color: var(--c-link-hover); text-decoration: underline; }
.svc-more .cms-icon { transition: transform var(--dur) var(--ease); }
.svc-more:hover .cms-icon { transform: translateX(3px); }

.svc-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-block-start: var(--s-5);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--c-text-muted);
}

.svc-note .cms-icon { margin-block-start: 0.2em; color: var(--c-accent); }

/* --- badges -------------------------------------------------------------- */
.svc-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.svc-badge--hit  { background: var(--c-mark); color: #15171c; }
.svc-badge--new  { background: var(--c-accent); color: var(--c-accent-contrast); }
.svc-badge--sale { background: var(--c-danger); color: var(--c-bg); }
.svc-badge--best { background: var(--c-success); color: var(--c-bg); }

/* --- breadcrumbs ------------------------------------------------------------ */
.svc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.svc-crumbs li + li::before {
    content: "/";
    margin-inline-end: var(--s-2);
    color: var(--c-text-faint);
}

.svc-crumbs a { color: inherit; text-decoration: none; }
.svc-crumbs a:hover { color: var(--c-link); text-decoration: underline; }

/* --- first screen ------------------------------------------------------------ */
.svc-hero { padding-block: var(--sp-sm) var(--sp-md); overflow: clip; }

.svc-hero__grid {
    display: grid;
    gap: var(--s-7);
    align-items: center;
}

@media (min-width: 60rem) {
    .svc-hero--media .svc-hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--s-8);
    }
}

.svc-hero__text > .svc-badge { margin-block-end: var(--s-3); }

.svc-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.55rem + 2.4vw, 3.5rem);
    font-weight: var(--fw-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    color: var(--c-text-strong);
    text-wrap: balance;
}

.svc-hero__lead {
    max-width: 36rem;
    margin-block-start: var(--s-4);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--c-text-muted);
    text-wrap: pretty;
}

.svc-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-7);
    width: fit-content;
    max-width: 100%;
    margin: var(--s-6) 0 0;
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--c-border-strong);
}

.svc-fact dt {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-faint);
}

.svc-fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-2);
    margin: var(--s-1) 0 0;
}

.svc-fact__value {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: var(--fw-heading);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--c-text-strong);
    font-variant-numeric: tabular-nums;
}

/* The price is emphasis, not a link: the theme's second accent. */
.svc-fact--price .svc-fact__value { color: var(--c-mark-text); }
.svc-fact__value--sm { font-size: var(--t-lg); }
.svc-fact__unit { font-size: var(--t-sm); color: var(--c-text-muted); }

.svc-hero__actions { margin-block-start: var(--s-6); }

.svc-hero__phone,
.svc-order__phone {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-block-start: var(--s-4);
    font-size: var(--t-sm);
    color: var(--c-text-muted);
}

.svc-hero__phone a,
.svc-order__phone a {
    font-weight: 700;
    color: var(--c-text-strong);
    text-decoration: none;
    white-space: nowrap;
}

.svc-hero__phone a:hover,
.svc-order__phone a:hover { color: var(--c-link); }

.svc-hero__media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
}

.svc-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-hero--section .svc-hero__media { aspect-ratio: 16 / 10; }
.svc-hero__count { margin-block-start: var(--s-5); font-size: var(--t-sm); color: var(--c-text-muted); }
.svc-hero--catalogue { padding-block-end: var(--sp-sm); }

/* Section jump links (catalogue) and subsections (section page). */
.svc-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: var(--s-6) 0 0;
    padding: 0;
    list-style: none;
}

.svc-jump__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0.45rem 0.6rem 0.45rem 1rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    background: var(--c-surface);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-text-strong);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.svc-jump__link:hover { border-color: var(--c-accent); color: var(--c-link); }
.svc-jump__link:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }
.svc-jump__link > .cms-icon { color: var(--c-accent); }
.svc-jump__link > span:last-child:not(.svc-jump__count) { padding-inline-end: 0.4rem; }

.svc-jump__count {
    min-width: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--c-surface-sunk);
    font-size: var(--t-xs);
    line-height: 1.6rem;
    text-align: center;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- who it is for ------------------------------------------------------------ */
.svc-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-audience__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    font-weight: 550;
    line-height: 1.45;
    color: var(--c-text-strong);
}

.svc-audience__item .cms-icon { margin-block-start: 0.05em; font-size: 1.25rem; color: var(--c-success); }

/* --- why us ------------------------------------------------------------------- */
.svc-benefits {
    --svc-min: 14rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--svc-min)), 1fr));
    gap: var(--s-7) var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Five do not split well into four; three columns then. */
.svc-benefits--3 { --svc-min: max(14rem, calc((100% - 2 * var(--s-6)) / 3)); }

.svc-benefit {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-block-start: var(--s-5);
    border-top: 1px solid var(--c-border-strong);
}

.svc-benefit__title {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

.svc-benefit__text { color: var(--c-text-muted); line-height: 1.6; }

/* --- about + what is included --------------------------------------------------- */
.svc-about { display: grid; gap: var(--s-7); }

@media (min-width: 60rem) {
    .svc-about--split {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem);
        gap: var(--s-9);
        align-items: start;
    }

    .svc-about--split .svc-includes { position: sticky; top: var(--s-6); }
}

.svc-prose {
    max-width: var(--w-prose);
    font-family: var(--font-prose);
    font-size: var(--t-md);
    line-height: var(--lh-prose);
    color: var(--c-text);
}

.svc-prose > * + * { margin-block-start: var(--s-4); }

.svc-prose :is(h2, h3, h4) {
    margin-block: var(--s-6) var(--s-2);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    color: var(--c-text-strong);
}

.svc-includes {
    max-width: 36rem;
    padding: clamp(var(--s-5), 3vw, var(--s-6));
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-md);
}

.svc-includes__title {
    margin-block-end: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--fw-heading);
    color: var(--c-text-strong);
}

.svc-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-checklist li { display: flex; align-items: flex-start; gap: var(--s-3); line-height: 1.45; }

.svc-checklist .cms-icon {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin-block-start: 0.05rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    --icon-stroke: 3;
}

.svc-includes__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-2);
    margin-block-start: var(--s-5);
    padding-block-start: var(--s-5);
    border-top: 1px solid var(--c-border);
}

.svc-includes__amount {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: var(--fw-heading);
    line-height: 1.15;
    color: var(--c-mark-text);
    font-variant-numeric: tabular-nums;
}

.svc-includes__action { margin-block-start: var(--s-4); }
.svc-includes__action .cms-btn { width: 100%; }

/* --- how it goes ---------------------------------------------------------------------
   A vertical line on phones, a horizontal one from 52rem: the number sits on
   the line, ringed in the section's own colour so the line appears to pass
   behind it. */
.svc-steps {
    display: grid;
    gap: var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding-inline-start: 4rem;
}

.svc-step__num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: var(--c-accent);
    box-shadow: 0 0 0 6px var(--section-bg, var(--c-bg));
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-accent-contrast);
    font-variant-numeric: tabular-nums;
}

.svc-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    bottom: calc(var(--s-6) * -1);
    left: calc(1.375rem - 1px);
    width: 2px;
    background: var(--c-border-strong);
}

.svc-step__title {
    padding-block-start: 0.55rem;
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

.svc-step__text { color: var(--c-text-muted); line-height: 1.6; }

.svc-step__time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    margin-block-start: var(--s-1);
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-text-muted);
}

@media (min-width: 52rem) {
    .svc-steps { grid-template-columns: repeat(var(--svc-steps, 3), minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
    .svc-steps--2 { --svc-steps: 2; }
    .svc-steps--4 { --svc-steps: 4; }

    .svc-step { padding-inline-start: 0; padding-block-start: 4rem; }
    .svc-step__title { padding-block-start: 0; }

    .svc-step:not(:last-child)::before {
        top: calc(1.375rem - 1px);
        bottom: auto;
        left: 2.75rem;
        right: calc(var(--s-5) * -1);
        width: auto;
        height: 2px;
    }

    /* Five and more wrap onto rows; a line into the margin would lead nowhere. */
    .svc-steps--many .svc-step::before { display: none; }
}

/* --- prices -------------------------------------------------------------------------- */
.svc-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--s-5);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-packs--1 { max-width: 26rem; }
.svc-packs--3 { padding-block-start: var(--s-3); }

.svc-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: clamp(var(--s-5), 2.5vw, var(--s-6));
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

.svc-pack--top {
    border: 2px solid var(--c-accent);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 60rem) {
    .svc-packs--3 .svc-pack--top { transform: translateY(calc(var(--s-3) * -1)); }
}

.svc-pack__flag {
    position: absolute;
    top: 0;
    left: var(--s-5);
    transform: translateY(-50%);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--c-accent);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--c-accent-contrast);
}

.svc-pack__name {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--fw-heading);
    color: var(--c-text-strong);
}

.svc-pack__price { display: flex; flex-direction: column; gap: 0.2rem; }

.svc-pack__amount {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: var(--fw-heading);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-text-strong);
    font-variant-numeric: tabular-nums;
}

.svc-pack__period { font-size: var(--t-sm); color: var(--c-text-muted); }

.svc-pack__features {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: var(--s-2) 0 0;
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--c-border);
    list-style: none;
    font-size: var(--t-sm);
}

.svc-pack__features li { display: flex; align-items: flex-start; gap: var(--s-2); line-height: 1.45; }
.svc-pack__features .cms-icon { margin-block-start: 0.15em; color: var(--c-success); --icon-stroke: 2.5; }
.svc-pack__off { color: var(--c-text-faint); }
.svc-pack__off .cms-icon { color: var(--c-text-faint); }

.svc-pack__action { margin-block-start: auto; padding-block-start: var(--s-4); }
.svc-pack__action .cms-btn { width: 100%; }

.svc-pricelist {
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

.svc-pricelist--after { margin-block-start: var(--s-7); }
.svc-pricelist--narrow { max-width: 48rem; }

.svc-rows { margin: 0; padding: 0; list-style: none; }

.svc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2) var(--s-5);
    padding: var(--s-4) clamp(var(--s-4), 2.5vw, var(--s-6));
    transition: background-color var(--dur) var(--ease);
}

.svc-row + .svc-row { border-top: 1px solid var(--c-border); }
.svc-row:hover { background-color: color-mix(in srgb, var(--c-accent-soft) 45%, transparent); }
.svc-row:has(.svc-row__order) { grid-template-columns: minmax(0, 1fr) auto auto; }

.svc-row__name { display: flex; flex-direction: column; gap: 0.15rem; font-weight: 550; color: var(--c-text-strong); }
.svc-row__name a { color: inherit; text-decoration: none; }
.svc-row__name a:hover { color: var(--c-link); text-decoration: underline; }
.svc-row__note { font-size: var(--t-xs); font-weight: 400; color: var(--c-text-muted); }

.svc-row__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.svc-row__amount { font-weight: 700; color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.svc-row__unit { font-size: var(--t-xs); color: var(--c-text-muted); }

.svc-row__order {
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-link);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.svc-row__order:hover { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-accent-contrast); }
.svc-row__order:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

@media (max-width: 36rem) {
    .svc-row:has(.svc-row__order) { grid-template-columns: minmax(0, 1fr) auto; }
    .svc-row__order { grid-column: 1 / -1; justify-self: start; min-height: 32px; }
}

/* --- results, photos, video -------------------------------------------------------- */
.svc-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-result { margin: 0; }

.svc-result__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    overflow: hidden;
    border-radius: var(--r-lg);
}

.svc-result__img { position: relative; background: var(--c-surface-sunk); }

.svc-result__tag {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgb(10 12 16 / 0.65);
    font-size: var(--t-xs);
    font-weight: 700;
    color: #fff;
}

.svc-result__tag--after { background: var(--c-accent); color: var(--c-accent-contrast); }
.svc-result__caption { margin-block-start: var(--s-3); font-size: var(--t-sm); color: var(--c-text-muted); }

.svc-video { margin: 0 0 var(--s-5); }
.svc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.svc-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .svc-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.svc-gallery--one { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }

.svc-gallery__link {
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-surface-sunk);
}

.svc-gallery__link img { transition: transform 0.5s var(--ease); }
.svc-gallery__link:hover img { transform: scale(1.04); }
.svc-gallery__link:focus-visible { outline: 2px solid var(--c-link); outline-offset: 3px; }

/* --- questions: the theme's FAQ items, with a side column ------------------------------ */
.svc-faq .svc-h2 { margin-block-end: var(--s-3); }
.svc-faq__hint { max-width: 24rem; margin-block-end: var(--s-5); color: var(--c-text-muted); line-height: 1.55; }
.svc-faq .cms-faq__answer p { max-width: var(--w-prose); line-height: 1.6; }

/* --- the page's own blocks --------------------------------------------------------------- */
.svc-blocks > .cms-section:first-child { padding-block-start: var(--sp-sm); }

/* --- cards (catalogue, related, services_list block) ------------------------------------ */
.svc-grid {
    --svc-cols: 3;
    --svc-gap: var(--s-5);
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, max(var(--svc-min, 15rem), calc((100% - (var(--svc-cols) - 1) * var(--svc-gap)) / var(--svc-cols)))), 1fr)
    );
    gap: var(--svc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-grid--1 { --svc-cols: 1; }
.svc-grid--2 { --svc-cols: 2; }
.svc-grid--4 { --svc-cols: 4; --svc-min: 13rem; }
.svc-grid > li { display: flex; min-width: 0; }
.svc-grid > li > * { flex: 1 1 auto; min-width: 0; }

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: clamp(var(--s-5), 2.2vw, var(--s-6));
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.svc-card:hover { border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); box-shadow: var(--shadow-lg); }
.svc-card:has(.svc-card__link:focus-visible) { outline: 2px solid var(--c-link); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
    .svc-card:hover { transform: translateY(-2px); }
}

.svc-card__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-md);
    background: var(--c-accent-soft);
    font-size: 1.375rem;
    color: var(--c-accent);
}

.svc-card__body { display: flex; flex-direction: column; gap: var(--s-2); }

.svc-card--icon .svc-card__badge { position: absolute; top: clamp(var(--s-5), 2.2vw, var(--s-6)); right: clamp(var(--s-5), 2.2vw, var(--s-6)); }

.svc-card__title {
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

.svc-card__link { color: inherit; text-decoration: none; }
.svc-card__link:focus-visible { outline: none; }
.svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.svc-card:hover .svc-card__link { color: var(--c-link); }

.svc-card__text {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-text-muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.svc-card__meta { display: flex; align-items: center; gap: 0.35rem; font-size: var(--t-xs); color: var(--c-text-muted); }

.svc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-start: auto;
    padding-block-start: var(--s-4);
    border-top: 1px solid var(--c-border);
}

.svc-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; }
.svc-card__amount { font-weight: 700; color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.svc-card__unit { font-size: var(--t-xs); color: var(--c-text-muted); }

.svc-card__arrow {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-inline-start: auto;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    color: var(--c-text-strong);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.svc-card:hover .svc-card__arrow { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-accent-contrast); }

/* With a picture */
.svc-card--image { gap: var(--s-4); padding: 0; overflow: hidden; }
.svc-card--image > .svc-card__body,
.svc-card--image > .svc-card__foot { margin-inline: clamp(var(--s-4), 2vw, var(--s-5)); }
.svc-card--image > .svc-card__foot { margin-block-end: clamp(var(--s-4), 2vw, var(--s-5)); }
.svc-card__media { position: relative; background: var(--c-surface-sunk); }
.svc-card__media img { transition: transform 0.6s var(--ease); }
.svc-card--image:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__media .svc-card__badge { position: absolute; top: var(--s-3); left: var(--s-3); }
.svc-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; color: var(--c-accent); background: var(--c-accent-soft); }

/* Compact: one line per service */
.svc-card--compact {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
}

.svc-card--compact .svc-card__icon { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
.svc-card--compact .svc-card__body { flex: 1 1 auto; min-width: 0; gap: 0.15rem; }
.svc-card--compact .svc-card__title { font-size: var(--t-base); }
.svc-card--compact .svc-card__foot { flex: none; margin: 0; padding: 0; border: 0; }
.svc-card--compact .svc-card__price { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.svc-card--compact .svc-card__arrow { width: 2rem; height: 2rem; }
.svc-list--compact .svc-grid { --svc-gap: var(--s-3); }

@media (max-width: 30rem) {
    .svc-card--compact { gap: var(--s-3); padding: var(--s-3) var(--s-4); }
    .svc-card--compact .svc-card__arrow { display: none; }
}

.svc-list__more { margin-block-start: var(--s-6); text-align: center; }

/* --- catalogue groups --------------------------------------------------------------------- */
.svc-group + .svc-group .svc-group__head { padding-block-start: var(--sp-sm); border-top: 1px solid var(--c-border); }
.svc-group__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4) var(--s-5); margin-block-end: var(--s-6); }
.svc-group__heading { flex: 1 1 20rem; min-width: 0; }
.svc-group__title { margin: 0; }
.svc-group__title a { color: inherit; text-decoration: none; }
.svc-group__title a:hover { color: var(--c-link); }
.svc-group__text { max-width: 42rem; margin-block-start: var(--s-2); line-height: 1.55; color: var(--c-text-muted); }
.svc-group__more { align-self: center; }

/* --- the form ------------------------------------------------------------------------------ */
.svc-order { padding-block: var(--sp-lg); }

.svc-order__grid { display: grid; gap: var(--s-7); align-items: center; }

@media (min-width: 56rem) {
    .svc-order__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: var(--s-9); }
    .svc-order__grid--solo { grid-template-columns: minmax(0, 42rem); }
}

.svc-order__title {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    font-weight: var(--fw-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    color: var(--c-text-strong);
    text-wrap: balance;
}

.svc-order__text { max-width: 34rem; margin-block-start: var(--s-4); font-size: var(--t-md); line-height: 1.55; color: var(--c-text-muted); }

.svc-order__facts { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.svc-order__facts li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; color: var(--c-text-strong); }

.svc-order__facts .cms-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.55rem;
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

.svc-order__phone { margin-block-start: var(--s-6); font-size: var(--t-base); }
.svc-order__phone a { font-size: var(--t-md); }

.svc-order__box {
    padding: clamp(var(--s-5), 3vw, var(--s-7));
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
}

.svc-order__box .cms-form__actions .cms-btn { width: 100%; }

/* --- closing band (catalogue, sections) ------------------------------------------------------- */
.svc-band { padding-block: var(--sp-md); }
.svc-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); }

.svc-band__title {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: var(--fw-heading);
    line-height: var(--lh-snug);
    color: var(--c-text-strong);
}

.svc-band__text { max-width: 38rem; margin-block-start: var(--s-2); color: var(--c-text-muted); }

/* --- services_prices block: the theme's pricelist, plus links -------------------------------- */
.svc-price__link { color: inherit; text-decoration: none; }
.svc-price__link:hover { color: var(--c-link); text-decoration: underline; }
.svc-prices__note { justify-content: center; text-align: left; }

/* A long unit ("за обе челюсти") goes under the price, so the name keeps
   the room and the leader still has somewhere to run. */
.svc-price .cms-price__name { flex: 0 1 auto; }
.svc-price .cms-price__value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.svc-price .cms-price__unit { font-size: var(--t-xs); }
.svc-price .cms-price__order { align-self: center; }

/* --- phones: the order button stays in reach ------------------------------------------------ */
.svc-sticky { display: none; }

@media (max-width: 47.99rem) {
    .svc-body:has(.svc-sticky) { padding-block-end: 4.75rem; }

    .svc-sticky {
        position: fixed;
        inset: auto 0 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--c-border);
        background: var(--c-surface);
        box-shadow: 0 -10px 30px -18px rgb(10 12 16 / 0.45);
    }

    .svc-sticky .cms-btn { flex: 1 1 auto; min-height: 44px; }
    .svc-sticky__price { display: flex; flex-direction: column; line-height: 1.2; }
    .svc-sticky__price span { font-weight: 700; color: var(--c-text-strong); white-space: nowrap; }
    .svc-sticky__price small { font-size: var(--t-xs); color: var(--c-text-muted); }
}

@media print {
    .svc-sticky, .svc-row__order, .svc-order__box { display: none; }
}

/* A page that closes on a full-bleed band meets the footer directly, not
   across the theme's usual gap. */
.svc-body:has(.svc-order, .svc-band) .site-footer { margin-block-start: 0; }