/* Custom Landing Page — Ads Landing Styles */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* REF# 237348 Suppress third-party widgets that run site-wide but should not appear on
   the landing page (Weave text-connect widget). The script tag is stripped
   server-side via output buffering; this rule hides the DOM nodes it injects
   in case the script executes anyway (e.g. browser cache). */
#iframe-weave-widget-button,
#iframe-weave-widget-container {
    display: none !important;
}

:root {
    --clp-font-base: 'Manrope', sans-serif;

    /* Spacing — desktop */
    --clp-space-sm:  16px;  /* tight: heading margins, small padding */
    --clp-space-md:  20px;  /* medium: subheadline, form spacing */
    --clp-space-lg:  30px;  /* section gap: trust, process, general */
    --clp-space-xl:  56px;  /* large: testimonials, grid column gap */

    /* Colors */
    --clp-color-primary:        #2a7ae2;  /* buttons, links, accents */
    --clp-color-primary-hover:  #1a5bbf;  /* button hover */
    --clp-color-dark:           #2c3e50;  /* author names, strong text */
    --clp-color-muted:          #555;     /* secondary body text */
    --clp-color-subtle:         #666;     /* tertiary / meta text */
    --clp-color-border:         #e3e8ef;  /* dividers, section borders */

    /* Misc */
    --clp-radius-btn:            6px;     /* button border-radius */
    --clp-font-section-heading:  1.4rem;  /* process, testimonials, FAQ headings */
}

/* Spacing — mobile overrides (slightly tighter) */
@media (max-width: 768px) {
    :root {
        --clp-space-sm:  12px;
        --clp-space-md:  16px;
        --clp-space-lg:  24px;
        --clp-space-xl:  40px;
    }
}

/* ── Chromeless Header ────────────────────────────────────── */
.clp-site-header {
    background: #fff;
    border-bottom: 1px solid var(--clp-color-border);
    padding: 12px 0;
    font-family: var(--clp-font-base);
    font-weight: 400;
}

.clp-site-header__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clp-site-header__inner--center { justify-content: center; }
.clp-site-header__inner--right  { justify-content: flex-end; }

.clp-site-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: default;
}

.clp-site-header__logo img {
    max-height: 48px;
    width: auto;
    display: block;
}

.clp-site-header__site-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clp-color-dark);
}

.clp-site-header__phone {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clp-color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.clp-site-header__phone:hover {
    color: var(--clp-color-primary-hover);
}

@media (max-width: 480px) {
    .clp-site-header__logo img {
        max-height: 36px;
    }
    .clp-site-header__phone {
        font-size: 0.9rem;
    }
}

/* ── Chromeless Footer ────────────────────────────────────── */
.clp-site-footer {
    background: #f8f9fb;
    border-top: 1px solid var(--clp-color-border);
    padding: 20px 0;
    margin-top: var(--clp-space-xl);
}

.clp-site-footer__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.clp-site-footer__inner p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--clp-color-subtle);
}

.clp-site-footer__inner a {
    color: var(--clp-color-subtle);
    text-decoration: underline;
}

.clp-site-footer__inner a:hover {
    color: var(--clp-color-muted);
}

/* ── Layout ───────────────────────────────────────────────── */
.clp-landing {
    padding: 0;
    font-family: var(--clp-font-base);
    font-weight: 400;
}

.clp-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Hero + Form + Steps grid ──────────────────────────────── */
/*
  Desktop layout (2 cols):
    col 1 row 1 = hero
    col 1 row 2 = process steps
    col 2 rows 1-2 = form (spans both rows)

  Mobile layout: hero → form → steps (DOM order, display:block)
*/
.clp-hero-form {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "hero form"
        "review form"
        "steps form"
        "trust trust";
    gap: 32px var(--clp-space-xl);
    align-items: start;
    margin-bottom: var(--clp-space-lg);
}

.clp-hero-form .clp-hero {
    grid-area: hero;
    margin-bottom: 0;
    max-width: none;
}

.clp-hero-form .clp-form-block {
    grid-area: form;
    margin-bottom: 0;
    max-width: none;
}

