/* ============================================================================
   GSC-TEMPC — HOMEPAGE SERVICES (.home-services / #section-services)
   LEAF CATALOGUE REDESIGN  ·  v2: "picture on top, caption underneath" tiles
   ----------------------------------------------------------------------------
   File:   assets/css/home-services.css
   Scope:  every selector starts with .home-services. The header, sidebar,
           hero, other sections and the footer are not affected.
   Markup: unchanged. No HTML, PHP or JS edits, no invented classes.

   What changed in v2 (the shelf tiles only)
   -----------------------------------------
   Your service pictures already carry their own title ("Health Care",
   "Instant Loan"...). The old tile put a dark gradient, a number tag and the
   name again on top of that artwork. The new tile is a small card:

     - the picture sits on top, completely clean (no overlay, no tag on it)
     - a caption area sits under it: number chip, the FULL service name
       (up to two lines, never cut off with "..."), the category, and the arrow
     - the chosen tile gets the gold ring and a warm caption plate
     - a service with no picture keeps a green icon plate in the picture slot
     - every tile has the same height, because the name always reserves two
       lines

   It is done without touching the markup: the picture wrapper uses
   display: contents, so the image, the number chip, the caption and the arrow
   all become cells of one small grid on the tile button.

   Concept
   -------
   Services are a catalogue the member browses: one service is shown large, and
   a shelf of tiles below it is used to choose the next one.

   One shape language is used throughout, the LEAF: a rectangle with two
   opposite corners rounded generously (top-right and bottom-left) and the
   other two nearly square.

   Layout
   ------
   The section is a size container (container-name: services), so every
   breakpoint follows the SECTION's width, not the screen's.
   Tiers:  < 600  one column, phone
           600+   one column, roomier
           900+   photograph left, details right
           1100+  wider photograph, larger type
   Browsers without container queries use the viewport-based fallback near the
   end of this file.

   Palette
   -------
     --hs-brand   #30AA28  logo green (decoration only)
     --hs-leaf    #B9DDB5  light green
     --hs-action  #27883A  buttons (white text = 4.5:1)
     --hs-forest  #1F5A2D  headings, shelf
     --hs-ink     #173E29  deepest green
     --hs-gold    #D6B56D  champagne accent
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. SECTION TOKENS AND BASE
   ---------------------------------------------------------------------------- */

.home-services {
    --hs-brand: #30AA28;
    --hs-leaf: #B9DDB5;
    --hs-leaf-soft: #E5F1E3;
    --hs-sage: #F3F8F2;
    --hs-action: #27883A;
    --hs-action-deep: #1B6A2E;
    --hs-forest: #1F5A2D;
    --hs-ink: #173E29;
    --hs-gold: #D6B56D;
    --hs-gold-light: #F6E3AE;
    --hs-gold-pale: #FFF5D6;
    --hs-white: #FFFFFF;
    --hs-text: #3E4C42;
    --hs-muted: #53625A;
    --hs-line: rgba(31, 90, 45, .16);
    --hs-line-strong: rgba(31, 90, 45, .34);
    --hs-ease: cubic-bezier(.16, 1, .3, 1);
    --hs-display: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);

    container: services / inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: var(--hs-forest);
    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F3F8F2 30%,
        #E9F4E6 64%,
        #FFFFFF 100%
    );
}

/* Padding must never add to widths inside this section. */
.home-services *,
.home-services *::before,
.home-services *::after {
    box-sizing: border-box;
}

.home-services h2,
.home-services h3,
.home-services p,
.home-services figure {
    margin: 0;
}

/* The scroll-reveal hook added by the homepage script: the final state must
   never leave the section invisible or offset. */
.home-services.reveal.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Native button reset: the shelf tiles and the round controls are buttons. */
.home-services button {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}


/* ----------------------------------------------------------------------------
   2. LAYOUT TOKENS (on the container; tiers below override them)
   Base values are the phone layout.
   ---------------------------------------------------------------------------- */

.home-services__container {
    --hs-gutter: 18px;
    --hs-pad-top: 64px;
    --hs-pad-bottom: 72px;

    --hs-intro-gap: 24px;
    --hs-intro-mb: 36px;
    --hs-show-gap: 40px;
    --hs-cols: minmax(0, 1fr);
    --hs-col-gap: 0px;

    --hs-plate: 12px;
    --hs-frame-pad: 7px;
    --hs-r-big: 52px;
    --hs-r-inner: calc(var(--hs-r-big) - var(--hs-frame-pad));
    --hs-r-small: 5px;
    --hs-r-tile: 26px;
    --hs-r-btn: 20px;
    --hs-r-band: 36px;

    --hs-fs-title: 2.3rem;
    --hs-fs-service: 2.05rem;
    --hs-fs-body: 1rem;
    --hs-fs-note: 1rem;

    --hs-photo-ratio: 1 / .92;
    --hs-band-mt: 52px;
    --hs-band-pad-x: 14px;
    --hs-band-pad-y: 22px;
    --hs-rail-inset: 18px;
    --hs-tile-w: min(210px, 68%);
    --hs-tile-img-ratio: 4 / 3.15;
    --hs-desc-lines: 10;

    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: var(--hs-pad-top) var(--hs-gutter) var(--hs-pad-bottom);
}


/* ----------------------------------------------------------------------------
   3. BACKDROP — soft green light, subtle botanicals, no ornaments
   ---------------------------------------------------------------------------- */

.home-services__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 52% 40% at 20% 34%, rgba(185, 221, 181, .5), transparent 72%),
        radial-gradient(ellipse 44% 36% at 94% 12%, rgba(185, 221, 181, .3), transparent 70%);
}

.home-services__botanical {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: clamp(110px, 16vw, 260px);
    height: 78%;
    pointer-events: none;
    opacity: .13;
    background-repeat: no-repeat;
    background-size: contain;
    filter: grayscale(1) sepia(.55) saturate(3) hue-rotate(85deg) brightness(.7);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 92%);
    mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 92%);
}

.home-services__botanical--left {
    left: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom left;
    transform: scaleX(-1);
}

.home-services__botanical--right {
    right: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom right;
}

/* The heritage marks were decorative filler in the old design: retired. */
.home-services__heritage-mark {
    display: none;
}


/* ----------------------------------------------------------------------------
   4. INTRO — eyebrow, title, short note and the "view all" link
   ---------------------------------------------------------------------------- */

.home-services__intro {
    display: grid;
    grid-template-columns: var(--hs-cols);
    column-gap: var(--hs-col-gap);
    row-gap: var(--hs-intro-gap);
    align-items: end;
    margin-bottom: var(--hs-intro-mb);
}

.home-services__intro-copy {
    min-width: 0;
}

.home-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    color: var(--hs-action-deep);
    font-size: .78rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Gold rule belonging to the eyebrow: starts on the shared left guide. */
.home-services__eyebrow-line {
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--hs-gold) 0 62%, var(--hs-leaf) 62% 100%);
}

.home-services__title {
    max-width: 11em;
    margin: 0;
    color: var(--hs-forest);
    font-family: var(--hs-display);
    font-size: var(--hs-fs-title);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* The title's second line is the same colour and weight: one voice. */
.home-services__title em {
    color: inherit;
    font-style: normal;
    font-weight: inherit;
}

.home-services__intro-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-width: 0;
}

.home-services__intro-note {
    max-width: 30em;
    margin: 0;
    color: var(--hs-muted);
    font-size: var(--hs-fs-note);
    line-height: 1.7;
    text-align: left;
}

