/* ==========================================================================
   SHARED SERVICE-DETAIL LAYOUT (insurance.html, finance.html)

   A full-width alternative to the sidebar service-page layout:
   lead + enquiry form, value proposition panel, FAQ accordion, a numbered
   "priority covers" card and a closing support block.

   Loads after main.css and lab-service.css and is scoped to
   body.page-service-detail, so nothing here can reach another page. Each page
   also carries its own body class (page-insurance / page-finance) as a hook
   for page-specific tweaks. All colour,
   type and spacing values come from the site's existing tokens:
     brand green  #00984a   (--theme-color)
     heading      #28241F   (--header)
     body text    #4B5563   (--text)
     panel tint   #EEF5F5   (--bg)
     body type    18px / 30px Satoshi
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SHARED SECTION FURNITURE
   -------------------------------------------------------------------------- */

.page-service-detail .svc-section-title {
    font-size: 36px;
    line-height: 1.3;
    color: var(--header);
    margin-bottom: 20px;
}

.page-service-detail .svc-section-intro {
    max-width: 900px;
    margin-bottom: 40px;
}

.page-service-detail .svc-bg-tint {
    background-color: white;
}


/* --------------------------------------------------------------------------
   2. LEAD + ENQUIRY FORM

   Copy on the left, form card on the right. The lead paragraph is set larger
   than body copy so the opening statement carries the section, the way the
   rest of the site uses an oversized intro under a heading.
   -------------------------------------------------------------------------- */

.page-service-detail .svc-lead {
    font-size: 26px;
    line-height: 40px;
    color: var(--header);
    font-weight: 500;
    margin-bottom: 24px;
}

.page-service-detail .svc-form-card {
    background: var(--white);
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

/* ------------------------------------------------------------------
   Match the card's height to the copy beside it (desktop only, where
   the two sit side by side).

   The form's content is taller than the prose, so left alone the card
   sets the row height and overhangs the last paragraph. Taking the
   card out of flow (absolute inside .svc-form-holder) means only the
   copy column contributes to the row height; the card then stretches
   to exactly that, and the two columns end level.

   The card must therefore cope with a height it does not choose: the
   form becomes a flex column with space-between, so the surplus is
   shared out between the fields instead of pooling under the button.
   `gap` is the floor that keeps them apart when space is tight.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .page-service-detail .svc-form-holder {
        position: relative;
        height: 100%;
    }

    /* top/left/right pinned but height driven by the holder, so min-height can
       still win: if the copy column is ever shorter than the form needs, the
       card grows past it instead of squeezing its own contents. Squeezing is
       what pushed the button through the bottom border - a flex item shrinks by
       default, and the inputs cannot go below 58px, so the surplus overflowed.

       max-content here is only the no-JS fallback, and it overhangs the section
       when it fires (an absolute box adds nothing to its section's height, so
       the overhang eats the gap before the next section). With JS running,
       service-detail.js floors the holder at the card's natural height instead,
       which grows the column and section properly and keeps this from firing. */
    .page-service-detail .svc-form-holder .svc-form-card {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        min-height: -webkit-max-content;
        min-height: max-content;
        display: flex;
        flex-direction: column;
    }

    .page-service-detail .svc-form-card form {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;
    }

    /* Fixed-size rows: they may be spaced further apart, never compressed. */
    .page-service-detail .svc-form-card .svc-field,
    .page-service-detail .svc-form-card .theme-btn {
        flex: 0 0 auto;
    }

    /* Spacing now comes from the flex gap, so drop the per-field margin. */
    .page-service-detail .svc-form-card .svc-field {
        margin-bottom: 0;
    }

    .page-service-detail .svc-form-card .theme-btn {
        margin-top: 0;
        align-self: flex-start;
    }
}

/* The response slot sits below the form and reserves 16px even while empty,
   eating into what looks like the card's bottom padding. Collapse it until it
   actually holds a message. */
.page-service-detail .svc-form-message:empty {
    margin-top: 0;
}

.page-service-detail .svc-form-card h3 {
    font-size: 26px;
    line-height: 1.3;
    color: var(--header);
    margin-bottom: 26px;
}

.page-service-detail .svc-field {
    margin-bottom: 16px;
}

.page-service-detail .svc-field input,
.page-service-detail .svc-field select {
    width: 100%;
    height: 58px;
    padding: 0 18px;
    font-size: 16px;
    color: var(--header);
    background: var(--white);
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    outline: none;
    transition: border-color .3s ease;
}

.page-service-detail .svc-field select {
    /* Native arrow only - no background image, so nothing to load. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234B5563' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
}

.page-service-detail .svc-field input::placeholder {
    color: #9aa1ab;
}

.page-service-detail .svc-field input:focus,
.page-service-detail .svc-field select:focus {
    border-color: var(--theme-color);
}

/* Sized to its label rather than the full card width. */
.page-service-detail .svc-form-card .theme-btn {
    width: auto;
    margin-top: 8px;
}

.page-service-detail .svc-form-message {
    margin-top: 16px;
    font-size: 16px;
}

/* Result of a submission. Colour is backed up by wording in the message
   itself, so it does not rely on colour alone to say what happened. */
.page-service-detail .svc-form-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 24px;
    border: 1px solid transparent;
}

.page-service-detail .svc-form-alert.is-success {
    background-color: #e8f6ee;
    border-color: #b6e0c7;
    color: #17663c;
}

.page-service-detail .svc-form-alert.is-error {
    background-color: #fdecec;
    border-color: #f3c2c2;
    color: #9b2226;
}


/* --------------------------------------------------------------------------
   3. VALUE PROPOSITION PANEL

   Tinted rounded panel holding a 2-column grid of white cards. Each card lays
   its icon to the left of the text rather than above it: the icons carry no
   information the heading does not already give, so letting them sit beside
   the copy keeps them from pushing the text apart down the column.

   The layout is done with grid rather than flex so no wrapper is needed around
   the heading and paragraph - the icon simply spans both text rows.
   -------------------------------------------------------------------------- */

/* No padding of its own: the section above supplies the space over the panel
   and the section below supplies the space under it, so the panel sits with an
   even 75px either side and the boundary matches every other section step.
   Adding padding here on top of the next section's own made a 150px gap. */
.page-service-detail .svc-value-section {
    padding-bottom: 0;
}

/* Exception: a tinted section starts its background at its own top edge, so it
   would butt straight into the tinted panel and the two would read as one
   block. Only then does the panel need the gap pushed out itself. Adjacent
   sibling, so it follows the section order rather than being hard-coded. */
.page-service-detail .svc-value-section + .svc-bg-tint {
    margin-top: 75px;
}

.page-service-detail .svc-value-panel {
    background: var(--bg);
    border-radius: 24px;
    padding: 60px 50px;
}

.page-service-detail .svc-value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

/* 62px icon column, then the text. The icon spans both rows so the heading and
   paragraph stack against it. align-content:start stops the two rows spreading
   when a neighbouring card is taller. */
.page-service-detail .svc-value-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    column-gap: 20px;
    align-content: start;
    background: var(--white);
    border: 1px solid #e2e8e5;
    border-radius: 16px;
    padding: 30px 30px 32px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.page-service-detail .svc-value-item:hover {
    transform: translateY(-4px);
    border-color: var(--theme-color);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .08);
}

/* Filled rather than outlined: on a white card the outline read as an empty
   ring, and a solid brand block anchors the row. */
.page-service-detail .svc-value-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.page-service-detail .svc-value-icon i {
    font-size: 26px;
    color: var(--white);
}

.page-service-detail .svc-value-item h3 {
    grid-column: 2;
    font-size: 21px;
    line-height: 1.35;
    color: var(--header);
    margin: 0 0 10px;
}

.page-service-detail .svc-value-item p {
    grid-column: 2;
    font-size: 16px;
    line-height: 27px;
    margin: 0;
}


/* --------------------------------------------------------------------------
   4. FAQ ACCORDION

   Bootstrap's accordion with its card chrome stripped back to rule-separated
   rows and a +/- toggle, so a long list stays scannable.
   -------------------------------------------------------------------------- */

/* Show six questions and scroll the rest inside the box.

   These max-heights are only a fallback for when JS has not run: rows are not a
   uniform height (a question wrapping to two lines is ~31px taller), so no fixed
   value can land on a row boundary - it always leaves a sliver of the seventh
   question showing. assets/js/service-detail.js measures the first six rows and
   overwrites max-height inline so the cut is exact. Keep these roughly right
   anyway, so the list is never unbounded before the script runs.

   overscroll-behavior is deliberately left at its default (auto) so the scroll
   chains: with the cursor over the list the list scrolls first, and once it
   bottoms out the page carries on to the next section. Setting `contain` here
   is what would trap the scroll, so don't. */
.page-service-detail .svc-accordion {
    max-height: 530px;
    overflow-y: auto;
    /* Keeps the +/- buttons clear of the scrollbar. */
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: #bfc7cc transparent;
}

.page-service-detail .svc-accordion::-webkit-scrollbar {
    width: 6px;
}

.page-service-detail .svc-accordion::-webkit-scrollbar-track {
    background: transparent;
}

.page-service-detail .svc-accordion::-webkit-scrollbar-thumb {
    background: #bfc7cc;
    border-radius: 3px;
}

.page-service-detail .svc-accordion::-webkit-scrollbar-thumb:hover {
    background: var(--theme-color);
}

.page-service-detail .svc-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dfe3e6;
}

/* Symmetric horizontal padding so the hover background has room around the
   text instead of sitting flush against it. Deliberately not done with
   negative margins: the list scrolls on the y axis, which makes overflow-x
   compute to auto, so anything reaching past the content box would raise a
   horizontal scrollbar. */
.page-service-detail .svc-accordion .accordion-button {
    background: transparent;
    box-shadow: none;
    padding: 28px 24px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--header);
    transition: background-color .3s ease, color .3s ease;
}

/* The row lifts to white off the tinted section background on hover, and stays
   white while its answer is open. */