.clp-hero-form .clp-featured-review {
    grid-area: review;
    margin-bottom: 0;
}

.clp-hero-form .clp-process {
    grid-area: steps;
    margin-bottom: var(--clp-space-lg);
    align-self: end;
}

.clp-hero-form .clp-trust {
    grid-area: trust;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .clp-hero-form {
        display: block;
        margin-bottom: var(--clp-space-lg);
    }

    .clp-hero-form .clp-hero {
        margin-bottom: var(--clp-space-lg);
    }

    .clp-hero-form .clp-form-block {
        margin-bottom: var(--clp-space-lg);
    }

    .clp-hero-form .clp-featured-review {
        margin-bottom: var(--clp-space-lg);
    }

    .clp-hero-form .clp-process {
        margin-bottom: var(--clp-space-lg);
        align-self: auto;
    }

    .clp-hero-form .clp-trust {
        margin-bottom: 0;
    }
}

.clp-hero,
.clp-form-block,
.clp-process,
.clp-topic,
.clp-faq {
    margin-bottom: var(--clp-space-lg);
}

/* ── Hero ─────────────────────────────────────────────────── */
.clp-hero__headline {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: var(--clp-space-sm);
}

.clp-hero__subheadline {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 740px;
    margin-bottom: var(--clp-space-md);
}

@media (min-width: 769px) {
    .clp-hero__subheadline {
        line-height: 1.8;
    }
}

.clp-hero__bullets {
    margin: 0 0 0 20px;
    padding: 0;
}

.clp-hero__bullets li {
    margin-bottom: 8px;
    font-size: 1rem;
}

.clp-hero__rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: #fffbf2;
    border: 1px solid #f5a62380;
    border-radius: 10px;
    width: 100%;
    max-width: 410px;
    box-sizing: border-box;
}

.clp-hero__rating-top {
    display: contents;
}

.clp-hero__stars {
    color: #f5a623;
    font-size: 1.5rem;
    letter-spacing: 1px;
    line-height: 1;
    margin-top: -2px;
}

.clp-hero__rating-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--clp-color-muted, #6b7280);
    margin-top: 3px;
}