/* Ghost button, leaf-shaped like every other button on the section. */
.home-services__all-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    margin: 0;
    padding: 0 8px 0 22px;
    color: var(--hs-forest);
    background: var(--hs-white);
    border: 1.5px solid var(--hs-line-strong);
    border-radius: var(--hs-r-small) var(--hs-r-btn) var(--hs-r-small) var(--hs-r-btn);
    box-shadow: 0 8px 20px rgba(23, 62, 41, .08);
    text-decoration: none;
    font-size: .92rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: .01em;
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        gap .4s var(--hs-ease),
        box-shadow .3s ease;
}

.home-services__all-link-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--hs-forest);
    background: var(--hs-leaf-soft);
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1;
    transition: color .3s ease, background-color .3s ease, transform .4s var(--hs-ease);
}

.home-services__all-link:hover,
.home-services__all-link:focus-visible {
    color: var(--hs-ink);
    gap: 18px;
    background: var(--hs-sage);
    border-color: var(--hs-action);
    box-shadow: 0 12px 26px rgba(23, 62, 41, .14);
}

.home-services__all-link:hover .home-services__all-link-arrow,
.home-services__all-link:focus-visible .home-services__all-link-arrow {
    color: #FFFFFF;
    background: var(--hs-action);
    transform: translateX(2px);
}

.home-services__all-link:active {
    box-shadow: 0 4px 10px rgba(23, 62, 41, .12);
}


/* ----------------------------------------------------------------------------
   5. SHOWCASE — photograph column
   ---------------------------------------------------------------------------- */

.home-services__showcase {
    position: relative;
    display: grid;
    grid-template-columns: var(--hs-cols);
    column-gap: var(--hs-col-gap);
    row-gap: var(--hs-show-gap);
    align-items: center;
}

.home-services__media-column {
    min-width: 0;
}

/* The wrap reserves the strip where the pale plate shows: left and bottom. */
.home-services__media-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 0 var(--hs-plate) var(--hs-plate);
}

/* Pale plate: the photograph's frame shifted down and to the left. It shares
   the photograph's leaf corners, so the two read as one object. */
.home-services__media-frame--back {
    position: absolute;
    z-index: 0;
    top: var(--hs-plate);
    right: var(--hs-plate);
    bottom: 0;
    left: 0;
    border: 1px solid rgba(214, 181, 109, .75);
    border-radius: var(--hs-r-small) var(--hs-r-big) var(--hs-r-small) var(--hs-r-big);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .36) 0 2px, transparent 2px 10px),
        linear-gradient(170deg, rgba(185, 221, 181, .95), rgba(185, 221, 181, .5));
    pointer-events: none;
}

.home-services__media-frame--main {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: var(--hs-frame-pad);
    background: var(--hs-white);
    border: 1px solid rgba(48, 170, 40, .2);
    border-radius: var(--hs-r-small) var(--hs-r-big) var(--hs-r-small) var(--hs-r-big);
    box-shadow:
        0 28px 56px rgba(23, 62, 41, .18),
        0 6px 16px rgba(48, 170, 40, .1);
}

.home-services__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--hs-photo-ratio);
    background: linear-gradient(145deg, #EEF8ED, #DDEFDA);
    border-radius: 2px var(--hs-r-inner) 2px var(--hs-r-inner);
}

/* Soft finish over the picture; it never changes the colours noticeably. */
.home-services__media-wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 26%, rgba(7, 34, 23, .12) 100%);
}

/* The photograph is selected by element: the data-service-image attribute
   also appears on the shelf buttons, so it must not be used as a selector. */
.home-services__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    transition: opacity .35s ease, transform .9s var(--hs-ease), filter .6s ease;
}

.home-services__media.is-changing img {
    opacity: .25;
}

/* Shown when a service has no picture on file. */
.home-services__media-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(39, 136, 58, .6);
    font-size: 4rem;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 12px),
        linear-gradient(160deg, #EAF6E8, #D3EBCF);
}

/* Old caption and corner details: retired, the label and plate replace them. */
.home-services__media-caption,
.home-services__media-detail {
    display: none;
}

/* Featured label: top-left, where the corner is nearly square, so it never
   sits in a rounded cut-out. Hidden unless the shown service is featured. */
.home-services__featured-label {
    position: absolute;
    z-index: 5;
    top: calc(var(--hs-frame-pad) + 14px);
    left: calc(var(--hs-plate) + var(--hs-frame-pad) + 14px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 16px 0 12px;
    color: var(--hs-ink);
    background: var(--hs-gold-light);
    border: 1px solid rgba(214, 181, 109, .9);
    border-radius: 3px 14px 3px 14px;
    box-shadow: 0 8px 18px rgba(23, 62, 41, .22);
    font-size: .7rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .35s ease, transform .45s var(--hs-ease);
}

.home-services__featured-label > span {
    color: var(--hs-forest);
    font-size: .85rem;
}

.home-services__featured-label.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ----------------------------------------------------------------------------
   6. SHOWCASE — service details column
   ---------------------------------------------------------------------------- */

.home-services__content {
    min-width: 0;
    padding: 0;
}

/* Header row: category on the left, position in the catalogue on the right.
   The numbers are real: the position of the shown service in the list. */
.home-services__content-topline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--hs-line);
}

.home-services__content-category {
    display: inline-flex;
    align-items: center;
    max-width: 68%;
    min-height: 34px;
    padding: 7px 16px;
    color: var(--hs-forest);
    background: var(--hs-leaf-soft);
    border-radius: 3px 16px 3px 16px;
    font-size: .72rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* The old circle placeholder before the category is retired. */
.home-services__content-category::before {
    content: none;
    display: none;
}

.home-services__counter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 6px;
    color: var(--hs-muted);
    font-size: .95rem;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.home-services__counter [data-service-current] {
    color: var(--hs-forest);
    font-family: var(--hs-display);
    font-size: 2.1rem;
    line-height: .9;
    font-weight: 600;
    letter-spacing: -.02em;
}

.home-services__counter-slash {
    color: var(--hs-line-strong);
    font-weight: 400;
}

.home-services__service-copy {
    min-height: 0;
    padding: 26px 0 28px;
}

.home-services__service-title {
    max-width: 15em;
    margin: 0;
    color: var(--hs-forest);
    font-family: var(--hs-display);
    font-size: var(--hs-fs-service);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -.028em;
    text-wrap: balance;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Gold rule belonging to the title; starts on the left guide. */
.home-services__service-rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 22px 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hs-gold) 0 62%, var(--hs-leaf) 62% 100%);
}

/* The description is clamped so the shelf below does not jump when the
   reader moves between services; the full text is on the details page. */
.home-services__service-description {
    max-width: 34em;
    margin: 0;
    color: var(--hs-text);
    font-size: var(--hs-fs-body);
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: var(--hs-desc-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-services__service-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 4px 0 0;
    border: 0;
}

/* Primary button: solid action green, white text, leaf corners. */
.home-services__details-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 9px 0 26px;
    color: #FFFFFF;
    background: var(--hs-action);
    border: 1px solid rgba(214, 181, 109, .7);
    border-radius: var(--hs-r-small) var(--hs-r-btn) var(--hs-r-small) var(--hs-r-btn);
    box-shadow: 0 14px 26px rgba(31, 90, 45, .26), inset 0 1px 0 rgba(255, 255, 255, .16);
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: .02em;
    transition:
        background-color .3s ease,
        gap .4s var(--hs-ease),
        box-shadow .3s ease,
        transform .4s var(--hs-ease);
}

.home-services__details-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--hs-forest);
    background: var(--hs-gold-light);
    border-radius: 50%;
    font-size: .85rem;
    line-height: 1;
    transition: transform .4s var(--hs-ease);
}

