/*=============================================
    Services — browning
    Widget: classes/widgets/Service/service.php

    Centred header (eyebrow / title / lead) over a grid of cards. Each card is
    a photo whose bottom edge bulges into the body, a gold icon straddling that
    curve, then title, copy and a "Learn more" link.

    Sizing is vw on the same 1440 canvas and the same 1024/480 breakpoints as
    hero.css, so the two sections scale together.

    Palette is declared on .services rather than :root — hero.css owns the
    global tokens and is only loaded on pages that use the hero, so this
    section has to stand on its own.
    Loaded only where the widget is used (get_style_depends).
=============================================*/

.services {
    --svc-navy: #1c3244;
    --svc-card: #223a4e;
    --svc-yellow: #e8b64a;
    --svc-ink: #ffffff;
    --svc-muted: rgba(255, 255, 255, .72);
    --svc-cols: 3;
    /* How far the card body's curve peaks up over the photo. Declared here
       rather than left to a var() fallback so it exists as a real custom
       property: the value is read in three places, and a fallback would mean
       three copies to keep in step. Roughly 4% of a card's width. */
    --svc-curve: 1.05vw;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 7vw 5.56vw;
    background: var(--svc-navy);
    color: var(--svc-ink);
}

.services *,
.services *::before,
.services *::after {
    box-sizing: border-box;
}

.services__inner {
    /* min() so a vw cap can never overflow a narrower Elementor container and
       leave the auto margins with no slack to centre with */
    width: 100%;
    margin-inline: auto;
}

/* ============ Header ============ */
.services__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4.17vw;
}

.services__eyebrow {
    display: flex;
    align-items: center;
    gap: .56vw;
    margin: 0 0 1.11vw;
}

.services__eyebrow i {
    display: block;
    width: 1.67vw;
    height: .14vw;
    min-height: 2px;
    background: currentColor;
}

.services__eyebrow span {
    font-size: .97vw;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.services__title {
    margin: 0 0 1.11vw;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: 3.89vw;
    line-height: 1;
    letter-spacing: -.01em;
}

.services__text {
    margin: 0;
    max-width: 38vw;
    font-size: 1.06vw;
    line-height: 1.6;
    color: var(--svc-muted);
}

.services__text p {
    margin: 0 0 1em;
}

.services__text p:last-child {
    margin-bottom: 0;
}

/* ============ Grid ============ */
.services__grid {
    display: grid;
    grid-template-columns: repeat(var(--svc-cols), minmax(0, 1fr));
    gap: 1.67vw;
}

/* ============ Card ============ */
.svc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: .83vw;
    background: var(--svc-card);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

.svc-card:hover {
    transform: translateY(-.55vw);
    box-shadow: 0 1.4vw 3vw rgba(0, 0, 0, .28);
}

/* Square bottom — the curve lives on the body, which is pulled up over this.
   Curving the photo's bottom corners instead would arc the navy the other way,
   dipping in the centre rather than peaking under the icon. */
.svc-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.svc-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.svc-card:hover .svc-card__media img {
    transform: scale(1.05);
}

/* Card Hover control, off. Doubled class so this beats the two :hover rules
   above on specificity rather than relying on source order. */
.services--no-hover.services--no-hover .svc-card:hover {
    transform: none;
    box-shadow: none;
}

.services--no-hover.services--no-hover .svc-card:hover .svc-card__media img {
    transform: none;
}

/* Sits in normal flow as the body's first child, lifted by a negative top
   margin so it straddles the peak of the body's curve. Absolute positioning
   is not an option: the media box is sized by aspect-ratio, so its height is
   not a value this could be offset against. */
.svc-card__icon {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.17vw;
    height: 4.17vw;
    margin: -2.08vw auto .97vw;
    border-radius: 50%;
    background: var(--svc-yellow);
    color: var(--svc-navy);
}

.svc-card__icon svg {
    width: 2.08vw;
    height: 2.08vw;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svc-card__icon i {
    font-size: 1.94vw;
    line-height: 1;
}

.svc-card__icon img {
    width: 2.08vw;
    height: 2.08vw;
    object-fit: contain;
}

/* The curve lives here. Both TOP corners take a 50% horizontal radius, so
   their arcs meet at the exact centre — the highest point — and fall away to
   --svc-curve at the card's edges. The matching negative margin lifts that
   peak up over the photo, so the navy arcs into it under the icon.

   background-color is inherited rather than set to --svc-card so that the
   card_bg control, and the per-card override in the repeater, both reach it —
   a hardcoded value here would leave the curve a different colour to the card
   the moment either was used. */
.svc-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    margin-top: calc(var(--svc-curve) * -4);
    padding: 0 1.67vw 1.94vw;
    text-align: center;
    border-radius: 50% 50% 0 0 / 80px 80px 0 0;    
    background: #142535;
}

.svc-card__title {
    margin: 0 0 .83vw;
    font-size: 1.53vw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--svc-ink);
}

