/* ===== Services: the wash deck =====
   One card per service line, laid out as a centred carousel: the middle
   card stands full height and its neighbours step down, all hanging from
   one top edge. Each card is a sheet of paper; services-carousel.js
   paints the service's pictogram on it as watercolour tiles (the Wash
   Studio style) in that service's own pigments, and moves the deck.
   Without scripting the cards fall back to a plain scrolling row. */
.services {
    --svc-ink: #12151b;
    --svc-muted: rgba(18, 21, 27, 0.62);
    --svc-paper: #fafafa;
    --svc-accent: #221fc3;
    /* 434px on a 2000px canvas; the sheet is laid out on 24 x 38 cells. */
    --svc-card-w: clamp(15.5rem, 21.7vw, 27.125rem);
    --svc-card-h: calc(var(--svc-card-w) * 38 / 24);
    --svc-gap: clamp(0.75rem, 1.6vw, 2rem);
    position: relative;
    z-index: 2;
    padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3.5rem, 6vw, 6rem);
    overflow: hidden;
    color: var(--svc-ink);
    background: #ffffff;
}

/* The page rule ends where this section begins. */
.services::before { display: none; }

.svc-head {
    margin: 0 0 clamp(2rem, 3.6vw, 4.5rem);
    padding-inline: var(--page-edge);
    text-align: center;
}
.svc-eyebrow {
    display: block;
    margin: 0 0 clamp(0.75rem, 1.3vw, 1.6rem);
    font-family: var(--sans);
    font-size: clamp(0.95rem, 1.25vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--svc-ink);
}
.svc-heading {
    max-width: 12.5em;
    margin-inline: auto;
    font-family: var(--sans-titles);
    font-size: clamp(2rem, 4.1vw, 5.125rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--svc-ink);
}
.svc-lede {
    max-width: 34em;
    margin: clamp(2rem, 4vw, 5rem) auto 0;
    padding-inline: var(--page-edge);
    box-sizing: content-box;
    font-family: var(--sans);
    font-size: clamp(1rem, 1.3vw, 1.625rem);
    font-weight: 400;
    line-height: 1.55;
    text-align: center;
    text-wrap: balance;
    color: var(--svc-muted);
}

/* --- The deck --- */
.svc-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: var(--svc-card-h);
    column-gap: var(--svc-gap);
}
.svc-cell {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--svc-card-w);
    height: var(--svc-card-h);
    margin-left: calc(var(--svc-card-w) / -2);
    overflow: hidden;
    container-type: inline-size;
    border-radius: calc(var(--svc-card-w) * 0.065);
    background: var(--svc-paper);
    box-shadow:
        0 0 0 1px rgba(18, 21, 27, 0.06),
        0 1px 2px -1px rgba(18, 21, 27, 0.06),
        0 2px 4px 0 rgba(18, 21, 27, 0.04);
}
@supports (corner-shape: squircle) {
    .svc-cell {
        border-radius: calc(var(--svc-card-w) * 0.11);
        corner-shape: squircle;
    }
}

/* The sheet keeps its full size while the card around it grows and
   shrinks, so a card opening up reveals more of the same paper. */
.svc-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--svc-card-h);
    background-size: 100% 100%;
}
/* The painted pictogram: 16 cells square with half a cell of bleed,
   four cells in from the sides and nine down (a cell is 100cqw / 24).
   Multiply lets the paper show through the pigment. */
.svc-art {
    position: absolute;
    left: calc(3.5 * 100cqw / 24);
    top: calc(8.5 * 100cqw / 24);
    width: calc(17 * 100cqw / 24);
    height: calc(17 * 100cqw / 24);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.svc-name {
    position: absolute;
    top: 6.5cqw;
    left: 6.5cqw;
    right: 6.5cqw;
    margin: 0;
    font-family: var(--sans-titles);
    font-size: clamp(1.05rem, 6.2cqw, 1.7rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--svc-ink);
}
.svc-copy {
    position: absolute;
    left: 6.5cqw;
    right: 6.5cqw;
    bottom: 6.5cqw;
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(0.9rem, 4.9cqw, 1.25rem);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(18, 21, 27, 0.78);
}
/* The outline glyph is only the drawing the tiles are painted from. */
.services.is-live .svc-glyph { display: none; }

/* The last card asks for anything the eleven lines do not cover. */
.svc-cell--cta { background: var(--svc-ink); }
.svc-cell--cta .svc-art { mix-blend-mode: normal; }
.svc-cell--cta .svc-name { color: #ffffff; }
.svc-cell--cta .svc-copy {
    bottom: calc(6.5cqw + 2.6em);
    color: rgba(255, 255, 255, 0.74);
}
.svc-cta-link {
    position: absolute;
    left: 6.5cqw;
    bottom: 6.5cqw;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans);
    font-size: clamp(0.85rem, 3.9cqw, 1.05rem);
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
}
.svc-cta-link svg { width: 1.15em; height: 1.15em; }
.svc-cta-link::after { content: ''; position: absolute; inset: -100vh -100vw; }
.svc-cta-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 4px; }

/* --- Scripted: a deck that can be dragged --- */
.services.is-live .svc-grid {
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.services.is-live .svc-grid.is-dragging { cursor: grabbing; }
.services.is-live .svc-cell { will-change: transform; }
.services.is-live .svc-grid:focus-visible .svc-cell.is-active {
    outline: 2px solid var(--svc-accent);
    outline-offset: 4px;
}

/* --- Unscripted: a plain row that scrolls --- */
.services:not(.is-live) .svc-grid {
    display: flex;
    height: auto;
    padding: 2px var(--page-edge) 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.services:not(.is-live) .svc-cell {
    position: relative;
    left: auto;
    flex: 0 0 var(--svc-card-w);
    margin-left: 0;
    scroll-snap-align: center;
}
.services:not(.is-live) .svc-glyph {
    position: absolute;
    left: 6.5cqw;
    top: 42%;
    color: var(--svc-ink);
}
.services:not(.is-live) .svc-glyph svg { display: block; width: 28cqw; height: 28cqw; }

@media (max-width: 640px) {
    .services { --svc-card-w: min(72vw, 19rem); }
}

@media print {
    .services { overflow: visible; }
    .services .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; height: auto; padding: 0 24px; }
    .services .svc-cell { position: relative; left: auto; margin: 0; width: auto; height: auto !important; min-height: 9rem; transform: none !important; }
    .services .svc-sheet { position: static; height: auto; padding: 1rem; }
    .services .svc-art { display: none; }
    .services .svc-name, .services .svc-copy, .services .svc-cta-link { position: static; opacity: 1 !important; }
}