.clp-hero__rating-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.clp-hero__rating-sub {
    font-size: 0.9rem;
    color: var(--clp-color-muted, #6b7280);
}

.clp-hero__rating-link {
    color: #4285f4;
    text-decoration: none;
    font-weight: 500;
}

.clp-hero__rating-link:hover {
    text-decoration: underline;
}

/* ── Form block ───────────────────────────────────────────── */
.clp-form-block {
    padding: 24px 28px;
    max-width: 520px;
    /* Base — no style applied without a modifier */
}

/* Style A: Card (current) ─────────────────────────────────── */
.clp-form-block--card {
    background: #ffffff;
    border: 1px solid #dde3eb;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

/* Style B: Section wash — no box, tinted column background ── */
.clp-form-block--wash {
    background: #f3f6fb;
    border-radius: 12px;
    padding: 28px;
}

/* Style C: Frameless — no border/shadow at all ────────────── */
.clp-form-block--frameless {
    background: none;
    padding-left: 0;
    padding-right: 0;
}

/* Style D: Accent bar only ────────────────────────────────── */
.clp-form-block--accent {
    background: none;
    border-left: 4px solid var(--clp-color-primary);
    border-radius: 0;
    padding-left: 24px;
}

.clp-form-block__heading {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 6px;
}

.clp-form-block__intro {
    font-size: 0.93rem;
    line-height: 1.55;
    margin-bottom: 16px;
    color: var(--clp-color-muted);
}

/* Hide submit button until JS has swapped the CTA text */
.clp-form-block__form[data-cta-text] button[type="submit"],
.clp-form-block__form[data-cta-text] input[type="submit"] {
    visibility: hidden;
}

.clp-form-block__form[data-cta-text].clp-cta-ready button[type="submit"],
.clp-form-block__form[data-cta-text].clp-cta-ready input[type="submit"] {
    visibility: visible;
}

/* Tighten Fluent Forms field spacing inside the card */
.clp-form-block .ff-el-group {
    margin-bottom: 12px;
}

.clp-form-block .ff-el-group.ff_submit_btn_wrapper {
    margin-bottom: 0;
}

.clp-form-block .ff-el-input--label label {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.clp-form-block .ff-el-form-control {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.93rem;
}

.clp-form-block .ff-btn-submit {
    margin-top: 4px;
}

.clp-form-block__form {
    width: 100%;
}

.clp-form-block__phone {
    margin-top: var(--clp-space-md);
    padding-top: var(--clp-space-sm);
    border-top: 1px solid var(--clp-color-border);
    font-size: 0.92rem;
    color: var(--clp-color-subtle);
    text-align: center;
}

.clp-form-block__phone a {
    color: var(--clp-color-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.clp-form-block__phone a:hover {
    text-decoration: underline;
}

.clp-form-block__notice {
    font-style: italic;
    color: #888;
}

@media (max-width: 600px) {
    .clp-form-block {
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-width: none;
    }

    .clp-form-block__heading {
        font-size: 1.25rem;
    }
}

/* ── Form testimonial ────────────────────────────────────── */
.clp-form-testimonial {
    margin: var(--clp-space-md) 0 0;
    /* padding-top: 25px; */
    /* border-top: 1px solid var(--clp-color-border);*/
}

.clp-form-testimonial__quote {
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.6;
    color: #444;
    margin: 0 0 8px;
}

.clp-form-testimonial__quote::before { content: "\201C"; }
.clp-form-testimonial__quote::after  { content: "\201D"; }

.clp-form-testimonial__author {
    font-style: normal;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--clp-color-dark);
    display: block;
}

/* ── Process ──────────────────────────────────────────────── */
.clp-process__heading {
    font-size: var(--clp-font-section-heading);
    margin-bottom: 12px;
}

@media (min-width: 769px) {
    .clp-process__heading {
        margin-top: 0;
    }
    .clp-hero-form .clp-process {
        margin-bottom: 0;
    }
}

.clp-process__steps {
    margin: 0 0 0 20px;
    padding: 0;
}

.clp-process__steps li {
    margin-bottom: 10px;
    font-size: 1rem;
}

/* ── Topic section ────────────────────────────────────────── */
.clp-topic__heading {
    font-size: 1.6rem;
    margin-bottom: var(--clp-space-sm);
}

/* ── Trust strip ──────────────────────────────────────────── */
.clp-trust {
    margin-bottom: var(--clp-space-lg);
}

.clp-trust__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.clp-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2f7;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clp-color-dark);
    white-space: nowrap;
}

.clp-trust__item::before {
    content: "✓";
    font-weight: 700;
    color: var(--clp-color-primary);
}

/* ── Testimonials ─────────────────────────────────────────── */
.clp-testimonials {
    margin-bottom: var(--clp-space-xl);
}

.clp-testimonials__heading {
    font-size: var(--clp-font-section-heading);
    margin-bottom: var(--clp-space-md);
}

.clp-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.clp-testimonial {
    background: #f7f9fc;
    border-left: 4px solid var(--clp-color-primary);
    border-radius: 0 8px 8px 0;
    margin: 0;
    padding: 20px 20px 16px;
}

.clp-testimonial__quote {
    font-size: 0.97rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 12px;
}

.clp-testimonial__quote::before { content: "\201C"; }
.clp-testimonial__quote::after  { content: "\201D"; }

.clp-testimonial__footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clp-testimonial__author {
    font-style: normal;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--clp-color-dark);
}

.clp-testimonial__role {
    font-size: 0.82rem;
    color: var(--clp-color-subtle);
}

/* ── Chromeless body overrides ────────────────────────────── */
body.clp-chromeless {
    background: #fff;
    margin: 0;
    padding: 0;
}

.clp-topic__body {
    font-size: 1rem;
    line-height: 1.75;
}

/* ── Topic collapse ──────────────────────────────────────── */
.clp-topic__body--collapsible {
    position: relative;
    max-height: 220px;
    overflow: hidden;
}

.clp-topic__body--collapsible::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient( transparent, #fff );
    pointer-events: none;
}

.clp-topic__body--collapsible.is-expanded {
    max-height: none;
    overflow: visible;
}

.clp-topic__body--collapsible.is-expanded::after {
    display: none;
}

.clp-topic__expand-btn {
    background: none;
    border: none;
    color: var(--clp-color-primary);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 8px 0 0;
    text-decoration: underline;
    display: block;
}

@media (min-width: 601px) {
    .clp-topic__body--collapsible {
        max-height: none;
        overflow: visible;
    }

    .clp-topic__body--collapsible::after {
        display: none;
    }

    .clp-topic__expand-btn {
        display: none;
    }
}

/* ── FAQ ──────────────────────────────────────────────────── */
.clp-faq__heading {
    font-size: var(--clp-font-section-heading);
    margin-bottom: 20px;
}

.clp-faq__item {
    border-top: 1px solid var(--clp-color-border);
}

.clp-faq__item:first-of-type {
    border-top: none;
}

.clp-faq__question {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    padding: 14px 32px 14px 0;
    position: relative;
    margin: 0;
    line-height: 1.4;
}

.clp-faq__question::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY( -50% );
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--clp-color-primary);
    line-height: 1;
    transition: transform 0.2s ease;
}