.page-service-detail .svc-accordion .accordion-button:hover,
.page-service-detail .svc-accordion .accordion-button:not(.collapsed) {
    background-color: var(--white);
}

.page-service-detail .svc-accordion .accordion-button:not(.collapsed) {
    color: var(--theme-color);
}

.page-service-detail .svc-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Replace Bootstrap's chevron sprite with a +/- built from CSS. */
.page-service-detail .svc-accordion .accordion-button::after {
    content: "\002B"; /* plus */
    background-image: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid #dfe3e6;
    color: var(--header);
    font-size: 22px;
    line-height: 38px;
    text-align: center;
    display: block;
    transform: none;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Hovering the row fills the circle brand green with a white plus; opening it
   does the same and swaps the glyph for a minus. */
.page-service-detail .svc-accordion .accordion-button:hover::after,
.page-service-detail .svc-accordion .accordion-button:not(.collapsed)::after {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white);
}

.page-service-detail .svc-accordion .accordion-button:not(.collapsed)::after {
    content: "\2212"; /* minus */
}

/* Left padding matches the button's, so an answer lines up under its question.
   The top padding is the breathing space under the white question row - without
   it the answer starts flush against the row's bottom edge. */
.page-service-detail .svc-accordion .accordion-body {
    padding: 14px 24px 30px 24px;
}

.page-service-detail .svc-accordion .accordion-body p:last-child,
.page-service-detail .svc-accordion .accordion-body ul:last-child,
.page-service-detail .svc-accordion .accordion-body ol:last-child {
    margin-bottom: 0;
}

.page-service-detail .svc-accordion .accordion-body ul,
.page-service-detail .svc-accordion .accordion-body ol {
    padding-left: 20px;
}

.page-service-detail .svc-accordion .accordion-body li {
    margin-bottom: 10px;
}


/* --------------------------------------------------------------------------
   5. PRIORITY COVERS CARD

   Image on the left, numbered steps on the right, both inside one rounded
   card. The image column is a flex child with its own overflow so the photo
   can crop to the card's height instead of setting it.
   -------------------------------------------------------------------------- */

.page-service-detail .svc-priority-card {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border: 1px solid #e6e6e6;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.page-service-detail .svc-priority-media {
    flex: 0 0 45%;
    max-width: 45%;
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center; /* title sits in the middle of the photo */
    justify-content: center;
}

.page-service-detail .svc-priority-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tinted scrim over the photo so the white heading stays legible whatever the
   image behind it. Kept even rather than bottom-weighted, because the title is
   centred - a gradient would leave the middle too light. A generated last
   child, so it paints above the img; the title lifts itself above it with
   z-index. */
.page-service-detail .svc-priority-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(32, 64, 102, 0.62) 0%,
        rgba(32, 64, 102, 0.80) 50%,
        rgba(32, 64, 102, 0.62) 100%
    );
    pointer-events: none;
}

.page-service-detail .svc-priority-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 45px 40px;
    text-align: center;
}

.page-service-detail .svc-priority-overlay h2 {
    font-size: 32px;
    line-height: 1.3;
    color: var(--white);
    margin: 0;
    /* Softens the type against the brighter parts of a photo. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.page-service-detail .svc-priority-content {
    flex: 1;
    padding: 55px 50px;
}

.page-service-detail .svc-priority-step {
    display: flex;
    gap: 22px;
    margin-bottom: 34px;
}

.page-service-detail .svc-priority-step:last-child {
    margin-bottom: 0;
}

.page-service-detail .svc-priority-num {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-color);
    flex-shrink: 0;
}

.page-service-detail .svc-priority-step h3 {
    font-size: 22px;
    line-height: 1.4;
    color: var(--header);
    margin-bottom: 10px;
}

.page-service-detail .svc-priority-step p {
    margin: 0;
    font-size: 17px;
    line-height: 28px;
}


/* --------------------------------------------------------------------------
   6. CLOSING SUPPORT BLOCK  (insurance page only)

   Two re-laid-out blocks, both scoped to .page-insurance:

   6a. "How Blood Test Consultancy Can Support" - a left / right split: copy,
       a tinted covers panel and the closing note down the left, the enquiry
       card in a sticky right rail.

   6b. "Directors & Officers (D&O)" - a dark panel split full-bleed: photo
       filling the left half, copy down the right, audience list two-up.
   -------------------------------------------------------------------------- */

/* --- 6a. Support block ---------------------------------------------------- */

/* Left / right split: the copy and the covers run down the left, the enquiry
   card sits in a fixed-width right rail and sticks while the left column
   scrolls past it.

   The card is NOT wrapped in .svc-form-holder here, so the absolute-position
   height-matching in block 1 does not apply - this card sizes itself and
   sticks instead. */

.page-insurance .ins-support-split {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 50px;
    align-items: start;
}

.page-insurance .ins-support-main .svc-section-title {
    margin-bottom: 18px;
}

/* The shared .svc-lead is 26px, which is too heavy for the left column now
   that it sits beside the rail. Scoped here only - the lead on the other
   service pages keeps its own size. Matches the D&O panel's lead. */
.page-insurance .ins-support-main .svc-lead {
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 32px;
}

/* --- covers panel (left column) --- */

.page-insurance .ins-support-panel {
    background: var(--bg);
    border-radius: 20px;
    padding: 34px 36px 30px;
}

.page-insurance .ins-covers-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 8px;
}

/* Two columns of ruled rows - the eight covers read as a tidy schedule. */
.page-insurance .ins-cover-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
}

.page-insurance .ins-cover-grid li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(32, 64, 102, .12);
}

/* Last row of each column carries no rule. */
.page-insurance .ins-cover-grid li:nth-last-child(-n + 2) {
    border-bottom: 0;
    padding-bottom: 0;
}

.page-insurance .ins-cover-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--white);
    color: var(--theme-color);
    font-size: 17px;
    transition: background .3s ease, color .3s ease;
}

.page-insurance .ins-cover-grid li:hover .ins-cover-icon {
    background: var(--theme-color);
    color: var(--white);
}

.page-insurance .ins-cover-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color-2);
    line-height: 1.4;
}

/* Closing note, under the panel in the left column. */
.page-insurance .ins-support-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 26px 0 0;
    padding: 24px 28px;
    border-radius: 14px;
    border-left: 4px solid var(--theme-color);
    background: rgba(0, 152, 74, .06);
}

.page-insurance .ins-support-note i {
    color: var(--theme-color);
    font-size: 22px;
    line-height: 1.6;
}

.page-insurance .ins-support-note span {
    line-height: 30px;
}

/* --- enquiry rail (right column) --- */

.page-insurance .ins-support-form {
    position: sticky;
    top: 120px;
}

.page-insurance .ins-support-form .svc-form-card {
    padding: 38px 32px 34px;
}

/* --- 6b. Directors & Officers -------------------------------------------- */

/* Full-bleed split. The panel carries no padding of its own: the photo fills
   the left cell edge to edge and the copy cell supplies its own inset, so the
   image reads as half the block rather than as an inset picture.

   Reading order inside the copy is kicker -> headline -> prose -> audience,
   which puts the service name first as a label and lets the curiosity line
   land as the dominant type. The dark panel is what makes the section stand
   out - it is the only dark block between the breadcrumb and the CTA. */
.page-insurance .ins-do-panel {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: stretch;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #17334f 0%, #204066 55%, #0f3a2c 100%);
}

/* --- photo half --- */

/* Absolute image so the cell's height comes from the copy column and the
   photo simply fills whatever that turns out to be. */
.page-insurance .ins-do-media {
    position: relative;
    min-height: 460px;
}

.page-insurance .ins-do-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Emblem straddling the seam between the photo and the copy. */
.page-insurance .ins-do-emblem {
    position: absolute;
    right: -34px;
    bottom: 54px;
    z-index: 2;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--theme-color);
    color: var(--white);
    font-size: 26px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}

/* --- copy half --- */

.page-insurance .ins-do-copy {
    padding: 56px 54px 52px 68px;
}

/* Service name as a label above the headline, marked with a brand rule. */
.page-insurance .ins-do-service {
    position: relative;
    padding-left: 16px;
    margin-bottom: 16px;
    color: #9be6c1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.page-insurance .ins-do-service::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: #9be6c1;
}

/* The dominant type on the panel. */
.page-insurance .ins-do-title {
    color: var(--white);
    font-size: 28px;
    line-height: 1.34;
    margin-bottom: 18px;
}

/* The shared .svc-lead is 26px, which crowded the headline once that came
   down to 28px. Scoped to this panel only - the lead on the other sections
   and on finance.html keeps its own size. Still above the 18px body copy
   below it, so it reads as the lead paragraph. */
.page-insurance .ins-do-panel .svc-lead {
    color: rgba(255, 255, 255, .92);
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 16px;
}

.page-insurance .ins-do-intro {
    color: rgba(255, 255, 255, .78);
    margin-bottom: 0;
}

/* --- audience --- */

.page-insurance .ins-do-audience {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.page-insurance .ins-do-audience-label {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Two-up list rather than chips - it sits inside a column now, not across
   the full panel width. */
.page-insurance .ins-do-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 22px;
}

.page-insurance .ins-do-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.page-insurance .ins-do-list i {
    flex: 0 0 auto;
    color: #9be6c1;
    font-size: 16px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   7. OUR BLOGS

   Three latest posts as cards: kicker, title, excerpt, "Read more", then the
   thumbnail at the foot of the card. The image sits last so the cards line up
   on their text and the photos form a band along the bottom.
   -------------------------------------------------------------------------- */

.page-service-detail .svc-blogs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

.page-service-detail .svc-blogs-head .svc-section-title {
    margin-bottom: 0;
}

.page-service-detail .svc-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* Fixed height is what makes the hover behave: the excerpt opening has to come
   out of the thumbnail's share of this box rather than pushing the card taller,
   so the row never reflows and all three stay level. */
.page-service-detail .svc-blog-card {
    display: flex;
    flex-direction: column;
    height: 500px;
    background: var(--white);
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    transition: box-shadow .3s ease, transform .3s ease;
}

.page-service-detail .svc-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .10);
}

