:root
{
--max-width: 1535px;
--header-height:90px
}
.background-color-primary{background: var(--blue)}
.background-color-primary-dark{background: #125A8D}

.white-text .wckd-icon svg{	stroke: var(--white);}
.home-testimonial-card {box-sizing: border-box;height: 100%;}
.home-testimonial-meta {display: flex;align-items: center;gap: var(--size-m, 1rem);}
.home-testimonial-photo {width: 4.5rem;height: 4.5rem;border-radius: 50%;object-fit: cover;flex-shrink: 0;}

.wckd-carousel .text-m + p{margin-top:0;}

.site-header-nav {display: flex;flex: 1;justify-content: flex-end;align-items: center;min-width: 0;position: relative;}

footer a{color: var(--text-color)}

@media (max-width: 768px) {
	.site-header {z-index: 1000;}
	.site-header-nav {position: static;}
	.site-header .wckd-menu.hamburger-collection {left: 0;right: 0;width: 100%;max-width: none;top: 100%;margin-top: 0;padding-top: var(--size-xs, 0.25rem);padding-bottom: calc(var(--size-m, 1rem) + env(safe-area-inset-bottom, 0px));border-radius: 0;max-height: min(72vh, calc(100dvh - 5rem));overflow-y: auto;-webkit-overflow-scrolling: touch;box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);z-index: 1000;}
	.site-header .wckd-menu.hamburger-collection a {white-space: normal;padding-top: var(--size-m, 1rem);padding-bottom: var(--size-m, 1rem);}
	.site-header .wckd-menu.hamburger-collection li:last-child {border-bottom: none;padding-bottom: var(--size-xs, 0.25rem);}
	.site-header .wckd-menu.hamburger-collection a.button {flex: 0 1 auto;justify-content: center;align-self: center;margin: var(--size-m, 1rem) auto;width: min(calc(100% - 2 * var(--size-m, 1rem)), 20rem);}

.wckd-carousel.count-3 {
		--count: 1;
	}
}



.banner-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
backface-visibility: hidden;
transform: translateZ(0);
will-change: auto;
}
.inview-zoom {
overflow: hidden;
}

.aspect-4-3 {
aspect-ratio: 4 / 3;
}

.inview-zoom-aspect {
position: relative;
}

.inview-zoom-fill {
position: absolute;
inset: 0;
overflow: hidden;
}

.inview-zoom-fill > img:not(.banner-media) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.inview-zoom-fill > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.video-background > .inview-zoom {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}

.video-background > .inview-zoom video,
.video-background > .inview-zoom img.banner-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

/* .layer-2 sets position:relative after .overlay, so the overlay was shrinking to text width */
.video-background > .overlay.layer-2,
.aspect.inview-zoom-aspect > .overlay.layer-2 {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
}

.inview-zoom > img,
.inview-zoom > video,
.inview-zoom > .banner-media {
transform: translateZ(0) scale(1);
transform-origin: center center;
transition: transform 4.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.inview-zoom > .banner-media.banner-media-zoom {
transform: translateZ(0) scale(1.12);
}

.inview-zoom.in-view > img,
.inview-zoom.in-view > video,
.inview-zoom.in-view > .banner-media {
transform: translateZ(0) scale(1.05);
}

.inview-zoom.in-view > .banner-media.banner-media-zoom {
transform: translateZ(0) scale(1.175);
}

/* Gallery bento: match image sizing from wckd-components for embedded videos */
.wckd-bento .column .gallery-bento-video {
display: block;
width: 100%;
height: auto;
}

/* Hover image scale (pair with overflow-hidden / inview-zoom wrappers; gallery, landings) */
.hover-zoom img,
.hover-zoom video {
transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hover-zoom:hover img,
.hover-zoom:hover video {
transform: scale(1.05);
}

.hover-zoom.inview-zoom:hover > img,
.hover-zoom.inview-zoom:hover > video {
transform: translateZ(0) scale(1.03);
}

.hover-zoom.inview-zoom.in-view:hover > img,
.hover-zoom.inview-zoom.in-view:hover > video {
transform: translateZ(0) scale(1.09);
}

.wckd-carousel .column img{object-fit: cover; height:100%;max-height: 85vh;width: 100%}
.wckd-carousel .column video{object-fit: cover; max-height: 85vh;width: auto}
.wckd-carousel .column.fit-content {
flex: 0 0 auto;
scroll-snap-align: center;
}

/* Peek-left: WCKD pulls the first slide left with margin = -peek so it eats the padding (see wckd-components.css).
Keep margin at 0 here so the left padding stays visible as a real gutter. */
.wckd-carousel.peek-left > .column:first-of-type {
margin-left: 0;
min-width: var(--column-width);
box-sizing: border-box;
}
.wckd-carousel.peek-left > .column:first-of-type video {
width: 100%;
max-width: 100%;
}

.counter-badge {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: var(--black);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--text-bold);
font-size: var(--text-m);
transform-origin: center;
}

@keyframes about-counter-pop {
from {
transform: scale(0.82);
opacity: 0.48;
}
to {
transform: scale(1);
opacity: 1;
}
}

#process .column.animate.in-view > .flex.gap-l:nth-child(3) .counter-badge {
animation: about-counter-pop 0.62s cubic-bezier(0.34, 1.4, 0.64, 1) both;
animation-delay: 0.22s;
}

