/* =============================================================
   Block: Intro
   block-intro.css
   Prefix: blk-intro
   ============================================================= */

/* ── Scoped tokens ─────────────────────────────────────────── */
.blk-intro {
    --blk-intro-padding-y:      clamp(4.5rem, 9vw, 7.5rem);
    --blk-intro-padding-x:      clamp(1.25rem, 5vw, 3.5rem);
    --blk-intro-max-left:       960px;
    --blk-intro-max-center:     800px;
    --blk-intro-heading-size:   clamp(1.875rem, 3.5vw, 2.875rem);
    --ease-out:                 cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Section base ────────────────────────────────────────────── */
.blk-intro {
    background-color: var(--sd-color-background, #fff);
    padding: var(--blk-intro-padding-y) var(--blk-intro-padding-x);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Container ───────────────────────────────────────────────── */
.blk-intro__container {
    max-width: var(--blk-intro-max-left);
    margin-inline: auto;
}

/* ── Centered alignment variant ─────────────────────────────── */
.blk-intro--align-center .blk-intro__container {
    max-width: var(--blk-intro-max-center);
    text-align: center;
}

/* ── Overline ────────────────────────────────────────────────── */
.blk-intro__overline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-cta, #5f7d3a);
    margin-bottom: 1.125rem;
}

/* ── Heading ─────────────────────────────────────────────────── */
.blk-intro__heading {
    font-family: var(--sd-font-family-heading, 'Outfit', sans-serif);
    font-size: var(--blk-intro-heading-size);
    font-weight: var(--sd-font-weight-light, 300);
    line-height: var(--sd-line-height-tight, 1.2);
    letter-spacing: -0.022em;
    color: var(--sd-color-text, #171717);
    margin: 0 0 1.5rem;
}

/* ── Body text ───────────────────────────────────────────────── */
.blk-intro__body {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: var(--sd-line-height-relaxed, 1.75);
    color: var(--sd-color-text-light, #525252);
}

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

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

.blk-intro__body a {
    color: var(--sd-color-cta, #5f7d3a);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blk-intro__body a:hover {
    color: var(--sd-color-cta-hover, #8db35a);
}

.blk-intro__body strong {
    font-weight: var(--sd-font-weight-semibold, 600);
    color: var(--sd-color-text, #171717);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .blk-intro {
        --blk-intro-padding-y: clamp(3rem, 8vw, 4.5rem);
    }
}

/* =============================================================
   Verbatim pages (rebuilt legacy Divi pages, go-live Oct 2026)
   One visual vocabulary for bodies that carry live's own HTML:
   lists, tables, quotes, button rows, embeds, inline images.
   Only applies under .blk-rich / .is-verbatim, so no other page changes.
   ============================================================= */

/* Section backgrounds, set per row by the compiler (alternating). */
.is-verbatim .blk-bg--white { background-color: var(--sd-color-background, #fff); }
.is-verbatim .blk-bg--alt   { background-color: var(--sd-color-background-alt, #f6f7f3); }

.blk-rich {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: var(--sd-line-height-relaxed, 1.75);
    color: var(--sd-color-text-light, #525252);
}

.blk-rich > :first-child { margin-top: 0; }
.blk-rich > :last-child { margin-bottom: 0; }

.blk-rich p { margin: 0 0 1em; }

.blk-rich h2,
.blk-rich h3,
.blk-rich h4,
.blk-rich h5,
.blk-rich h6 {
    font-family: var(--sd-font-family-heading, 'Outfit', sans-serif);
    color: var(--sd-color-text, #171717);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 1.75em 0 0.6em;
}

.blk-rich h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.blk-rich h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.blk-rich h4 { font-size: 1.125rem; }
.blk-rich h5,
.blk-rich h6 { font-size: 1rem; }

.blk-rich strong { font-weight: 600; color: var(--sd-color-text, #171717); }

.is-verbatim .blk-rich a,
.is-verbatim .blk-rich p a {
    color: var(--sd-color-primary, #36452f) !important;
    text-decoration: underline;
    text-decoration-color: var(--sd-color-cta, #5f7d3a);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
}

.is-verbatim .blk-rich a:hover { color: var(--sd-color-cta, #5f7d3a) !important; }

/* Lists: brand dot bullets, decimal numbers, tick lists. */
.blk-rich ul,
.blk-rich ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.blk-rich ul { list-style: none; padding-left: 1.25em; }
.blk-rich ul > li { position: relative; margin-bottom: 0.5em; }
.blk-rich ul > li::before {
    content: '';
    position: absolute;
    left: -1.1em;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sd-color-cta, #5f7d3a);
}
.blk-rich ol > li { margin-bottom: 0.5em; }
.blk-rich ol > li::marker { color: var(--sd-color-cta, #5f7d3a); font-weight: 600; }

/* Tables: scroll on small screens, hairline rows. */
.blk-rich table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 1.5em;
    font-size: 0.9375em;
}
.blk-rich th,
.blk-rich td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(23, 23, 23, 0.1);
    vertical-align: top;
}
.blk-rich th { color: var(--sd-color-text, #171717); font-weight: 600; }

/* Quotes: cream panel with a left rule (same family as the testimonial cards). */
.blk-rich blockquote {
    margin: 1.5em 0;
    padding: 1.5rem 1.75rem;
    background: var(--sd-color-cream, #f8f6ee);
    border-left: 3px solid var(--sd-color-cta, #5f7d3a);
    border-radius: 0 6px 6px 0;
    color: var(--sd-color-text, #171717);
    font-size: 1.0625em;
}
.blk-rich blockquote p:last-child { margin-bottom: 0; }
.blk-rich blockquote cite,
.blk-rich .attribution {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sd-color-text-light, #525252);
}

/* Button rows from live's button modules. */
.blk-rich .blk-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25em 0; }
.is-verbatim .blk-rich a.blk-btn,
.is-verbatim .blk-sub-services a.blk-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    line-height: 1.2;
}
.is-verbatim .blk-rich a.blk-btn--primary,
.is-verbatim .blk-sub-services a.blk-btn--primary {
    background: var(--sd-color-cta, #5f7d3a);
    color: #fff !important;
}
.is-verbatim .blk-rich a.blk-btn--primary:hover,
.is-verbatim .blk-sub-services a.blk-btn--primary:hover { background: var(--sd-color-cta-strong, #4f6b30); }
.is-verbatim .blk-rich a.blk-btn--outline {
    border: 1.5px solid var(--sd-color-primary, #36452f);
    color: var(--sd-color-primary, #36452f) !important;
}

/* Embeds and inline images. */
.blk-rich iframe { display: block; width: 100%; border: 0; border-radius: 6px; margin: 1.25em 0; }
.blk-rich iframe:not([height]) { aspect-ratio: 16 / 9; height: auto; }
.blk-rich img { max-width: 100%; height: auto; border-radius: 6px; }
.blk-rich img.alignleft { float: left; margin: 0.25em 1.25em 1em 0; max-width: 45%; }
.blk-rich img.alignright { float: right; margin: 0.25em 0 1em 1.25em; max-width: 45%; }
.blk-rich img.aligncenter { display: block; margin: 1.25em auto; }
.blk-rich .intro,
.blk-rich p.intro { font-size: 1.1875em; color: var(--sd-color-text, #171717); }
.blk-rich hr { border: 0; border-top: 1px solid rgba(23, 23, 23, 0.1); margin: 2em 0; }

/* Hero lead (rich): white on the green hero. */
.blk-hero__lead { color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.6; max-width: 640px; margin: 0 0 1.75rem; }
.blk-hero__lead.blk-rich strong { color: #fff; }
.is-verbatim .blk-hero__lead a,
.is-verbatim .blk-hero__lead p a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.55); }
.blk-hero__lead img { max-width: 240px; height: auto; border-radius: 0; }

/* Media feature: natural fit (no crop/upscale), rich body spacing. */
.blk-media-feature--natural .blk-media-feature__image { width: auto; max-width: 100%; height: auto; object-fit: contain; aspect-ratio: auto; }
.is-verbatim .blk-media-feature.blk-bg--white { background-color: var(--sd-color-background, #fff); }
.is-verbatim .blk-media-feature.blk-bg--alt { background-color: var(--sd-color-background-alt, #f6f7f3); }

/* Feature grid: intro under the heading, rich card bodies. */
.blk-feature-grid__intro { max-width: 760px; margin-top: 1rem; }
.blk-feature-grid__card-body.blk-rich { font-size: 0.9375rem; line-height: 1.65; }

/* Related cards: live column counts, title links, button under the grid.
   The whole card is clickable through the stretched link. */
.is-verbatim .blk-ss-card { position: relative; }
.is-verbatim .blk-ss-card__link::after,
.is-verbatim .blk-ss-card__title-link::after { content: ''; position: absolute; inset: 0; }
.is-verbatim .blk-ss-card__title-link { color: inherit !important; text-decoration: none !important; }
.is-verbatim .blk-ss-card__description a { position: relative; z-index: 1; }
.blk-sub-services--cols-2 .blk-sub-services__grid { grid-template-columns: repeat(2, 1fr); }
.blk-sub-services--cols-4 .blk-sub-services__grid { grid-template-columns: repeat(4, 1fr); }
.blk-sub-services__actions { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 1024px) {
    .blk-sub-services--cols-4 .blk-sub-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .blk-sub-services--cols-2 .blk-sub-services__grid,
    .blk-sub-services--cols-4 .blk-sub-services__grid { grid-template-columns: 1fr; }
    .blk-rich img.alignleft,
    .blk-rich img.alignright { float: none; max-width: 100%; margin: 1em 0; }
}

/* ── Verbatim pages: visual review fixes (pilot #5737) ───────── */

/* Readable measure for prose; media and tables may use the full column. */
.is-verbatim .blk-rich > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) { max-width: 68ch; }
.is-verbatim .blk-intro--align-center .blk-rich > * { margin-inline: auto; }

/* Brand heading colour, as on the rest of the new site. */
.is-verbatim :is(.blk-intro__heading, .blk-media-feature__heading, .blk-feature-grid__heading, .blk-sub-services__heading),
.is-verbatim .blk-rich :is(h2, h3, h4) {
    color: var(--sd-color-primary-dark, #2a3624);
}

/* Side-by-side rows: keep the photo's own shape (no 4:5 portrait crop) and
   centre short text against it instead of pinning it to the top. */
.is-verbatim .blk-media-feature__container { align-items: center; }
.is-verbatim .blk-media-feature__image { aspect-ratio: auto; height: auto; max-height: 640px; object-fit: cover; }
.is-verbatim .blk-media-feature__figure { position: static; }

/* Flat hero without a photo: no dead space under the lead. */
.is-verbatim .blk-hero:not(.blk-hero--split) .blk-hero__body {
    padding-block: clamp(4rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem);
}

/* ── Verbatim pages: visual review round 2 (all 25 pages) ──────── */

/* Lists: one bullet system inside the text column (block and verbatim rules
   were stacking and pushing the dot outside the column / off-screen). */
.is-verbatim .blk-rich ul { list-style: none; padding-left: 0 !important; margin: 0 0 1.25em; }
.is-verbatim .blk-rich ul > li { position: relative; padding-left: 1.5em !important; margin-bottom: 0.5em; }
.is-verbatim .blk-rich ul > li::before {
    content: ''; position: absolute; left: 0.35em !important; top: 0.72em;
    width: 6px; height: 6px; border-radius: 50%; opacity: 1;
    background: var(--sd-color-cta, #5f7d3a);
}

/* Side-by-side rows: image pinned at the top while long copy scrolls, so
   there is no dead column under a short photo. */
.is-verbatim .blk-media-feature__container { align-items: start; }
.is-verbatim .blk-media-feature__media { align-self: start; position: sticky; top: calc(var(--sd-header-height-desktop, 88px) + 3.5rem); }
@media (max-width: 900px) { .is-verbatim .blk-media-feature__media { position: static; } }

/* One button shape site-wide (hero/CTA buttons are 4px). */
.is-verbatim .blk-rich a.blk-btn,
.is-verbatim .blk-sub-services a.blk-btn { border-radius: 4px; }
@media (max-width: 480px) {
    .is-verbatim .blk-rich .blk-btn-row { flex-direction: column; align-items: stretch; }
    .is-verbatim .blk-rich .blk-btn-row .blk-btn { justify-content: center; }
}
.is-verbatim .blk-intro--align-center .blk-btn-row { justify-content: center; }
.is-verbatim .blk-intro--align-center .blk-rich img { margin-inline: auto; display: block; }

/* Links on dark/brand CTA banners must read on the dark ground. */
.is-verbatim .blk-cta-banner--dark .blk-rich a,
.is-verbatim .blk-cta-banner--brand .blk-rich a,
.is-verbatim .blk-cta-banner--dark .blk-rich p a,
.is-verbatim .blk-cta-banner--brand .blk-rich p a {
    color: #fff !important; text-decoration-color: rgba(255, 255, 255, 0.6);
}
.is-verbatim .blk-cta-banner .blk-rich { max-width: 60ch; margin-inline: auto; }

/* Text-only hero: clear the fixed header, no dead green band. */
.is-verbatim .blk-hero:not(.blk-hero--split) { min-height: 0; align-items: flex-end; }
.is-verbatim .blk-hero:not(.blk-hero--split) .blk-hero__body {
    padding-top: calc(125px + clamp(2.5rem, 5vw, 4rem)) !important;
    padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
}
/* The header is 125px (with utility bar) above 768px, 89px at 768, 73px below. */
@media (max-width: 768px) {
    .is-verbatim .blk-hero:not(.blk-hero--split) .blk-hero__body { padding-top: calc(89px + 2.5rem) !important; }
}
@media (max-width: 767px) {
    .is-verbatim .blk-hero:not(.blk-hero--split) .blk-hero__body { padding-top: calc(73px + 2.5rem) !important; }
}
/* Split hero: text centred against the photo, always left-aligned. */
.is-verbatim .blk-hero--split .blk-hero__content-panel { align-items: center; }
.is-verbatim .blk-hero__inner { text-align: left; margin-inline: 0; }

/* Live's Feefo badge + rating line, tidied for the green hero. */
.is-verbatim .blk-hero__lead img[src*="feefo"] { max-width: 150px; border-radius: 4px; margin: 0.5rem 0 0.25rem; }
.is-verbatim .blk-hero__lead p:has(img[src*="feefo"]) { margin-bottom: 0.25rem; }

/* <b> reads like <strong>. */
.blk-rich b { font-weight: 700; color: var(--sd-color-text, #171717); }
.blk-hero__lead b { color: #fff; }

/* Embeds: responsive 16:9 whatever width/height live hard-coded. */
.is-verbatim .blk-rich iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

/* Card-body photos: consistent shape. */
.is-verbatim .blk-feature-grid__card-body img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Headings: one brand colour everywhere on these pages. */
.is-verbatim :is(.blk-feature-grid__card-heading, .blk-faq__heading, .blk-cta-banner--light .blk-cta-banner__heading, .blk-ss-card__title) {
    color: var(--sd-color-primary-dark, #2a3624);
}
.is-verbatim .blk-feature-grid--style-ledger .blk-feature-grid__card-heading { font-weight: 600 !important; padding-left: 0; }

/* Tables: header row, numbers aligned, scroll hint on small screens. */
.is-verbatim .blk-rich table { width: 100%; font-variant-numeric: tabular-nums; }
.is-verbatim .blk-rich tr:first-child td,
.is-verbatim .blk-rich tr td:first-child { font-weight: 600; color: var(--sd-color-text, #171717); }
.is-verbatim .blk-rich tr:first-child td { background: var(--sd-color-background-alt, #f6f7f3); }
.is-verbatim .blk-rich td { white-space: nowrap; }
@media (max-width: 640px) {
    .is-verbatim .blk-rich table { box-shadow: inset -24px 0 16px -16px rgba(0, 0, 0, 0.12); }
}

/* Gravity Form (recommend page): site input and button styling. */
.is-verbatim .blk-form .gform_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.is-verbatim .blk-form .gform_wrapper textarea,
.is-verbatim .blk-form .gform_wrapper select {
    width: 100% !important; min-height: 50px; padding: 0.8rem 1rem !important;
    border: 1px solid rgba(23, 23, 23, 0.18) !important; border-radius: 4px !important; font-size: 1rem;
}
.is-verbatim .blk-form .gform_wrapper :is(input, textarea, select):focus {
    outline: 2px solid var(--sd-color-cta, #5f7d3a); outline-offset: 1px; border-color: transparent !important;
}
.is-verbatim .blk-form .gform_wrapper .gfield_label { font-size: 0.9375rem !important; font-weight: 600 !important; color: var(--sd-color-text, #171717); }
.is-verbatim .blk-form .gform_wrapper .gfield_required { color: var(--sd-color-cta, #5f7d3a) !important; }
.is-verbatim .blk-form .gform_wrapper .gsection_title { color: var(--sd-color-primary-dark, #2a3624); }
.is-verbatim .blk-form .gform_wrapper .gfield_consent_description { border: 0 !important; font-size: 0.875rem !important; padding: 0 !important; }
.is-verbatim .blk-form .gform_wrapper input[type=checkbox] { accent-color: var(--sd-color-cta, #5f7d3a); width: 18px; height: 18px; }
.is-verbatim .blk-form .gform_wrapper .gform_button {
    min-height: 50px; padding: 0.8rem 1.9rem !important; border: 0 !important; border-radius: 4px !important;
    background: var(--sd-color-cta, #5f7d3a) !important; color: #fff !important; font-weight: 600; cursor: pointer;
}

/* ── Verbatim pages: visual review round 3 ─────────────────────── */

/* Numbered lists show their numbers. */
.is-verbatim .blk-rich ol { list-style: decimal !important; padding-left: 1.6em !important; margin: 0 0 1.25em; }
.is-verbatim .blk-rich ol > li { padding-left: 0.25em; }
.is-verbatim .blk-rich ol > li::before { content: none !important; }

/* Small headings live used as emphasis lines. */
.is-verbatim .blk-rich :is(h5, h6) { font-size: 1.0625rem; line-height: 1.5; color: var(--sd-color-primary-dark, #2a3624); }
.is-verbatim .blk-rich :is(h2, h3, h4) a { text-decoration: none !important; }
.is-verbatim .blk-rich :is(h2, h3, h4) a:hover { text-decoration: underline !important; }

/* Quotes: even padding. */
.is-verbatim .blk-rich blockquote > :first-child { margin-top: 0; }
.is-verbatim .blk-rich blockquote > :last-child { margin-bottom: 0; }

/* Anything heading-like inside the green hero is white (thank-you message). */
.is-verbatim .blk-hero :is(h2, h3, h4, h5, h6),
.is-verbatim .blk-hero__lead :is(h2, h3, h4, h5, h6) { color: #fff !important; }
.is-verbatim .blk-hero__lead :is(h2, h3) { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.35; margin: 0 0 0.75rem; }
.is-verbatim .blk-hero__inner { width: 100%; }

/* Logos inside bodies stay logo-sized. */
.is-verbatim .blk-rich img[src*="ogo" i] { max-width: 360px; border-radius: 0; }

/* Case-study cards without a photo still look like cards. */
.is-verbatim .blk-ss-card:not(:has(.blk-ss-card__media)) {
    background: var(--sd-color-background, #fff);
    border: 1px solid rgba(54, 69, 47, 0.12);
    border-radius: 6px;
    padding: 1.5rem;
}
.is-verbatim .blk-bg--white .blk-ss-card:not(:has(.blk-ss-card__media)) { background: var(--sd-color-background-alt, #f6f7f3); }

/* Two sections on the same ground in a row: don't double the gap. */
.is-verbatim :is(.blk-bg--white, .blk-video) + .blk-bg--white,
.is-verbatim .blk-bg--alt + .blk-bg--alt { padding-top: 0 !important; }

/* A closing stripe with only a button (live had no heading/body): compact. */
.is-verbatim .blk-cta-banner:not(:has(.blk-cta-banner__heading)):not(:has(.blk-cta-banner__body)) .blk-cta-banner__inner {
    padding-block: clamp(2rem, 4vw, 3rem);
}

/* ── Verbatim pages: verification round (12 pages, 1280 + 390) ──── */

/* Split hero: the fixed header (125px above 768px, 89px at 768) covers the top
   of the green panel, so centre the text in the visible part and drop the
   min-height to fit — no dead green band under a short heading. */
@media (min-width: 768px) {
    .is-verbatim .blk-hero--split { --blk-hero-min-height: 460px; }
    .is-verbatim .blk-hero--split .blk-hero__content-panel {
        padding-top: calc(125px + clamp(2.5rem, 4vw, 3.5rem));
        padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
    }
}
@media (min-width: 768px) and (max-width: 768px) {
    .is-verbatim .blk-hero--split .blk-hero__content-panel { padding-top: calc(89px + 2.5rem); }
}
/* Stacked (mobile): photo then panel; no min-height padding under the panel. */
@media (max-width: 767px) {
    .is-verbatim .blk-hero--split { min-height: 0; }
}

/* Card photos are cropped to one shape; rating graphics (5stars.png) are not. */
.is-verbatim .blk-feature-grid__card-body img[src*="stars" i] {
    width: auto; max-width: 160px; aspect-ratio: auto; object-fit: contain; border-radius: 0;
}

/* Long unbroken strings (URLs) in card copy must wrap, or they force the
   grid track wider than the column on mobile. */
.is-verbatim .blk-feature-grid__card { min-width: 0; }
.is-verbatim .blk-feature-grid__card :is(.blk-rich, h2, h3, h4) { overflow-wrap: anywhere; }

/* Logo-sized images never wider than the column. */
.is-verbatim .blk-rich img[src*="ogo" i] { max-width: min(360px, 100%); }

/* White-ground PNG icons on the grey sections: drop the white square. */
.is-verbatim .blk-bg--alt .blk-rich img[src*=".png" i] { mix-blend-mode: multiply; }