.page-service-detail .svc-blog-kicker {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 14px;
}

.page-service-detail .svc-blog-card h3 {
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 14px;
}

.page-service-detail .svc-blog-card h3 a {
    color: var(--header);
    transition: color .3s ease;
}

.page-service-detail .svc-blog-card h3 a:hover {
    color: var(--theme-color);
}

/* The excerpt is collapsed to nothing by default - no reserved gap - and opens
   on hover. The card's height is fixed, so the space it takes is absorbed by
   the thumbnail below shrinking, never by the card growing. Clamped to three
   lines so the amount it opens by is predictable. */
.page-service-detail .svc-blog-card p {
    font-size: 16px;
    line-height: 27px;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    transition: max-height .4s ease, opacity .3s ease, margin-bottom .4s ease;
}

.page-service-detail .svc-blog-card:hover p,
.page-service-detail .svc-blog-card:focus-within p {
    max-height: 81px; /* 3 lines x 27px */
    opacity: 1;
    margin-bottom: 18px;
}

.page-service-detail .svc-blog-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color);
    margin-bottom: 22px;
}

.page-service-detail .svc-blog-link i {
    transition: transform .3s ease;
}

.page-service-detail .svc-blog-link:hover {
    color: var(--theme-color-2);
}

.page-service-detail .svc-blog-link:hover i {
    transform: translateX(4px);
}

/* flex:1 lets the thumbnail take whatever height is left inside the card's
   fixed box, so it gives up room to the excerpt on hover and takes it back on
   leave. min-height stops it collapsing to a sliver if the title runs long.
   The image is absolutely positioned so it always fills that changing box
   without fighting the flex sizing. */
.page-service-detail .svc-blog-media {
    flex: 1 1 auto;
    min-height: 120px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: min-height .4s ease;
}

.page-service-detail .svc-blog-media a {
    position: absolute;
    inset: 0;
    display: block;
}

.page-service-detail .svc-blog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .cta-newsletter-section carries no padding of its own site-wide - the green
   card sits flush at the top of the section. On these pages it follows the
   tinted blogs band, so without this the tint runs straight into the card.
   Scoped so no other page's CTA spacing changes. Tracks .section-padding. */
.page-service-detail .cta-newsletter-section {
    padding-top: 75px;
}


/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    /* Narrower rail so the left column keeps room for two cover columns. */
    .page-insurance .ins-support-split {
        grid-template-columns: 1fr 360px;
        gap: 40px;
    }

    .page-insurance .ins-support-panel {
        padding: 30px 28px 26px;
    }

    .page-insurance .ins-cover-grid {
        column-gap: 28px;
    }

    .page-insurance .ins-do-copy {
        padding: 46px 40px 44px 56px;
    }

    .page-insurance .ins-do-title {
        font-size: 26px;
    }

    .page-insurance .ins-do-media {
        min-height: 420px;
    }

    .page-service-detail .svc-value-section + .svc-bg-tint {
        margin-top: 100px;
    }

    .page-service-detail .cta-newsletter-section {
        padding-top: 100px;
    }

    .page-service-detail .svc-value-panel {
        padding: 55px 40px;
    }

    .page-service-detail .svc-priority-media {
        min-height: 400px;
    }

    .page-service-detail .svc-priority-overlay h2 {
        font-size: 27px;
    }

    .page-service-detail .svc-priority-content {
        padding: 45px 36px;
    }
}

@media (max-width: 991px) {
    /* Opt-in helpers: drop a section's own vertical padding on tablet and
       mobile. .section-padding is (0,1,0) so a class of the same weight would
       be a coin toss on source order - scoping to .page-insurance settles it. */
    .page-insurance .ins-flush-y {
        padding-top: 0;
        padding-bottom: 0;
    }

    .page-insurance .ins-flush-top {
        padding-top: 0;
    }

    /* Split collapses: the enquiry card drops below the copy and stops
       sticking, since there is nothing left to scroll past it. */
    .page-insurance .ins-support-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-insurance .ins-support-form {
        position: static;
        top: auto;
        max-width: 620px;
    }

    .page-insurance .ins-support-panel {
        padding: 30px 28px 26px;
    }

    .page-insurance .ins-support-note {
        padding: 22px 24px;
    }

    .page-insurance .ins-support-form .svc-form-card {
        padding: 36px 30px 34px;
    }

    /* Split collapses: photo becomes a banner across the top, copy below. */
    .page-insurance .ins-do-panel {
        grid-template-columns: 1fr;
    }

    .page-insurance .ins-do-media {
        min-height: 0;
        height: 320px;
    }

    /* Seam is horizontal now, so the emblem straddles the bottom edge. */
    .page-insurance .ins-do-emblem {
        right: 34px;
        bottom: -30px;
    }

    .page-insurance .ins-do-copy {
        padding: 46px 34px 40px;
    }

    .page-insurance .ins-do-title {
        font-size: 24px;
    }

    .page-service-detail .svc-value-section + .svc-bg-tint {
        margin-top: 80px;
    }

    .page-service-detail .cta-newsletter-section {
        padding-top: 80px;
    }

    .page-service-detail .svc-section-title {
        font-size: 30px;
    }

    .page-service-detail .svc-lead {
        font-size: 22px;
        line-height: 34px;
    }

    .page-service-detail .svc-value-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack the card so the photo becomes a banner above the steps. */
    .page-service-detail .svc-priority-card {
        flex-direction: column;
    }

    .page-service-detail .svc-priority-media {
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 320px;
    }

    .page-service-detail .svc-priority-overlay {
        padding: 36px 30px;
    }

    .page-service-detail .svc-priority-overlay h2 {
        font-size: 25px;
    }

    .page-service-detail .svc-accordion .accordion-button {
        padding: 28px 20px;
    }

    .page-service-detail .svc-accordion .accordion-body {
        padding: 14px 20px 30px 20px;
    }

    /* Same ~6 rows, but a shorter viewport - leave more of the page visible. */
    .page-service-detail .svc-accordion {
        max-height: 470px;
    }

    /* Three across gets too narrow below lg - drop to two and wrap the third. */
    .page-service-detail .svc-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Wider cards mean shorter titles, so less height is needed. */
    .page-service-detail .svc-blog-card {
        height: 470px;
    }
}