#process .column.animate.in-view > .flex.gap-l:nth-child(4) .counter-badge {
animation: about-counter-pop 0.62s cubic-bezier(0.34, 1.4, 0.64, 1) both;
animation-delay: 0.38s;
}

#process .column.animate.in-view > .flex.gap-l:nth-child(5) .counter-badge {
animation: about-counter-pop 0.62s cubic-bezier(0.34, 1.4, 0.64, 1) both;
animation-delay: 0.54s;
}

.rollup {
display: inline-block;
font-variant-numeric: tabular-nums;
}


/* "Where we build" regional photo */
.about-region-media {
flex: 1 1 auto;
height: clamp(280px, 42vw, 440px);
min-height: clamp(280px, 42vw, 440px);
background: rgba(15, 23, 42, 0.06);
}

.about-region-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

/* Materials / partners: WCKD no-bullets flex-group gap-xl justify-center items-center */
.partner-logos > li {
margin: 0;
line-height: 0;
}

.partner-logo-link {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.88;
transition: opacity 0.2s ease;
}

.partner-logo-link:hover {
opacity: 1;
}

.partner-logo-link:focus-visible {
outline: 2px solid var(--button-bg, #2563eb);
outline-offset: 4px;
border-radius: 4px;
}

.partner-logo-link img {
display: block;
height: clamp(26px, 4.5vw, 40px);
width: auto;
max-width: min(168px, 32vw);
object-fit: contain;
transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
.partner-logo-link:hover img {
transform: translateY(-3px) scale(1.04);
}
}

/* Azoria header mark is light-on-dark; keep contrast on this light section */
.partner-logo-azoria .partner-logo-link {
background: #0f172a;
padding: 0.45rem 0.75rem;
border-radius: 10px;
}

.partner-logo-azoria .partner-logo-link img {
height: clamp(22px, 3.5vw, 30px);
max-width: min(140px, 42vw);
}

.about-closer-look .inview-zoom img {
display: block;
width: 100%;
height: clamp(220px, 30vw, 340px);
object-fit: cover;
}

.about-page .wckd-carousel article.column.fill-light,
.about-page .about-closer-look article.column.fill-light {
transition:
transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
box-shadow 0.55s ease;
}

@media (hover: hover) and (pointer: fine) {
.about-page .wckd-carousel article.column.fill-light:hover,
.about-page .about-closer-look article.column.fill-light:hover {
transform: translateY(-8px);
}
}

/* About: "How your project moves" mobile clip carousel */
.about-process-clips {
width: 100%;
}

.about-process-clip-card {
display: flex;
flex-direction: column;
min-height: 100%;
}

/* Natural video height (no letterboxing crop from object-fit: cover or fixed aspect) */
.about-process-media {
position: relative;
width: 100%;
overflow: hidden;
background: rgba(15, 23, 42, 0.06);
}

.about-process-video-inner {
position: relative;
display: block;
width: 100%;
overflow: hidden;
}

.about-process-clips .about-process-video-inner .about-process-video {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}

.about-process-video-inner:not(.is-playing) .about-process-video {
pointer-events: none;
}

.about-process-video-inner .about-process-icon-pause {
display: none;
}

.about-process-video-inner.is-playing .about-process-icon-play {
display: none;
}

.about-process-video-inner.is-playing .about-process-icon-pause {
display: block;
}

.about-process-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
padding: 0;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.92);
background: rgba(15, 23, 42, 0.48);
color: #fff;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.about-process-play:focus-visible {
outline: 2px solid var(--button-bg, #2563eb);
outline-offset: 3px;
}

