/* ==========================================================================
   Service Pro — Premium service page template
   Class prefix: sp-
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes sp-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ken-burns for slideshow */
@keyframes sp-kb-1 {
    from { transform: scale(1)    translate(0,    0);   }
    to   { transform: scale(1.12) translate(-2%, -1%);  }
}
@keyframes sp-kb-2 {
    from { transform: scale(1.08) translate(-2%,  1%);  }
    to   { transform: scale(1)    translate( 2%, -2%);  }
}
@keyframes sp-kb-3 {
    from { transform: scale(1)    translate( 2%, -1%);  }
    to   { transform: scale(1.1)  translate(-1%,  2%);  }
}


/* --------------------------------------------------------------------------
   Shared utilities
   -------------------------------------------------------------------------- */

.sp-wrap {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Section label — small green caps with dash  */
.sp-section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    margin-bottom: 0.75rem;
}

.sp-section-label--padded {
    padding-top: clamp(3rem, 5vw, 4.5rem);
}

/* Soft inline CTA — arrow link used at the end of text sections */
.sp-inline-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    text-decoration: none;
}

.sp-inline-cta svg {
    transition: transform 0.25s ease;
}

.sp-inline-cta:hover svg {
    transform: translateX(3px);
}

/* Overline in hero */
.sp-label-overline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    margin-bottom: 1rem;
    animation: sp-fadeUp 0.7s ease both;
    animation-delay: 0.1s;
}

/* --------------------------------------------------------------------------
   1. Hero — split layout: copy left, slideshow right
   -------------------------------------------------------------------------- */

.sp-hero {
    background: var(--sd-color-primary, #36452f); /* flat, matches nav */
    overflow: hidden;
    padding-top: calc(var(--sd-header-height-desktop, 88px) + 36px); /* clear nav + utility bar */
}

.sp-hero__inner {
    display: grid;
    grid-template-columns: 55% 45%;
}

/* Copy column */
.sp-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5rem);
}

.sp-hero__h1 {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 300;
    color: var(--sd-color-white);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 1.25rem;
    animation: sp-fadeUp 0.8s ease both;
    animation-delay: 0.25s;
}

.sp-hero__lead {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 2.5rem;
    animation: sp-fadeUp 0.8s ease both;
    animation-delay: 0.4s;
}

.sp-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    animation: sp-fadeUp 0.8s ease both;
    animation-delay: 0.55s;
}

/* Feefo rating badge */
.sp-hero__feefo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    text-decoration: none;
    color: inherit;
    animation: sp-fadeUp 0.8s ease both;
    animation-delay: 0.55s;
    transition: opacity 0.2s ease;
}

.sp-hero__feefo:hover {
    opacity: 0.75;
}

.sp-hero__feefo-stars {
    display: flex;
    gap: 1px;
    color: #f0b429;
}

.sp-hero__feefo-score {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.sp-hero__feefo-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

.sp-hero__feefo-logo {
    height: 18px;
    width: auto;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
    filter: brightness(0) invert(1);
}

.sp-hero__trust {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    animation: sp-fadeUp 0.8s ease both;
    animation-delay: 0.7s;
}

.sp-hero__trust-icon {
    width: 14px;
    height: 16px;
    color: var(--sd-color-cta);
    flex-shrink: 0;
}

/* Media column */
.sp-hero__media {
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

/* Slideshow container */
.sp-hero-media {
    position: absolute;
    inset: 0;
}

.sp-hero-slide {
    position: absolute;
    inset: 0;
    background-image: var(--slide-img);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: transform, opacity;
}

.sp-hero-slide--active {
    opacity: 1;
}

/* Slide counter / progress UI */
.sp-hero-media__ui {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    z-index: 2;
}

.sp-hero-media__counter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

.sp-hero-media__sep {
    opacity: 0.4;
}

.sp-hero-media__progress {
    width: 80px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    overflow: hidden;
}

.sp-hero-media__bar {
    height: 100%;
    width: 0;
    background-color: var(--sd-color-cta);
    border-radius: 1px;
}


/* --------------------------------------------------------------------------
   Trust bar — overlapping credential strip, matches homepage stats card
   -------------------------------------------------------------------------- */

.sp-trust-bar {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 6px;
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
    transform: translateY(-30%);
    margin-bottom: -1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.sp-trust-bar__inner {
    padding-inline: clamp(1.25rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.sp-trust-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-trust-bar__item:last-child {
    border-right: none;
}

.sp-trust-bar__num {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
}

.sp-trust-bar__value {
    color: #ffffff;
}

.sp-trust-bar__suffix {
    color: var(--sd-color-cta, #5f7d3a);
    font-weight: 500;
    font-size: 0.6em;
    margin-left: 2px;
}

.sp-trust-bar__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Shared button system
   -------------------------------------------------------------------------- */

.sp-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 2rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--sd-radius-base);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sd-transition-base),
                border-color var(--sd-transition-base),
                transform var(--sd-transition-base);
    white-space: nowrap;
    border: 2px solid transparent;
    line-height: 1;
}

.sp-btn:hover {
    transform: translateY(-1px);
}

.sp-btn--primary {
    background-color: var(--sd-color-cta);
    color: var(--sd-color-white);
    border-color: var(--sd-color-cta);
}

.sp-btn--primary:hover {
    background-color: var(--sd-color-cta-strong, #4f6b30);
    border-color: var(--sd-color-cta-strong, #4f6b30);
    color: var(--sd-color-white);
}

.sp-btn--outline {
    background-color: transparent;
    color: var(--sd-color-white);
    border-color: rgba(255, 255, 255, 0.65);
}

.sp-btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--sd-color-white);
    color: var(--sd-color-white);
}

.sp-btn--outline-dark {
    background-color: transparent;
    color: var(--sd-color-primary);
    border-color: rgba(54, 69, 47, 0.4);
}

.sp-btn--outline-dark:hover {
    background-color: rgba(54, 69, 47, 0.06);
    border-color: var(--sd-color-primary);
    color: var(--sd-color-primary);
}

.sp-btn--green {
    background-color: var(--sd-color-primary);
    color: var(--sd-color-white);
    border-color: var(--sd-color-primary);
}

.sp-btn--green:hover {
    background-color: var(--sd-color-primary-light);
    border-color: var(--sd-color-primary-light);
    color: var(--sd-color-white);
}

.sp-btn--white {
    background-color: var(--sd-color-white);
    color: var(--sd-color-primary-dark);
    border-color: var(--sd-color-white);
}

.sp-btn--white:hover {
    background-color: var(--sd-color-gray-100);
    border-color: var(--sd-color-gray-100);
    color: var(--sd-color-primary-dark);
}

.sp-btn--outline-white {
    background-color: transparent;
    color: var(--sd-color-white);
    border-color: rgba(255, 255, 255, 0.65);
}

.sp-btn--outline-white:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--sd-color-white);
    color: var(--sd-color-white);
}


/* --------------------------------------------------------------------------
   1b. Intro section — text-only by default, two-column when image set
   -------------------------------------------------------------------------- */

.sp-intro {
    background-color: var(--sd-color-white);
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
    overflow: hidden;
}

.sp-intro__inner {
    max-width: 1200px;
    margin-inline: auto;
}

.sp-intro__overline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    margin-bottom: 1rem;
}