@media (max-width: 575px) {
    /* The intro row uses Bootstrap's g-5, a 3rem horizontal gutter, which gives
       the row -24px side margins while the fluid container only pads 12px. The
       12px difference bleeds past the container on both sides: body has
       overflow-x:hidden so it clips on the left rather than scrolling, which is
       what makes the left and right margins look unequal. Reset the horizontal
       gutter only - the vertical one still spaces the stacked copy and form.
       lab-service.css carries the same fix for .services-details-section, which
       these pages do not use. */
    .page-service-detail .svc-intro-section .row {
        --bs-gutter-x: 1.5rem;
    }

    .page-service-detail .svc-section-title {
        font-size: 25px;
    }

    .page-service-detail .svc-lead {
        font-size: 20px;
        line-height: 32px;
    }

    /* One cover per row - two ruled columns are too cramped at this width. */
    .page-insurance .ins-cover-grid {
        grid-template-columns: 1fr;
    }

    .page-insurance .ins-cover-grid li:nth-last-child(-n + 2) {
        border-bottom: 1px solid rgba(32, 64, 102, .12);
        padding-bottom: 15px;
    }

    .page-insurance .ins-cover-grid li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .page-insurance .ins-cover-grid li {
        padding: 15px 0;
        gap: 14px;
    }

    .page-insurance .ins-cover-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .page-insurance .ins-support-panel {
        padding: 26px 20px 24px;
        border-radius: 18px;
    }

    .page-insurance .ins-support-form .svc-form-card {
        padding: 30px 20px 28px;
    }

    .page-insurance .ins-support-note {
        padding: 20px 18px;
        gap: 14px;
        border-radius: 14px;
    }

    .page-insurance .ins-do-panel {
        border-radius: 18px;
    }

    .page-insurance .ins-do-media {
        height: 220px;
    }

    .page-insurance .ins-do-emblem {
        right: 20px;
        bottom: -26px;
        width: 56px;
        height: 56px;
        font-size: 21px;
        border-radius: 15px;
    }

    .page-insurance .ins-do-copy {
        padding: 42px 20px 32px;
    }

    .page-insurance .ins-do-title {
        font-size: 21px;
    }

    .page-insurance .ins-support-main .svc-lead,
    .page-insurance .ins-do-panel .svc-lead {
        font-size: 18px;
        line-height: 30px;
    }

    .page-insurance .ins-do-audience {
        margin-top: 28px;
        padding-top: 24px;
    }

    /* Too narrow to pair the audience items - one per row. */
    .page-insurance .ins-do-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-service-detail .svc-value-panel {
        padding: 36px 18px;
        border-radius: 18px;
    }

    /* Too narrow for a side-by-side icon: stack it above the text instead. */
    .page-service-detail .svc-value-item {
        display: block;
        padding: 24px 22px 26px;
    }

    .page-service-detail .svc-value-icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    .page-service-detail .svc-value-icon i {
        font-size: 22px;
    }

    .page-service-detail .svc-value-item h3 {
        font-size: 19px;
    }

    .page-service-detail .svc-form-card {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .page-service-detail .svc-priority-media {
        min-height: 240px;
    }

    .page-service-detail .svc-priority-overlay {
        padding: 26px 22px;
    }

    .page-service-detail .svc-priority-overlay h2 {
        font-size: 21px;
    }

    .page-service-detail .svc-priority-content {
        padding: 32px 22px;
    }

    .page-service-detail .svc-priority-num {
        font-size: 28px;
    }

    .page-service-detail .svc-accordion .accordion-button {
        padding: 22px 14px;
    }

    .page-service-detail .svc-accordion .accordion-button::after {
        width: 32px;
        height: 32px;
        font-size: 18px;
        line-height: 30px;
    }

    /* Rows are ~70px here (22px padding, 18px type), so ~6 fit in 420px. */
    .page-service-detail .svc-accordion {
        max-height: 420px;
        padding-right: 10px;
    }

    .page-service-detail .svc-accordion .accordion-body {
        padding: 12px 14px 24px 14px;
    }

    .page-service-detail .svc-blogs-head {
        margin-bottom: 32px;
    }

    .page-service-detail .svc-blog-grid {
        grid-template-columns: 1fr;
    }

    .page-service-detail .svc-blog-card {
        padding: 24px 22px;
        border-radius: 16px;
        height: 450px;
    }

    .page-service-detail .svc-blog-card h3 {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------------
   9. TOUCH DEVICES

   No hover means the excerpt would never be reachable, so open it permanently
   and let the card size to its content again - a fixed height only exists to
   absorb the hover, which cannot happen here.
   -------------------------------------------------------------------------- */

@media (hover: none) {
    .page-service-detail .svc-blog-card {
        height: auto;
    }

    .page-service-detail .svc-blog-card p {
        max-height: none;
        opacity: 1;
        margin-bottom: 18px;
        -webkit-line-clamp: unset;
        display: block;
    }

    .page-service-detail .svc-blog-media {
        flex: 0 0 auto;
        height: 200px;
    }
}


.seed-fund-section{
    padding:80px 0;
    background:#eef5f5;
}

.seed-subtitle{
    color:#124185;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.seed-title{
    font-size:36px;
    margin:15px 0;
    color:#111;
}

.seed-divider{
    width:70px;
    height:3px;
    background:#124185;
    margin-bottom:30px;
}

.seed-text{
    color:#666;
    line-height:1.9;
    margin-bottom:30px;
}

.seed-list{
    list-style:none;
    padding:0;
    margin:0 0 35px;
}

.seed-list li{
    position:relative;
    padding-left:30px;
    margin-bottom:15px;
    color:#444;
}

.seed-list li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#00984a;
    font-weight:bold;
}

.seed-right{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.seed-card{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:25px;
    border-radius:15px;
    background:white;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.seed-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,.1);
}

.seed-card i{
    width:65px;
    height:65px;
    min-width:65px;
    border-radius:50%;
    background:#00984a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
}

.seed-card h5{
    margin-bottom:10px;
    color:black;
    font-size: 21px;
}

.seed-card p{
    margin:0;
    color:#666;
    line-height:1.7;
}

@media(max-width:991px){

    .seed-title{
        font-size:38px;
    }

    .seed-right{
        margin-top:50px;
    }

}

/* ===========================
   Responsive
=========================== */

@media (max-width: 991px) {

    .seed-fund-section{
        padding:80px 0;
    }

    .seed-title{
        font-size:38px;
        line-height:1.2;
    }

    .seed-text{
        margin-bottom:25px;
    }

    .seed-right{
        margin-top:40px;
    }

    .seed-card{
        padding:25px;
    }

    .seed-card i{
        width:55px;
        height:55px;
        min-width:55px;
        font-size:22px;
    }

    .seed-card h5{
        font-size:20px;
    }

    /* Scoped to the seed-fund block. As a bare .theme-btn this leaked onto
       every button on the pages that load this file. */
    .seed-fund-section .theme-btn{
        margin-bottom:20px;
    }

}
@media (max-width: 768px){
 .seed-text{
        font-size:16px;
    }
        .seed-fund-section {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {

    .seed-fund-section{
        padding:60px 0;
    }

    .seed-subtitle{
        font-size:14px;
    }

    .seed-title{
        font-size:30px;
    }

    .seed-divider{
        margin-bottom:20px;
    }

    .seed-text{
        font-size:16px;
        line-height:1.8;
    }

    .seed-list li{
        font-size:15px;
        padding-left:24px;
        margin-bottom:12px;
    }

    .seed-right{
        margin-top:35px;
        gap:20px;
    }

    .seed-card{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:25px 20px;
    }

    .seed-card i{
        margin-bottom:15px;
    }

    .seed-card h5{
        font-size:18px;
        margin-bottom:10px;
    }

    .seed-card p{
        font-size:16px;
        line-height:1.7;
    }

    /* Scoped to the seed-fund block. As a bare .theme-btn this stretched every
       button on this page full width below 768px - including the "View All"
       button in the Our Blogs header - instead of the site's pill button. */
    .seed-fund-section .theme-btn{
        width:100%;
        text-align:center;
    }

}

@media (max-width: 480px) {

    .seed-title{
        font-size:26px;
    }

    .seed-text{
        font-size:16px;
    }

    .seed-card{
        padding:20px 15px;
    }

    .seed-card i{
        width:50px;
        height:50px;
        min-width:50px;
        font-size:20px;
    }

}


.investment-section{
    padding:80px 0;
    background:white;
}


.section-heading{
    text-align:center;
    max-width:750px;
    margin:0 auto 60px;
}


.section-heading h2{
    font-size:36px;
   
    margin-bottom:15px;
}


.section-heading p{
    font-size:18px;
    color:#666;
    line-height:1.7;
}



/* Cards Layout */

.investment-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

    position:relative;

}


/* Card */

.investment-card{

    background:#fff;
    padding:40px 30px;
border: 2px solid #00984a;
    border-radius:20px;

    box-shadow:0 10px 35px rgba(0, 0, 0, 0.025);

    position:relative;

    transition:.3s;

}


.investment-card:hover{

    transform:translateY(-10px);

}


/* Number */

.number{

    width:55px;
    height:55px;

    background:#00984a;
    color:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
    font-weight:700;

    margin-bottom:25px;

}



.investment-card h3{

    font-size:20px;
  

    margin-bottom:15px;

}



.investment-card p{

    font-size:16px;
    color:#666;

    line-height:1.7;

}



/* Connector Line Desktop */

.investment-grid:before{

    content:"";

    position:absolute;

    top:68px;

    left:12%;
    right:12%;

    height:2px;

    background:#d8e3ef;

    z-index:0;

}


.investment-card{

    z-index:1;

}



/* Responsive */

@media(max-width:992px){

    .investment-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .investment-grid:before{
        display:none;
    }

}



@media(max-width:576px){

    .investment-grid{

        grid-template-columns:1fr;

    }


    .section-heading h2{

        font-size:25px;

    }

}


/* Investment Philosophy Responsive */

.investment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


/* Tablet */

@media (max-width: 991px) {

    .investment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .investment-card {
        padding: 30px 25px;
    }

    .investment-card h3 {
        font-size: 20px;
    }

    .investment-card p {
        font-size: 15px;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .investment-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .investment-card {
        padding: 25px 20px;
        text-align: center;
    }


    .investment-card .icon {
        margin: 0 auto 15px;
    }


    .investment-card h3 {
        font-size: 18px;
    }


    .investment-card p {
        font-size: 16px;
        line-height: 1.6;
    }

}
@media (max-width: 768px){
.section-heading {
    text-align: left;
    max-width: 750px;
    margin: 0 auto 60px;
}
}

@media (max-width: 480px) {

    .investment-card {
        border-radius: 15px;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
    }


    .investment-card .icon {
        margin: 0 auto 15px;
        display: flex;
        align-items: left;
        justify-content: left;
    }
    .section-heading {
    text-align: left;
    max-width: 750px;
    margin: 0 auto 60px;
}

}

/* Small Mobile */

@media (max-width: 480px) {

    .investment-section {
        padding: 50px 15px;
    }


    .section-title {
        font-size: 28px;
    }


    .investment-card {
        border-radius: 15px;
    }

}


.seed-stats {
    padding: 80px 0;
    background: rgb(238, 245, 245);
}


.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


.stat-box {
    background: #ffffff;
    padding: 40px 25px;
    text-align: center;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.041);

    transition: 0.3s ease;
}


.stat-box:hover {
    transform: translateY(-8px);
}


.stat-box h2 {
    font-size: 48px;
    font-weight: 700;
    color: #00984a;

    margin-bottom: 10px;
}


.stat-box p {
    font-size: 18px;
    color: #333;
    margin: 0;
}



/* Tablet */

@media(max-width:991px){

    .stats-wrapper {
        grid-template-columns: repeat(2,1fr);
    }

}


/* Tablet */

@media(max-width:991px){

    .stats-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap:25px;
    }

}


/* Mobile - 2x2 Layout */

@media(max-width:767px){

    .seed-stats {
        padding:50px 15px;
    }


    .stats-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap:15px;
    }


    .stat-box {
        padding:25px 15px;
        border-radius:12px;
    }


    .stat-box h2 {
        font-size:32px;
        margin-bottom:8px;
    }


    .stat-box p {
        font-size:14px;
        line-height:1.4;
    }

}


/* Small Mobile */

@media(max-width:400px){

    .stat-box h2 {
        font-size:28px;
    }


    .stat-box p {
        font-size:13px;
    }

}

.faq-section{
    padding:100px 0;
    background:#f8fafc;
}


.faq-header{
    text-align:center;
    max-width:750px;
    margin:0 auto 50px;
}


.faq-header h2{
    font-size:42px;
    color:#123456;
    margin-bottom:15px;
}


.faq-header p{
    font-size:17px;
    color:#666;
    line-height:1.7;
}


.faq-wrapper{
    max-width:900px;
    margin:auto;
}


.faq-item{

    background:#fff;
    border-radius:12px;
    margin-bottom:15px;

    box-shadow:0 8px 25px rgba(0,0,0,0.06);

    overflow:hidden;
}


.faq-question{

    width:100%;
    padding:22px 25px;

    border:none;
    background:none;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:18px;
    font-weight:600;
    color:#123456;

    cursor:pointer;
}


.faq-question span{

    font-size:28px;
    color:#0066cc;

}


.faq-answer{

    display:none;
    padding:0 25px 25px;

}


.faq-answer p{

    font-size:16px;
    line-height:1.7;
    color:#666;

    margin:0;

}


.faq-item.active .faq-answer{

    display:block;

}


.faq-item.active .faq-question span{

    transform:rotate(45deg);

}



/* Responsive */

@media(max-width:768px){

    .faq-section{
        padding:60px 15px;
    }


    .faq-header h2{
        font-size:30px;
    }


    .faq-question{

        font-size:16px;
        padding:18px;

    }


    .faq-answer{

        padding:0 18px 18px;

    }


    .faq-answer p{

        font-size:14px;

    }

}


/* ==========================================================================
   FINANCING ADVANTAGE BAND  (finance.html only)

   Replaces the tinted svc-value panel on the finance page with a split band:
   a staggered 2x2 card grid on one side and an oversized display heading on
   the other, sitting on a soft top-down tint that fades to white so the
   section below joins it seamlessly.

   Markup order is heading-then-grid so the stacked (tablet/mobile) layout
   leads with the heading; on desktop the two are re-ordered so the cards take
   the left half. Doing it with `order` rather than a reversed DOM keeps the
   reading order correct for screen readers and for no-CSS fallback.

   The svc-value-* rules above are untouched - insurance.html still uses them.
   Colours are the existing tokens: brand green #00984a, navy #204066,
   panel tint #EEF5F5.
   ========================================================================== */

.page-service-detail .svc-adv-section {
    background: #eef5f5;
    padding: 75px 0;
}

.page-service-detail .svc-adv-row {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    column-gap: 60px;
}

.page-service-detail .svc-adv-grid {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 20px;
}

.page-service-detail .svc-adv-intro {
    order: 2;
}

/* Display size rather than the shared .svc-section-title: at half width it has
   to hold its own against four cards, so it is set larger and tighter. Casing
   stays sentence case like every other heading on the site.

   36px is the size at which the heading still clears the column on one line -
   the 40px it was set at wrapped once the authored break came out. */
.page-service-detail .svc-adv-title {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.5px;
    color: var(--header);
    margin: 0;
}

/* Short brand rule under the heading. Decoration only - it gives the heading a
   base to sit on and ties the text column to the green running through the
   cards, which otherwise appears nowhere on this side of the band. */


/* Held short of the column width so the measure stays readable rather than
   running the full half-width of the band. */
.page-service-detail .svc-adv-text {
    font-size: 18px;
    line-height: 30px;
    color: var(--text);
    max-width: 700px;
    margin: 18px 0 0;
}

/* The offset that gives the grid its stepped look: the right-hand card of each
   row drops below the left one. Applied as margin rather than transform so the
   grid's own height grows with it and the row stays vertically centred. */
.page-service-detail .svc-adv-card:nth-child(even) {
    margin-top: 46px;
}

/* Resting shadow as well as the hairline: on a tinted band a bordered white box
   alone reads as flat, and the lift on hover has more to travel from. */
/* Navy cards on the pale band, with the copy reversed out in white. */
.page-service-detail .svc-adv-card {
    background: var(--theme-color-2);
    border: 2px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    padding: 26px 24px 28px;
    min-height: 250px;
    box-shadow: 0 10px 26px rgba(32, 64, 102, .16);
    transition: border-color .3s ease-in, transform .3s ease, box-shadow .3s ease;
}

/* Icon sits above the text on a solid green plate rather than bare, so it
   reads as a deliberate mark and stays the brightest thing on the navy card
   instead of dissolving into it. Fixed size keeps the headings across a row
   starting on the same baseline whatever glyph is used. */
.page-service-detail .svc-adv-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--theme-color);
    margin-bottom: 18px;
    transition: background-color .3s ease-in;
}