.home-services__details-link:hover,
.home-services__details-link:focus-visible {
    color: #FFFFFF;
    gap: 18px;
    background: var(--hs-action-deep);
    box-shadow: 0 18px 32px rgba(31, 90, 45, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.home-services__details-link:hover .home-services__details-arrow,
.home-services__details-link:focus-visible .home-services__details-arrow {
    transform: translateX(2px);
}

.home-services__details-link:active {
    transform: translateY(1px);
    box-shadow: 0 6px 14px rgba(31, 90, 45, .26);
}

/* Previous / next: always circles, as round controls are expected to be. */
.home-services__content-controls {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.home-services__round-control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--hs-forest);
    background: var(--hs-white);
    border: 1.5px solid var(--hs-line-strong);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(23, 62, 41, .1);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .4s var(--hs-ease);
}

.home-services__round-control:hover,
.home-services__round-control:focus-visible {
    color: var(--hs-ink);
    background: var(--hs-leaf-soft);
    border-color: var(--hs-action);
    box-shadow: 0 12px 22px rgba(23, 62, 41, .16);
}

.home-services__round-control--next {
    color: #FFFFFF;
    background: var(--hs-forest);
    border-color: var(--hs-forest);
}

.home-services__round-control--next:hover,
.home-services__round-control--next:focus-visible {
    color: #FFFFFF;
    background: var(--hs-ink);
    border-color: var(--hs-ink);
}

.home-services__round-control:active {
    box-shadow: 0 3px 8px rgba(23, 62, 41, .14);
}


/* ----------------------------------------------------------------------------
   7. SHELF — the deep-forest band that holds the service tiles.
   This is the section's single dark anchor.
   ---------------------------------------------------------------------------- */

.home-services__rail-region {
    position: relative;
    margin-top: var(--hs-band-mt);
    padding: var(--hs-band-pad-y) var(--hs-band-pad-x);
    color: #FFFFFF;
    background: linear-gradient(180deg, var(--hs-forest) 0%, var(--hs-ink) 100%);
    border-radius: var(--hs-r-small) var(--hs-r-band) var(--hs-r-small) var(--hs-r-band);
    box-shadow: 0 26px 52px rgba(23, 62, 41, .24);
}

/* Heading row: label, a quiet gold hairline, and the count. */
.home-services__rail-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 12px;
    padding: 0 var(--hs-rail-inset);
}

.home-services__rail-label {
    flex: 0 0 auto;
    color: #FFFFFF;
    font-family: var(--hs-display);
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.01em;
}

.home-services__rail-line {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    min-width: 16px;
    background: rgba(214, 181, 109, .55);
}

.home-services__rail-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .86);
    font-size: .88rem;
    line-height: 1.2;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

/* Rail shell: previous arrow, scrolling tiles, next arrow. */
.home-services__rail-shell {
    position: relative;
    display: block;
}

.home-services__rail {
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
    padding: 10px var(--hs-rail-inset) 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--hs-rail-inset);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.home-services__rail::-webkit-scrollbar {
    display: none;
}

/* Arrows beside the tiles are only drawn when there is room (900+). */
.home-services__rail-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--hs-gold-light);
    background: transparent;
    border: 1.5px solid rgba(246, 227, 174, .6);
    border-radius: 50%;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        transform .4s var(--hs-ease);
}

.home-services__rail-arrow:hover,
.home-services__rail-arrow:focus-visible {
    color: var(--hs-ink);
    background: var(--hs-gold-light);
    border-color: var(--hs-gold-light);
}

.home-services__rail-arrow--next {
    color: var(--hs-ink);
    background: var(--hs-gold-light);
    border-color: var(--hs-gold-light);
}

.home-services__rail-arrow--next:hover,
.home-services__rail-arrow--next:focus-visible {
    color: var(--hs-ink);
    background: #FFFFFF;
    border-color: #FFFFFF;
}


/* ----------------------------------------------------------------------------
   8. TILES — picture on top, caption underneath
   The tile button is a small grid:

        row 1 :  [ picture, full width, completely clean ]
        row 2 :  [ number chip ] [ name + category ] [ arrow ]

   The picture wrapper is display: contents, so the image, the number chip, the
   caption block and the arrow are all direct grid cells of the button without
   any change to the markup.
   ---------------------------------------------------------------------------- */

.home-services__rail-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    align-content: start;
    flex: 0 0 var(--hs-tile-w);
    padding: 0;
    overflow: hidden;
    color: var(--hs-ink);
    text-align: left;
    background: #F6FAF5;
    border: 0;
    border-radius: var(--hs-r-small) var(--hs-r-tile) var(--hs-r-small) var(--hs-r-tile);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .26);
    cursor: pointer;
    scroll-snap-align: start;
    transition: background-color .35s ease, box-shadow .4s ease, transform .45s var(--hs-ease);
}

/* The chosen tile is ringed in light gold, separated from the tile by a
   band of the shelf colour so the ring reads cleanly on any picture. The
   caption plate also warms up so the choice is clear at a glance. */
.home-services__rail-item.is-active {
    background: var(--hs-gold-pale);
    box-shadow:
        0 0 0 3px var(--hs-ink),
        0 0 0 5px var(--hs-gold-light),
        0 14px 26px rgba(0, 0, 0, .3);
}

/* The wrapper dissolves: its children join the tile's grid. */
.home-services__rail-photo {
    display: contents;
}

/* Row 1: the picture. Clean, with no gradient or tag on top of it. */
.home-services__rail-photo img {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: var(--hs-tile-img-ratio);
    object-fit: cover;
    object-position: center;
    background: var(--hs-leaf-soft);
    filter: saturate(.92) brightness(.97);
    transition: filter .5s ease;
}

.home-services__rail-item.is-active .home-services__rail-photo img {
    filter: none;
}

/* Gradient over the picture is retired: it covered the artwork. */
.home-services__rail-photo-shade {
    display: none;
}

/* A service with no picture: a green plate with its icon in the same slot. */
.home-services__rail-fallback {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: var(--hs-tile-img-ratio);
    color: rgba(255, 255, 255, .85);
    font-size: 2.1rem;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 12px),
        linear-gradient(160deg, var(--hs-action), var(--hs-forest));
}

/* Row 2, column 1: the number chip now lives in the caption, not on the
   picture, so it can never cover the artwork's own title. */
.home-services__rail-number {
    position: static;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    margin: 14px 0 0 14px;
    padding: 0 8px;
    color: #FFFFFF;
    background: var(--hs-forest);
    border: 0;
    border-radius: 2px 10px 2px 10px;
    font-size: .74rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: lining-nums tabular-nums;
    text-shadow: none;
    transition: background-color .35s ease, color .35s ease;
}

.home-services__rail-item.is-active .home-services__rail-number {
    color: var(--hs-ink);
    background: var(--hs-gold-light);
}

/* Row 2, column 2: the full name (two lines allowed) over the category.
   The name always reserves two lines so every tile has the same height. */
.home-services__rail-copy {
    position: static;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
    align-content: start;
    align-self: start;
    min-width: 0;
    padding: 12px 0 14px;
}