.clp-faq__question[aria-expanded="true"]::after {
    content: '−';
}

.clp-faq__answer {
    font-size: 0.97rem;
    color: #444;
    margin: 0;
    padding: 0 0 16px;
    line-height: 1.65;
}

.clp-faq__answer p {
    margin: 0;
}

/* ── Form confirmation ───────────────────────────────────────────────────── */

.clp-form-success {
	text-align: center;
	padding: 32px 20px 28px;
}

.clp-form-success__icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--clp-color-primary);
	color: #fff;
	font-size: 28px;
	line-height: 54px;
	margin: 0 auto 18px;
	font-weight: 700;
}

.clp-form-success__headline {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--clp-color-heading, #1a2540);
	margin: 0 0 12px;
}

.clp-form-success__body {
	font-size: 1rem;
	color: var(--clp-color-muted);
	line-height: 1.65;
	margin: 0 auto 22px;
	max-width: 360px;
}

.clp-form-success__phone {
	font-size: 0.95rem;
	color: var(--clp-color-muted);
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--clp-color-border);
}

.clp-form-success__phone a {
	color: var(--clp-color-primary);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.clp-form-success__phone a:hover {
	text-decoration: underline;
}

.clp-form-success__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 22px;
}

.clp-form-success__btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 6px;
	background: var(--clp-color-primary);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.clp-form-success__btn:hover {
	opacity: 0.85;
	text-decoration: none;
	color: #fff;
}

/* ── Bottom CTA ───────────────────────────────────────── */
.clp-bottom-cta {
    text-align: center;
    padding: 30px 5px 30px 5px;
    border-top: 1px solid var(--clp-color-border);
    margin-top: 8px;
}

.clp-bottom-cta__heading {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 10px;
}

.clp-bottom-cta__sub {
    font-size: 1rem;
    color: var(--clp-color-muted);
    margin-bottom: 24px;
}

.clp-bottom-cta__btn {
    display: inline-block;
    background: var(--clp-color-primary);
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: var(--clp-radius-btn);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.clp-bottom-cta__btn:hover {
    background: var(--clp-color-primary-hover);
    color: #fff;
}

.clp-bottom-cta__phone {
    margin-top: var(--clp-space-lg);
    font-size: 0.92rem;
    color: #666;
}

.clp-bottom-cta__phone a {
    color: var(--clp-color-primary);
    font-weight: 600;
    text-decoration: none;
}

.clp-bottom-cta__phone a:hover {
    text-decoration: underline;
}

/* ── Fluent Forms error stack ─────────────────────────────── */
.clp-form-block .ff-errors-in-stack {
    margin-top: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.clp-form-block .ff-errors-in-stack .error.text-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 6px;
    color: #cc0000;
    font-size: 0.9rem;
}

.clp-form-block .ff-errors-in-stack .error-text {
    flex: 1;
}

.clp-form-block .ff-errors-in-stack .error-clear {
    cursor: pointer;
    margin-left: 12px;
    font-weight: 700;
    opacity: 0.6;
    line-height: 1;
}

.clp-form-block .ff-errors-in-stack .error-clear:hover {
    opacity: 1;
}

/* ── Sticky mobile CTA ───────────────────────────────────── */
.clp-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #dde3eb;
    box-shadow: 0 -2px 16px rgba( 0, 0, 0, 0.1 );
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 1000;
    transform: translateY( 100% );
    transition: transform 0.3s ease;
}