.page-service-detail .svc-adv-icon i {
    font-size: 26px;
    line-height: 1;
    color: var(--white);
    transition: color .3s ease-in;
}

/* Kept a clear step above the 18px body copy so the two still read as heading
   and text rather than as one block. */
.page-service-detail .svc-adv-card h3 {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 10px;
    transition: color .3s ease-in;
}

.page-service-detail .svc-adv-card p {
    font-size: 18px;
    line-height: 29px;
    color: rgba(255, 255, 255, .88);
    margin: 0;
    transition: color .3s ease-in;
}

/* The card is navy at rest now, so hover lifts it and picks out the green
   edge rather than inverting the colours. Guarded on hover-capable pointers
   so it cannot stick on after a tap, the way the untouched components in
   section 9 are. The border is 2px in both states, so the colour change
   costs no reflow. */
@media (hover: hover) {
    .page-service-detail .svc-adv-card:hover {
        border-color: var(--theme-color);
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgba(32, 64, 102, .28);
    }

    /* Body copy comes up to full white on hover. */
    .page-service-detail .svc-adv-card:hover p {
        color: var(--white);
    }
}


/* --- Financing advantage: responsive --------------------------------------- */

@media (max-width: 1199px) {
    .page-service-detail .svc-adv-row {
        column-gap: 40px;
    }

    /* Column narrows with the container, so the heading steps down with it to
       stay on one line. */
    .page-service-detail .svc-adv-title {
        font-size: 30px;
    }

    .page-service-detail .svc-adv-grid {
        gap: 16px;
    }

    .page-service-detail .svc-adv-card {
        padding: 24px 18px 26px;
        min-height: 240px;
    }

    .page-service-detail .svc-adv-card:nth-child(even) {
        margin-top: 34px;
    }
}

/* Tablet: the band stacks. The heading returns to the top (source order), the
   cards stay two across, and the step is dropped - offset rows only read as
   deliberate when there is a column of copy beside them to balance against. */
@media (max-width: 991px) {
    .page-service-detail .svc-adv-section {
        padding: 60px 0;
    }

    .page-service-detail .svc-adv-row {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }

    .page-service-detail .svc-adv-grid,
    .page-service-detail .svc-adv-intro {
        order: 0;
    }

    .page-service-detail .svc-adv-card:nth-child(even) {
        margin-top: 0;
    }

    /* Full width once the band stacks, so it can go back up a step. */
    .page-service-detail .svc-adv-title {
        font-size: 34px;
    }

    .page-service-detail .svc-adv-card {
        min-height: 0;
    }
}

/* Small tablet and down: two cards across cannot hold 18px copy at this width
   without dropping to about twenty characters a line, so the grid goes single
   column here rather than at the phone breakpoint. The body size is left at
   18px throughout - the column widens instead of the type shrinking. */
@media (max-width: 767px) {
    .page-service-detail .svc-adv-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .page-service-detail .svc-adv-title {
        font-size: 25px;
    }

    .page-service-detail .svc-adv-title::after {
        width: 48px;
        margin-top: 18px;
    }

    .page-service-detail .svc-adv-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .page-service-detail .svc-adv-icon i {
        font-size: 23px;
    }

    .page-service-detail .svc-adv-card h3 {
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .page-service-detail .svc-adv-section {
        padding: 50px 0;
    }

    .page-service-detail .svc-adv-row {
        row-gap: 26px;
    }

    .page-service-detail .svc-adv-title {
        font-size: 25px;
    }

    .page-service-detail .svc-adv-card {
        padding: 22px 18px 24px;
    }
}


/* ==========================================================================
   SUPPORT CAPABILITIES  (finance.html only)

   A different shape to the closing support block: centred header, the ten
   services as a flowing cluster of pills rather than a two-column checklist,
   and the closing line promoted to a full-width navy band.

   Pills rather than a fixed grid because the list is ten items of very uneven
   length - a 2 or 3 column grid leaves either a ragged last row or a lot of
   dead space beside the short labels. Letting them size to their own text and
   wrap keeps the block tight whatever gets added or removed later.

   The svc-support-* rules in section 6 are untouched - insurance.html still
   uses them.
   ========================================================================== */

.page-service-detail .svc-cap-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.page-service-detail .svc-cap-title {
    font-size: 36px;
    line-height: 1.3;
    color: var(--header);
    margin: 0 0 18px;
}

.page-service-detail .svc-cap-intro {
    margin: 0;
}

/* Centred cluster. justify-content:center means the short last row sits under
   the middle of the block instead of hanging off the left edge. */
.page-service-detail .svc-cap-list {
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.page-service-detail .svc-cap-list li {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--header);
    background: var(--white);
    border: 2px solid rgba(32, 64, 102, .12);
    border-radius: 50px;
    padding: 12px 24px 12px 14px;
    margin: 0;
    /* Floor for narrow screens: a pill wider than the container shrinks and
       wraps its own label instead of pushing the row off the side. */
    max-width: 100%;
    box-shadow: 0 4px 16px rgba(32, 64, 102, .05);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Tinted disc rather than a loose glyph: at pill size the icon sat oddly against
   the rounded edge, and the disc gives the left end a stop. Sized for the
   detailed marks (microscope, x-ray) rather than the plain tick it replaced -
   they need the extra couple of pixels to stay legible. */
.page-service-detail .svc-cap-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 152, 74, .10);
    flex-shrink: 0;
    transition: background-color .3s ease;
}

.page-service-detail .svc-cap-mark i {
    font-size: 16px;
    color: var(--theme-color);
    transition: color .3s ease;
}

@media (hover: hover) {
    .page-service-detail .svc-cap-list li:hover {
        border-color: var(--theme-color);
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(32, 64, 102, .12);
    }

    .page-service-detail .svc-cap-list li:hover .svc-cap-mark {
        background-color: var(--theme-color);
    }

    .page-service-detail .svc-cap-list li:hover .svc-cap-mark i {
        color: var(--white);
    }
}

/* The closing line is the one piece of copy here worth reading twice, so it
   stops being a trailing paragraph and becomes the block that ends the
   section. Navy picks up the card hover state from the band above. */
.page-service-detail .svc-cap-outro {
    background: var(--theme-color-2);
    color: var(--white);
    border-radius: 20px;
    padding: 36px 40px;
    margin: 0;
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
}


/* --- Support capabilities: responsive -------------------------------------- */