.home-services__rail-name {
    display: -webkit-box;
    min-width: 0;
    min-height: 2.5em;
    overflow: hidden;
    color: var(--hs-ink);
    font-size: .94rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-services__rail-category {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--hs-muted);
    font-size: .76rem;
    line-height: 1.3;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row 2, column 3: the arrow disc, centred on the caption. */
.home-services__rail-item-arrow {
    position: static;
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 14px 0 0;
    flex: 0 0 auto;
    color: #FFFFFF;
    background: var(--hs-action);
    border-radius: 50%;
    font-size: .68rem;
    line-height: 1;
    opacity: 1;
    transition: background-color .35s ease, color .35s ease, transform .4s var(--hs-ease);
}

.home-services__rail-item.is-active .home-services__rail-item-arrow {
    color: var(--hs-ink);
    background: var(--hs-gold);
    transform: translateX(2px);
}


/* ----------------------------------------------------------------------------
   9. CLOSING NOTE
   The sentence repeated the intro note; the section ends on the shelf.
   ---------------------------------------------------------------------------- */

.home-services__bottom-note {
    display: none;
}

.home-services__bottom-note-mark {
    display: none;
}


/* ----------------------------------------------------------------------------
   10. KEYBOARD FOCUS
   The page-level gold outline is replaced by a forest outline on light
   surfaces and a white outline on the dark shelf.
   ---------------------------------------------------------------------------- */

.home-services a:focus-visible,
.home-services button:focus-visible {
    outline: 3px solid var(--hs-forest);
    outline-offset: 3px;
}

.home-services__rail-region a:focus-visible,
.home-services__rail-region button:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

.home-services__rail-item:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 6px;
}

.home-services__rail:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: -3px;
}

.home-services__details-link:focus-visible {
    outline-color: var(--hs-ink);
}


/* ----------------------------------------------------------------------------
   11. HOVER — only where a pointer exists, and nothing moves by much
   The tile picture is not zoomed: scaling it would spill over the caption.
   ---------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .home-services__media-frame--main:hover .home-services__media img {
        transform: scale(1.025);
        filter: saturate(1.04) contrast(1.01);
    }

    .home-services__round-control:hover {
        transform: translateY(-2px);
    }

    .home-services__details-link:hover {
        transform: translateY(-2px);
    }

    .home-services__rail-arrow:hover {
        transform: translateY(-2px);
    }

    .home-services__rail-item:hover {
        transform: translateY(-3px);
    }

    .home-services__rail-item:hover .home-services__rail-photo img {
        filter: none;
    }

    .home-services__rail-item:hover .home-services__rail-item-arrow {
        transform: translateX(2px);
    }
}


/* ----------------------------------------------------------------------------
   12. RESPONSIVE TIERS — driven by the SECTION's own width
   Each tier is written once and emitted twice: first as a container query
   (the real thing), then again further down as a viewport-based fallback for
   browsers that do not support container queries.
   ---------------------------------------------------------------------------- */

/* Tablet-width section (600px and up): still one column, roomier */
@container services (min-width: 600px) {
    .home-services__container {
        --hs-gutter: 28px;
        --hs-pad-top: 88px;
        --hs-pad-bottom: 96px;
        --hs-intro-gap: 26px;
        --hs-intro-mb: 44px;
        --hs-show-gap: 52px;
        --hs-plate: 18px;
        --hs-frame-pad: 8px;
        --hs-r-big: 72px;
        --hs-r-tile: 28px;
        --hs-r-band: 44px;
        --hs-fs-title: 2.9rem;
        --hs-fs-service: 2.5rem;
        --hs-fs-note: 1.05rem;
        --hs-photo-ratio: 16 / 11;
        --hs-band-mt: 64px;
        --hs-band-pad-x: 22px;
        --hs-band-pad-y: 28px;
        --hs-rail-inset: 22px;
        --hs-tile-w: min(224px, 46%);
        --hs-desc-lines: 9;
    }

    .home-services__botanical {
        width: clamp(140px, 17vw, 240px);
        opacity: .14;
    }

    .home-services__eyebrow {
        gap: 16px;
        margin-bottom: 20px;
        font-size: .8rem;
    }

    .home-services__eyebrow-line {
        width: 52px;
    }

    .home-services__all-link {
        min-height: 50px;
        padding-left: 24px;
    }

    .home-services__featured-label {
        top: calc(var(--hs-frame-pad) + 18px);
        left: calc(var(--hs-plate) + var(--hs-frame-pad) + 18px);
        min-height: 36px;
        font-size: .72rem;
    }

    .home-services__content-topline {
        padding-bottom: 18px;
    }

    .home-services__content-category {
        padding: 8px 18px;
        font-size: .74rem;
    }

    .home-services__counter {
        font-size: 1rem;
    }

    .home-services__counter [data-service-current] {
        font-size: 2.5rem;
    }

    .home-services__service-copy {
        padding: 30px 0 32px;
    }

    .home-services__service-rule {
        width: 64px;
        margin: 24px 0;
    }

    .home-services__details-link {
        min-height: 56px;
        padding: 0 10px 0 28px;
        font-size: 1rem;
    }

    .home-services__details-arrow {
        width: 38px;
        height: 38px;
    }

    .home-services__round-control {
        width: 50px;
        height: 50px;
    }

    .home-services__rail-heading {
        margin-bottom: 16px;
    }

    .home-services__rail-label {
        font-size: 1.3rem;
    }

    .home-services__rail-count {
        font-size: .92rem;
    }

    .home-services__rail {
        gap: 16px;
        padding-top: 12px;
        padding-bottom: 18px;
    }

    .home-services__rail-number {
        margin: 15px 0 0 16px;
    }

    .home-services__rail-copy {
        padding: 13px 0 16px;
    }

    .home-services__rail-name {
        font-size: .98rem;
    }

    .home-services__rail-category {
        font-size: .78rem;
    }

    .home-services__rail-item-arrow {
        margin-right: 16px;
    }
}

/* Desktop-width section (900px and up): photograph left, details right */
@container services (min-width: 900px) {
    .home-services__container {
        --hs-gutter: 32px;
        --hs-pad-top: 104px;
        --hs-pad-bottom: 112px;
        --hs-intro-gap: 0px;
        --hs-intro-mb: 56px;
        --hs-cols: minmax(0, 1.32fr) minmax(0, 1fr);
        --hs-col-gap: 56px;
        --hs-plate: 22px;
        --hs-r-big: 88px;
        --hs-r-tile: 30px;
        --hs-r-band: 52px;
        --hs-fs-title: 3.3rem;
        --hs-fs-service: 2.7rem;
        --hs-photo-ratio: 5 / 4;
        --hs-band-mt: 76px;
        --hs-band-pad-x: 26px;
        --hs-band-pad-y: 30px;
        --hs-tile-w: 212px;
        --hs-desc-lines: 8;
    }

    .home-services__botanical {
        width: clamp(170px, 17vw, 260px);
    }

    .home-services__intro {
        align-items: end;
    }

    .home-services__intro-side {
        gap: 22px;
        padding-bottom: 8px;
    }

    .home-services__showcase {
        align-items: center;
    }

    .home-services__service-copy {
        padding: 28px 0 30px;
    }

    .home-services__service-footer {
        flex-wrap: nowrap;
    }

    /* At this width the arrows sit beside the tiles, so the heading is inset by
       the arrow column plus the gap: its label starts on the first tile's edge. */
    .home-services__rail-heading {
        margin-bottom: 14px;
        padding-inline: calc(46px + 12px + var(--hs-rail-inset));
    }

    .home-services__rail-shell {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        column-gap: 12px;
        align-items: center;
    }

    .home-services__rail-arrow {
        display: inline-flex;
    }
}