.svc-card__text {
    margin: 0 0 1.25vw;
    font-size: 1.04vw;
    line-height: 1.55;
    color: var(--svc-muted);
}

/* pushed to the foot so the links line up across cards of unequal copy */
.svc-card__link {
    display: inline-flex;
    align-items: center;
    gap: .42vw;
    margin-top: auto;
    font-size: 1.04vw;
    font-weight: 600;
    color: var(--svc-yellow);
    text-decoration: none;
    transition: color .25s ease;
}

.svc-card__link svg {
    width: 1.04vw;
    height: 1.04vw;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.svc-card__link i {
    font-size: .97vw;
    line-height: 1;
}

.svc-card__link:hover svg {
    transform: translate(.14vw, -.14vw);
}

/* ============ Bottom shape divider ============
   Anchored a pixel below the edge: at fractional viewport widths a shape that
   ends exactly on the boundary can leave a hairline of section colour under it.
   The two scale axes come from the Flip and Invert switchers, each of which
   writes its own custom property, so the pair combine without extra rules. */
.services__divider {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    display: flex;
    /* flex centring, not auto margins: once the width control pushes the svg
       past 100% an auto margin resolves to zero and it would sit left */
    justify-content: center;
    overflow: hidden;
    height: var(--svc-shape-h, 4.5vw);
    line-height: 0;
    transform: scale(var(--svc-shape-sx, 1), var(--svc-shape-sy, 1));
    pointer-events: none;
}

.services__divider svg {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    fill: var(--svc-shape-color, #ffffff);
}

/* ============ Section button ============ */
.services__actions {
    display: flex;
    justify-content: center;
    margin-top: 3.4vw;
}

.services__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.05vw 2.2vw;
    border: 0;
    border-radius: .56vw;
    background: var(--svc-btn-bg, var(--svc-yellow));
    font-size: 1.1vw;
    line-height: 1;
    color: var(--svc-btn-ink, var(--svc-navy));
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.services__btn:hover,
.services__btn:focus {
    transform: translateY(-2px);
}

/* ============ Style 2 — sand field, flat white cards ============
   The photo stops being a full-bleed panel with a curve cut into it: the card
   gains padding, the photo takes its own radius inside that, and the body
   loses the negative margin that used to pull it over the photo. */
.services--style-2 .services {
    --svc-navy: #1c3244;
    --svc-card: #ffffff;
    --svc-ink: #1c3244;
    --svc-muted: #5a6880;
    --svc-stripe: rgba(255, 255, 255, .22);
    --svc-btn-bg: #16283a;
    --svc-btn-ink: #ffffff;
    padding: 6.5vw 6.2vw;
    overflow: hidden;
    background: #e5d9be;
}

/* the faint vertical weave behind the cards */
.services--style-2 .services::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, var(--svc-stripe) 0 1px, transparent 1px 18px);
    pointer-events: none;
}

.services--style-2 .services__inner {
    position: relative;
    z-index: 1;
}

.services--style-2 .services__grid {
    gap: 2.2vw;
}

.services--style-2 .svc-card {
    padding: 1.7vw;
    border-radius: 1.5vw;
    background: var(--svc-card);
    box-shadow: 0 .7vw 2vw rgba(28, 50, 68, .07);
}

.services--style-2 .svc-card:hover {
    box-shadow: 0 1.1vw 2.6vw rgba(28, 50, 68, .12);
}

.services--style-2 .svc-card__media {
    aspect-ratio: 4 / 3;
    border-radius: .75vw;
}