.about-process-video-inner.is-playing .about-process-play {
left: auto;
top: auto;
right: var(--size-s, 0.75rem);
bottom: var(--size-s, 0.75rem);
transform: none;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
background: rgba(15, 23, 42, 0.62);
}

.about-process-clips .wckd-carousel-dots {
margin-top: var(--size-m, 1rem);
}

.about-process-clips .wckd-carousel-nav {
align-items: flex-end;
padding-bottom: var(--size-s, 0.75rem);
}

.about-process-clips .wckd-carousel-nav .prev-btn,
.about-process-clips .wckd-carousel-nav .next-btn {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
color: #0f172a;
margin-bottom: var(--size-xl, 1.5rem);
}

@media (max-width: 900px) {
	
	.overlay{
	flex-direction: column;
	display: flex;
	justify-content: flex-end;
	}
	
	.about-page #main > section:not(.video-background):not(.about-immersive),
	.about-page #main > .head {
	padding-left: 16px;
	padding-right: 16px;
	}
	
	.about-page #main > section.margin-top-xl,
	.about-page #main > section:nth-of-type(odd).margin-top-xl {
	margin-top: clamp(2.25rem, 8vw, 3.25rem);
	}
	
	.about-page #main > section.pad-xxl {
	padding-top: clamp(2rem, 6vw, 3rem);
	padding-bottom: clamp(2rem, 6vw, 3rem);
	}
	
	.about-closer-look .inview-zoom img {
	height: clamp(210px, 58vw, 280px);
	}
	
	.about-planning-accordion .accordion-content {
		max-width: none;
	}

}

.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

.skip-link:focus {
position: fixed;
left: 0.5rem;
top: 0.5rem;
width: auto;
height: auto;
padding: 0.5rem 1rem;
overflow: visible;
z-index: 10000;
background: #ffffff;
color: #111827;
text-decoration: none;
}

/* Scroll entrances: readable travel + smooth deceleration */
.animate {
opacity: 0;
transform: translateY(22px);
transition:
opacity 1.42s cubic-bezier(0.25, 0.88, 0.32, 1),
transform 1.42s cubic-bezier(0.25, 0.88, 0.32, 1);
will-change: opacity, transform;
}

.animate.fade-in {
transform: translateY(28px);
}

.animate.in-view {
opacity: 1;
transform: translateY(0);
}

