:root{
    /* Brand */
    --navy:#042a4c;
    --green:#22c55e;         /* more vibrant CTA green */
    --greenDeep:#16a34a;
    --greenGlow: rgba(34,197,94,.28);

    /* Neutrals */
    --ink:#07101d;
    --text:#1f2f3f;
    --muted:#5a6b7b;
    --bg:#ffffff;

    /* Surfaces */
    --wash:#f3f7fb;
    --card:#ffffff;
    --line: rgba(4,42,76,.12);

    /* Accent */
    --gold:#f1d18a;
    --goldBg:#fff4d6;

    /* Effects */
    --shadow: 0 22px 60px rgba(4,42,76,.14);
    --shadow2: 0 12px 28px rgba(4,42,76,.10);

    --radius: 18px;
    --radiusLg: 26px;
    --max: 1120px;
}

/* Reset-ish */
.cm *{ box-sizing:border-box; }
.cm{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    color:var(--text);
    background:var(--bg);
}
.cm a{ color:inherit; text-decoration:none; }
.cm img{ display:block; max-width:100%; height:auto; }

.cm .wrap{ width:min(100%, var(--max))}
.cm .section{ padding:72px 0; }
.cm .section.tight{ padding:52px 0; }
.cm .divider{ border-top:1px solid var(--line); }

/* HERO background (subtle pattern, no language) */
.cm .hero{
    position:relative;
    padding:30px 0 52px;
    overflow:hidden;
}
.cm .hero:before{
    content:"";
    position:absolute; inset:-260px -240px auto auto;
    width:680px; height:680px;
    background:
            radial-gradient(circle at 30% 30%, rgba(34,197,94,.18), transparent 62%),
            radial-gradient(circle at 65% 58%, rgba(4,42,76,.22), transparent 58%);
    transform: rotate(12deg);
    pointer-events:none;
}
.cm .hero:after{
    content:"";
    position:absolute; inset:0;
    opacity:.05;
    background-image:
            radial-gradient(circle at 14px 14px, var(--navy) 2px, transparent 2px),
            radial-gradient(circle at 42px 42px, var(--green) 2px, transparent 2px);
    background-size: 56px 56px;
    background-position: 0 0, 14px 14px;
    pointer-events:none;
}

/* Conversion top bar */
.cm .topbar{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;

    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;

    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
}
.cm .topbar .left{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
    align-items:center;
}
.cm .pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 10px;
    border-radius:999px;
    background: var(--navy);
    color:#fff;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
}
.cm .small{
    color:var(--muted);
    font-size:13px;
}
.cm .small strong{ color:var(--navy); }
.cm .topbar .right{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
}

.cm .topbar .btn{
    width:100%;
    justify-content:center;
}

/* Buttons */
.cm .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:12px 14px;
    border-radius: 12px;
    border:1px solid transparent;
    font-weight:750;
    font-size:14px;
    line-height:1;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    will-change: transform;
    text-decoration: none!important;
}
.cm .btn:active{ transform: translateY(1px); }
.cm .btn.primary{
    background: var(--green);
    color:#07101d;
    box-shadow: 0 14px 30px var(--greenGlow);
}
.cm .btn.primary:hover{
    background: var(--greenDeep);
    color:#fff;
    box-shadow: 0 18px 38px rgba(34,197,94,.32);
}
.cm .btn.ghost{
    background: rgba(255,255,255,.9);
    border-color: rgba(4,42,76,.18);
    color: var(--navy);
}
.cm .btn.ghost:hover{ background: rgba(4,42,76,.06); }
.cm .btn.light{
    background:#fff; color:var(--navy);
    box-shadow: 0 16px 30px rgba(0,0,0,.18);
}
.cm .btn.outlineLight{
    background: transparent;
    border-color: rgba(255,255,255,.38);
    color:#fff;
}
.cm .btn.outlineLight:hover{ background: rgba(255,255,255,.08); }
@media (max-width: 1023px) {
    .cm .btn.hideonmobile{
        display: none;
    }
    .proofCta{
        align-self: flex-end;
    }
    .cm .btn.primaryonmobile{
        background: var(--green);
        border-color: transparent;
        order: 3;
        color:#07101d;
        box-shadow: 0 14px 30px var(--greenGlow);
    }
    .cm .btn.primaryonmobile:hover{
        background: var(--greenDeep);
        color:#fff;
        box-shadow: 0 18px 38px rgba(34,197,94,.32);
    }
    .cm .btn.lightonmobile{
        background:#fff; color:var(--navy);
        order:3;
        box-shadow: 0 16px 30px rgba(0,0,0,.18);
        border-color:transparent;
    }
}
@media (min-width: 1024px) {
    .cm .btn.hideondesktop{
        display: none;
    }
}

