/* faq-tools.css */
.faq {

    details {
      interpolate-size: allow-keywords;

      .tb-arw {
        transition: rotate 0.3s ease;
      }

      &[open] .tb-arw {
        rotate: 180deg;
      }

      &::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
      }

      &[open]::details-content {
        height: auto;
      }
    }
  }
/* content-v11.css */
/* ContentV11 — show the section background image at full strength and blend it
   into the page with a white gradient. Scoped to the section's own `.bg` layer
   so the per-card `.ovrly` photo backgrounds keep their subtle treatment. */
#ContentV11 > .bg {
	--opacity: 1;
	--filter: none;
}

#ContentV11 > .bg::after {
	content: "";
	position: absolute; 
	inset: 0;
	background:
		linear-gradient(270deg, rgba(255, 255, 255, 0.00) 12.27%, rgba(255, 255, 255, 0.88) 75.95%, #FFF 95.1%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.00) 56.63%, rgba(255, 255, 255, 0.88) 88.03%, #FFF 97.48%),
		linear-gradient(180deg, #FFF 1.87%, rgba(255, 255, 255, 0.88) 10.83%, rgba(255, 255, 255, 0.00) 40.61%);
} 

/* navigation-v1.css */
/* Navigation V1 — 2-Col branch page link list (structure carried from Services Panel V5) */
.nv.v1 {

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

    /* Inner row gap — 24px between title and arrow */
    .nv-v1-inr {
        gap: 1.33rem;
    }

    /* Current page — hold full opacity against .hvr_op-lst dimming and mark with the accent */
    .nv-v1-lnk.active {
        --bdr-clr-o: 0.4;

        border-color: hsl(from var(--accent) h s l / var(--bdr-clr-o));
        opacity: 1;

        .arr {
            opacity: 1;
        }
    }

}

/* photos-v1.css */
/* Photos V1 — Single photo scroller with peek */

.pht.v1 {
	--pht-v1-img-w: 36.111rem; /* 480px — side (non-active) image size per Figma */
	--pht-v1-active-scl: 0.7; /* 650 / 480 — active pops up to center size */

	.pht-v1-list {
		/* Track stays within .mn_wd gutters — previous/next peek is constrained
		   to the same horizontal space that bounds the rest of the module. */
		--grd-sp-dyn: 0.1rem;

		align-items: center;
		padding-block: 2rem;
		padding-inline: max(calc(50% - (var(--pht-v1-img-w) / 2)), 1rem);
		scroll-padding-inline: max(calc(50% - (var(--pht-v1-img-w) / 2)), 1rem);


		> li {
			scroll-snap-align: center;
			opacity: 0.5;
			position: relative;
			transform: scale(var(--pht-v1-active-scl));
			transition: opacity 0.4s ease, transform 0.4s ease;

			&.s-active {
				--itm-val: 119;
				opacity: 1;
				transform: none;
				z-index: 1;
			}
		}
	}

	@container (max-width: 767px) {
		.pht-v1-list {
			gap: 0.75rem;
			padding-inline: max(calc(50% - 10rem), 1rem);
			scroll-padding-inline: max(calc(50% - 10rem), 1rem);

			> li {
				width: min(20rem, 70vw);
			}
		}
	}
}

/* faqs-v1.css */
.faq-list {
    --grd-sp-dyn: .44rem;
    --faq-list-open-fg: var(--white);
    --faq-list-idx-clr: rgba(0, 0, 0, 0.1);
    --faq-list-idx-clr-hvr: rgba(244, 240, 232, 0.6);

    [data-colors$="-dark"] & {
        --faq-list-open-fg: var(--black);
        --faq-list-idx-clr: rgba(244, 240, 232, 0.6);
        --faq-list-idx-clr-hvr: rgba(0, 0, 0, 0.1);
    }

    /* ── Accordion container ─────────────────────────────── */

    border-radius: 0.625rem;
    overflow: hidden;
    counter-reset: faq-counter;

    /* ── Item (details element) ──────────────────────────── */

    .faq-list-item {
        counter-increment: faq-counter;
        transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s, color var(--g-trn-sp) var(--g-trn-tf) 0s;

        & + .faq-list-item {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
    }

    details[open].faq-list-item,
    .faq-list-item:is(:hover, :focus-visible) {
        background-color: var(--callout);
        color: var(--faq-list-open-fg);
    }

    /* ── Summary row ─────────────────────────────────────── */

    .faq-list-smry {
        display: flex;
        align-items: center;
        gap: 3rem;
        padding: 2.5rem 3.5rem;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker,
        &::marker {
            display: none;
        }
    }

    /* ── Number + crown block ────────────────────────────── */

    .faq-list-num {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        width: 3.9rem;

        .flr_hd {
            --flr-mrg-bt: 0;
        }
    }

    .faq-list-crown {
        color: rgba(0, 0, 0, 0.12);
        transition: color var(--g-trn-sp) var(--g-trn-t) 0s;
        font-size: var(--flr-bx-w-clc);

        path {
            stroke: currentColor;
        }
    }

    details[open] .flr_hd,
    .faq-list-item:is(:hover, :focus-visible) .flr_hd {
        color: rgba(244, 240, 232, 0.5);
    }

    .faq-list-idx {
        font-family: var(--fnt-t-1-ff);
        font-size: 2.2rem;
        line-height: 1;
        color: var(--faq-list-idx-clr);

        &::before {
            content: counter(faq-counter, decimal-leading-zero);
        }
    }

    details[open] .faq-list-idx,
    .faq-list-item:is(:hover, :focus-visible) .faq-list-idx {
        color: var(--faq-list-idx-clr-hvr);
    }

    /* ── Question title ──────────────────────────────────── */

    .faq-list-ttl {
        flex: 1;
        font-family: var(--fnt-t-1-ff);
        font-size: clamp(1.5rem, 2.5vw, 2.5rem);
        line-height: 0.9;
        font-weight: var(--fnt-t-1-w);
        text-transform: var(--fnt-t-1-tt);
    }

    /* ── Toggle icons ────────────────────────────────────── */

    .faq-list-tog {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;

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

        .tb-open {
            display: block;
        }

        .tb-close {
            display: none;
        }
    }

    details[open] .faq-list-tog {
        .tb-open {
            display: none;
        }

        .tb-close {
            display: block;
        }
    }

    /* ── Answer body ─────────────────────────────────────── */

    .faq-list-ans {
        padding: 0 3.5rem 2.5rem;
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        line-height: 1.4;
    }

    /* ── Mobile ──────────────────────────────────────────── */

    @media screen and (min-width:1280px) {
        & {
            .faq-list-idx {
                font-size: 3.78rem; 
            }
        }
    }

    @media screen and (max-width: 699px) {

        .faq-list-smry {
            gap: 1.25rem;
            padding: 1.5rem 1.25rem;
        }

        .faq-list-num {
            width: 2.5rem;
        }

        .faq-list-idx {
            font-size: 2rem;
        }

        .faq-list-ans {
            padding: 0 1.25rem 1.5rem;
        }

        .faq-list-tog {
            width: 2.25rem;
            height: 2.25rem;
        }
    }
}

/* callout-v2.css */
.clt.v2 {

    .clt-v2-crd {
        border: 2px solid var(--accent);
        > .pd_v.pd_h {
            padding: 2.5rem 1.78rem;
        }

    }

    .clt-v2-bd {
        gap: 1.5rem; /* ~27px stack between icon, heading, subtext, phone, buttons */
    }

    .clt-v2-btns {
        gap: 1.17rem; /* ~21px between the two buttons */
    }

    .clt-v2-btm-deco {
        position: absolute;
        left: 0;
        bottom: -1px;
        display: block;
        width: 100%;
        height: auto;
    }

    @media screen and (min-width: 1280px) {
        & {
            --fnt-t-big-s: 2.78rem; /* heading ~50px Bayon */
            --fnt-phn-s: 3.83rem;   /* phone display ~69px Bayon */

            .clt-v2-crd {
                max-width: 53.667rem;
                margin-inline: auto;
            }
        }
    }
}