/* no icon and no curve in this style, so the body sits flat under the photo */
.services--style-2 .svc-card__icon {
    display: none;
}

.services--style-2 .svc-card__body {
    align-items: flex-start;
    margin-top: 0;
    padding: 1.5vw 0 .3vw;
    border-radius: 0;
    text-align: left;
    background: transparent;
}

.services--style-2 .svc-card__title {
    margin-bottom: .7vw;
    font-size: 1.6vw;
    font-weight: 700;
}

.services--style-2 .svc-card__text {
    font-size: 1.3vw;
    line-height: 1.5;
}

.services--style-2 .svc-card__link {
    color: var(--svc-ink);
}

/* ============ Style 3 — navy field, flat photo cards ============
   Style 1's field and card fill, but the card is squared off: no icon, no
   curve cut into the photo, and no negative margin pulling the body up over
   it. The photo runs the full width of the card and the copy runs left
   underneath, so the only shaping left is the card's own radius, which
   overflow:hidden on .svc-card already clips the photo to. */
.services--style-3 .services {
    --svc-card: #22384c;
    padding: 6.5vw 5.56vw;
}

.services--style-3 .services__grid {
    gap: 1.8vw;
}

.services--style-3 .svc-card {
    border-radius: .9vw;
}

.services--style-3 .svc-card__media {
    aspect-ratio: 16 / 9;
}

.services--style-3 .svc-card__icon {
    display: none;
}

/* transparent, not --svc-card: the card_bg control and the per-card override
   both write to .svc-card, and a colour here would mask either of them */
.services--style-3 .svc-card__body {
    align-items: flex-start;
    margin-top: 0;
    padding: 1.3vw 1.45vw 1.5vw;
    border-radius: 0;
    text-align: left;
    background: transparent;
}

.services--style-3 .svc-card__title {
    margin-bottom: .5vw;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.6vw;
    font-weight: 700;
    letter-spacing: .01em;
}

.services--style-3 .svc-card__text {
    margin-bottom: 0;
    font-size: 1.02vw;
    line-height: 1.55;
}

/* the copy is the last thing in the card, so the link needs the gap the text
   no longer carries */
.services--style-3 .svc-card__link {
    margin-top: 1.1vw;
}

/* ============ Style 4 — navy field, bordered cards, inset photo ============
   Style 3's card given a hairline border and padding, with the photo pulled
   inside that padding and given its own radius. The gold icon is the one
   thing carried over from Style 1: the body sits flat under the photo here,
   so the icon's own negative top margin is what lifts it over the photo's
   bottom edge, and its auto side margins keep it centred even though the copy
   below runs left. */
.services--style-4 .services {
    --svc-card: rgba(255, 255, 255, .04);
    --svc-card-line: rgba(255, 255, 255, .10);
    padding: 6.5vw 5.56vw;
}

.services--style-4 .services__grid {
    gap: 2vw;
}

.services--style-4 .svc-card {
    padding: 1.6vw;
    border: 1px solid var(--svc-card-line);
    border-radius: 1.1vw;
}

.services--style-4 .svc-card__media {
    aspect-ratio: 4 / 3;
    border-radius: .7vw;
}

/* transparent, not --svc-card: the card_bg control and the per-card override
   both write to .svc-card, and a colour here would mask either of them */
.services--style-4 .svc-card__body {
    align-items: flex-start;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    text-align: left;
    background: transparent;
}

.services--style-4 .svc-card__title {
    margin-bottom: .5vw;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.6vw;
    font-weight: 700;
    letter-spacing: .01em;
}

.services--style-4 .svc-card__text {
    margin-bottom: 1vw;
    font-size: 1.02vw;
    line-height: 1.55;
}

/* ============ Style 5 — white field, arched navy cards, no photo ============
   There is no photo in this one, so the card itself takes the arc: both TOP
   corners get a 50% horizontal radius, which makes their arcs meet at the exact
   centre — the highest point — and fall away to --svc-arch at the card's edges.
   Same trick Style 1 uses on the body, applied a level up.

   The gold icon straddles that peak, so the card has to give up the
   overflow:hidden it needs everywhere a photo is clipped to a radius; nothing
   here overflows but the icon, which is the point. */