/* Wide section (1100px and up): wider photograph, larger type */
@container services (min-width: 1100px) {
    .home-services__container {
        --hs-gutter: 44px;
        --hs-pad-top: 120px;
        --hs-pad-bottom: 128px;
        --hs-intro-mb: 64px;
        --hs-cols: minmax(0, 1.5fr) minmax(0, 1fr);
        --hs-col-gap: 72px;
        --hs-plate: 26px;
        --hs-frame-pad: 9px;
        --hs-r-big: 108px;
        --hs-r-tile: 34px;
        --hs-r-band: 60px;
        --hs-fs-title: 3.9rem;
        --hs-fs-service: 3.1rem;
        --hs-fs-body: 1.04rem;
        --hs-band-mt: 88px;
        --hs-band-pad-x: 34px;
        --hs-band-pad-y: 34px;
        --hs-tile-w: 224px;
        --hs-desc-lines: 8;
    }

    .home-services__eyebrow {
        margin-bottom: 22px;
        font-size: .82rem;
    }

    .home-services__eyebrow-line {
        width: 60px;
    }

    .home-services__content-category {
        font-size: .76rem;
    }

    .home-services__counter [data-service-current] {
        font-size: 2.8rem;
    }

    .home-services__service-copy {
        padding: 32px 0 34px;
    }

    .home-services__service-rule {
        width: 72px;
        margin: 26px 0;
    }

    .home-services__rail {
        gap: 18px;
    }

    .home-services__rail-label {
        font-size: 1.4rem;
    }

    .home-services__rail-name {
        font-size: 1rem;
    }

    .home-services__rail-category {
        font-size: .8rem;
    }
}

/* Very narrow section (380px and under): small phones */
@container services (max-width: 380px) {
    .home-services__container {
        --hs-gutter: 14px;
        --hs-pad-top: 56px;
        --hs-pad-bottom: 60px;
        --hs-plate: 10px;
        --hs-frame-pad: 6px;
        --hs-r-big: 44px;
        --hs-r-tile: 22px;
        --hs-r-band: 30px;
        --hs-fs-title: 2.05rem;
        --hs-fs-service: 1.85rem;
        --hs-fs-note: .98rem;
        --hs-band-mt: 44px;
        --hs-band-pad-x: 10px;
        --hs-band-pad-y: 18px;
        --hs-rail-inset: 14px;
        --hs-tile-w: 78%;
    }

    .home-services__botanical {
        display: none;
    }

    .home-services__eyebrow {
        gap: 10px;
        font-size: .72rem;
        letter-spacing: .14em;
    }

    .home-services__eyebrow-line {
        width: 32px;
    }

    .home-services__content-topline {
        gap: 10px;
    }

    .home-services__content-category {
        max-width: 62%;
        padding: 6px 12px;
        font-size: .68rem;
        letter-spacing: .08em;
    }

    .home-services__counter [data-service-current] {
        font-size: 1.8rem;
    }

    .home-services__service-copy {
        padding: 22px 0 24px;
    }

    .home-services__service-rule {
        width: 48px;
        margin: 18px 0;
    }

    .home-services__details-link {
        min-height: 52px;
        padding: 0 8px 0 20px;
        font-size: .92rem;
    }

    .home-services__details-arrow {
        width: 34px;
        height: 34px;
    }

    .home-services__round-control {
        width: 46px;
        height: 46px;
    }

    .home-services__rail-heading {
        gap: 12px;
    }

    .home-services__rail-label {
        font-size: 1.05rem;
    }

    .home-services__rail-count {
        font-size: .82rem;
    }

    .home-services__rail {
        gap: 12px;
        padding-top: 8px;
        padding-bottom: 14px;
    }

    .home-services__rail-number {
        margin: 12px 0 0 12px;
    }

    .home-services__rail-copy {
        padding: 10px 0 12px;
    }

    .home-services__rail-name {
        font-size: .9rem;
    }

    .home-services__rail-item-arrow {
        width: 26px;
        height: 26px;
        margin-right: 12px;
    }
}


/* Short landscape screens: tighten the vertical rhythm. */
@media (orientation: landscape) and (max-height: 520px) {
    .home-services__container {
        --hs-pad-top: 48px;
        --hs-pad-bottom: 56px;
        --hs-intro-mb: 32px;
        --hs-band-mt: 40px;
    }

    .home-services__service-copy {
        padding-top: 18px;
        padding-bottom: 20px;
    }
}



/* ----------------------------------------------------------------------------
   13. FALLBACK — browsers without container-query support
   The same tiers, keyed to the viewport. Thresholds are higher on purpose:
   on desktop the fixed sidebar (about 320px) narrows the section, so the
   section is always narrower than the viewport.
   ---------------------------------------------------------------------------- */