@media (max-width: 991px) {
    .page-service-detail .svc-cap-head {
        margin-bottom: 34px;
    }

    .page-service-detail .svc-cap-title {
        font-size: 30px;
    }

    .page-service-detail .svc-cap-list {
        margin-bottom: 40px;
        gap: 12px;
    }

    .page-service-detail .svc-cap-outro {
        padding: 30px 32px;
        font-size: 21px;
    }
}

@media (max-width: 767px) {
    .page-service-detail .svc-cap-title {
        font-size: 25px;
    }

    .page-service-detail .svc-cap-list li {
        font-size: 16px;
        gap: 10px;
        padding: 10px 18px 10px 12px;
    }

    .page-service-detail .svc-cap-mark {
        width: 30px;
        height: 30px;
    }

    .page-service-detail .svc-cap-mark i {
        font-size: 15px;
    }

    .page-service-detail .svc-cap-outro {
        padding: 26px 24px;
        font-size: 19px;
    }
}

/* Phone keeps the desktop shape: the pills stay auto-width, rounded and centred
   rather than stacking into full-width rows. Only the gap tightens. A label too
   long for the line wraps inside its own pill, which the centred flex alignment
   handles without the pill losing its shape. */
@media (max-width: 575px) {
    .page-service-detail .svc-cap-list {
        gap: 10px;
    }

    .page-service-detail .svc-cap-outro {
        padding: 24px 20px;
        font-size: 18px;
        border-radius: 16px;
    }
}


/* ==========================================================================
   FINANCE SOLUTIONS  (finance.html only)

   Two groups, two layouts, picked from the shape of each content set:

     .svc-flow-list   Strategic - seven entries, purposes of four and five
                      lines. Full-width bands with a numeral panel down the
                      left and the term over its paragraph, so long copy gets
                      a wide measure instead of a narrow column.

     .svc-sol-list    Loans - nine entries, purposes of two and three lines.
                      Two-across cards with a tinted header bar, reading as a
                      menu of products rather than a document.

   Shared between them: the section tint and the group headings. Everything
   else is deliberately unalike - the two sit one above the other, and if they
   shared a treatment the page would read as one very long list.
   ========================================================================== */

.page-service-detail .svc-sol-section {
    background-color: var(--bg);
}

/* Loans sits on white. The two groups alternate ground, which separates them
   without either needing a divider drawn between them. */
.page-service-detail .svc-sol-section-light {
    background-color: var(--white);
}

.page-service-detail .svc-sol-group {
    margin-bottom: 70px;
}

.page-service-detail .svc-sol-group:last-child {
    margin-bottom: 0;
}

/* Matched to the other section headings on this page - .svc-section-title and
   .svc-cap-title are both 36px/1.3 with no tracking, and step 36 -> 30 -> 25.
   Only the margin differs, because this one carries a rule beneath it. */
/* Margin absorbs the 24px the rule under this heading used to occupy, so the
   gap down to the cards is unchanged now that it is gone. */
.page-service-detail .svc-sol-title {
    font-size: 36px;
    line-height: 1.3;
    text-align: center;
    color: var(--header);
    margin: 0 0 16px;
}

/* The 40px that used to sit under the heading now sits under this instead, so
   the gap down to the cards is unchanged. Capped at 720px so the two lines
   break near-evenly - centred copy over the full container would set one long
   line and one short one. */
.page-service-detail .svc-sol-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: var(--text);
}


/* --- Layout one: numbered bands (strategic) -------------------------------- */

/* Two across, with an oversized index numeral set as a watermark behind each
   entry. Seven items fall as 2 + 2 + 2 + 1.

   Kept clearly apart from the loans grid below: that one is three across with
   a tinted header bar and its icon inline; this is two across, no bar, icon
   stacked above the term, and the numeral doing the decorative work. */
.page-service-detail .svc-flow-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Seven entries fall as 3 + 3 + 1, so the last card is placed in the middle
   column rather than left where the grid would otherwise drop it. Explicit
   column placement, not centring: the card keeps a column's exact width, so it
   lines up with the two above it instead of floating at some other size. */
.page-service-detail .svc-flow-row:last-child {
    grid-column: 2;
}

/* overflow:hidden clips the watermark to the card, so the numeral bleeds off
   the top-right corner instead of overhanging into the gutter. */
.page-service-detail .svc-flow-row {
    position: relative;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(32, 64, 102, .09);
    border-radius: 16px;
    padding: 28px 26px 30px;
    box-shadow: 0 8px 26px rgba(32, 64, 102, .07);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Small corner index rather than a large watermark bleeding off the edge. At
   this size it sits inside the padding, level with the icon plate opposite,
   and takes a little more opacity to register - 9% read as a smudge once the
   numeral stopped being large. Out of flow, so it costs the text no space. */
.page-service-detail .svc-flow-num {
    position: absolute;
    top: 30px;
    right: 26px;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1px;
    color: rgba(0, 152, 74, .20);
    pointer-events: none;
    transition: color .3s ease;
}

/* Relative so the text sits over the watermark rather than under it. */
.page-service-detail .svc-flow-body {
    position: relative;
}

/* Block, not flex: the icon is a child of the heading, and letting it break to
   its own line stacks it above the term without needing its own wrapper. */
.page-service-detail .svc-flow-term {
    display: block;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--theme-color-2);
    margin: 0 0 12px;
    transition: color .3s ease;
}

/* Same plate as .svc-adv-icon in section 3: 56px, 16px radius, brand green at
   10%, filling solid on hover. One icon treatment across the page. */
.page-service-detail .svc-flow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(0, 152, 74, .10);
    margin-bottom: 18px;
    transition: background-color .3s ease;
}

.page-service-detail .svc-flow-icon i {
    font-size: 26px;
    line-height: 1;
    color: var(--theme-color);
    transition: color .3s ease;
}

.page-service-detail .svc-flow-row p {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
    color: var(--text);
}

@media (hover: hover) {
    .page-service-detail .svc-flow-row:hover {
        transform: translateY(-4px);
        border-color: var(--theme-color);
        box-shadow: 0 18px 38px rgba(32, 64, 102, .12);
    }

    /* Watermark comes up as the card lifts - the only thing that moves besides
       the card itself, so the eye follows it. */
    .page-service-detail .svc-flow-row:hover .svc-flow-num {
        color: rgba(0, 152, 74, .45);
    }

    .page-service-detail .svc-flow-row:hover .svc-flow-icon {
        background-color: var(--theme-color);
    }

    .page-service-detail .svc-flow-row:hover .svc-flow-icon i {
        color: var(--white);
    }

    .page-service-detail .svc-flow-row:hover .svc-flow-term {
        color: var(--theme-color);
    }
}


/* --- Layout two: centred tiles (loans) ------------------------------------- */

/* Three across - nine entries fall as a clean 3x3. */
.page-service-detail .svc-sol-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Tinted fill on a white section, the exact inverse of the strategic cards -
   white cards on a tinted section. That inversion is what separates the two
   groups; the header bar these carried before is gone, and the anatomy is
   centred rather than left-aligned, so nothing about them repeats the grid
   above.

   Column flow plus the grid's default stretch, so all three cards in a row end
   level however uneven their paragraphs are. */
.page-service-detail .svc-sol-row {
    display: flex;
    flex-direction: column;
    background: rgba(0, 152, 74, .04);
    border: 1px solid rgba(0, 152, 74, .16);
    border-radius: 16px;
    transition: background-color .3s ease, border-color .3s ease,
                box-shadow .3s ease, transform .3s ease;
}

/* No longer a bar: a centred column holding the disc above the term. */
.page-service-detail .svc-sol-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 34px 24px 0;
}

/* Same plate as .svc-adv-icon in section 3: 56px, 16px radius, brand green at
   10%, filling solid on hover. One icon treatment across the page. */
.page-service-detail .svc-sol-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(0, 152, 74, .10);
    transition: background-color .3s ease;
}

.page-service-detail .svc-sol-icon i {
    font-size: 26px;
    line-height: 1;
    color: var(--theme-color);
    transition: color .3s ease;
}

.page-service-detail .svc-sol-term {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    color: var(--theme-color-2);
    margin: 0;
    transition: color .3s ease;
}

.page-service-detail .svc-sol-row p {
    margin: 0;
    padding: 14px 24px 32px;
    font-size: 18px;
    line-height: 29px;
    text-align: center;
    color: var(--text);
}

/* Tile lifts off its tint onto white as the disc fills - the fill and the
   ground trade places, so the hovered card reads as raised rather than just
   outlined. */
@media (hover: hover) {
    .page-service-detail .svc-sol-row:hover {
        transform: translateY(-4px);
        background-color: var(--white);
        border-color: var(--theme-color);
        box-shadow: 0 16px 34px rgba(32, 64, 102, .13);
    }

    .page-service-detail .svc-sol-row:hover .svc-sol-icon {
        background-color: var(--theme-color);
    }

    .page-service-detail .svc-sol-row:hover .svc-sol-icon i {
        color: var(--white);
    }

    .page-service-detail .svc-sol-row:hover .svc-sol-term {
        color: var(--theme-color);
    }
}


/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1199px) {
    .page-service-detail .svc-sol-intro {
        margin-bottom: 36px;
    }

    /* Both grids go two across. Three columns inside a 960px container leaves
       about 290px a card, which at 18px is roughly twenty-four characters a
       line. */
    .page-service-detail .svc-flow-list,
    .page-service-detail .svc-sol-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    /* Seven entries now fall as 2 + 2 + 2 + 1. The odd one spans both columns
       and is capped to a single column's width, which centres it - the
       grid-column:2 trick above only holds for a three-column track. */
    .page-service-detail .svc-flow-row:last-child,
    .page-service-detail .svc-sol-row:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 9px);
    }

    .page-service-detail .svc-flow-row {
        padding: 28px 26px 30px;
    }

    .page-service-detail .svc-flow-num {
        font-size: 32px;
    }
}

/* Tablet keeps both grids two across. The 720px container gives about 350px a
   card, which at 18px is roughly twenty-seven characters a line - tight but
   readable, and it keeps the section from becoming one very long column.

   The two-column placement for the strategic group's odd seventh card carries
   down from the 1199 block above; only the gap changes here. */
