/* banner-tools.css */
/* Banner Tools */
.bnr-tls {
	--bnr-tls-pd-v-tp: 165; /* { readonly: true } */
	--bnr-tls-pd-v-tp-mbl: 75; /* { readonly: true } */
	--bnr-tls-pd-v-bt: 165; /* { readonly: true } */
	--bnr-tls-pd-v-bt-mbl: 75; /* { readonly: true } */

	--bnr-tls-pd-v-tp-clc: calc((var(--bnr-tls-pd-v-tp-mbl) * 1px) + (var(--bnr-tls-pd-v-tp) - var(--bnr-tls-pd-v-tp-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
	--bnr-tls-pd-v-bt-clc: calc((var(--bnr-tls-pd-v-bt-mbl) * 1px) + (var(--bnr-tls-pd-v-bt) - var(--bnr-tls-pd-v-bt-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	padding-top: var(--bnr-tls-pd-v-tp-clc);
	padding-bottom: var(--bnr-tls-pd-v-bt-clc);

	.cms-content & {
		[field="Title"] [data-sysheader] {
			display: none;
		}

		[field="Title"] if[p-hide='true'] {
			display: block;
		}
	}
}

.overlap {
	.bnr-tls [class*="mn_"],
	+ .bnr-tls [class*="mn_"] {
		padding-top: var(--bnr-tls-pd-v-tp-clc);
	}
}

/* When a banner is the first section under an overlap header, overlapping-header.js
   adds the measured header height to this section's own top padding. Banners route
   their headline's breathing room through their inner content (.bnr-*-cnt), so drop
   the section's own top padding here — otherwise it doubles up under the header. */
header:has(.overlap) + main > .bnr-tls:first-child {
	padding-top: 0;
}
/* coupon-tools.css */
/* Coupon Tools */
main {
	--cpn-ttl-w: 3rem; /* { min: 0, max: 10, step: 1, friendly: 'Coupon Title Width' } */

	--cpn-bdr-pd: 0rem; /* { min: 0.25, max: 2, step: 0.001, friendly: 'Coupon Border Padding' } */
	--cpn-bdr-w: 2px; /* { min: 1, max: 5, step: 1, friendly: 'Coupon Border Width' } */
	--cpn-bdr-s: none; /* { friendly: 'Coupon Border Style' } */

	--cpn-act-icn-s: .89rem; /* { min: .8, max: 3, step: 0.001, friendly: 'Action Icon Size' } */

	--cpn-lg-mx-wd: 265; /* { min: 50, max: 500, step: 10, friendly: 'Coupon Logo Max Width Desktop' } */
	--cpn-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Coupon Logo Max Width Mobile' } */
	--cpn-lg-mx-wd-clc: calc((var(--cpn-lg-mx-wd-mbl) * 1px) + (var(--cpn-lg-mx-wd) - var(--cpn-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */

	--cpn-lg-dsp: flex;  /* {friendly: 'Coupon Logo Display'} */

	--cpn-ntch-r: 1.667rem;  /* { min: 10, max: 40, step: 1, friendly: 'Coupon Notch Radius' } */
	--cpn-ntch-y: 78%;   /* { min: 50, max: 95, step: 1, friendly: 'Coupon Notch Position' } */

	--cpn-udr-clr: #ffce34;  /* { friendly: 'Coupon Underlay Color' } */
	--cpn-udr-s: 12px;   /* { min: 0, max: 50, step: 1, friendly: 'Coupon Underlay Side Inset' } */
	--cpn-udr-o: 14px;   /* { min: 0, max: 30, step: 1, friendly: 'Coupon Underlay Overflow' } */
}

/* values-tools.css */
/* Values Tools */
main {
	--vls-tls-icn-s: 3rem; /* { min: 1, max: 5, step: 0.1, friendly: 'Values Icon Size' } */
}

.vls .vls-icn {
	font-size: var(--vls-tls-icn-s);
}

/* banner-v1.css */
.bnr.v1 {
    --bnr-tls-pd-v-tp: 90;
    --bnr-tls-pd-v-tp-mbl: 50;
    --bnr-tls-pd-v-bt: 40;
    --bnr-tls-pd-v-bt-mbl: 30;
    --bnr-img-bg-o: .2;
    background: linear-gradient(180deg, hsl(from var(--black) h s l / .8) 11.54%, hsl(from var(--background) h s l / .8) 100%);

    /* Default flair color (used when there's no next panel or its theme isn't matched) */
    --bnr-v1-flair-clr: var(--accent);

    /* Match flair color to the bg of the next panel so the strip blends into it */
    &:has(+ section[data-colors="primary-light"])   { --bnr-v1-flair-clr: var(--lt-bg); }
    &:has(+ section[data-colors="alternate-light"]) { --bnr-v1-flair-clr: var(--lt-alt-bg); }
    &:has(+ section[data-colors="primary-dark"])    { --bnr-v1-flair-clr: var(--dk-bg); }
    &:has(+ section[data-colors="alternate-dark"])  { --bnr-v1-flair-clr: var(--dk-alt-bg); }

    position: relative;



    .bnr-v1-cnt {
        position: relative;
        z-index: 1;
        padding-top: var(--bnr-tls-pd-v-tp-clc);
    }

    .wv-bnr {
        --shape-clr-1-dyn: var(--dk-bg);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        svg {
            width: 100%;
            height: 17rem;
        }
    }

    .bnr-v1-flair {
        width: 100%;
        height: .78rem;
        background-color: var(--bnr-v1-flair-clr);
        mask-image: var(--flr-img);
        mask-repeat: repeat-x;
        mask-size: auto 100%;
        mask-position: center;
        position: absolute;
        bottom: -1px;
        left: 0;
        z-index: 1;
    }
}

header:has(.hdr.v1) + main .bnr.v1 {
    --bnr-tls-pd-v-tp: 127;
    --bnr-tls-pd-v-bt: 64;
}
/* content-v2.css */
.cnt.v2 {
    aside > * + * {
        margin-top: var(--sp-vm-clc);
    }
}

body.child .cnt.v2 [class*="mn_"] {
    animation: none;
}

/* side-nav.css */
.sdnv {
    --sdnv-lnk-pd: 1.125rem;
    --sdnv-lnk-rds: 0.625rem;
    --sdnv-hvr-bg: rgba(255, 255, 255, 0.12);
    --sdnv-hvr-bdr: rgba(237, 237, 237, 0.08);
    --sdnv-cpn-gap: 8rem;


    .sdnv-link {
        padding: var(--sdnv-lnk-pd);
        border: 1.5px solid transparent;
        border-radius: var(--sdnv-lnk-rds);
        color: hsl(from var(--text-color) h s l / 0.8);
        text-decoration: none;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;

        .sdnv-arr {
            color: var(--accent);
            width: 1em;
            height: 1em;
            opacity: 0;
            transition: opacity 0.2s;
        }

        &.active,
        &:hover,
        &:focus-visible {
            background-color: var(--sdnv-hvr-bg);
            border-color: var(--sdnv-hvr-bdr);
            color: var(--text-color);

            .sdnv-arr {
                opacity: 1;
            }
        }
    }

    .sdnv-cpn {
        margin-top: var(--sdnv-cpn-gap);
    }
}

/* values-v7.css */
/* Values V7 — 4 stat cards + image card with CTA pill row */

.vls.v7 {
    /* Headline (h4 → fnt_t-1) — Figma is mixed case, lh 0.9 */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.9;

    /* Subheader (h5 → fnt_t-5) — Albert Sans Medium 500, lh 1.7, neutral text color */
    --fnt-t-5-w: 500;
    --fnt-t-5-lh: 1.7;
    --fnt-t-5: var(--lt-txt);

    /* Card radius — Figma 20px */
    --bdr-rds-crd: 1.111rem;
    --bdr-rds: 1.11rem;

    /* Stat list — 2×2 grid, Figma 40px gap */
    .vls-v7-stt {
        --grd-sp: 2.222rem;
    }

    &.lt-bg .vls-v7-btns .btn.v2 {
        color: #FFF;
    }


    /* Number + suffix row — baseline-aligned */
    .vls-v7-num-rw {
        column-gap: 0.556rem;
    }

    .vls-v7-lbl {
        color: var(--text-color);
    }

    /* Suffix ("MIN", "mo") — Bayon 45px uppercase, yellow */
    .vls-v7-suf {
        font-family: var(--fnt-t);
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        color: var(--accent);
        padding-bottom: 0.444rem;
    }

    .vls-v7-img-crd::before {
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, hsl(from var(--black) h s l / 0.7) 100%);
        pointer-events: none;
        z-index: 1;
    }

    /* CTA row — absolute at bottom, overlapping the gradient */
    .vls-v7-btns {
        position: absolute;
        left: 50%;
        bottom: 4.44rem;
        transform: translateX(-50%);
        gap: 1.167rem;
        z-index: 2;
        white-space: nowrap;

        @media screen and (max-width: 699px){
                flex-direction: column;
        }
    }

    @media screen and (min-width: 1280px) {
        .vls-v7-bd {
            --flx-gap: 2.778rem;
        }
    }
}

/* services-v3.css */
/* Services V3 — Full-width gradient section with intro + 2-col scrollable service list */

.srv.v3 {

    .srv-v3-list {
        columns: 2;
        column-gap: 2.5rem;
    }

    .srv-v3-list li {
        break-inside: avoid;
    }

    @media screen and (max-width: 699px) {
        .srv-v3-list {
            columns: 1;
        }
    }
}

/* reviews-v7.css */
/* Reviews V7 — Spotlight + Aggregate (single review + rating block) */
.rvw.v7 {

    /* Big heading (h4 → fnt_t-1) — Bayon 100px / lh 0.9 / mixed case */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.9;

    /* Card title (fnt_qte from ReviewItem) — Figma 50px / lh 0.9 */
    --fnt-qte-s: 2.78rem;
    --fnt-qte-lh: 0.9;

    /* Card border-radius — Figma 20px */
    --bdr-rds-crd: 1.11rem;

    /* Heading accent — teal via theme-aware --callout */
    header h4 > strong {
        color: var(--callout);
        display: inline-block;
    }

    /* Big "4.9" number — teal, lh 1 */
    .rvw-v7-num {
        line-height: 1;
        color: var(--callout);
    }

    /* Rate row gap (24px) + caption color */
    .rvw-v7-rate {
        --grd-sp-dyn: 1.33rem;

        .fnt_t-k {
            color: var(--text-color);
        }
    }

    .rvw-v7-avg { gap: 0.44rem; }

    /* Star — Figma 56×56 yellow */
    .rvw-v7-str {
        font-size: 3.1rem;
        color: var(--rvw-str-clr);
    }

    .rvw-v7-cnt { line-height: 1.2; margin: 0; }
    .rvw-v7-srcs li { gap: 0.22rem; }

    /* Desktop card padding — Figma 48px top/bottom, 40px sides */
    @media screen and (min-width: 1280px) {
        .rvw-v7-list li .pd_v.pd_h {
            padding: 2.67rem 2.22rem;
        }
    }
}

/* contact-v1.css */
/* Contact V1 */
.ctc.v1 {
	background: linear-gradient(to bottom, var(--background) 20%, hsl( from var(--main-bg-alt) h s 60% / 0.7) );

	.ctc-v1-card {
		overflow: hidden;
		background-color:hsl(from var(--inner-theme) h s l / 0.9);
		backdrop-filter: blur(4px);

		@media screen and (min-width:1280px) {
			& {
				margin-bottom: 2rem;
			}
		}
	}

	/* ===== Left column: heading + mascot ===== */
	.ctc-v1-lft {
		gap: 1.5rem;
	}

	.ctc-v1-ttl {
		font-size: clamp(3rem, 5.2vw, 6.25rem);
		line-height: 0.9;
		text-align: center;
	}

	.ctc-v1-msc {
		flex: 1;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: 100%;
		
		

		img {
			max-width: 26.2rem;
			width: 100%;
			height: auto;
			display: block;
		}
	}

	/* ===== Right column: form panel ===== */
	.ctc-v1-frm {
		padding: 2rem;
		gap: 1.25rem;

		.input-text {
			:is(input, select, textarea)::placeholder {
				font-size: 0.875rem;
				font-weight: 500;
				letter-spacing: 0.175rem;
				text-transform: uppercase;
				color: #191919;
				opacity: 1;
			}

			/* Address map pin: muted */
			&.has-icn > svg {
				fill: #191919;
				opacity: 0.5;
			}
		}
	}

	.ctc-v1-legal {
		font-size: 0.875rem;
		line-height: 1.5;
		color: #191919;

		a {
			color: #191919;
		}
	}

	/* ===== Responsive ===== */
	@media screen and (max-width: 1279px) {
		.ctc-v1-lft {
			min-height: 22rem;
		}
	}

}