/* Hero layout (compact image) */
.cm .heroCard{
    position:relative;
    z-index:2;
    margin-top:18px;
    border-radius: var(--radiusLg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--wash) 0%, #ffffff 82%);
    box-shadow: var(--shadow2);
    padding: 22px;
}
.cm .heroGrid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: start;
    margin-top: 14px;
}
@media (max-width: 980px){
    .cm .topbar{ border-radius: 18px; }
    .cm .heroGrid{ grid-template-columns: 1fr; }
}

@media (min-width: 860px){

    .cm .topbar{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:12px 16px;
        border-radius:999px;
        padding:12px 14px;
    }

    .cm .topbar .right{
        display:flex;
        width:auto;
    }

    .cm .topbar .btn{
        width:auto;
    }

}

.cm h1{
    color: var(--navy);
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.03;
    letter-spacing: -.03em;
    margin: 0 0 12px;
}
.cm .lead{
    font-size:18px;
    line-height:1.75;
    margin:0 0 16px;
    color: var(--text);
}
.cm .quoteCtas{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-top: 4px;
}

/* Trust bullets */
.cm .bullets{
    display:grid;
    gap:10px;
    margin:16px 0 0;
    padding:0;
    list-style:none;
    color: var(--muted);
    font-size:14px;
}
.cm .bullets li{
    display:flex; gap:10px; align-items:flex-start;
}
.cm .check{
    width:20px; height:20px; border-radius:6px;
    background: rgba(34,197,94,.14);
    border:1px solid rgba(34,197,94,.30);
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto;
    margin-top:1px;
}
.cm .check svg{ width:14px; height:14px; fill: var(--greenDeep); }

/* Compact hero image */
.cm .heroImage{
    position:relative;
    border-radius: 22px;
    overflow:hidden;
    border:1px solid rgba(4,42,76,.12);
    background:#eaf1f8;
    box-shadow: var(--shadow2);
    max-height: 320px;     /* keeps it from getting huge */
    aspect-ratio: 16 / 10; /* modern, not too tall */
}
.cm .heroImage img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.cm .heroBadge{
    position:absolute;
    left:14px; bottom:14px;
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(8px);
    border-radius:999px;
    padding:8px 12px;
    font-size:13px;
    font-weight:650;
    color: var(--navy);
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    border: 1px solid rgba(4,42,76,.10);
}

/* Quote box (conversion) */
.cm .quoteBox{
    margin-top:14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow2);
    overflow:hidden;
}
.cm .quoteTop{
    padding: 14px 16px;
    border-bottom:1px solid rgba(4,42,76,.10);
    background: linear-gradient(90deg, rgba(4,42,76,.06), rgba(34,197,94,.06));
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.cm .quoteTop strong{ color: var(--navy); }
.cm .hint{
    background: var(--goldBg);
    border:1px solid var(--gold);
    color:#6a4b00;
    border-radius:999px;
    padding:7px 10px;
    font-size:12.5px;
    white-space:nowrap;
}
.cm .quoteBody{ padding:16px; display:grid; gap:12px; }
.cm .steps{
    display:grid;
    gap:10px;
    padding:0; margin:0;
    list-style:none;
    color: var(--text);
    font-size:14px;
}
.cm .steps li{
    display:flex; gap:10px; align-items:flex-start;
}
.cm .stepNum{
    width:24px; height:24px;
    border-radius:999px;
    background: rgba(4,42,76,.10);
    color: var(--navy);
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:800;
    flex:0 0 auto;
}
.cm .note{
    font-size:12.5px;
    color: var(--muted);
    line-height:1.5;
}

/* Proof (before/after) section wrapper */
.proofHead{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:14px;
}
@media (max-width: 820px){
    .proofHead{ flex-direction:column; align-items:flex-start; }
}

.proofGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 900px){
    .proofGrid{ grid-template-columns: 1fr; }
}