@media (max-width: 991px) {
    .page-service-detail .svc-sol-title {
        font-size: 30px;
    }

    .page-service-detail .svc-sol-intro {
        margin-bottom: 32px;
    }

    .page-service-detail .svc-flow-list,
    .page-service-detail .svc-sol-list {
        gap: 16px;
    }

    /* Tracks the gap change above, so the centred last card still matches a
       column's width exactly. */
    .page-service-detail .svc-flow-row:last-child,
    .page-service-detail .svc-sol-row:last-child {
        width: calc(50% - 8px);
    }
}

/* Phone: one across. Two columns below 768px leaves about 250px a card, where
   these paragraphs run to seven and eight lines. */
@media (max-width: 767px) {
    .page-service-detail .svc-flow-list,
    .page-service-detail .svc-sol-list {
        grid-template-columns: 1fr;
    }

    /* Single column - nothing left to centre against. */
    .page-service-detail .svc-flow-row:last-child,
    .page-service-detail .svc-sol-row:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
    .page-service-detail .svc-sol-title {
        font-size: 25px;
    }

    .page-service-detail .svc-sol-intro {
        font-size: 17px;
        line-height: 29px;
    }

    .page-service-detail .svc-flow-row {
        padding: 26px 22px 28px;
    }

    .page-service-detail .svc-flow-num {
        top: 28px;
        right: 22px;
        font-size: 30px;
    }

    /* Steps with .svc-adv-icon: 50px / 14px radius / 23px glyph. */
    .page-service-detail .svc-flow-icon,
    .page-service-detail .svc-sol-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .page-service-detail .svc-flow-icon {
        margin-bottom: 14px;
    }

    .page-service-detail .svc-flow-icon i,
    .page-service-detail .svc-sol-icon i {
        font-size: 23px;
    }

    .page-service-detail .svc-flow-term {
        font-size: 20px;
    }

    .page-service-detail .svc-sol-term {
        font-size: 20px;
    }

    .page-service-detail .svc-sol-head {
        gap: 16px;
        padding: 30px 22px 0;
    }


    .page-service-detail .svc-sol-row p {
        padding: 13px 22px 28px;
    }
}

@media (max-width: 575px) {
    .page-service-detail .svc-sol-intro {
        margin-bottom: 28px;
        font-size: 16px;
        line-height: 27px;
    }

    .page-service-detail .svc-flow-row {
        padding: 24px 18px 26px;
    }

    .page-service-detail .svc-flow-num {
        top: 26px;
        right: 18px;
        font-size: 28px;
    }

    .page-service-detail .svc-flow-term {
        font-size: 19px;
    }

    .page-service-detail .svc-sol-term {
        font-size: 19px;
    }

    .page-service-detail .svc-sol-head {
        gap: 15px;
        padding: 28px 20px 0;
    }


    .page-service-detail .svc-sol-row p {
        padding: 12px 20px 26px;
    }
}

/* ==========================================================================
   Page-Specific Tweaks: Finance Page Layout (Smart Healthcare Financing Solutions Section)
   ========================================================================== */

/* Section background gradient and decorative glowing circles */
/* overflow:clip, not hidden. Both clip the decorative circles below, but
   `hidden` makes this box a scroll container, which stops the sticky form
   rail inside it from ever sticking. `clip` does not. (body already sets
   overflow-x:hidden, so browsers too old for `clip` cannot scroll sideways
   even if a circle leaks.) */
.page-service-detail.page-finance .svc-intro-section {
    background: #ffffff;
    position: relative;
    overflow: clip;
}

.page-service-detail.page-finance .svc-intro-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 152, 74, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    top: -100px;
    left: -100px;
    pointer-events: none;
}

.page-service-detail.page-finance .svc-intro-section::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 152, 74, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
    bottom: -150px;
    right: -150px;
    pointer-events: none;
}

/* Section Title styling */
.page-service-detail.page-finance .svc-section-title {
    font-size: 42px;
    font-weight: 500;
    color: var(--header);
    line-height: 1.25;
    margin-bottom: 20px;
}

/* The intro heading now sits in a column beside the enquiry rail, so it runs
   smaller than the full-width headings further down the page (FAQs, Blogs),
   which keep the 42px above. */
.page-service-detail.page-finance .fin-intro-copy .svc-section-title {
    font-size: 36px;
}

/* Lead text style */
.page-service-detail.page-finance .svc-lead {
    font-size: 20px;
    line-height: 32px;
    color: var(--header);
    font-weight: 600;
    margin-bottom: 28px;
    border-left: 4px solid var(--theme-color);
    padding-left: 20px;
}

/* Left / right split: copy and the two points down the left, the enquiry
   card in a fixed rail on the right that sticks while the left scrolls. */
.page-service-detail.page-finance .fin-intro-split {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 50px;
    align-items: start;
}

.page-service-detail.page-finance .fin-intro-copy .svc-lead {
    margin-top: 24px;
}

/* Feature cards container and single card */
.page-service-detail.page-finance .svc-feature-cards {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* The section behind these is plain white now, so a white card with a 6%
   border disappeared into it. Tinted fill, a border you can actually see and
   a green edge picking up the lead paragraph's rule above. */
.page-service-detail.page-finance .svc-feature-card {
    display: flex;
    gap: 20px;
    background: #f4faf7;
    border: 1px solid rgba(0, 152, 74, 0.16);
    border-left: 4px solid var(--theme-color);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(32, 64, 102, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lifts off to white on hover - the inverse of its resting state. */
.page-service-detail.page-finance .svc-feature-card:hover {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: rgba(0, 152, 74, 0.24);
    border-left-color: var(--theme-color);
    box-shadow: 0 20px 40px rgba(32, 64, 102, 0.12);
}

.page-service-detail.page-finance .svc-feature-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    /* White, not a green tint - an 8% green plate sat too close to the card's
       own tint to read. Flips to solid green on hover, where the card is
       white. */
    background-color: #ffffff;
    color: var(--theme-color);
    box-shadow: 0 4px 12px rgba(32, 64, 102, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
}

.page-service-detail.page-finance .svc-feature-card:hover .svc-feature-icon {
    background-color: var(--theme-color);
    color: #ffffff;
    transform: scale(1.05);
}

.page-service-detail.page-finance .svc-feature-text p {
    font-size: 16px;
    line-height: 26px;
    color: #4b5563;
}

/* Enquiry rail. The card is not wrapped in .svc-form-holder, so the
   absolute-positioned height-matching in block 1 does not apply - the card
   sizes itself and sticks instead, which cannot overhang the section. */
.page-service-detail.page-finance .fin-form-wrap {
    position: sticky;
    top: 120px;
}

/* The card itself is left to the shared .svc-form-card styling in block 1,
   so this form matches the one on the insurance page exactly - same border,
   radius, shadow, field treatment and button. Only the padding is set here,
   to the same value the insurance rail uses. */
.page-service-detail.page-finance .fin-form-wrap .svc-form-card {
    padding: 38px 32px 34px;
}


/* Responsive adjustment for section layout */
@media (max-width: 1199px) {
    /* Narrower rail so the copy column keeps a readable measure. */
    .page-service-detail.page-finance .fin-intro-split {
        grid-template-columns: 1fr 360px;
        gap: 40px;
    }

    .page-service-detail.page-finance .svc-feature-card {
        padding: 26px 24px;
    }
}

@media (max-width: 767px) {
    .page-service-detail.page-finance .svc-section-title {
        font-size: 32px;
    }
    /* Scoped rule above wins on specificity, so step it down explicitly. */
    .page-service-detail.page-finance .fin-intro-copy .svc-section-title {
        font-size: 25px !important;
    }}

@media (max-width: 991px) {
    .page-service-detail.page-finance .svc-section-title {
        font-size: 32px;
    }
    /* Scoped rule above wins on specificity, so step it down explicitly. */
    .page-service-detail.page-finance .fin-intro-copy .svc-section-title {
        font-size: 30px;
    }
    .page-service-detail.page-finance .svc-lead {
        font-size: 18px;
        line-height: 30px;
    }

    /* Split collapses: the card drops below the copy and stops sticking,
       since there is nothing left to scroll past it. */
    .page-service-detail.page-finance .fin-intro-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-service-detail.page-finance .fin-form-wrap {
        position: static;
        top: auto;
        max-width: 620px;
    }

    .page-service-detail.page-finance .fin-form-wrap .svc-form-card {
        padding: 36px 30px 34px;
    }
}

@media (max-width: 575px) {
    /* Same tightening the insurance rail uses at this width. */
    .page-service-detail.page-finance .fin-form-wrap .svc-form-card {
        padding: 30px 20px 28px;
    }
}

/* Image styling for Our Financing Advantage section */
.page-service-detail.page-finance .svc-adv-img img {
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 100%;
    height: 350px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.page-service-detail.page-finance .svc-adv-img img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 45px rgba(0, 152, 74, 0.08);
}

/* Center the last card on 3-column desktop layout */
@media (min-width: 1200px) {
    .page-service-detail.page-finance .svc-sol-list .svc-sol-row:last-child {
        grid-column: 2;
    }
}

/* Reset the last card centering on 2-column tablet/laptop layout (since 10 cards fit a 2-column grid perfectly) */
@media (max-width: 1199px) {
    .page-service-detail.page-finance .svc-sol-list .svc-sol-row:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}


/* ==========================================================================
   FINANCE PARTNER PROFILE  (finance.html only)

   Full-bleed navy hero band. The profile copy is reversed out and held to the
   left of the container; the portrait is taken out of the text flow and pinned
   to the bottom-right of the band so it runs off the right edge of the
   viewport rather than sitting in a frame.

   The photo is a studio shot on a grey backdrop, not a cut-out, so its left
   and top edges are faded into the navy with a gradient overlay - without that
   it reads as a rectangle pasted onto the band. The rgba() stops below are
   #204066 (--theme-color-2) written out, since rgba() cannot take a custom
   property holding a hex.

   Below 992px the portrait returns to normal flow above the copy and the
   overlay is dropped.
   ========================================================================== */

.page-service-detail.page-finance .fin-partner-band {
    position: relative;
    overflow: hidden;
    background: var(--theme-color-2);
    padding: 64px 0 68px;
}

/* Held clear of the portrait so no line of text ever runs under it.

   The column is capped and laid out as a flex stack: the name block keeps its
   natural height and everything below it - the biography and the core focus -
   takes what is left and scrolls. That fixes the band's height regardless of
   how long the profile runs, without shortening any of the copy. */
.page-service-detail.page-finance .fin-partner-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-width: 58%;
    height: 560px;
}

/* The name stays put as the band's anchor; everything below it scrolls. */
.page-service-detail.page-finance .fin-partner-head {
    flex: 0 0 auto;
}


/* --- Portrait ---------------------------------------------------------- */

/* Sized by height rather than width now that the band is short: the image is
   scaled to the band and its width follows, so it still fills the band edge to
   edge without ever being cropped. */
.page-service-detail.page-finance .fin-partner-figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: auto;
}

.page-service-detail.page-finance .fin-partner-figure img {
    display: block;
    width: auto;
    height: 100%;
}

/* Dissolves the left edge of the photo into the navy so it meets the copy
   without a seam. The last stop settles at .14 rather than reaching zero on
   purpose: the studio backdrop is grey right across the frame, so a fade that
   ran out would leave a visible vertical edge partway over the image. Holding
   a light tint to the far side pulls the whole backdrop into the navy family
   instead, and is weak enough not to muddy the subject.

   No top or bottom fade is needed - the image spans the full height of the
   band, so those edges are the band's own edges. */
.page-service-detail.page-finance .fin-partner-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(32, 64, 102, .96) 0%,
        rgba(32, 64, 102, .60) 8%,
        rgba(32, 64, 102, .24) 19%,
        rgba(32, 64, 102, .09) 33%,
        rgba(32, 64, 102, .05) 100%);
}