.services--style-5 .services {
    --svc-card: #142535;
    /* how far the card's top edge falls away from its centre peak */
    --svc-arch: 2.2vw;
    padding: 6.5vw 5.56vw;
    background: #ffffff;
}

/* The field flips to white while the cards stay navy, so the two text scales
   part company: --svc-ink and --svc-muted stay light for the cards and the
   header takes its own dark pair. The eyebrow's dash is currentColor, so it
   follows the head colour without a rule of its own. */
.services--style-5 .services__head {
    color: #142535;
}

.services--style-5 .services__text {
    color: #4a5a6a;
}

/* the icon overhangs the top of each card and there is no photo for it to sit
   over, so the row needs that overhang as clearance above it */
.services--style-5 .services__grid {
    gap: 1.9vw;
    padding-top: 2.1vw;
}

.services--style-5 .svc-card {
    overflow: visible;
    border-radius: 50% 50% .55vw .55vw / var(--svc-arch) var(--svc-arch) .55vw .55vw;
}

.services--style-5 .svc-card:hover {
    box-shadow: 0 1.2vw 2.6vw rgba(20, 37, 53, .18);
}

.services--style-5 .svc-card__media {
    display: none;
}

/* transparent, not --svc-card: the card_bg control and the per-card override
   both write to .svc-card, and a colour here would mask either of them. The
   arc is the card's own radius now, so the body keeps none of Style 1's. */
.services--style-5 .svc-card__body {
    margin-top: 0;
    padding: 0 3.8vw 2.1vw;
    border-radius: 0;
    background: transparent;
}

/* half the icon's height, so it sits centred on the card's top edge */
.services--style-5 .svc-card__icon {
    margin-top: -2.08vw;
    margin-bottom: 3vw;
}

.services--style-5 .svc-card__title {
    margin-bottom: .8vw;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.6vw;
    font-weight: 700;
    letter-spacing: .01em;
}

.services--style-5 .svc-card__text {
    margin-bottom: 1.1vw;
    font-size: 1.02vw;
    line-height: 1.55;
}

/* ============ Style 6 — white field, white photo cards ============
   Style 3's card on a light field: the photo still runs the full width of the
   card and the copy still runs left underneath, but the fill flips to white,
   so the card needs a hairline and a soft shadow to hold its edge against the
   section behind it.

   Nothing here splits the text scale the way Style 5 has to — field and card
   are both light, so --svc-ink and --svc-muted carry the header and the cards
   at once, and the eyebrow's dash follows as currentColor.

   Four to a row is the drawn design, so --svc-cols is restated. It stays a
   plain declaration rather than anything stronger: the Columns control writes
   the same property from the widget's element id and so still wins. */
.services--style-6 .services {
    --svc-card: #ffffff;
    --svc-card-line: rgba(20, 37, 53, .09);
    --svc-ink: #142535;
    --svc-muted: #5a6880;
    --svc-cols: 4;
    padding: 6vw 5.56vw;
    background: #ffffff;
}

.services--style-6 .services__grid {
    gap: 1.25vw;
}

.services--style-6 .svc-card {
    border: 1px solid var(--svc-card-line);
    border-radius: .7vw;
    box-shadow: 0 .5vw 1.4vw rgba(20, 37, 53, .06);
}

.services--style-6 .svc-card:hover {
    box-shadow: 0 1vw 2.2vw rgba(20, 37, 53, .12);
}

.services--style-6 .svc-card__media {
    aspect-ratio: 16 / 10;
}

.services--style-6 .svc-card__icon {
    display: none;
}

/* transparent, not --svc-card: the card_bg control and the per-card override
   both write to .svc-card, and a colour here would mask either of them */
.services--style-6 .svc-card__body {
    align-items: flex-start;
    margin-top: 0;
    padding: 1.15vw 1.2vw 1.3vw;
    border-radius: 0;
    text-align: left;
    background: transparent;
}

.services--style-6 .svc-card__title {
    margin-bottom: .5vw;
    font-size: 1.45vw;
    font-weight: 700;
    line-height: 1.25;
}

/* the copy is the last thing in the card, so the link carries the gap the
   text no longer does — same reason as Style 3 */
.services--style-6 .svc-card__text {
    margin-bottom: 0;
    font-size: 1.1vw;
    line-height: 1.55;
}