.clp-sticky-cta.is-visible {
    transform: translateY( 0 );
}

.clp-sticky-cta__text {
    font-size: 0.9rem;
    color: var(--clp-color-muted);
}

.clp-sticky-cta__btn {
    background: var(--clp-color-primary);
    color: #fff;
    border: none;
    border-radius: var(--clp-radius-btn);
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

.clp-sticky-cta__btn:hover {
    background: var(--clp-color-primary-hover);
    color: #fff;
}

@media (min-width: 601px) {
    .clp-sticky-cta {
        display: none;
    }
}

/* ── Image layout experiments ────────────────────────────── */
/* Test via ?img_layout=formtop|herobanner|herobg|heroside    */

/* Layout 1: formtop — circular headshot above form heading */
.clp-img-formtop {
    text-align: center;
    margin-bottom: var(--clp-space-md);
}

.clp-img-formtop img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--clp-color-border);
    display: inline-block;
}

@media (max-width: 768px) {
    .clp-img-formtop img {
        width: 68px;
        height: 68px;
    }
}

/* Layout 2: herobanner — wide photo above headline */
.clp-img-herobanner {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--clp-space-md);
}

.clp-img-herobanner img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .clp-img-herobanner {
        border-radius: 0;
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px);
    }

    .clp-img-herobanner img {
        height: 220px;
        object-fit: cover;
        object-position: center top;
    }
}

/* Layout 3: herobg — full definition in the splitleft/coverhero section below */

/* Layout 4: heroside — photo floated right inside hero */
.clp-img-heroside {
    float: right;
    margin: 0 0 var(--clp-space-md) var(--clp-space-md);
    border-radius: 10px;
    overflow: hidden;
    width: 240px;
    shape-outside: border-box;
}

.clp-img-heroside img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .clp-img-heroside {
        float: none;
        width: calc(100% + 48px);
        margin: 0 -24px var(--clp-space-md);
        border-radius: 0;
        overflow: hidden;
    }

    .clp-img-heroside img {
        object-fit: cover;
        object-position: center top;
        width: 100%;
        height: 260px;
    }
}

/* ── coverhero layout ──────────────────────────────────── */
/* Full-width people photo above the headline text.
   Desktop: constrained inside the hero column.
   Mobile: fills the full width, ~45vh. */

.clp-img-coverhero {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--clp-space-md);
    width: 100%;
    max-height: 320px;
    line-height: 0;
}

.clp-img-coverhero img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 768px) {
    .clp-img-coverhero {
        border-radius: 0;
        margin: 0 -24px var(--clp-space-md);
        width: calc(100% + 48px);
        max-height: 45vh;
    }

    .clp-img-coverhero img {
        width: 100%;
        height: 45vh;
        max-height: 340px;
    }
}

/* ── herobg + splitleft — background-image on the hero section ── */

.clp-hero--has-bg {
    background-size: cover;
    background-position: center top;
    border-radius: 10px;
    padding: var(--clp-space-md);
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

/* Even gradient wash for herobg (banner photo) */
.clp-hero--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.70) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* splitleft — directional wash: text readable left, person visible right */
.clp-hero--splitleft::before {
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.90) 35%,
        rgba(255, 255, 255, 0.45) 100%
    );
}

/* All direct children sit above the overlay */
.clp-hero--has-bg > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    /* Bleed edge-to-edge past the 24px wrap padding */
    .clp-hero--has-bg {
        margin-left: -24px;
        margin-right: -24px;
        padding: var(--clp-space-md) 24px;
        border-radius: 0;
    }

    /* Heavier overlay — text always readable on small screens */
    .clp-hero--has-bg::before {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.78) 100%
        );
    }

    .clp-hero--splitleft::before {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.68) 100%
        );
    }
}