@supports not (container-type: inline-size) {

    /* Tablet-width section: still one column, roomier */
    @media (min-width: 640px) {
        .home-services__container {
            --hs-gutter: 28px;
            --hs-pad-top: 88px;
            --hs-pad-bottom: 96px;
            --hs-intro-gap: 26px;
            --hs-intro-mb: 44px;
            --hs-show-gap: 52px;
            --hs-plate: 18px;
            --hs-frame-pad: 8px;
            --hs-r-big: 72px;
            --hs-r-tile: 28px;
            --hs-r-band: 44px;
            --hs-fs-title: 2.9rem;
            --hs-fs-service: 2.5rem;
            --hs-fs-note: 1.05rem;
            --hs-photo-ratio: 16 / 11;
            --hs-band-mt: 64px;
            --hs-band-pad-x: 22px;
            --hs-band-pad-y: 28px;
            --hs-rail-inset: 22px;
            --hs-tile-w: min(224px, 46%);
            --hs-desc-lines: 9;
        }

        .home-services__botanical {
            width: clamp(140px, 17vw, 240px);
            opacity: .14;
        }

        .home-services__eyebrow {
            gap: 16px;
            margin-bottom: 20px;
            font-size: .8rem;
        }

        .home-services__eyebrow-line {
            width: 52px;
        }

        .home-services__all-link {
            min-height: 50px;
            padding-left: 24px;
        }

        .home-services__featured-label {
            top: calc(var(--hs-frame-pad) + 18px);
            left: calc(var(--hs-plate) + var(--hs-frame-pad) + 18px);
            min-height: 36px;
            font-size: .72rem;
        }

        .home-services__content-topline {
            padding-bottom: 18px;
        }

        .home-services__content-category {
            padding: 8px 18px;
            font-size: .74rem;
        }

        .home-services__counter {
            font-size: 1rem;
        }

        .home-services__counter [data-service-current] {
            font-size: 2.5rem;
        }

        .home-services__service-copy {
            padding: 30px 0 32px;
        }

        .home-services__service-rule {
            width: 64px;
            margin: 24px 0;
        }

        .home-services__details-link {
            min-height: 56px;
            padding: 0 10px 0 28px;
            font-size: 1rem;
        }

        .home-services__details-arrow {
            width: 38px;
            height: 38px;
        }

        .home-services__round-control {
            width: 50px;
            height: 50px;
        }

        .home-services__rail-heading {
            margin-bottom: 16px;
        }

        .home-services__rail-label {
            font-size: 1.3rem;
        }

        .home-services__rail-count {
            font-size: .92rem;
        }

        .home-services__rail {
            gap: 16px;
            padding-top: 12px;
            padding-bottom: 18px;
        }

        .home-services__rail-number {
            margin: 15px 0 0 16px;
        }

        .home-services__rail-copy {
            padding: 13px 0 16px;
        }

        .home-services__rail-name {
            font-size: .98rem;
        }

        .home-services__rail-category {
            font-size: .78rem;
        }

        .home-services__rail-item-arrow {
            margin-right: 16px;
        }
    }

    /* Desktop-width section: photograph left, details right */
    @media (min-width: 1200px) {
        .home-services__container {
            --hs-gutter: 32px;
            --hs-pad-top: 104px;
            --hs-pad-bottom: 112px;
            --hs-intro-gap: 0px;
            --hs-intro-mb: 56px;
            --hs-cols: minmax(0, 1.32fr) minmax(0, 1fr);
            --hs-col-gap: 56px;
            --hs-plate: 22px;
            --hs-r-big: 88px;
            --hs-r-tile: 30px;
            --hs-r-band: 52px;
            --hs-fs-title: 3.3rem;
            --hs-fs-service: 2.7rem;
            --hs-photo-ratio: 5 / 4;
            --hs-band-mt: 76px;
            --hs-band-pad-x: 26px;
            --hs-band-pad-y: 30px;
            --hs-tile-w: 212px;
            --hs-desc-lines: 8;
        }

        .home-services__botanical {
            width: clamp(170px, 17vw, 260px);
        }

        .home-services__intro {
            align-items: end;
        }

        .home-services__intro-side {
            gap: 22px;
            padding-bottom: 8px;
        }

        .home-services__showcase {
            align-items: center;
        }

        .home-services__service-copy {
            padding: 28px 0 30px;
        }

        .home-services__service-footer {
            flex-wrap: nowrap;
        }

        .home-services__rail-heading {
            margin-bottom: 14px;
            padding-inline: calc(46px + 12px + var(--hs-rail-inset));
        }

        .home-services__rail-shell {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr) 46px;
            column-gap: 12px;
            align-items: center;
        }

        .home-services__rail-arrow {
            display: inline-flex;
        }
    }

    /* Wide section: wider photograph, larger type */
    @media (min-width: 1440px) {
        .home-services__container {
            --hs-gutter: 44px;
            --hs-pad-top: 120px;
            --hs-pad-bottom: 128px;
            --hs-intro-mb: 64px;
            --hs-cols: minmax(0, 1.5fr) minmax(0, 1fr);
            --hs-col-gap: 72px;
            --hs-plate: 26px;
            --hs-frame-pad: 9px;
            --hs-r-big: 108px;
            --hs-r-tile: 34px;
            --hs-r-band: 60px;
            --hs-fs-title: 3.9rem;
            --hs-fs-service: 3.1rem;
            --hs-fs-body: 1.04rem;
            --hs-band-mt: 88px;
            --hs-band-pad-x: 34px;
            --hs-band-pad-y: 34px;
            --hs-tile-w: 224px;
            --hs-desc-lines: 8;
        }

        .home-services__eyebrow {
            margin-bottom: 22px;
            font-size: .82rem;
        }

        .home-services__eyebrow-line {
            width: 60px;
        }

        .home-services__content-category {
            font-size: .76rem;
        }

        .home-services__counter [data-service-current] {
            font-size: 2.8rem;
        }

        .home-services__service-copy {
            padding: 32px 0 34px;
        }

        .home-services__service-rule {
            width: 72px;
            margin: 26px 0;
        }

        .home-services__rail {
            gap: 18px;
        }

        .home-services__rail-label {
            font-size: 1.4rem;
        }

        .home-services__rail-name {
            font-size: 1rem;
        }

        .home-services__rail-category {
            font-size: .8rem;
        }
    }

    /* Very narrow section: small phones */
    @media (max-width: 400px) {
        .home-services__container {
            --hs-gutter: 14px;
            --hs-pad-top: 56px;
            --hs-pad-bottom: 60px;
            --hs-plate: 10px;
            --hs-frame-pad: 6px;
            --hs-r-big: 44px;
            --hs-r-tile: 22px;
            --hs-r-band: 30px;
            --hs-fs-title: 2.05rem;
            --hs-fs-service: 1.85rem;
            --hs-fs-note: .98rem;
            --hs-band-mt: 44px;
            --hs-band-pad-x: 10px;
            --hs-band-pad-y: 18px;
            --hs-rail-inset: 14px;
            --hs-tile-w: 78%;
        }

        .home-services__botanical {
            display: none;
        }

        .home-services__eyebrow {
            gap: 10px;
            font-size: .72rem;
            letter-spacing: .14em;
        }

        .home-services__eyebrow-line {
            width: 32px;
        }

        .home-services__content-topline {
            gap: 10px;
        }

        .home-services__content-category {
            max-width: 62%;
            padding: 6px 12px;
            font-size: .68rem;
            letter-spacing: .08em;
        }

        .home-services__counter [data-service-current] {
            font-size: 1.8rem;
        }

        .home-services__service-copy {
            padding: 22px 0 24px;
        }

        .home-services__service-rule {
            width: 48px;
            margin: 18px 0;
        }

        .home-services__details-link {
            min-height: 52px;
            padding: 0 8px 0 20px;
            font-size: .92rem;
        }

        .home-services__details-arrow {
            width: 34px;
            height: 34px;
        }

        .home-services__round-control {
            width: 46px;
            height: 46px;
        }

        .home-services__rail-heading {
            gap: 12px;
        }

        .home-services__rail-label {
            font-size: 1.05rem;
        }

        .home-services__rail-count {
            font-size: .82rem;
        }

        .home-services__rail {
            gap: 12px;
            padding-top: 8px;
            padding-bottom: 14px;
        }

        .home-services__rail-number {
            margin: 12px 0 0 12px;
        }

        .home-services__rail-copy {
            padding: 10px 0 12px;
        }

        .home-services__rail-name {
            font-size: .9rem;
        }

        .home-services__rail-item-arrow {
            width: 26px;
            height: 26px;
            margin-right: 12px;
        }
    }


    @media (orientation: landscape) and (max-height: 520px) {
        .home-services__container {
            --hs-pad-top: 48px;
            --hs-pad-bottom: 56px;
            --hs-intro-mb: 32px;
            --hs-band-mt: 40px;
        }

        .home-services__service-copy {
            padding-top: 18px;
            padding-bottom: 20px;
        }
    }
}


/* ----------------------------------------------------------------------------
   14. ONE ENTRANCE MOMENT
   When the section scrolls into view the pale plate settles into place behind
   the photograph. Nothing else animates on its own, and no content is ever
   hidden by this animation.
   ---------------------------------------------------------------------------- */