.services--style-6 .svc-card__link {
    margin-top: .9vw;
    font-size: 1vw;
}

/*=============================================
    MOTION
    Gated on .services--animated, which the widget's Animation control adds,
    and held at frame one by assets/css/reveal.css until scrolled into view.

    fill-mode is `backwards` throughout, never `forwards`/`both`: every
    animation ends at the element's natural state, and a forwards fill would
    keep overriding it — which would break the card hover transform above.
    Most keyframes declare `from` alone, so the end state is never hardcoded.
=============================================*/
@media (prefers-reduced-motion: no-preference) {

    .services--animated .services__eyebrow,
    .services--animated .services__title,
    .services--animated .services__text {
        animation: svc-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .services--animated .services__eyebrow i {
        transform-origin: left center;
        animation: svc-rule .7s cubic-bezier(.22, 1, .36, 1) .12s backwards;
    }

    .services--animated .services__eyebrow { animation-delay: .05s; }
    .services--animated .services__title   { animation-delay: .14s; }
    .services--animated .services__text    { animation-delay: .24s; }

    .services--animated .svc-card {
        animation: svc-card-in .9s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .services--animated .svc-card:nth-child(1) { animation-delay: .34s; }
    .services--animated .svc-card:nth-child(2) { animation-delay: .44s; }
    .services--animated .svc-card:nth-child(3) { animation-delay: .54s; }
    .services--animated .svc-card:nth-child(4) { animation-delay: .64s; }
    .services--animated .svc-card:nth-child(5) { animation-delay: .74s; }
    .services--animated .svc-card:nth-child(n+6) { animation-delay: .84s; }

    /* the icon lands after the card it sits on */
    .services--animated .svc-card__icon {
        animation: svc-pop .7s cubic-bezier(.34, 1.4, .64, 1) backwards;
    }

    .services--animated .svc-card:nth-child(1) .svc-card__icon { animation-delay: .6s; }
    .services--animated .svc-card:nth-child(2) .svc-card__icon { animation-delay: .7s; }
    .services--animated .svc-card:nth-child(3) .svc-card__icon { animation-delay: .8s; }
    .services--animated .svc-card:nth-child(n+4) .svc-card__icon { animation-delay: .9s; }
}

@keyframes svc-rise {
    from { opacity: 0; transform: translateY(1.4vw); }
}

@keyframes svc-rule {
    from { opacity: 0; transform: scaleX(0); }
}

@keyframes svc-card-in {
    from { opacity: 0; transform: translateY(2.2vw); }
}

/* the icon's resting state carries `margin:-2.08vw auto`, not a transform, so
   an implicit to-keyframe returns it cleanly */
@keyframes svc-pop {
    from { opacity: 0; transform: scale(.4); }
}

/*=============================================
    Breakpoints — matching hero.css
=============================================*/
@media (max-width: 1024px) {

    .services {
        --svc-cols: 2;
        /* cards are ~2 across here, so the arc is measured against a narrower
           card than on desktop and stays around 4% of its width */
        --svc-curve: 14px;
        padding: 72px 24px;
    }

    .services__inner { max-width: 100%; }

    .services__head { margin-bottom: 40px; }

    .services__eyebrow { gap: 8px; margin-bottom: 14px; }
    .services__eyebrow i { width: 24px; height: 2px; }
    .services__eyebrow span { font-size: 13px; }

    .services__title { font-size: clamp(32px, 6vw, 52px); margin-bottom: 14px; }
    .services__text { font-size: clamp(15px, 2.2vw, 17px); max-width: 60ch; }

    .services__grid { gap: 20px; }

    .svc-card { border-radius: 12px; }
    .svc-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0, 0, 0, .28); }

    .svc-card__icon {
        width: 56px;
        height: 56px;
        margin: -28px auto 14px;
    }

    .svc-card__icon svg,
    .svc-card__icon img { width: 26px; height: 26px; }
    .svc-card__icon i { font-size: 24px; }

    .svc-card__body { padding: 0 20px 24px;     margin-top: calc(var(--svc-curve) * -6); }
    .svc-card__title { font-size: 20px; margin-bottom: 10px; }
    .svc-card__text { font-size: 15px; margin-bottom: 16px; }
    .svc-card__link { font-size: 15px; gap: 6px; }
    .svc-card__link svg { width: 15px; height: 15px; }
    .svc-card__link:hover svg { transform: translate(2px, -2px); }

    .services__actions { margin-top: 36px; }

    .services__btn {
        padding: 15px 26px;
        border-radius: 8px;
        font-size: 16px;
    }

    .services--style-2 .services { padding: 64px 24px; }
    .services--style-2 .services__grid { gap: 20px; }

    .services--style-2 .svc-card {
        padding: 16px;
        border-radius: 16px;
    }

    .services--style-2 .svc-card__media { border-radius: 10px; }

    .services--style-2 .svc-card__body { padding: 16px 0 4px; }
    .services--style-2 .svc-card__title { font-size: 20px; margin-bottom: 8px; }
    .services--style-2 .svc-card__text { font-size: 15px; }

    .services--style-3 .services { padding: 64px 24px; }
    .services--style-3 .services__grid { gap: 20px; }
    .services--style-3 .svc-card { border-radius: 12px; }
    .services--style-3 .svc-card__body { padding: 18px 20px 20px; }
    .services--style-3 .svc-card__title { font-size: 21px; margin-bottom: 8px; }
    .services--style-3 .svc-card__text { font-size: 15px; }
    .services--style-3 .svc-card__link { margin-top: 14px; }

    .services--style-4 .services { padding: 64px 24px; }
    .services--style-4 .services__grid { gap: 20px; }
    .services--style-4 .svc-card { padding: 16px; border-radius: 16px; }
    .services--style-4 .svc-card__media { border-radius: 10px; }
    .services--style-4 .svc-card__body { padding: 0; }
    .services--style-4 .svc-card__title { font-size: 21px; margin-bottom: 8px; }
    .services--style-4 .svc-card__text { font-size: 15px; margin-bottom: 14px; }

    .services--style-5 .services { --svc-arch: 26px; padding: 64px 24px; }
    .services--style-5 .services__grid { gap: 20px; padding-top: 28px; row-gap:50px }

    /* the bottom pair are literals, so the whole shorthand is restated rather
       than just the --svc-arch the top pair reads */
    .services--style-5 .svc-card {
        border-radius: 50% 50% 8px 8px / var(--svc-arch) var(--svc-arch) 8px 8px;
    }

    .services--style-5 .svc-card__body { padding: 0 22px 24px; }
    .services--style-5 .svc-card__icon { margin-top: -28px; margin-bottom: 14px; }
    .services--style-5 .svc-card__title { font-size: 21px; margin-bottom: 8px; }
    .services--style-5 .svc-card__text { font-size: 15px; margin-bottom: 14px; }

    /* four across is a desktop arrangement; the shared --svc-cols: 2 above
       takes over here, and the skin only restates what it sizes in vw */
    .services--style-6 .services { padding: 64px 24px; }
    .services--style-6 .services__grid { gap: 18px; }
    .services--style-6 .svc-card { border-radius: 12px; box-shadow: 0 8px 20px rgba(20, 37, 53, .07); }
    .services--style-6 .svc-card__body { padding: 16px 18px 18px; }
    .services--style-6 .svc-card__title { font-size: 20px; margin-bottom: 8px; }
    .services--style-6 .svc-card__text { font-size: 15px; }
    .services--style-6 .svc-card__link { margin-top: 12px; font-size: 15px; }

    .about--style-9 .about__note{
        padding: 40px !important;
    }
}

@media (max-width: 767px) {

    .services {
        --svc-cols: 1;
        padding: 56px 18px;
    }

    .services__grid { gap: 18px; }

    .services--style-2 .services { padding: 48px 18px; }
    .services--style-2 .services__grid { gap: 18px; }

    .services--style-3 .services { padding: 48px 18px; }
    .services--style-3 .services__grid { gap: 18px; }

    .services--style-4 .services { padding: 48px 18px; }
    .services--style-4 .services__grid { gap: 18px; }

    .services--style-5 .services { padding: 48px 18px; }
    .services--style-5 .services__grid { gap: 50px; }

    .services--style-6 .services { padding: 48px 18px; }
    .services--style-6 .services__grid { gap: 18px; }

    .services__actions { display: block; }

    .services__btn {
        width: 100%;
        padding: 15px 22px;
        font-size: 16px;
    }
}