/* aspect-ratio.css */

[class*="asp_"] {
	width: 100%;
	
	&.asp_1-1 :where(img, video, .imap, iframe) {
		aspect-ratio: 1/1;
	}
	
	&.asp_16-9 :where(img, video, .imap, iframe) {
		aspect-ratio: 16/9;
	}
	
	&.asp_9-16 :where(img, video, .imap, iframe) {
		aspect-ratio: 9/16;
	}
	
	&.asp_3-4 :where(img, video, .imap, iframe) {
		aspect-ratio: 3/4;
	}
	
	&.asp_5-4 :where(img, video, .imap, iframe) {
		aspect-ratio: 5/4;
	}
	
	&.asp_12-5 :where(img, video, .imap, iframe) {
		aspect-ratio: 12/5;
	}

	iframe {
		width: 100%;
		height: auto;
	}
}

/* content-v10.css */
.cnt.v10{
    .bg{
        img{
            opacity: 1;
        }
    }
}
/* content-v3-alt.css */
/* Content V3 — Two-column intro (content + image) with Poseidon Promise banner below */

.cnt.v3 {

    .cnt-v3-split {
        align-items: stretch;
    }

    .mn_wd {
        z-index: 1;
    }
    .lg-cta-crd.hdn{
        overflow: visible;
    }
    /* ── Inline phone callout ──────────────────────────────── */

    .cnt-v3-phone {
        --bg-bx-o: 1;
        padding: 1.75rem 2.5rem;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);

        p {
            margin: 0;
            font-weight: 600;
            line-height: 1.75;
        }
    }


    /* ── Right-column image ────────────────────────────────── */

    .cnt-v3-img {
        align-self: stretch;

        picture, img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 23rem;
            object-fit: cover;
        }
    }


    /* ── Poseidon Promise banner ───────────────────────────── */

    .cnt-v3-promise {
        --bg-bx-o: 0.85;
        gap: 1.25rem;
        padding: 2.25rem 3.125rem;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        background-color: hsl( from var(--inner-theme) h s l / 0.85);
    }

    .cnt-v3-promise-l {
        flex-shrink: 0;

        @media screen and (min-width: 1280px) {
            width: var(--three-8ths);
        }
    }

    .cnt-v3-promise-ttl {
        margin: 0;
    }

    .cnt-v3-promise-sub {
        --title-color: var(--fnt-t-co);
        text-transform: uppercase;
        margin: 0;
    }

    .cnt-v3-promise-r {
        flex: 1;
        justify-content: flex-end;
        gap: 1.5rem;
        min-width: 0;
    }

    .cnt-v3-promise-body {
        flex: 1;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
        min-width: 0;
    }


    /* ── Responsive ────────────────────────────────────────── */

    @media screen and (max-width: 1279px) {
        .cnt-v3-promise {
            padding: 2rem;
        }

        .cnt-v3-promise-r {
            margin-top: 1rem;
        }
    }

    @media screen and (max-width: 699px) {
        .cnt-v3-phone {
            padding: 1.25rem 1.5rem;
        }

        .cnt-v3-promise {
            padding: 1.5rem;
            gap: 1rem;
        }

        .cnt-v3-img picture,
        .cnt-v3-img img {
            min-height: 15rem;
        }
    }
}

/* services-v5.css */
/* Services V5 — 2-Col Dark-Teal Service Link List */
.srv.v5 {
    /* Section heading (h4 → fnt_t-1) — Bayon 100px / lh 0.8 / mixed case */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.8;

    /* Title takes remaining space between icon and arrow */
    .srv-v5-ttl {
        flex: 1 1 auto;
    }

    /* Yellow icon (40px) — --accent resolves to yellow inside the ulk-bg dark scope */
    .srv-icn {
        color: var(--accent);
        font-size: 2.22rem;
        line-height: 1;
        flex: 0 0 auto;
    }

    li .pd_v.pd_h {
        padding: 1rem 2.22rem;
    }


    /* Yellow chevron — 16×10 */
    .arr {
       font-size: .89rem;
    }

    /* Inner row gap — Figma 24px between icon/title/arrow */
    .srv-v5-inr {
        gap: 1.33rem;
    }

    /* Desktop card padding override — Figma 31px / 40px (default pd_h pd_v on half-of-mn_wd resolves too large) */
    @media screen and (min-width: 1280px) {
        & {
            --fnt-t-itm-s: 2.22rem;
        }
    }
}