.proofCard{
    margin:0;
    background:#fff;
    border:1px solid rgba(4,42,76,.14);
    border-radius: 18px;
    overflow:hidden;
    box-shadow: 0 14px 30px rgba(4,42,76,.08);
}

.proofSlider{
    /* Control the visual size of the slider area */
    max-width: 100%;
    padding: 12px;
}

/* --- Plugin overrides (TwentyTwenty) --- */

/* Ensure plugin wrappers don't overflow */
.proofSlider .twentytwenty-wrapper,
.proofSlider .bafg-twentytwenty-wrapper{
    width: 100% !important;
    max-width: 100% !important;
}

/* The plugin often injects inline height/width: constrain it */
.proofSlider .twentytwenty-container,
.proofSlider .bafg-twentytwenty-container{
    width: 100% !important;
    max-width: 100% !important;

    /* Key part: override huge inline height */
    height: auto !important;

    /* Keep it a nice “not too big” visual size */
    aspect-ratio: 4 / 4;
    overflow: hidden;
    border-radius: 14px;
    background: #e9eff6;
    border: 1px solid rgba(4,42,76,.12);
}

/* Make images fill the container nicely */
.proofSlider .twentytwenty-container img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display:block;
}

/* Labels */
.proofSlider .twentytwenty-overlay .twentytwenty-before-label:before,
.proofSlider .twentytwenty-overlay .twentytwenty-after-label:before{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(4,42,76,.14);
    color: var(--navy);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .01em;
}

/* Handle styling */
.proofSlider .twentytwenty-handle{
    border-color: rgba(255,255,255,.95) !important;
    box-shadow: 0 14px 26px rgba(4,42,76,.16);
}
.proofSlider .twentytwenty-handle:before,
.proofSlider .twentytwenty-handle:after{
    background: rgba(255,255,255,.95) !important;
}

/* Arrows */
.proofSlider .twentytwenty-left-arrow,
.proofSlider .twentytwenty-right-arrow{
    border-color: var(--navy) !important;
    opacity: .9;
}

/* Caption */
.proofCap{
    padding: 0 14px 14px;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(31,47,63,.92);
}
.proofCap strong{ color: var(--navy); }

/* Optional: tighten on small screens */
@media (max-width: 520px){
    .proofSlider{ padding: 10px; }
    .proofCap{ font-size: 13.5px; }
}


/* Services */
.cm h2{
    color: var(--navy);
    font-size: 34px;
    margin:0 0 10px;
    letter-spacing:-.01em;
}
.cm .sub{
    color: var(--muted);
    font-size:16px;
    line-height:1.75;
    margin:0 0 22px;
}
.cm .servicesHead{
    display:flex; flex-wrap:wrap;
    justify-content:space-between;
    gap:12px 16px;
    align-items:flex-end;
    margin-bottom:18px;
}

.cm .cards{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
}
@media (max-width: 980px){ .cm .cards{ grid-template-columns: 1fr; } }