/* --- Name block -------------------------------------------------------- */

/* Sized so the fixed block stays around 205px and leaves the bulk of the
   column to the scroll region. */
.page-service-detail.page-finance .fin-partner-head {
    margin-bottom: 24px;
}

/* Kicker above the name: labels who this person is to the business before the
   name lands. Set as a pill rather than plain text so it reads as a label and
   not as a first line of copy running into the masthead. */
.page-service-detail.page-finance .fin-partner-eyebrow {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--theme-color);
    background: rgba(0, 152, 74, .14);
    border: 1px solid rgba(0, 152, 74, .38);
    border-radius: 999px;
    padding: 9px 17px;
    margin: 0 0 18px;
}

/* Display size rather than the shared .svc-section-title: this is the band's
   masthead and has to carry a full-bleed navy field. */
.page-service-detail.page-finance .fin-partner-name {
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--white);
    margin: 0;
}

/* Short brand rule between the name and the role - the only green on this
   side of the band apart from the quote bar. */
.page-service-detail.page-finance .fin-partner-name::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--theme-color);
    margin: 16px 0 14px;
}

.page-service-detail.page-finance .fin-partner-role {
    font-size: 18px;
    line-height: 29px;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}


/* --- Profile prose ----------------------------------------------------- */

/* Takes whatever height the name block leaves. min-height:0 is what lets a
   flex item actually shrink below its content height - without it the item
   stays as tall as the prose and nothing scrolls. */
.page-service-detail.page-finance .fin-partner-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 26px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--theme-color) rgba(255, 255, 255, .14);
}

/* Fade at the foot of the scroll region, so it reads as more-below rather than
   as a paragraph cut off. The scroll region runs to the bottom of the column,
   so this sits on the column itself rather than needing a wrapper. Held clear
   of the scrollbar gutter and click-through so it cannot swallow a drag on
   the bar. */
.page-service-detail.page-finance .fin-partner-copy::after {
    content: "";
    position: absolute;
    left: 0;
    right: 26px;
    bottom: 0;
    height: 56px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(32, 64, 102, 0) 0%,
        rgba(32, 64, 102, .92) 70%,
        #204066 100%);
}

.page-service-detail.page-finance .fin-partner-body::-webkit-scrollbar {
    width: 6px;
}

.page-service-detail.page-finance .fin-partner-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .14);
    border-radius: 3px;
}

.page-service-detail.page-finance .fin-partner-body::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 3px;
}

/* Last block clears the fade, so its final line is never sitting under the
   gradient when the reader hits the bottom. */
.page-service-detail.page-finance .fin-partner-body > :last-child {
    padding-bottom: 38px;
}

/* Direct children only. The core focus block now sits inside this scroll
   container, so an unscoped `.fin-partner-body p` would reach into the quote
   and the vision paragraph and overrule their own sizes. */
.page-service-detail.page-finance .fin-partner-body > p {
    font-size: 18px;
    line-height: 32px;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 22px;
}

/* Opening paragraph is set a step larger so the band has a lead, the way the
   other sections on this page open under their headings. */
.page-service-detail.page-finance .fin-partner-body > p:first-child {
    font-size: 20px;
    line-height: 34px;
    color: rgba(255, 255, 255, .92);
}

/* The emphasised runs are institution names, credentials and product lists -
   full white lifts them out of the reversed body copy. */
.page-service-detail.page-finance .fin-partner-body strong,
.page-service-detail.page-finance .fin-partner-vision strong {
    font-weight: 700;
    color: var(--white);
}


/* --- Core focus -------------------------------------------------------- */

/* No panel here: the band is already navy, so a second navy box would only
   add an edge. The green rule down the leading edge is what marks the block
   as quoted. */
.page-service-detail.page-finance .fin-partner-focus {
    margin-top: 34px;
    padding-left: 24px;
    border-left: 4px solid var(--theme-color);
}

.page-service-detail.page-finance .fin-partner-focus-title {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0 0 14px;
}

.page-service-detail.page-finance .fin-partner-quote {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.page-service-detail.page-finance .fin-partner-quote p {
    font-size: 26px;
    line-height: 40px;
    font-weight: 500;
    font-style: italic;
    color: var(--white);
    margin: 0;
}

.page-service-detail.page-finance .fin-partner-vision {
    font-size: 18px;
    line-height: 32px;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}


/* --- Finance partner: responsive --------------------------------------- */

/* The container stops growing at 1320px while the viewport keeps going, so
   past that the gap between the copy and the photo opens up on its own. Below
   it the copy has to give ground instead. */
/* The container stops growing at 1320px while the viewport keeps going, so
   past that the gap between the copy and the photo opens up on its own. Below
   it the copy has to give ground instead. */
@media (max-width: 1399px) {
    .page-service-detail.page-finance .fin-partner-copy {
        max-width: 60%;
    }

    .page-service-detail.page-finance .fin-partner-name {
        font-size: 35px;
    }

    .page-service-detail.page-finance .fin-partner-quote p {
        font-size: 24px;
        line-height: 37px;
    }
}

@media (max-width: 1199px) {
    .page-service-detail.page-finance .fin-partner-band {
        padding: 56px 0 60px;
    }

    /* Narrower column means the prose wraps to more lines, so the column is
       given a little more height to keep the scroll region readable. */
    .page-service-detail.page-finance .fin-partner-copy {
        max-width: 63%;
        height: 540px;
    }

    .page-service-detail.page-finance .fin-partner-name {
        font-size: 32px;
    }

    .page-service-detail.page-finance .fin-partner-role {
        font-size: 17px;
        line-height: 28px;
    }
}

/* Below the tablet breakpoint there is no room for a bleed. The portrait comes
   back into flow above the copy as a contained, rounded image and the fade is
   dropped with it - a gradient into navy makes no sense once the image no
   longer meets the copy.

   The inner scroll region goes with it. A scrolling panel inside a scrolling
   page traps touch drags, and on a phone the band is not competing for height
   the way it is on a wide screen - so the copy simply runs full length. */
@media (max-width: 991px) {
    .page-service-detail.page-finance .fin-partner-figure {
        position: static;
        width: 100%;
        max-width: 380px;
        margin: 0 auto 40px;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    }

    .page-service-detail.page-finance .fin-partner-figure img {
        width: 100%;
        height: auto;
    }

    .page-service-detail.page-finance .fin-partner-figure::after {
        display: none;
    }

    .page-service-detail.page-finance .fin-partner-copy {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .page-service-detail.page-finance .fin-partner-copy::after {
        display: none;
    }

    .page-service-detail.page-finance .fin-partner-body {
        overflow: visible;
        padding-right: 0;
    }

    .page-service-detail.page-finance .fin-partner-body > :last-child {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .page-service-detail.page-finance .fin-partner-band {
        padding: 60px 0 65px;
    }

    .page-service-detail.page-finance .fin-partner-figure {
        max-width: 300px;
        margin-bottom: 32px;
    }

    .page-service-detail.page-finance .fin-partner-eyebrow {
        font-size: 12px;
        letter-spacing: 1.1px;
        padding: 8px 14px;
        margin-bottom: 14px;
    }

    .page-service-detail.page-finance .fin-partner-name {
        font-size: 29px;
    }

    .page-service-detail.page-finance .fin-partner-name::after {
        margin: 16px 0 14px;
    }

    .page-service-detail.page-finance .fin-partner-role {
        font-size: 17px;
        line-height: 28px;
    }

    .page-service-detail.page-finance .fin-partner-body > p,
    .page-service-detail.page-finance .fin-partner-body > p:first-child,
    .page-service-detail.page-finance .fin-partner-vision {
        font-size: 17px;
        line-height: 30px;
    }

    .page-service-detail.page-finance .fin-partner-focus {
        margin-top: 36px;
        padding-left: 18px;
    }

    .page-service-detail.page-finance .fin-partner-focus-title {
        font-size: 21px;
    }

    .page-service-detail.page-finance .fin-partner-quote p {
        font-size: 22px;
        line-height: 34px;
    }
}