/* content-v3.css */
/* Content V3 — Two-column intro (content + image) with Poseidon Promise banner below */

.cnt.v3 {

    .cnt-v3-split {
        align-items: stretch;
    }

    .mn_wd {
        z-index: 1;
    }
    .lg-cta-crd.hdn{
        overflow: visible;
    }
    /* ── Inline phone callout ──────────────────────────────── */

    .cnt-v3-phone {
        --bg-bx-o: 1;
        padding: 1.75rem 2.5rem;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);

        p {
            margin: 0;
            font-weight: 600;
            line-height: 1.75;
        }
    }


    /* ── Right-column image ────────────────────────────────── */

    .cnt-v3-img {
        align-self: stretch;

        picture, img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 23rem;
            object-fit: cover;
        }
    }


    /* ── Poseidon Promise banner ───────────────────────────── */

    .cnt-v3-promise {
        --bg-bx-o: 0.85;
        gap: 1.25rem;
        padding: 2.25rem 3.125rem;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        background-color: hsl( from var(--inner-theme) h s l / 0.85);
    }

    .cnt-v3-promise-l {
        flex-shrink: 0;

        @media screen and (min-width: 1280px) {
            width: var(--three-8ths);
        }
    }

    .cnt-v3-promise-ttl {
        margin: 0;
    }

    .cnt-v3-promise-sub {
        --title-color: var(--fnt-t-co);
        text-transform: uppercase;
        margin: 0;
    }

    .cnt-v3-promise-r {
        flex: 1;
        justify-content: flex-end;
        gap: 1.5rem;
        min-width: 0;
    }

    .cnt-v3-promise-body {
        flex: 1;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
        min-width: 0;
    }


    /* ── Responsive ────────────────────────────────────────── */

    @media screen and (max-width: 1279px) {
        .cnt-v3-promise {
            padding: 2rem;
        }

        .cnt-v3-promise-r {
            margin-top: 1rem;
        }
    }

    @media screen and (max-width: 699px) {
        .cnt-v3-phone {
            padding: 1.25rem 1.5rem;
        }

        .cnt-v3-promise {
            padding: 1.5rem;
            gap: 1rem;
        }

        .cnt-v3-img picture,
        .cnt-v3-img img {
            min-height: 15rem;
        }
    }
}

/* contact-v4.css */
/* Contact V4 — Form + Locations Info Card */
.ctc.v4 {
    --flx-gap: 2.78rem;
    
    background: linear-gradient(to bottom, var(--background), var(--inner-theme) 82.258%);
    .frst-bg {
        --frst-blur: 4px;
        background-color: hsl(from var(--frst-bg-clr) h s l / .9);
        border: none;
        
        @media screen and (min-width:1280px) {
            & {
                box-shadow: 0 14px 24px 0 rgba(0, 0, 0, 0.20);
            }
        }
    }

    .frm {
        padding: 1.78rem;
    }

    /* Bottom emergency CTA card */
    .cntc-v4-cta {
        --bdr-rds-crd: 1.11rem;            /* Figma 20px */

        /* Kicker font (fnt_t-k) — Figma 20px / 0.12em letter-spacing
           (default 1rem / 0.4em). Use .cstm scope so other fnt_t-k usages aren't affected. */
        .fnt_t-k.cstm {
            --fnt-t-k-s: 1.11rem;
            --fnt-t-k-ls: 0.12em;
        }

        @media screen and (min-width:1280px) {
           & > .pd_h.pd_v {
                padding: 1.78rem 12rem 1.78rem 1.78rem;
            }
        }
    }

    .cntc-v4-cta-dsc {
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
    }

    .iso {
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 42%;
    }

    /* Values Stacked Single */
    .vls-stk-sgl {
        --fnt-t-co-s: 2.22rem;
    }
    .vls-stk-sgl-icn svg {
        font-size: 2rem;
    }

    &[data-colors$="-light"] {
        .ulk-bg {
            --inner-theme: var(--dk-bg);
        }
    }
    
}