.cm .card{
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 18px;
    box-shadow: 0 14px 30px rgba(4,42,76,.08);
    position:relative;
    overflow:hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cm .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(4,42,76,.12);
}
.cm .card:before{
    content:"";
    position:absolute; inset:-90px auto auto -90px;
    width:260px; height:260px;
    background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.20), transparent 62%);
    transform: rotate(10deg);
    pointer-events:none;
}
.cm .card.blue{ background: #f6fbff; }
.cm .card.mint{ background: #f3fff6; border-color: rgba(34,197,94,.22); }

.cm .kicker{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#56708a;
    margin:0 0 8px;
    position:relative; z-index:1;
}
.cm .card h3{
    margin:0 0 8px;
    font-size:20px;
    color: var(--navy);
    position:relative; z-index:1;
}
.cm .card p{
    margin:0 0 14px;
    color: var(--text);
    font-size:15px;
    line-height:1.7;
    position:relative; z-index:1;
}
.cardLink{
    display:block;
    text-decoration:none!important;
    color:inherit;
    height:100%;
}


.cm .link{
    display:inline-flex; align-items:center; gap:8px;
    color: var(--greenDeep);
    font-weight:800;
    font-size:15px;
    position:relative; z-index:1;
}
.cm .link:hover,.cardLink:hover .link{ text-decoration:underline; }

/* Photo proof */
.cm .photos{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:14px;
    margin-top:18px;
}
@media (max-width: 980px){ .cm .photos{ grid-template-columns: 1fr; } }

.cm .photo{
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#eaf1f8;
    aspect-ratio: 4 / 3;
    box-shadow: 0 12px 24px rgba(4,42,76,.08);
}
.cm .photo img{ width:100%; height:100%; object-fit:cover; }

/* CTA */
.cm .cta{
    border-radius: var(--radiusLg);
    padding: 34px 24px;
    color:#fff;
    background:
            radial-gradient(circle at 20% 20%, rgba(34,197,94,.28), transparent 46%),
            radial-gradient(circle at 80% 70%, rgba(241,209,138,.22), transparent 52%),
            linear-gradient(135deg, var(--navy) 0%, #06365f 55%, rgba(34,197,94,.18) 120%);
    box-shadow: var(--shadow);
    position:relative;
    overflow:hidden;
}
.cm .ctaGrid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:center;
    position:relative; z-index:1;
}
@media (max-width: 980px){ .cm .ctaGrid{ grid-template-columns: 1fr; } }

.cm .cta h2{
    margin:0 0 8px;
    font-size:30px;
    line-height:1.2;
    letter-spacing:-.01em;
    color:#fff;
}
.cm .cta p{
    margin:0;
    color: rgba(255,255,255,.88);
    line-height:1.7;
}
.cm .ctaActions{
    display:flex; flex-wrap:wrap;
    justify-content:flex-end;
    gap:12px;
}

@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-top: 0;
    }
}
/* Footer */
.cm .footer{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:16px;
    padding: 42px 0 76px;
}
@media (max-width: 980px){ .cm .footer{ grid-template-columns: 1fr; } }
.cm .footer h4{
    margin:0 0 8px;
    color: var(--navy);
    font-size:15px;
}
.cm .footer p, .cm .footer a{
    margin:0;
    color: var(--muted);
    font-size:14px;
    line-height:1.75;
}
.cm .footer a:hover{ text-decoration:underline; }
.cm .list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.cardImage{
    border-radius:14px;
    overflow:hidden;
    margin-bottom:12px;
    aspect-ratio: 16/10;
}

.cardImage img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* PRICE ANCHOR */
.price{
    font-size:15px;
    margin-bottom:6px;
    color:var(--muted);
}

.price strong{
    color:var(--navy);
    font-size:18px;
}

.whyGrid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:18px;
    margin-top:26px;
}

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

.why{
    padding:20px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow: var(--shadow2);
}

.whyIcon{
    width:42px;
    height:42px;
    border-radius:12px;
    background: rgba(34,197,94,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:10px;
}

.why h3{
    margin:0 0 6px;
    color:var(--navy);
}

.faq{
    margin-top:20px;
    display:grid;
    gap:10px;
}

.faq details{
    padding:16px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
}

.faq summary{
    cursor:pointer;
    font-weight:600;
    color:var(--navy);
}

.faq p{
    margin-top:8px;
    color:var(--text);
}