@keyframes hsv-plate-settle {
    from {
        opacity: 0;
        transform: translate(14px, -14px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.home-services.reveal.is-active .home-services__media-frame--back {
    animation: hsv-plate-settle .9s var(--hs-ease) .15s both;
}


/* ----------------------------------------------------------------------------
   15. CONTENT SAFETY — long names, missing pictures, empty states
   ---------------------------------------------------------------------------- */

/* A service without a picture: the wash would only dirty the pattern. */
.home-services__media:has(.home-services__media-fallback) .home-services__media-wash {
    display: none;
}

/* A service whose description is empty should not leave a gap or a rule. */
.home-services__service-description:empty {
    display: none;
}

.home-services__service-copy:has(.home-services__service-description:empty) .home-services__service-rule {
    display: none;
}

/* Long single words must wrap rather than push the layout sideways. */
.home-services__service-title,
.home-services__service-description,
.home-services__content-category {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Images that fail to load keep their box instead of collapsing. */
.home-services__media img,
.home-services__rail-photo img {
    font-size: 0;
}

/* Native scroll anchoring must not move the page when tiles are selected. */
.home-services__rail {
    overflow-anchor: none;
}


/* ----------------------------------------------------------------------------
   16. TOUCH DEVICES — no hover, so nothing may depend on it
   ---------------------------------------------------------------------------- */

@media (hover: none) {
    .home-services__rail-item {
        scroll-snap-align: center;
    }

    .home-services__round-control,
    .home-services__details-link,
    .home-services__all-link {
        min-height: 48px;
    }

    .home-services__round-control {
        min-width: 48px;
    }

    .home-services__rail {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .home-services__rail-item:active {
        transform: scale(.985);
    }
}


/* ----------------------------------------------------------------------------
   17. HIGHER CONTRAST PREFERENCE
   ---------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
    .home-services {
        --hs-text: #1F2A22;
        --hs-muted: #2F3D34;
        --hs-line: rgba(23, 62, 41, .5);
        --hs-line-strong: rgba(23, 62, 41, .8);
    }

    .home-services__botanical {
        display: none;
    }

    .home-services__media-frame--main {
        border-color: var(--hs-forest);
    }

    .home-services__content-category {
        color: var(--hs-ink);
        border: 1px solid var(--hs-forest);
    }

    .home-services__rail-item {
        background: #FFFFFF;
    }

    .home-services__rail-item.is-active {
        background: var(--hs-gold-pale);
    }

    .home-services__rail-category {
        color: var(--hs-ink);
        font-weight: 700;
    }

    .home-services__rail-count {
        color: #FFFFFF;
    }
}


/* ----------------------------------------------------------------------------
   18. REDUCED MOTION
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .home-services *,
    .home-services *::before,
    .home-services *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .home-services__media-frame--main:hover .home-services__media img,
    .home-services__rail-item:hover,
    .home-services__round-control:hover,
    .home-services__details-link:hover,
    .home-services__rail-arrow:hover {
        transform: none;
    }

    .home-services__featured-label {
        transform: none;
    }
}


/* ----------------------------------------------------------------------------
   19. FORCED COLORS (Windows High Contrast and similar)
   Gradients and shadows are dropped by the browser, so every shape needs a
   real border. The new tile already has its caption on its own plate, so text
   never sits over a picture.
   ---------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .home-services {
        background: Canvas;
    }

    .home-services__wash,
    .home-services__botanical,
    .home-services__media-frame--back,
    .home-services__media-wash {
        display: none;
    }

    .home-services__media-frame--main {
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    .home-services__all-link,
    .home-services__details-link,
    .home-services__round-control,
    .home-services__rail-arrow {
        color: ButtonText;
        background: ButtonFace;
        border: 2px solid ButtonText;
        box-shadow: none;
        forced-color-adjust: none;
    }

    .home-services__details-arrow,
    .home-services__all-link-arrow,
    .home-services__rail-item-arrow {
        color: ButtonText;
        background: ButtonFace;
        border: 1px solid ButtonText;
    }

    .home-services__all-link:hover,
    .home-services__all-link:focus-visible,
    .home-services__details-link:hover,
    .home-services__details-link:focus-visible,
    .home-services__round-control:hover,
    .home-services__round-control:focus-visible,
    .home-services__rail-arrow:hover,
    .home-services__rail-arrow:focus-visible {
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
    }

    .home-services__content-category,
    .home-services__featured-label,
    .home-services__rail-number {
        color: CanvasText;
        background: Canvas;
        border: 1px solid CanvasText;
    }

    .home-services__rail-region {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    .home-services__rail-label,
    .home-services__rail-count {
        color: CanvasText;
    }

    .home-services__rail-line {
        background: CanvasText;
    }

    .home-services__rail-item {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    .home-services__rail-item.is-active {
        outline: 4px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }

    .home-services__rail-fallback {
        color: CanvasText;
        background: Canvas;
        border-bottom: 1px solid CanvasText;
    }

    .home-services__rail-name,
    .home-services__rail-category {
        color: CanvasText;
    }

    .home-services__service-rule,
    .home-services__eyebrow-line {
        background: CanvasText;
    }

    .home-services a:focus-visible,
    .home-services button:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }
}


/* ----------------------------------------------------------------------------
   20. PRINT — a plain, ink-friendly catalogue entry
   ---------------------------------------------------------------------------- */

@media print {
    .home-services {
        overflow: visible;
        background: #FFFFFF;
    }

    .home-services__container {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .home-services__wash,
    .home-services__botanical,
    .home-services__media-frame--back,
    .home-services__featured-label,
    .home-services__content-controls,
    .home-services__rail-region,
    .home-services__all-link {
        display: none;
    }

    .home-services__showcase {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
    }

    .home-services__media-frame--main {
        box-shadow: none;
    }

    .home-services__service-description {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .home-services__details-link {
        color: #000000;
        background: transparent;
        border: 1px solid #000000;
        box-shadow: none;
    }

    .home-services__details-arrow {
        display: none;
    }
}

/* ============================================================================
   21. THE SHELF — "CARD CATALOGUE" (replaces the earlier section 21 block)
   ----------------------------------------------------------------------------
   HOW TO USE
   1. Delete the previous section 21 block (the "Gilded Shelf") if you pasted it.
   2. Paste this at the very end of assets/css/home-services.css.
   CSS only, every selector under .home-services, no markup changes.

   Why this replaces the last one
   ------------------------------
   The last block leaned on effects that are everywhere in generated designs:
   glowing rotating rings, blurred glass, light sweeps, gradient on every
   surface, dimmed neighbours. This one drops all of that and works like
   printed material instead, which also suits a cooperative's ledger heritage:

     - the band is a flat deep green with a fine paper grain, no glows
     - each tile is a cream index card with a real card shadow (hard edge
       first, soft shadow second), not a glow
     - the picture is mounted on the card with an even margin and a hairline,
       like a photograph on a catalogue card
     - the number is a plain printed numeral with a hairline rule beside it
     - the heading rule is a double hairline, like a ledger rule
     - the chosen card is pulled up out of the row and gets a gold selected
       edge along its bottom; nothing glows or spins
     - nothing animates on its own
   ============================================================================ */

.home-services {
    --hs-paper: #FBF7EA;
    --hs-paper-warm: #FFF6D8;
    --hs-gold-deep: #8A6514;

    /* Paper grain: fine noise, dark for cards, light for the green band. */
    --hs-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    --hs-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
}


/* ----------------------------------------------------------------------------
   21.1 THE BAND — flat green, paper grain, ledger rule
   ---------------------------------------------------------------------------- */

.home-services__rail-region {
    background-color: #1C4F2B;
    background-image:
        var(--hs-grain-light),
        linear-gradient(180deg, #20592F 0%, #19452A 100%);
    box-shadow:
        0 22px 40px rgba(23, 62, 41, .2),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.home-services__rail-region::before {
    display: none;
}

.home-services__rail-heading,
.home-services__rail-shell {
    position: relative;
    z-index: 1;
}

.home-services__rail-label {
    font-weight: 600;
    letter-spacing: -.005em;
}

/* Double hairline, the way a ledger rules off a heading. */
.home-services__rail-line {
    height: 5px;
    background: linear-gradient(
        180deg,
        rgba(214, 181, 109, .55) 0 1px,
        transparent 1px 4px,
        rgba(214, 181, 109, .55) 4px 5px
    );
}

.home-services__rail-count {
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Room above for the lifted card, below for its shadow. */
.home-services__rail {
    padding-top: 16px;
    padding-bottom: 28px;
}


/* ----------------------------------------------------------------------------
   21.2 SCROLL POSITION — a plain thin line (Chrome / Edge)
   ---------------------------------------------------------------------------- */

.home-services__rail-region::after {
    display: none;
}

@supports (animation-timeline: scroll()) {
    .home-services__rail {
        scroll-timeline: --hs-rail inline;
    }

    .home-services__rail-region {
        timeline-scope: --hs-rail;
    }

    .home-services__rail-region::after {
        content: '';
        display: block;
        position: absolute;
        z-index: 1;
        left: calc(var(--hs-band-pad-x) + var(--hs-rail-inset));
        right: calc(var(--hs-band-pad-x) + var(--hs-rail-inset));
        bottom: calc(var(--hs-band-pad-y) + 8px);
        height: 2px;
        pointer-events: none;
        background-image:
            linear-gradient(#F6E3AE, #F6E3AE),
            linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 30% 100%, 100% 100%;
        animation: hs-rail-progress linear both;
        animation-timeline: --hs-rail;
    }
}

@keyframes hs-rail-progress {
    from { background-size: 30% 100%, 100% 100%; }
    to   { background-size: 100% 100%, 100% 100%; }
}

@container services (min-width: 900px) {
    .home-services__rail-region::after {
        left: calc(var(--hs-band-pad-x) + 58px + var(--hs-rail-inset));
        right: calc(var(--hs-band-pad-x) + 58px + var(--hs-rail-inset));
    }
}


/* ----------------------------------------------------------------------------
   21.3 THE ARROWS BESIDE THE SHELF — plain, solid, no glow
   ---------------------------------------------------------------------------- */

.home-services__rail-arrow {
    background: transparent;
    border-color: rgba(246, 227, 174, .6);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.home-services__rail-arrow--next {
    background: #F6E3AE;
    border-color: #F6E3AE;
    box-shadow: none;
}

.home-services__rail-arrow:hover,
.home-services__rail-arrow:focus-visible {
    box-shadow: none;
}

.home-services__rail-arrow--next:hover,
.home-services__rail-arrow--next:focus-visible {
    background: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: none;
}


/* ----------------------------------------------------------------------------
   21.4 THE CARDS
   ---------------------------------------------------------------------------- */

.home-services__rail-item {
    background-color: var(--hs-paper);
    background-image: var(--hs-grain-dark);
    /* Card shadow: a hard contact edge first, then a soft drop. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 2px 0 rgba(0, 0, 0, .3),
        0 10px 16px rgba(0, 0, 0, .22);
    transition: box-shadow .3s ease, transform .35s var(--hs-ease);
}

/* The picture is mounted on the card: an even margin all round, a hairline,
   and corners that follow the card's leaf shape. It carries no overlay. */
.home-services__rail-photo img,
.home-services__rail-fallback {
    width: calc(100% - 16px);
    margin: 8px 8px 0;
    border: 0;
    border-image: none;
    border-radius:
        3px
        calc(var(--hs-r-tile) - 8px)
        3px
        calc(var(--hs-r-tile) - 8px);
    box-shadow: 0 0 0 1px rgba(23, 62, 41, .2);
    filter: none;
}

/* Number: a plain printed numeral with a hairline rule beside it. */
.home-services__rail-number {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: auto;
    margin: 13px 0 13px 15px;
    padding: 0 12px 0 0;
    color: var(--hs-forest);
    background: none;
    border: 0;
    border-right: 1px solid rgba(23, 62, 41, .24);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--hs-display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.home-services__rail-copy {
    align-self: center;
    align-content: center;
    row-gap: 3px;
    padding: 13px 0;
}

.home-services__rail-name {
    min-height: 0;
    color: var(--hs-ink);
    font-family: var(--hs-display);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.home-services__rail-category {
    color: var(--hs-muted);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
}

.home-services__rail-category::before {
    display: none;
}

/* Arrow: an outlined circle, filled only on the chosen card. */
.home-services__rail-item-arrow {
    align-self: center;
    width: 26px;
    height: 26px;
    margin: 0 14px 0 0;
    color: var(--hs-forest);
    background: transparent;
    border: 1px solid rgba(23, 62, 41, .34);
    box-shadow: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .35s var(--hs-ease);
}


/* ----------------------------------------------------------------------------
   21.5 THE CHOSEN CARD — pulled up out of the row, gold edge along the bottom
   ---------------------------------------------------------------------------- */

.home-services__rail-item.is-active {
    background-color: var(--hs-paper-warm);
    background-image:
        linear-gradient(var(--hs-gold), var(--hs-gold)),
        var(--hs-grain-dark);
    background-repeat: no-repeat, repeat;
    background-position: left bottom, 0 0;
    background-size: 100% 4px, auto;
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 2px 0 rgba(0, 0, 0, .3),
        0 18px 26px rgba(0, 0, 0, .34);
}

.home-services__rail-item.is-active .home-services__rail-number {
    color: var(--hs-gold-deep);
    border-right-color: rgba(138, 101, 20, .4);
}

.home-services__rail-item.is-active .home-services__rail-category {
    color: #5E4A1C;
}

.home-services__rail-item.is-active .home-services__rail-item-arrow {
    color: #FFFFFF;
    background: var(--hs-forest);
    border-color: var(--hs-forest);
    transform: none;
}


/* ----------------------------------------------------------------------------
   21.6 HOVER — a small lift, nothing more
   ---------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .home-services__rail-item:hover {
        transform: translateY(-3px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .35) inset,
            0 2px 0 rgba(0, 0, 0, .3),
            0 14px 20px rgba(0, 0, 0, .28);
    }

    .home-services__rail-item.is-active:hover {
        transform: translateY(-8px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .35) inset,
            0 2px 0 rgba(0, 0, 0, .3),
            0 22px 30px rgba(0, 0, 0, .36);
    }

    .home-services__rail-item:not(.is-active):hover .home-services__rail-item-arrow {
        color: #FFFFFF;
        background: var(--hs-forest);
        border-color: var(--hs-forest);
        transform: translateX(2px);
    }

    .home-services__rail-item:hover .home-services__rail-photo img {
        filter: none;
    }
}


/* ----------------------------------------------------------------------------
   21.7 SIZE TUNING — follows the section's own width
   ---------------------------------------------------------------------------- */

@container services (min-width: 600px) {
    .home-services__rail-number {
        margin-left: 17px;
        font-size: 1rem;
    }

    .home-services__rail-item-arrow {
        margin-right: 16px;
    }

    .home-services__rail-name {
        font-size: 1.02rem;
    }

    .home-services__rail-category {
        font-size: .78rem;
    }
}

@container services (min-width: 1100px) {
    .home-services__rail-name {
        font-size: 1.06rem;
    }
}

@container services (max-width: 380px) {
    .home-services__rail-photo img,
    .home-services__rail-fallback {
        width: calc(100% - 12px);
        margin: 6px 6px 0;
    }

    .home-services__rail-number {
        margin-left: 12px;
        padding-right: 9px;
        font-size: .88rem;
    }

    .home-services__rail-item-arrow {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    .home-services__rail-name {
        font-size: .92rem;
    }
}


/* ----------------------------------------------------------------------------
   21.8 ACCESSIBILITY
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .home-services__rail-item.is-active,
    .home-services__rail-item:hover,
    .home-services__rail-item.is-active:hover {
        transform: none;
    }
}

@media (prefers-contrast: more) {
    .home-services__rail-category,
    .home-services__rail-item.is-active .home-services__rail-category {
        color: var(--hs-ink);
    }

    .home-services__rail-photo img,
    .home-services__rail-fallback {
        box-shadow: 0 0 0 2px var(--hs-ink);
    }
}

@media (forced-colors: active) {
    .home-services__rail-region::after {
        display: none;
    }

    .home-services__rail-item {
        background-image: none;
    }

    .home-services__rail-photo img,
    .home-services__rail-fallback {
        box-shadow: none;
        border: 1px solid CanvasText;
    }

    .home-services__rail-number {
        border-right: 1px solid CanvasText;
    }

    .home-services__rail-item.is-active {
        outline: 4px solid Highlight;
        outline-offset: 2px;
    }
}