.sp-intro__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 400;
    color: var(--sd-color-primary);
    line-height: 1.2;
    letter-spacing: -0.022em;
    margin: 0 0 1.25rem;
}

.sp-intro__body {
    font-size: clamp(1rem, 1.3vw, 1.0625rem);
    line-height: 1.75;
    color: var(--sd-color-text-light);
}

.sp-intro__body p {
    margin: 0 0 1em;
}

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

.sp-intro__btn {
    margin-top: 1.5rem;
}

/* ── Two-column variant (image set) ──────────────────────────────────────── */
.sp-intro--with-image .sp-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.sp-intro--image-right .sp-intro__inner {
    grid-template-areas: 'text image';
}

.sp-intro--image-left .sp-intro__inner {
    grid-template-areas: 'image text';
}

.sp-intro--with-image .sp-intro__text {
    grid-area: text;
}

.sp-intro--with-image .sp-intro__image-col {
    grid-area: image;
}

.sp-intro__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
}


/* --------------------------------------------------------------------------
   2. Why section — white, editorial two-column + claim cards
   -------------------------------------------------------------------------- */

.sp-why {
    background-color: var(--sd-color-white);
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-why__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
}

.sp-why__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}

.sp-why__body {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.85;
    color: var(--sd-color-gray-700, #404040);
}

.sp-why__body p {
    margin-bottom: 1.25em;
}

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

.sp-why__copy .sp-inline-cta {
    margin-top: 1.75rem;
}

/* Credentials column — clean hairline-divided list, no fills */
.sp-why__claims {
    display: flex;
    flex-direction: column;
    padding-top: 0.6rem; /* nudge to sit under the heading baseline */
}

.sp-claim-card {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    column-gap: 1rem;
    align-items: baseline;
    padding: 1.35rem 0;
    border-top: 1px solid var(--sd-color-gray-200, #e8e8e2);
}

.sp-claim-card:first-child {
    border-top: none;
    padding-top: 0;
}

.sp-claim-card:last-child {
    padding-bottom: 0;
}

.sp-claim-card__num {
    font-family: var(--sd-font-family-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sd-color-cta);
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

.sp-claim-card__body {
    flex: 1;
}

.sp-claim-card__title {
    display: block;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-primary-dark);
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.sp-claim-card__body p {
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--sd-color-gray-600, #6b6b66);
    margin: 0;
}


/* --------------------------------------------------------------------------
   3. Benefits grid — sand, 3-col icon cards
   -------------------------------------------------------------------------- */

.sp-benefits {
    background-color: #f4f7f1;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-benefits__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
}

.sp-benefits__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
}

/* When a body paragraph follows, tighten the heading → body gap */
.sp-benefits__heading:has(+ .sp-benefits__body) {
    margin-bottom: 1.25rem;
}

.sp-benefits__body {
    max-width: 680px;
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
    font-size: clamp(1rem, 1.2vw, 1.0625rem);
    line-height: 1.7;
    color: var(--sd-color-text-light);
}

.sp-benefits__body p {
    margin: 0 0 1em;
}

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

.sp-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.sp-benefit-card {
    background-color: var(--sd-color-white);
    border-radius: 4px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.sp-benefit-card__icon {
    width: 40px;
    height: 40px;
    color: var(--sd-color-primary);
    margin-bottom: 0.25rem;
}

.sp-benefit-card__icon svg {
    width: 100%;
    height: 100%;
}

.sp-benefit-card__title {
    font-family: var(--sd-font-family-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sd-color-primary-dark);
    margin: 0;
}

.sp-benefit-card__text {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--sd-color-gray-700, #404040);
    margin: 0;
}

/* ── Image variant: image replaces icon at top of card ──────────────────── */
.sp-benefit-card--has-image {
    padding: 0;
    overflow: hidden;
    gap: 0;
}

.sp-benefit-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.sp-benefit-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-benefit-card--has-image:hover .sp-benefit-card__img {
    transform: scale(1.04);
}

/* Photographer credit over the image corner (sp_benefit_image_credit). */
.sp-benefit-card__img-wrap {
    position: relative;
}

.sp-benefit-card__credit {
    position: absolute;
    left: 0.625rem;
    bottom: 0.625rem;
    z-index: 1;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(20, 28, 16, 0.62);
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    pointer-events: none;
}

.sp-benefit-card--has-image .sp-benefit-card__title {
    padding: 1.25rem 1.75rem 0;
}

.sp-benefit-card--has-image .sp-benefit-card__text {
    padding: 0.5rem 1.75rem 1.75rem;
}

/* ── Benefits: "index" preset — hover list with photo stage ──
   sp_benefits_style = index. Desktop: titles on the left, the photography
   stage answers on the right. Mobile: the stage hides and each row shows its
   own body + thumbnail. */

.sp-bx {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.sp-bx__list {
    border-top: 1px solid rgba(28, 28, 25, 0.1);
}

.sp-bx__item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(28, 28, 25, 0.1);
    border-radius: 0;
    padding: 1.125rem 0.5rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color 0.2s ease;
}

.sp-bx__item:focus-visible {
    outline: 2px solid var(--sd-color-cta, #5f7d3a);
    outline-offset: -2px;
}

.sp-bx__title {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    /* !important needed: typography.css bolds ALL headings with !important */
    font-weight: 300 !important;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    color: var(--sd-color-text-light, #525252);
    transition: color 0.2s ease, transform 0.25s ease;
}

.sp-bx__item.is-active {
    background: rgba(95, 125, 58, 0.055);
}

.sp-bx__item.is-active .sp-bx__title {
    color: var(--sd-color-text, #171717);
    transform: translateX(6px);
}

.sp-bx__item .sp-bx__body,
.sp-bx__item .sp-bx__thumb {
    display: none;
}

.sp-bx__stage {
    position: sticky;
    top: 2rem;
}

.sp-bx__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 32px 64px -36px rgba(42, 54, 36, 0.45);
}

.sp-bx__photo span {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.sp-bx__photo span.is-active {
    opacity: 1;
}

.sp-bx__copy {
    margin: 1.25rem 0 0;
    color: var(--sd-color-text-light, #525252);
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    line-height: 1.7;
    min-height: 5.2em;
}

.sp-bx__copy strong {
    display: block;
    color: var(--sd-color-text, #171717);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.sp-bx__copy p {
    margin: 0;
}

@media (max-width: 900px) {
    .sp-bx {
        grid-template-columns: 1fr;
    }

    .sp-bx__stage {
        display: none;
    }

    .sp-bx__item {
        display: grid;
        grid-template-columns: 1fr 108px;
        gap: 0.375rem 1rem;
        align-items: center;
        cursor: default;
    }

    .sp-bx__title {
        color: var(--sd-color-text, #171717);
    }

    .sp-bx__item.is-active {
        background: none;
    }

    .sp-bx__item.is-active .sp-bx__title {
        transform: none;
    }

    .sp-bx__item .sp-bx__body {
        display: block;
        grid-column: 1;
        color: var(--sd-color-text-light, #525252);
        font-size: 0.875rem;
        line-height: 1.6;
    }

    .sp-bx__item .sp-bx__body p {
        margin: 0;
    }

    .sp-bx__item .sp-bx__thumb {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 108px;
        height: 84px;
        border-radius: 6px;
        background-size: cover;
        background-position: center;
    }
}


/* ── Benefits: "deck" preset — full-bleed photo cards in a snap rail ──
   sp_benefits_style = deck. Swipe on touch, scroll on desktop. */

.sp-bxd {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.25rem 0.25rem 1.25rem;
    scrollbar-width: thin;
}

.sp-bxd:focus-visible {
    outline: 2px solid var(--sd-color-cta, #5f7d3a);
    outline-offset: 2px;
}

.sp-bxd__card {
    flex: 0 0 min(340px, 78vw);
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 40px -24px rgba(42, 54, 36, 0.5);
}

.sp-bxd__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 28, 16, 0) 16%,
        rgba(20, 28, 16, 0.45) 48%,
        rgba(20, 28, 16, 0.95) 100%
    );
}

.sp-bxd__copy {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.375rem;
    z-index: 1;
}

.sp-bxd__title {
    color: #fff;
    font-family: var(--sd-font-family-primary);
    font-size: 1.1875rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
}

.sp-bxd__text {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--sd-font-family-primary);
    font-size: 0.8438rem;
    line-height: 1.55;
}

.sp-bxd__text p {
    margin: 0;
}

/* !important needed: typography.css sets `p a { color: #0000EE !important }`
   globally, which would paint links default-blue over the photo scrim. */
.sp-bxd__text a {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-bxd__hint {
    margin: 0.5rem 0 0;
    color: var(--sd-color-text-light, #525252);
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
}

@media (hover: hover) and (pointer: fine) {
    .sp-bxd__hint {
        opacity: 0.7;
    }
}


/* --------------------------------------------------------------------------
   4. Process — white, horizontal numbered steps
   -------------------------------------------------------------------------- */

.sp-process {
    background-color: var(--sd-color-white);
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-process__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
}

.sp-process__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
}

/* Editorial grid: column count is set per-page (--sp-process-cols) so the
   step count always divides evenly into rows — no hanging cards. */
.sp-process__steps {
    --sp-pgx: clamp(2rem, 4vw, 4rem);
    --sp-pgy: clamp(2.5rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(var(--sp-process-cols, 3), 1fr);
    column-gap: var(--sp-pgx);
    row-gap: var(--sp-pgy);
}

.sp-process__step {
    border-top: 1px solid var(--sd-color-gray-200, #e8e8e2);
    padding-top: 1.5rem;
}

.sp-process__cta {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.sp-process__num {
    display: block;
    font-family: var(--sd-font-family-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sd-color-cta);
    line-height: 1;
    margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
}

.sp-process__title {
    font-family: var(--sd-font-family-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--sd-color-primary-dark);
    line-height: 1.3;
    margin: 0 0 0.6rem;
}

.sp-process__text {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--sd-color-gray-600, #6b6b66);
    margin: 0;
}


/* --------------------------------------------------------------------------
   4b. Sub-services / related buildings — image card grid
   -------------------------------------------------------------------------- */

.sp-sub-services {
    background-color: var(--sd-color-cream, #f8f6ee);
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-sub-services__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
}

.sp-sub-services__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.sp-sub-services__body {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.7;
    color: var(--sd-color-gray-700, #404040);
    max-width: 640px;
    margin: 0;
}

.sp-sub-services__header {
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Single-row carousel, always left-aligned (Niall 2026-09-22). This used to be
   `safe center`, which centred 3-item rows — on a wide screen that pushed the
   first card ~88px right of the heading above it, so the section read as
   misaligned. Starting the rail at the content edge keeps it on the same
   vertical line as the label, heading and body. 4+ items scroll as before.
   All cards SSR; no JS. */
.sp-sub-services__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(1.5rem, 2.5vw, 2rem);
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.sp-sub-services__grid > .sp-ss-card {
    flex: 0 0 clamp(300px, 31%, 400px);
    scroll-snap-align: start;
}

/* Exactly four cards fit the row on a wide screen. Without this the fourth
   was clipped at ~1440px, which reads as a layout bug rather than a scroll
   cue. Five or more still scroll. */
@media (min-width: 1200px) {
    .sp-sub-services__grid:has(> .sp-ss-card:nth-child(4):last-child) > .sp-ss-card {
        flex-basis: calc((100% - 3 * clamp(1.5rem, 2.5vw, 2rem)) / 4);
    }
}

/* Card — same language as the testimonial cards */
.sp-ss-card {
    position: relative; /* anchor for the stretched-link overlay */
    display: flex;
    flex-direction: column;
    background-color: var(--sd-color-white);
    border: 1px solid rgba(54, 69, 47, 0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(54, 69, 47, 0.05);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-ss-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(54, 69, 47, 0.12);
}

.sp-ss-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #eef1ea;
}

.sp-ss-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.sp-ss-card:hover .sp-ss-card__img {
    transform: scale(1.05);
}

.sp-ss-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eef1ea 0%, #e2e8da 100%);
}

.sp-ss-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem 1.5rem 1.375rem;
}

.sp-ss-card__title {
    font-family: var(--sd-font-family-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--sd-color-primary-dark);
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.sp-ss-card__description {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--sd-color-gray-600, #6b6b66);
    margin: 0 0 1.25rem;
}

.sp-ss-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    text-decoration: none;
}

/* Stretched link: the whole card is clickable via the "Learn more" link,
   so the card itself no longer needs to be an <a> (which would nest the
   inline links inside the description). */
.sp-ss-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Inline links written into the description stay clickable above the
   stretched overlay, and render as proper links (not raw HTML). */
.sp-ss-card__description a {
    position: relative;
    z-index: 2;
    color: var(--sd-color-cta);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sp-ss-card__description a:hover {
    color: var(--sd-color-primary-dark);
}

.sp-ss-card:hover .sp-ss-card__link svg {
    transform: translateX(3px);
}

.sp-ss-card__link svg {
    transition: transform 0.25s ease;
}


/* --------------------------------------------------------------------------
   4c. Guides — related blog articles (reuses the .sp-ss-card language)
   Sits after the FAQ on a white ground; a hairline rule separates the two.
   -------------------------------------------------------------------------- */

.sp-guides {
    background-color: var(--sd-color-white);
    padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(5rem, 9vw, 8rem);
}

.sp-guides__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
    padding-top: clamp(3rem, 5vw, 4.5rem);
    border-top: 1px solid rgba(54, 69, 47, 0.12);
}

.sp-guides__header {
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.sp-guides__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.sp-guides__body {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.7;
    color: var(--sd-color-gray-700, #404040);
    max-width: 640px;
    margin: 1rem 0 0;
}

.sp-guides__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2rem);
}

.sp-guides__grid:has(> .sp-guide-card:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-guide-card__cat {
    font-family: var(--sd-font-family-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sd-color-cta);
    margin: 0 0 0.6rem;
}

.sp-guide-card__title {
    margin-bottom: 0.75rem;
}

/* The title is the link; its ::after stretches over the whole card. */
.sp-guide-card__link {
    color: inherit;
    text-decoration: none;
}

.sp-guide-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sp-guide-card:hover .sp-guide-card__link {
    color: var(--sd-color-cta);
}

.sp-guide-card__link:focus-visible {
    outline: none;
}

.sp-guide-card:has(.sp-guide-card__link:focus-visible) {
    outline: 2px solid var(--sd-color-cta);
    outline-offset: 3px;
}

.sp-guide-card__meta {
    font-family: var(--sd-font-family-primary);
    font-size: 0.8125rem;
    color: var(--sd-color-gray-600, #6b6b66);
    margin: auto 0 0;
}


/* --------------------------------------------------------------------------
   5. Lead capture — contained dark card on sand, two-column
   -------------------------------------------------------------------------- */

.sp-capture {
    background-color: #f4f7f1;
    padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-capture__inner {
    position: relative;
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
    background-color: var(--sd-color-primary-dark);
    border-radius: 8px;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    box-shadow: 0 32px 64px -36px rgba(42, 54, 36, 0.45);
    overflow: hidden;
}

.sp-capture__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 20% 50%,
        rgba(95, 125, 58, 0.12) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.sp-capture__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.sp-capture__copy {
    color: var(--sd-color-white);
}

.sp-capture__headline {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 400;
    color: var(--sd-color-white);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.sp-capture__sub {
    font-family: var(--sd-font-family-primary);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.sp-capture__phone {
    display: block;
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 300;
    color: var(--sd-color-white);
    text-decoration: none;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    transition: color 0.2s ease;
}

.sp-capture__phone:hover {
    color: var(--sd-color-cta);
}

.sp-capture__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-capture__bullets li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
}

.sp-capture__bullets svg {
    width: 16px;
    height: 16px;
    color: var(--sd-color-cta);
    flex-shrink: 0;
}

/* Form column — override GF default styles */
.sp-capture__form {
    background-color: var(--sd-color-white);
    border-radius: 4px;
    padding: clamp(2rem, 4vw, 3rem);
}

.sp-capture__form .gform_wrapper,
.sp-capture__form .gform_body {
    margin: 0 !important;
}

.sp-capture__form input,
.sp-capture__form select,
.sp-capture__form textarea {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 4px !important;
    padding: 0.6rem 0.85rem !important;
    font-family: var(--sd-font-family-primary) !important;
    font-size: 0.9375rem !important;
    width: 100% !important;
}

.sp-capture__form .gform_footer input[type="submit"],
.sp-capture__form .gform_footer button[type="submit"] {
    background-color: var(--sd-color-cta) !important;
    color: var(--sd-color-white) !important;
    border: none !important;
    border-radius: var(--sd-radius-base) !important;
    padding: 0.875rem 2rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sp-capture__form .gform_footer input[type="submit"]:hover,
.sp-capture__form .gform_footer button[type="submit"]:hover {
    background-color: var(--sd-color-cta-strong, #4f6b30) !important;
}


/* --------------------------------------------------------------------------
   6. Specs table — sand
   -------------------------------------------------------------------------- */

.sp-specs {
    background-color: #f4f7f1;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-specs__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
}

.sp-specs__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(2rem, 3.5vw, 3.5rem);
}

.sp-specs__wrap {
    max-width: 860px;
}

.sp-specs__table {
    width: 100%;
    border-collapse: collapse;
}

.sp-specs__row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-specs__row:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-specs__key {
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sd-color-primary-dark);
    text-align: left;
    padding: 1rem 1.5rem 1rem 0;
    width: 35%;
    vertical-align: top;
}

.sp-specs__val {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    color: var(--sd-color-gray-700, #404040);
    padding: 1rem 0;
    vertical-align: top;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   7. Case study — white, full-width image strip + body
   -------------------------------------------------------------------------- */

/* Featured case study — floating split card on the sand background: project
   photo one side, contained deep-green content panel the other, with a
   "more projects" rail underneath. */
.sp-case-study {
    background-color: #f4f7f1;
    padding: clamp(4rem, 7vw, 6.5rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-case-study__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
}

.sp-case-study__card {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--sd-color-primary);
    box-shadow: 0 32px 64px -36px rgba(42, 54, 36, 0.45);
}

.sp-case-study__media {
    min-height: 420px;
}

.sp-case-study__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.sp-case-study__content {
    padding: clamp(2.25rem, 4vw, 3.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sp-case-study__overline {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #a9c187;
    margin: 0 0 0.75rem;
}

.sp-case-study__title {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.22;
    color: var(--sd-color-white);
    margin: 0 0 1.75rem;
}

.sp-case-study__blockquote {
    border: none;
    padding: 0;
    margin: 0;
}

.sp-case-study__blockquote p {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    font-weight: 300;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.92);
    font-style: italic;
    margin: 0 0 1.25rem;
}

.sp-case-study__attribution {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sp-case-study__attribution strong {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-white);
}

.sp-case-study__attribution span {
    font-family: var(--sd-font-family-primary);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Stat row — hairline-topped, matching the trust bar's numeric voice */
.sp-case-study__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin-top: 2rem;
    padding-top: 1.75rem;
}

.sp-case-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sp-case-stat__value {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--sd-color-white);
    font-variant-numeric: tabular-nums;
}

.sp-case-stat__label {
    font-family: var(--sd-font-family-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a9c187;
}

.sp-case-study__cta {
    margin-top: 2.25rem;
}

.sp-case-study__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #a9c187;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.sp-case-study__link svg {
    transition: transform 0.2s ease;
}

.sp-case-study__link:hover {
    color: var(--sd-color-white);
}

.sp-case-study__link:hover svg {
    transform: translateX(3px);
}

/* More-projects rail beneath the card */
.sp-case-study__more {
    margin-top: clamp(2rem, 3.5vw, 3rem);
}

.sp-case-study__more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sp-case-study__more-kicker {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-gray-500, #737373);
    margin: 0;
}

.sp-case-study__more-all {
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.sp-case-study__more-all:hover {
    color: var(--sd-color-primary);
}

.sp-case-study__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.sp-cs-mini {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    border-radius: 6px;
    background-color: var(--sd-color-white);
    padding: 0.75rem;
    box-shadow: 0 8px 20px -12px rgba(42, 54, 36, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-cs-mini:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(42, 54, 36, 0.35);
}

.sp-cs-mini__media {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.sp-cs-mini__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-cs-mini__title {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sd-color-primary-dark);
    padding: 0 0.25rem 0.35rem;
}


/* --------------------------------------------------------------------------
   8. Testimonials — sand, card grid
   -------------------------------------------------------------------------- */

.sp-testimonials {
    background-color: #f4f7f1;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-testimonials__inner {
    max-width: var(--sd-container-max, 1440px);
    margin-inline: auto;
}

.sp-testimonials__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
}

/* When a body paragraph follows, tighten heading → body gap (mirrors benefits) */
.sp-testimonials__heading:has(+ .sp-testimonials__body) {
    margin-bottom: 1.25rem;
}

.sp-testimonials__body {
    max-width: 680px;
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
    font-size: clamp(1rem, 1.2vw, 1.0625rem);
    line-height: 1.7;
    color: var(--sd-color-text-light);
}

.sp-testimonials__body p { margin: 0 0 1em; }
.sp-testimonials__body p:last-child { margin-bottom: 0; }

/* Desktop: all cards visible side by side, compact horizontal shape —
   deliberately different from the vertical case-study / sub-service cards.
   Tablet and mobile swap to a scroll-snap carousel. */
.sp-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.sp-testimonial-card {
    background-color: var(--sd-color-white);
    border: 1px solid rgba(54, 69, 47, 0.08);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    box-shadow: 0 2px 14px rgba(54, 69, 47, 0.05);
    margin: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(54, 69, 47, 0.12);
}

/* Project photo (featured image of the tied case study) — a compact left
   rail rather than a full-width banner, so these don't read as case-study
   cards. */
.sp-testimonial-card__media {
    position: relative;
    flex: 0 0 clamp(100px, 28%, 140px);
    overflow: hidden;
    background-color: #eef1ea;
}

.sp-testimonial-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.sp-testimonial-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.sp-testimonial-card:hover .sp-testimonial-card__photo {
    transform: scale(1.05);
}

.sp-testimonial-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.25rem 1.125rem;
}

/* Star rating */
.sp-testimonial-card__rating {
    display: flex;
    gap: 2px;
    margin-bottom: 0.875rem;
    color: #f0b429;
}

.sp-testimonial-card__star {
    width: 16px;
    height: 16px;
}

.sp-testimonial-card__star--empty {
    color: rgba(54, 69, 47, 0.15);
}

.sp-testimonial-card__quote {
    flex: 1;
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

/* Cap the visible quote so one long testimonial can't make every card in the
   row tall (which also stretched the left image into an odd thin sliver).
   Pure CSS clamp — the full quote stays in the DOM for SSR/SEO. */
.sp-testimonial-card__quote p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sd-color-primary-dark);
    margin: 0;
}

.sp-testimonial-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(54, 69, 47, 0.08);
}

.sp-testimonial-card__meta-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sp-testimonial-card__name {
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sd-color-primary-dark);
    line-height: 1.3;
}

.sp-testimonial-card__role {
    font-family: var(--sd-font-family-primary);
    font-size: 0.8rem;
    color: var(--sd-color-gray-500, #737373);
    line-height: 1.3;
}

/* Initials fallback avatar (only when no project image) */
.sp-testimonial-card__avatar--initials {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(95, 125, 58, 0.14);
    color: var(--sd-color-primary);
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* "View the project" link */
.sp-testimonial-card__cslink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--sd-color-cta);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.sp-testimonial-card__cslink:hover {
    gap: 0.65rem;
}


/* --------------------------------------------------------------------------
   8a-ii. Testimonial card v2 (2026-09-22) — words first, project below.
   Used by section-testimonials.php on service-pro + product pages. The
   .sp-testimonial-card block above is NOT dead: the Testimonials hub
   (templates/page-testimonials.php) still hand-writes that markup.
   -------------------------------------------------------------------------- */

.sp-tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: var(--sd-color-white);
    border: 1px solid rgba(54, 69, 47, 0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(54, 69, 47, 0.05);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sp-tm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -8px rgba(54, 69, 47, 0.16);
}

.sp-tm-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.75rem 1.75rem 1.5rem;
}

.sp-tm-card__rating {
    display: flex;
    gap: 2px;
    margin-bottom: 1.125rem;
    color: #f0b429;
}

.sp-tm-card__star {
    width: 16px;
    height: 16px;
}

.sp-tm-card__star--empty {
    color: rgba(54, 69, 47, 0.15);
}

/* The quote leads. Curly quotes come from CSS so every card matches whatever
   the data carried; the partial strips the data's own marks first. Six-line
   clamp keeps one long review from setting the row height — the full text is
   still in the DOM and the toggle below opens it in place. */
.sp-tm-card__quote {
    flex: 1;
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
    quotes: "\201C" "\201D";
}

.sp-tm-card__quote p {
    margin: 0;
    font-family: var(--sd-font-family-primary);
    font-style: normal; /* a global blockquote rule italicises; Outfit has no italic face, so that was a synthesised slant */
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--sd-color-primary-dark);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-tm-card__quote p::before { content: open-quote; }
.sp-tm-card__quote p::after  { content: close-quote; }

.sp-tm-card.is-open .sp-tm-card__quote p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.sp-tm-card__more {
    align-self: flex-start;
    margin: -0.5rem 0 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sd-color-cta);
}

.sp-tm-card__more[hidden] {
    display: none;
}

.sp-tm-card__more svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.sp-tm-card.is-open .sp-tm-card__more svg {
    transform: rotate(180deg);
}

.sp-tm-card__more:hover {
    color: var(--sd-color-primary);
}

.sp-tm-card__more:focus-visible {
    outline: 2px solid var(--sd-color-cta);
    outline-offset: 3px;
    border-radius: 2px;
}

.sp-tm-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sp-tm-card__name {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-color-primary-dark);
}

.sp-tm-card__role {
    font-family: var(--sd-font-family-primary);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #5b6355; /* green-biased grey, 6.7:1 on white */
}

/* Project band — the whole band is the anchor. A 3:2 thumbnail at 96px shows
   the entire building; the old side rail showed a strip of cladding. */
.sp-tm-card__project {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem 1rem 1rem;
    background-color: #f7f9f4;
    border-top: 1px solid rgba(54, 69, 47, 0.08);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s ease;
}

.sp-tm-card__project:hover {
    background-color: #eef3e7;
}

.sp-tm-card__project:focus-visible {
    outline: 2px solid var(--sd-color-cta);
    outline-offset: -4px;
    border-radius: 6px;
}

.sp-tm-card__thumb {
    flex: none;
    width: 96px;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background-color: #dfe5d8;
}

.sp-tm-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sp-tm-card__project:hover .sp-tm-card__thumb img {
    transform: scale(1.05);
}

.sp-tm-card__ptext {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.sp-tm-card__ptitle {
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sd-color-primary-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-tm-card__pcta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sd-font-family-primary);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sd-color-cta);
}

.sp-tm-card__pcta svg {
    width: 15px;
    height: 15px;
    flex: none;
    transition: transform 0.2s ease;
}

.sp-tm-card__project:hover .sp-tm-card__pcta svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .sp-tm-card,
    .sp-tm-card__project,
    .sp-tm-card__thumb img,
    .sp-tm-card__more svg,
    .sp-tm-card__pcta svg {
        transition: none;
    }
    .sp-tm-card:hover,
    .sp-tm-card__project:hover .sp-tm-card__thumb img {
        transform: none;
    }
}


/* --------------------------------------------------------------------------
   8b. FAQ — white, narrow column accordion
   -------------------------------------------------------------------------- */

.sp-faq {
    background-color: var(--sd-color-white);
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-faq__inner {
    max-width: 760px;
    margin-inline: auto;
}

.sp-faq__cta {
    margin: 2rem 0 0;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    color: var(--sd-color-gray-600, #6b6b66);
}

.sp-faq__cta .sp-inline-cta {
    margin-left: 0.35rem;
}

.sp-faq__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 400;
    color: var(--sd-color-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.5rem 0 2.5rem;
}

.sp-faq__list {
    border-top: 1px solid rgba(54, 69, 47, 0.12);
}

.sp-faq__item {
    border-bottom: 1px solid rgba(54, 69, 47, 0.12);
}

.sp-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 1.25rem 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--sd-font-family-primary);
    font-size: 1.075rem;
    font-weight: 500;
    color: var(--sd-color-primary);
    line-height: 1.4;
    transition: color 0.15s ease;
}

.sp-faq__trigger:hover {
    color: var(--sd-color-primary-light);
}

.sp-faq__question {
    flex: 1;
}

.sp-faq__chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--sd-color-primary);
    transition: transform 0.25s ease;
}

.sp-faq__trigger[aria-expanded="true"] .sp-faq__chevron {
    transform: rotate(180deg);
}

.sp-faq__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.sp-faq__answer-inner {
    padding: 0 0 1.5rem;
    font-family: var(--sd-font-family-primary);
    font-size: 1rem;
    color: var(--sd-color-text);
    line-height: 1.7;
}

.sp-faq__answer-inner p {
    margin: 0 0 1rem;
}

.sp-faq__answer-inner p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   9. CTA — contained dark card on sand, centred
   -------------------------------------------------------------------------- */

.sp-cta {
    position: relative;
    background-color: #f4f7f1;
    padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-cta__inner {
    position: relative;
    max-width: 1080px;
    margin-inline: auto;
    text-align: center;
    background-color: var(--sd-color-primary);
    border-radius: 8px;
    padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    box-shadow: 0 32px 64px -36px rgba(42, 54, 36, 0.45);
    overflow: hidden;
}

.sp-cta__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 80% 10%,
        rgba(95, 125, 58, 0.12) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.sp-cta__inner > * {
    position: relative;
    z-index: 1;
}

.sp-cta__inner .sp-cta__body {
    max-width: 620px;
    margin-inline: auto;
}

.sp-cta__overline {
    display: block;
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.sp-cta__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    color: var(--sd-color-white);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0.75rem 0 1.25rem;
}

.sp-cta__body {
    font-family: var(--sd-font-family-primary);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.sp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}


/* --------------------------------------------------------------------------
   9b. CTA — inset card on photo (when sp_cta_image is set)
   -------------------------------------------------------------------------- */

.sp-cta--inset {
    background-color: var(--sd-color-primary);
    padding: 0;
    overflow: hidden;
}

.sp-cta--inset::before {
    display: none;
}

.sp-cta__image-bleed {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.sp-cta__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(42, 54, 36, 0.55) 0%,
        rgba(42, 54, 36, 0.80) 100%
    );
    pointer-events: none;
}

.sp-cta--inset .sp-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
    margin-inline: auto;
    text-align: center;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.sp-cta--inset .sp-cta__inner::before {
    display: none;
}

.sp-cta__card {
    background-color: #f2ede4;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem);
    border-radius: 4px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
    max-width: 640px;
    margin: 0 auto;
}

.sp-cta__card .sp-cta__overline {
    color: var(--sd-color-primary);
    opacity: 0.6;
}

.sp-cta__card .sp-cta__heading {
    color: var(--sd-color-primary);
    margin-top: 0.5rem;
}

.sp-cta__card .sp-cta__body {
    color: var(--sd-color-text);
    opacity: 0.8;
}

.sp-cta__trust-strip {
    margin: 2.25rem auto 0;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
}


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

@media (max-width: 1024px) {

    /* Hero: stack on tablet */
    .sp-hero__inner {
        grid-template-columns: 1fr;
    }

    .sp-hero__copy {
        order: 1;
        padding: 3.5rem 2rem 3rem;
    }

    .sp-hero__media {
        order: 2;
        min-height: 320px;
        height: 50vw;
        max-height: 480px;
    }

    /* Hero: trust bar adapts grid */
    .sp-trust-bar__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-trust-bar__item:nth-child(2) {
        border-right: none;
    }

    .sp-trust-bar__item:nth-child(1),
    .sp-trust-bar__item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Benefits 2-col on tablet */
    .sp-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why: full width on tablet */
    .sp-why__inner {
        grid-template-columns: 1fr;
    }

    /* Process: 2-up on tablet */
    .sp-process__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Guides: same tablet carousel as sub-services (all cards SSR) */
    .sp-guides__grid,
    .sp-guides__grid:has(> .sp-guide-card:nth-child(4)) {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.75rem;
        scrollbar-width: thin;
    }

    .sp-guides__grid > .sp-guide-card {
        flex: 0 0 clamp(280px, 42%, 360px);
        scroll-snap-align: start;
    }

    /* Sub-services: carousel cards sized so ~2.3 show on tablet */
    .sp-sub-services__grid > .sp-ss-card {
        flex-basis: clamp(280px, 42%, 360px);
    }

    /* Testimonials: scroll-snap carousel on tablet (all cards SSR'd) */
    .sp-testimonials__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(560px, 80%);
        gap: 1.25rem;
        overflow-x: auto;
        padding-bottom: 0.75rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sp-testimonials__grid > * {
        scroll-snap-align: start;
    }

    /* Case study spotlight: stack card, rail becomes a swipe carousel */
    .sp-case-study__card {
        grid-template-columns: 1fr;
    }

    .sp-case-study__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .sp-case-study__rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin-inline: -0.25rem;
        padding: 0.25rem;
    }

    .sp-case-study__rail > * {
        flex: 0 0 72%;
        scroll-snap-align: start;
    }
}

@media (max-width: 767px) {

    .sp-hero {
        padding-top: var(--sd-header-height-mobile, 72px); /* utility bar hidden on mobile */
    }

    /* Intro: stack image on top regardless of position setting */
    .sp-intro--with-image .sp-intro__inner,
    .sp-intro--image-left .sp-intro__inner,
    .sp-intro--image-right .sp-intro__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            'image'
            'text';
    }

    .sp-intro__image {
        aspect-ratio: 16 / 9;
    }

    /* Hero: stack to single column */
    .sp-hero__inner {
        grid-template-columns: 1fr;
    }

    .sp-hero__copy {
        padding: 5rem 1.5rem 3rem;
        order: 1;
    }

    .sp-hero__media {
        order: 2;
        min-height: 260px;
        height: 60vw;
    }

    .sp-hero__ctas {
        flex-direction: column;
    }

    /* Trust bar 2x2 — no hero overlap on mobile, there's no clearance for it */
    .sp-trust-bar {
        transform: none;
        margin-inline: 1rem;
        margin-top: 1.25rem;
        margin-bottom: 0;
    }

    .sp-trust-bar__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-trust-bar__item {
        padding: 1.5rem 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sp-trust-bar__item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sp-trust-bar__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Why: single col */
    .sp-why__inner {
        grid-template-columns: 1fr;
    }

    /* Card sections become swipeable scroll-snap carousels on mobile.
       Every card stays in the DOM (SSR) — this is layout, not content hiding.
       Negative margin lets the row bleed to the viewport edge so the next
       card peeks, signalling swipeability. */
    .sp-benefits__grid,
    .sp-sub-services__grid,
    .sp-testimonials__grid,
    .sp-guides__grid,
    .sp-guides__grid:has(> .sp-guide-card:nth-child(4)) {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(82%, 320px);
        gap: 1rem;
        overflow-x: auto;
        margin-inline: -1.5rem;
        padding-inline: 1.5rem;
        padding-bottom: 0.75rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sp-benefits__grid > *,
    .sp-sub-services__grid > *,
    .sp-testimonials__grid > *,
    .sp-guides__grid > * {
        scroll-snap-align: start;
    }

    /* Testimonial cards go compact-vertical on mobile: a short image strip
       on top instead of a side rail (a rail squeezed into a 360px card made
       the cards absurdly tall). */
    .sp-testimonials__grid {
        grid-auto-columns: min(88%, 360px);
    }

    .sp-testimonial-card {
        flex-direction: column;
    }

    .sp-testimonial-card__media {
        flex: none;
        width: 100%;
        height: 150px;
    }

    .sp-testimonial-card__body {
        padding: 1.125rem 1.25rem 1.125rem;
    }

    /* Process: single column */
    .sp-process__steps {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }

    /* Capture: 1 col */
    .sp-capture__grid {
        grid-template-columns: 1fr;
    }

    /* Specs: full width */
    .sp-specs__wrap {
        max-width: 100%;
    }

    .sp-specs__key {
        width: 45%;
    }

    /* CTA */
    .sp-cta__actions {
        flex-direction: column;
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   Stats bar — key figures (count-up animated)
   -------------------------------------------------------------------------- */

.sp-stats {
    background-color: #f4f7f1;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem);
}

.sp-stats__inner {
    max-width: var(--sd-container-max, 1240px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.sp-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 1rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.sp-stats__item--visible {
    opacity: 1;
    transform: translateY(0);
}

.sp-stats__num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: var(--sd-font-family-primary);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--sd-color-primary, #36452f);
    margin-bottom: 0.6rem;
}

.sp-stats__value,
.sp-stats__text-value {
    color: var(--sd-color-primary, #36452f);
}

.sp-stats__suffix {
    color: var(--sd-color-cta, #5f7d3a);
    font-weight: 600;
    font-size: 0.55em;
    margin-left: 3px;
}

.sp-stats__label {
    font-family: var(--sd-font-family-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(23, 23, 23, 0.65);
    max-width: 14ch;
}

@media (max-width: 640px) {
    .sp-stats__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
}


/* --------------------------------------------------------------------------
   Hero — full-background variant (image fills section, overlay, copy on top)
   -------------------------------------------------------------------------- */

.sp-hero--full {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(380px, 48vh, 520px);
}

/* Background slideshow fills the whole hero */
.sp-hero--full .sp-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.sp-hero--full .sp-hero__bg .sp-hero-media {
    position: absolute;
    inset: 0;
}

/* Dark gradient overlay so copy stays legible over any image */
.sp-hero--full .sp-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(20, 28, 16, 0.82) 0%, rgba(20, 28, 16, 0.55) 45%, rgba(20, 28, 16, 0.25) 100%),
        linear-gradient(0deg, rgba(20, 28, 16, 0.45) 0%, transparent 40%);
}

/* Single-column copy, constrained, sitting above the overlay */
.sp-hero--full .sp-hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: var(--sd-container-max, 1240px);
    margin-inline: auto;
}

.sp-hero--full .sp-hero__copy {
    max-width: 760px;
    padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}

/* The slide counter UI reads better bottom-left clear of the copy on full-bg;
   keep it but nudge it to the bottom-right corner of the section. */
.sp-hero--full .sp-hero-media__ui {
    bottom: 1.5rem;
    right: 1.5rem;
}

@media (max-width: 900px) {
    .sp-hero--full {
        min-height: clamp(360px, 58vh, 480px);
    }
    .sp-hero--full .sp-hero__copy {
        max-width: 100%;
    }
    /* Lighten the horizontal gradient on small screens so it reads as a wash */
    .sp-hero--full .sp-hero__overlay {
        background:
            linear-gradient(90deg, rgba(20, 28, 16, 0.78) 0%, rgba(20, 28, 16, 0.6) 100%),
            linear-gradient(0deg, rgba(20, 28, 16, 0.5) 0%, transparent 45%);
    }
}

/* Trust bar on the homepage awards-band ink (was a charcoal gradient),
   with the same faint gold hairline. */
.sp-trust-bar {
    background: #11160f;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   "On this page" bar — detached floating pill with fragment links to each
   rendered section (built in page-service-pro.php) and a quote CTA.
   Visible by default (works without JS); the script arms it so it appears
   once the hero has scrolled away and hides over the closing CTA / footer.
   -------------------------------------------------------------------------- */

.sp-wrap [id] {
    scroll-margin-top: calc(var(--sd-header-height-desktop, 88px) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.sp-pagenav) {
        scroll-behavior: smooth;
    }
}

.sp-pagenav {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: max-content;
    max-width: min(1040px, calc(100vw - 2rem));
    padding: 0.375rem;
    background: rgba(17, 22, 15, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(201, 165, 92, 0.3);
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0.3s;
}

.sp-pagenav.is-armed:not(.is-visible) {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(100% + 1.5rem));
}

.sp-pagenav__track {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.sp-pagenav__track::-webkit-scrollbar {
    display: none;
}

.sp-pagenav__list {
    display: flex;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0 0.375rem;
}

.sp-pagenav__list li {
    margin: 0;
}

.sp-pagenav__link {
    display: block;
    padding: 0.5625rem 0.875rem;
    border-radius: 999px;
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.sp-pagenav__link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

.sp-pagenav__link[aria-current="location"] {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14);
}

.sp-pagenav__link:focus-visible,
.sp-pagenav__cta:focus-visible {
    outline: 2px solid var(--sd-color-cta);
    outline-offset: 2px;
}

.sp-pagenav__cta {
    flex: none;
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    background: var(--sd-color-cta);
    font-family: var(--sd-font-family-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.sp-pagenav__cta:hover {
    background: var(--sd-color-cta-strong, #4f6b30);
}

/* Keep the cookie-settings button clear of the bar while it shows. */
body.has-sp-pagenav .cky-btn-revisit-wrapper {
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem) !important;
    transition: bottom 0.3s ease;
}

@media (max-width: 767px) {
    .sp-wrap [id] {
        scroll-margin-top: calc(var(--sd-header-height-mobile, 72px) + 0.75rem);
    }

    .sp-pagenav {
        width: calc(100vw - 1.5rem);
        max-width: none;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .sp-pagenav__link {
        font-size: 0.8125rem;
        padding: 0.5625rem 0.75rem;
    }

    .sp-pagenav__cta {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-pagenav {
        transition: opacity 0.2s ease, visibility 0.2s;
    }
    .sp-pagenav.is-armed:not(.is-visible) {
        transform: translateX(-50%);
    }
}

/* ── One page grid (2026-09-27): every template starts its content at the
   same edge as the logo: max var(--sd-container-max) with var(--sd-gutter)
   (20px phones → 56px desktop). ── */
.sp-intro, .sp-why, .sp-benefits, .sp-process, .sp-sub-services, .sp-guides,
.sp-capture, .sp-specs, .sp-case-study, .sp-testimonials, .sp-faq, .sp-cta,
.sp-stats, .sp-trust-bar__inner {
    padding-inline: var(--sd-gutter);
}

/* ── One page grid, wide screens (2026-09-27): an inner box inside a
   gutter-padded section is capped at the grid width minus both gutters, so
   its edge matches the logo on screens wider than the container. ── */
.sp-why__inner, .sp-benefits__inner, .sp-process__inner, .sp-sub-services__inner,
.sp-guides__inner, .sp-capture__inner, .sp-specs__inner, .sp-case-study__inner,
.sp-testimonials__inner, .sp-stats__inner { max-width: calc(var(--sd-container-max, 1440px) - 2 * var(--sd-gutter)); }

/* Featured case study: section heading above the card like every other
   section; the project name heads the card itself (2026-09-27). */
.sp-case-study__heading {
    font-family: var(--sd-font-family-primary);
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 500;
    color: var(--sd-color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(2rem, 3.5vw, 3rem);
}

/* FAQ questions are headings (WAI-ARIA accordion pattern): the h3 carries the
   outline only, the question keeps its look. */
.sp-faq__q {
  margin: 0;
  font: inherit;
  font-weight: inherit !important;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}