.wckd-carousel .column {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.animate.delay-1 { transition-delay: 0.34s; }
.animate.delay-2 { transition-delay: 0.52s; }
.animate.delay-3 { transition-delay: 0.68s; }
.animate.delay-4 { transition-delay: 0.84s; }
.animate.delay-5 { transition-delay: 1.02s; }

@media (prefers-reduced-motion: reduce) {
.animate,
.animate.in-view {
transition: none !important;
transform: none !important;
opacity: 1 !important;
will-change: auto !important;
}

#process .column.animate.in-view .counter-badge {
animation: none !important;
}

.about-page .wckd-carousel article.column.fill-light,
.about-page .about-closer-look article.column.fill-light {
transition: none !important;
}

.about-page .wckd-carousel article.column.fill-light:hover,
.about-page .about-closer-look article.column.fill-light:hover {
transform: none !important;
box-shadow: none !important;
}

.partner-logo-link img {
transition: none !important;
transform: none !important;
}

.about-process-play {
transition: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

.inview-zoom > img,
.inview-zoom > video,
.inview-zoom > .banner-media {
transition: none !important;
transform: translateZ(0) scale(1) !important;
}

.inview-zoom > .banner-media.banner-media-zoom {
transform: translateZ(0) scale(1.12) !important;
}

.hover-zoom:hover img,
.hover-zoom:hover video,
.hover-zoom.inview-zoom:hover > img,
.hover-zoom.inview-zoom:hover > video,
.hover-zoom.inview-zoom.in-view:hover > img,
.hover-zoom.inview-zoom.in-view:hover > video {
transform: none !important;
}
}

.accent-sky {
color: #9bcdea;
}

.ws-band-ink {
background: #192830;
color: #fff;
}

.ws-band-ink .wckd-icon svg {
stroke: rgba(255, 255, 255, 0.9);
}

.landing-star-row {
color: #b45309;
letter-spacing: 0.02em;
}

/* Landing campaign: pool-type comparison only (markup uses WCKD for type scale and colour) */
.landing-pricing-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-pricing-card--featured {
background: #3a4e5a;
border-color: rgba(255, 255, 255, 0.12);
padding-top: calc(var(--size-xl) + 0.25rem);
}

.landing-pricing-card--dim {
background: rgba(22, 35, 42, 0.55);
border-color: rgba(255, 255, 255, 0.1);
}

.landing-material-badge {
position: absolute;
top: 0;
right: 0;
padding: 0.4rem 0.65rem;
background: #70663d;
color: #fff;
font-size: 0.625rem;
font-weight: var(--text-bold);
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.2;
border-bottom-left-radius: var(--size-xs);
}

.landing-li-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
flex-shrink: 0;
margin-top: 0.08em;
border-radius: 999px;
font-size: 0.55rem;
font-weight: var(--text-bold);
line-height: 1;
background: rgba(155, 205, 234, 0.22);
color: #9bcdea;
}

.landing-pricing-card--dim .landing-li-check {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.42);
}

.pool-card-hr {
margin: var(--size-l) 0 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}




/* FAQ — minimal accordion (hairlines, chevron right, centered lead) */
.faq-page .faq-page-hero {
	background: var(--background-color-light);
}

.faq-page .faq-page-inner {
	max-width: 40rem;
	padding-left: var(--size-m);
	padding-right: var(--size-m);
}

.faq-page .faq-page-title {
	font-size: clamp(1.75rem, 4.2vw, 2.375rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--font-color);
}

.faq-page .faq-accordion {
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

.faq-page .faq-accordion .column + .column {
	border-top: 1px solid #e0e0e0;
}

.faq-page .faq-accordion .accordion-toggle {
	justify-content: space-between;
	align-items: center;
	gap: var(--size-l);
	width: 100%;
	padding: clamp(1.15rem, 3vw, 1.6rem) 0;
	border: none !important;
	border-top: none !important;
	background: none;
	cursor: pointer;
	text-align: left;
	color: var(--font-color);
}

.faq-page .faq-accordion .accordion-toggle::before {
	display: none;
}

.faq-page .faq-accordion .accordion-toggle::after {
	content: '';
	display: block;
	width: 0.5em;
	height: 0.5em;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	margin-top: -0.15em;
	transform: rotate(45deg);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0.85;
}

.faq-page .faq-accordion .accordion-toggle.is-open::after {
	transform: rotate(-135deg);
	margin-top: 0.1em;
}

.faq-page .faq-accordion .accordion-toggle:focus-visible {
	outline: 2px solid var(--brand-primary-color, currentColor);
	outline-offset: 3px;
}

.faq-page .faq-accordion .faq-question-text {
	flex: 1;
	min-width: 0;
	font-size: var(--text-m, 1rem);
	font-weight: var(--text-medium, 600);
	line-height: 1.35;
}

.faq-page .faq-accordion .accordion-content {
	display: none;
	border-left: none;
	margin: 0;
	padding: 0 2rem 1.25rem 0;
	left: auto;
}

.faq-page .faq-accordion .accordion-toggle.is-open + .accordion-content {
	display: block;
}

.faq-page .faq-page-footer {
	text-align: center;
}

@media (max-width: 590px) {
	.faq-page .faq-accordion .accordion-content {
		padding-right: var(--size-s);
	}
}