/* ==========================================================================
   Sections
   ========================================================================== */

/* ---- Hero ---- */
.hero {
	position: relative;
	min-height: min(884px, 90vh);
	display: flex;
	align-items: center;
	color: #fff;
	isolation: isolate;
}
.hero__background { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero__overlay {
	position: absolute;
	inset: 0;
	


	background: rgba(0, 0, 0, 0.54);
	z-index: -1;
}




.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__inner { padding-block: clamp(3rem, 8vh, 7rem); }
.hero__content { max-width: 780px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Frosted-glass pill (designer 2nd-batch): translucent panel over the hero
   video with a blurred backdrop + hairline highlight border. */
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	padding: 8px 16px;
	font-size: var(--fs-sm);
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	backdrop-filter: blur(12px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
/* Progressive enhancement: only lean on the translucent fill where the blur is
   actually supported, so unsupported browsers don't get a washed-out pill. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.hero__badge { background: rgba(20, 22, 26, 0.35); }
}
.hero__reviews { color: rgba(255, 255, 255, 0.85); }

.hero__title { color: #fff; font-weight: 700; font-size: var(--fs-h1); line-height: 1.3; letter-spacing: 0.5px; margin-bottom: 1.25rem; }
.hero__text { font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; color: #fff; max-width: 620px; margin-bottom: 2rem; }

/* ---- Marquee ---- */
.marquee { background: var(--c-marquee); overflow: hidden; padding-block: 24px; border-block: 1px solid var(--c-border); }
.marquee__track { display: inline-flex; align-items: center; gap: 5rem; white-space: nowrap; animation: cib-marquee 32s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1.265; letter-spacing: 0.25px; color: #64748b; }
@keyframes cib-marquee { to { transform: translateX(-50%); } }

/* ---- Intro ---- */
.intro {
	background-color: #fff;
	/* White wash over the blueprint art so the dark-blue lines read as light blue. */
	background-image: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)), var(--intro-bg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.intro__heading {
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.8rem);
	


	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.28;           /* line gap between the highlighted lines */
	max-width: none;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.intro__heading br { display: none; }
@media (min-width: 900px) { .intro__heading br { display: inline; } }
.intro__heading mark {
	position: relative;
	z-index: 0;
	color: #fff;
	background: transparent;
	





	padding: 0;
	white-space: nowrap;
}
/* fixed-height highlight behind the text - height independent of line spacing */
.intro__heading mark::before {
	content: "";
	position: absolute;
	/* ~0.17em each side: measured off the frame's three highlight rects, which
	   run 19-24px wider than their text advance at 56px. */
	left: -0.17em;
	right: -0.17em;
	top: 50%;
	transform: translateY(-50%);
	height: 1.1em;
	background: var(--c-primary);
	border-radius: 4px;
	z-index: -1;
}



.intro__cols { align-items: stretch; gap: 2rem; }
.intro-card {
	background: var(--c-surface);
	border: 1px solid var(--c-primary);
	border-radius: var(--r-md);
	padding: 1.5rem;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.intro-card:hover { transform: translateY(-5px); box-shadow: var(--sh-card); }
.intro-card__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-sm);
	background: var(--c-lightblue);
	color: var(--c-primary);
	margin-bottom: 1.1rem;
}
.intro-card__icon svg { width: 28px; height: 28px; }
.intro-card__title { font-size: 1.4rem; margin-bottom: 0.6rem; }
.intro-card p { color: var(--c-body); font-size: 1rem; line-height: 1.5; }

/* ---- Features (full-bleed square image + padded content) ---- */
.features { padding-block: 0; }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #fff; }
.feature:nth-child(odd) { background: var(--c-feature-grey); }
.feature--media-right .feature__media { order: 2; }
.feature__media {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	


	min-height: clamp(380px, 41.7vw, 720px);
	width: 100%;
	background: var(--c-surface-3);
}
.feature__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	/* Long, gentle cross-dissolve so the rotation reads as a soft fade, not an
	   abrupt swap. */
	transition: opacity .8s ease-in-out, transform 0.5s var(--ease);
}
.feature__slide.is-active { opacity: 1; }
.feature__media:hover .feature__slide.is-active { transform: scale(1.05); }
.feature__caption {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	color: #fff;
	font-family: var(--font-heading);
	
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	font-weight: 400;
	letter-spacing: 2px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* image on the right → caption sits bottom-right of that image */
.feature--media-right .feature__caption { left: auto; right: 2rem; text-align: right; }
.feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2rem, 5vw, 5rem) clamp(1.75rem, 6vw, 7rem);
}


.feature__heading { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 1.25rem; }
.feature__text { color: var(--c-body); margin-bottom: 1.75rem; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; max-width: 29em; }
.feature__text p + p { margin-top: 1rem; }
@media (max-width: 900px) { .feature__text br { display: none; } }

/* ---- Gallery ---- */
.gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }

.gallery__eyebrow { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: 0.15px; color: #63686D; margin-bottom: 0.75rem; }

.gallery__heading { font-size: var(--fs-h2); line-height: 1.268; letter-spacing: -0.02em; margin-bottom: 1rem; }
.gallery__head-text { max-width: 950px; }
.gallery__intro { display: grid; gap: 0.6rem; }
.gallery__intro p { font-size: 1.125rem; line-height: 1.5; color: var(--c-body); }
.gallery__note { font-weight: 600; }
.gallery__btn-wrap { display: flex; align-items: center; flex-shrink: 0; }
.gallery__btn { font-size: 1rem; min-height: 52px; padding: 0.85rem 2rem; }
.gallery__carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.gallery__track {
	display: flex;
	gap: 2rem;
	width: max-content;
	/* start image 1 aligned with the section's text (container edge), not the screen
	   edge; the track loops endlessly, so the right padding is only a tail stop */
	padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
	padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
	will-change: transform;
}




.gallery__item { flex: 0 0 auto; width: clamp(330px, 24vw, 430px); aspect-ratio: 505 / 640; border-radius: 42px; }
.gallery__item img { width: 100%; height: 100%; }

/* ---- About block ---- */

.about-block { overflow-x: clip; }
.about-block .about-block__row { grid-template-columns: 1.3fr 1fr; }
.about-block .about-block__row .split__body { padding-inline: clamp(1.5rem, 3vw, 2.5rem); }

.about-block__heading { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; margin-block: 0.75rem 1rem; }
.about-block__cta { margin-block: 1.5rem 2rem; }
.about-block__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.about-card { background: var(--c-surface); border: 1px solid var(--c-primary); border-radius: var(--r-md); padding: 1.5rem; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.about-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.about-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--c-lightblue); color: var(--c-primary); margin-bottom: 1rem; }
.about-card__icon svg { width: 24px; height: 24px; }

.about-card__title { font-size: 1.5rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; color: var(--c-primary); margin-bottom: 0.75rem; }
.about-card p { color: var(--c-body-2); font-size: 1rem; line-height: 1.5; }
.about-block__media { aspect-ratio: 4 / 5; height: 100%; box-shadow: var(--sh-card); }
.about-block__media img { object-position: right top; }

/* ---- Testimonials (center fixed, content rotates) ---- */
.testimonials { background: #fff; overflow: hidden; }
.testimonials .section__head { margin-bottom: 3rem; }
.tstm__eyebrow { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--c-muted); margin-bottom: 0.75rem; }
.tstm__heading { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; max-width: 720px; margin-inline: auto; }
@media (max-width: 640px) { .tstm__heading br { display: none; } }

.tstm { position: relative; }
.tstm__viewport { overflow: hidden; }
.tstm__track { display: flex; justify-content: center; align-items: stretch; gap: 32px; }

/* Cards stay fixed. On change, a cloned "ghost" of the old content fades out
   while the new content fades in over it - a true crossfade, no empty gap,
   no sliding. */
.testimonial {
	position: relative;
	flex: 0 0 auto;
	width: 420px;
	padding: 32px;
	background: #f0f0f0;
	border-radius: 24px;
	opacity: 0.4;
	transition: opacity 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.testimonial { display: flex; flex-direction: column; overflow: hidden; }
.testimonial__body { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.testimonial__ghost { pointer-events: none; }



.tstm__track .testimonial:first-child { align-items: flex-end; }
.tstm__track .testimonial:last-child { align-items: flex-start; }
.tstm__track .testimonial:first-child .testimonial__body,
.tstm__track .testimonial:last-child .testimonial__body { width: 356px; }
.testimonial.is-active {
	width: 520px;
	padding: 48px;
	background: #fff;
	border: 1px solid var(--c-border-2);
	box-shadow: 0 30px 40px rgba(0, 0, 0, 0.04);
	opacity: 1;
}
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial__name { display: block; font-weight: 700; font-size: 14px; color: var(--c-ink); }
.testimonial__loc { display: block; font-size: 14px; color: #737373; }
.testimonial__quote { font-size: 14px; line-height: 1.5; color: var(--c-body); font-style: normal; }
.testimonial__stars { font-size: 18px; color: #f5a623; letter-spacing: 2px; margin-top: auto; }

.tstm__stage { position: relative; }
.tstm__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(16, 16, 16, 0.5);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: background 0.25s var(--ease);
}
.tstm__arrow--prev { left: 8px; }
.tstm__arrow--next { right: 8px; }
.tstm__arrow:hover { background: rgba(16, 16, 16, 0.68); }         /* subtle darken, no blue */
.tstm__arrow:active { transform: translateY(-50%) scale(0.92); }   /* small "pressed" feedback */

/* (side-card nudge is driven by the Web Animations API in main.js) */

.tstm__dots { display: flex; justify-content: center; gap: 8px; margin-top: 2.5rem; }
.tstm__dots button { width: 8px; height: 8px; border-radius: 9999px; background: var(--c-dot); transition: background 0.25s var(--ease); }
.tstm__dots button.is-active { background: var(--c-primary); }

/* ---- CTA ---- */
.cta { position: relative; color: #fff; background-image: var(--cta-img); background-size: cover; background-position: center; isolation: isolate; padding-block: clamp(4rem, 8vw, 7rem); }
.cta__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 42, 47, 0.52), rgba(22, 23, 26, 0.46)); z-index: -1; }
.cta__inner { max-width: calc(726px + 2 * var(--gutter)); text-align: center; margin-inline: auto; }
.cta__rating { justify-content: center; margin-top: 2rem; }
.cta__heading { color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; text-wrap: normal; width: min(630px, calc(100vw - 3rem)); margin: 0 auto 1rem; }
.cta__text { color: #fff; margin: 0 auto 2rem; max-width: 726px; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; }
.cta__actions { justify-content: center; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero { position: relative; color: #fff; background-size: cover; background-position: center; isolation: isolate; padding-block: clamp(4rem, 6vw + var(--nav-h), 8rem); display: flex; align-items: center; min-height: 60vh; }
.page-hero__content { width: 100%; }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35)); z-index: -1; }
.page-hero__inner { max-width: 760px; }
.page-hero__eyebrow { color: #fff; opacity: 0.85; }
.page-hero h1 { color: #fff; margin-block: 0.75rem 1.25rem; font-weight: 700; letter-spacing: -1.5px; line-height: 1.111; }



.page-hero__sub { font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.75); }
/* Contact is the exception among the plain heroes - its frame gives #FFFFFF
   with no alpha, at BOTH breakpoints (mobile 14/21, desktop 16/24). */
.page-slug-contact-us .page-hero__sub { color: #fff; }

/* Panel variant (About hero): column layout, frosted white text box, bottom button bar */
/* Awnings hero - content pinned bottom-left with a pill badge */

/* Height aligned to the automation hero (the site-wide standard): same 60vw
   min-height clamp + matching top/bottom gaps, replacing the old 85vh formula. */
.page-hero--awnings { align-items: center; min-height: clamp(620px, 60vw, 884px); padding-block: clamp(4rem, 4vw + var(--nav-h), 6rem); }
.page-hero--awnings .page-hero__inner { max-width: 1280px; }
.page-hero--awnings h1 { font-weight: 700; font-size: clamp(2.5rem, 1.4rem + 3vw, 3.75rem); line-height: 1.3; letter-spacing: 0.5px; }
.page-hero--awnings .page-hero__sub { max-width: 922px; font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem); line-height: 1.5; letter-spacing: 0.15px; color: #fff; }
.page-hero--awnings .btn { min-height: 56px; padding: 10px 32px; font-size: 1.125rem; font-weight: 600; }
.page-hero--awnings .page-hero__pill { width: 375px; max-width: 100%; height: 62px; padding: 13px 6px; font-size: 1.5rem; font-weight: 600; line-height: 36px; }


.page-template-page-awnings .cta .btn,
.page-template-page-awnings-product .cta .btn,
.page-template-page-ziptrak .cta .btn,
.page-template-page-indoor-product .cta .btn { min-height: 38px; padding: 10px 32px; font-size: 0.75rem; font-weight: 500; line-height: 18px; }
.page-template-page-automation .cta .btn--underline,
.page-template-page-awnings .cta .btn--underline,
.page-template-page-awnings-product .cta .btn--underline,
.page-template-page-ziptrak .cta .btn--underline,
.page-template-page-gallery .cta .btn--underline,
.page-template-page-indoor-product .cta .btn--underline,
.page-template-page-indoor-blinds .cta .btn--underline { background: transparent; border: 1px solid #fff; border-radius: 24px; color: #fff; padding: 0.75rem 1.75rem; white-space: nowrap; }
.page-template-page-automation .cta .btn.btn--underline:hover,
.page-template-page-awnings .cta .btn--underline:hover,
.page-template-page-awnings-product .cta .btn--underline:hover,
.page-template-page-ziptrak .cta .btn--underline:hover,
.page-template-page-gallery .cta .btn--underline:hover,
.page-template-page-indoor-product .cta .btn--underline:hover,
.page-template-page-indoor-blinds .cta .btn.btn--underline:hover { background: #fff; color: var(--c-primary); transform: none; }
.page-template-page-automation .cta__overlay,
.page-template-page-awnings .cta__overlay,
.page-template-page-awnings-product .cta__overlay,
.page-template-page-ziptrak .cta__overlay,
.page-template-page-indoor-product .cta__overlay { background: rgba(0, 0, 0, 0.54); }
/* Awnings sub-page CTA: portrait photo in a wide band - frame the awning
   (upper-middle of the shot) rather than the empty sky above it. */
.page-template-page-awnings-product .cta { background-position: center 38%; }


.cta--plain { background: #D9D9D9; color: #101010; }
.cta--plain .cta__overlay { display: none; }
.cta--plain .cta__heading, .cta--plain .cta__text { color: #101010; }
.page-template-page-awnings-product .cta--plain .btn--underline { border-color: #101010; color: #101010; }
.page-template-page-awnings-product .cta--plain .btn--underline:hover { background: #101010; color: #fff; }

/* Placeholder finish media (styles-selection) - grey box, keeps the image ratio */
.styles-row__ph { display: block; width: 100%; height: 100%; aspect-ratio: 771 / 693; background: #D9D9D9; }







@media (max-width: 700px) { .page-hero h1 br, .page-hero__sub br { display: none; } }
.page-hero__pill {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.7rem 1.75rem; margin-bottom: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 100px;
	background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(4px);
	color: #fff; font-family: var(--font-body); font-weight: 600;
	font-size: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); line-height: 1;
}

.page-hero--panel { flex-direction: column; align-items: stretch; padding-block: 0; min-height: 70vh; }
.page-hero--panel .page-hero__content { flex: 1; display: flex; align-items: center; padding-block: clamp(4rem, 6vw + var(--nav-h), 7rem); }
.page-hero--panel .page-hero__inner { max-width: 807px; }
.page-hero--panel .page-hero__sub { max-width: 807px; font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem); line-height: 1.5; }
.page-hero__bar { border-top: 1px solid #fff; background: rgba(0, 0, 0, 0.42); }
.page-hero__bar-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 40px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 1rem;
	min-height: 79px;
	padding-block: 25px;
}
.page-hero__stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; }
.page-hero__stat-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.1; color: #fff; }
.page-hero__stat-label { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); }
.page-hero__stat-sep { flex: 0 0 auto; align-self: center; width: 2px; height: 60px; background: rgba(255, 255, 255, 0.7); }

/* ---- Stats bar ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: -4rem; position: relative; z-index: 2; }
.stat { text-align: center; }
.stat + .stat { border-left: 1px solid var(--c-border); }
.stat__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); color: var(--c-primary); line-height: 1; }
.stat__label { color: var(--c-muted); margin-top: 0.5rem; }

/* ---- Brand story ---- */
.brand-story .split__body { display: flex; flex-direction: column; gap: 32px; }
.brand-story h2 { font-weight: 600; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4rem); line-height: 1; letter-spacing: 0.15px; margin: 0; }
.brand-story__text { display: grid; gap: 32px; color: var(--c-body); }
.brand-story__text p { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; margin: 0; }
.brand-story__media { aspect-ratio: 720 / 566; border-radius: 0; }
.brand-story__media img,
.brand-story__media:hover img {
	object-position: center bottom;
	transform: scale(1.08);
	transform-origin: center bottom;
}


@media (min-width: 1025px) {
	.brand-story__media { max-height: 540px; }
}

/* Content-area sections: full-bleed image + padded content (homepage "features" model,
   so imagery grows with the screen). Square-cornered images, tighter vertical rhythm. */
.brand-story, .values, .whyus { padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); overflow-x: clip; }
.brand-story { padding-top: clamp(3.75rem, 2.1rem + 4.8vw, 6rem); }

.split--bleed { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.split--bleed .split__body,
.split--bleed .values__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-inline: clamp(1.5rem, 4.5vw, 4rem);
}

.values__body { text-align: center; }
.split--bleed .values__list,
.split--bleed .accordion { text-align: left; }

.split--bleed .eyebrow,
.contact .eyebrow,
.form-section .eyebrow,
.product-intro .eyebrow,
.product-operation .eyebrow,
.product-process .eyebrow {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.15px;
	text-transform: none;
	color: #63686d;
}
.split--bleed .split__media,
.split--bleed .values__media { position: relative; min-height: clamp(340px, 32vw, 620px); }
.split--bleed .media { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.split--bleed .media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Values (image + timeline list) ---- */
.values { background: var(--c-surface); }
.values__grid { align-items: center; }

.values__media { position: relative; }
.values__media .media { aspect-ratio: 720 / 566; border-radius: 0; overflow: hidden; }


.values__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.values__video { position: relative; z-index: 1; width: 100%; height: 100%; min-height: clamp(340px, 32vw, 620px); overflow: hidden; }
.values__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }





.values--has-video .values__grid { align-items: stretch; }
.values--has-video .values__media,
.values--has-video .values__video { height: 100%; }
.values--has-video .values__body { justify-content: center; }
.values__card {
	position: absolute;
	left: 6.4%;
	bottom: 8%;
	width: 233px;
	max-width: 60%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px;
	background: #fff;
	border-radius: var(--r-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.values__card-label { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #b9bbc6; }
.values__card-title { font-family: var(--font-heading); font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--c-ink); }
.values__card-div { border: 0; border-top: 1px solid var(--c-border); margin: 0; }
.values__card-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #62636c; }
.values__card-status::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 4px; background: var(--c-success); }

.values__body { display: flex; flex-direction: column; gap: 2.5rem; }
.values__head { display: flex; flex-direction: column; gap: 0.75rem; }
.values__head h2 { font-size: clamp(1.9rem, 1rem + 3vw, 3rem); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.values__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.5rem; }
.values__item { display: flex; align-items: stretch; gap: 24px; }
.values__rail { flex: 0 0 48px; display: flex; justify-content: center; }
.values__rail::before { content: ""; width: 2px; border-radius: 2px; background: var(--c-border-2); }
.values__item:first-child .values__rail::before { background: var(--c-primary); }
.values__info { display: flex; flex-direction: column; gap: 8px; }
.values__heading { display: flex; align-items: center; gap: 10px; }
.values__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.values__icon svg { width: 22px; height: 22px; }
.values__item h3 { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: 0; margin: 0; }
.values__text { color: var(--c-body); font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }

/* ---- Why-us accordion ---- */
.whyus__media { aspect-ratio: 4 / 5; height: 100%; }
.whyus .split__body h2 { font-size: clamp(1.9rem, 1rem + 3vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; }

.accordion { display: grid; gap: 0.75rem; }
.accordion__item { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.accordion__item.is-open { border-color: var(--c-primary); box-shadow: var(--sh-soft); }
.accordion__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: var(--c-ink); }
.accordion__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-lightblue); color: var(--c-primary); display: grid; place-items: center; position: relative; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: currentColor; }
.accordion__icon::before { width: 12px; height: 2px; }
.accordion__icon::after { width: 2px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.accordion__item.is-open .accordion__icon { background: var(--c-primary); color: #fff; }
.accordion__item.is-open .accordion__icon::after { transform: scaleY(0); }



.accordion__body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.35s var(--ease); }
.accordion__item.is-open .accordion__body { grid-template-rows: 1fr; }
.accordion__body > * { min-height: 0; overflow: hidden; }
.accordion__body p { padding: 0 1.5rem 1.5rem; color: var(--c-muted); }


.whyus .accordion { display: block; }
.whyus .accordion__item { background: none; border: 0; border-bottom: 1px solid #e0e1e1; border-radius: 0; box-shadow: none; }
.whyus .accordion__item.is-open { border-color: #e0e1e1; box-shadow: none; }
.whyus .accordion__head { padding: 16px 0; font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: #0a0a0a; }
/* Symmetric chevron (˅) matching the designer's icon - a proper arrow, not the
   old rotated border-corner. Rotates 180deg to point up when the item is open. */
.whyus .accordion__icon {
	width: 20px; height: 20px; flex: none; margin: 0;
	border: 0; border-radius: 0;
	--chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-color: transparent;
	background-image: var(--chev);
	background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
	transition: transform var(--dur-fast) var(--ease);
}
.whyus .accordion__icon::before, .whyus .accordion__icon::after { display: none; }



.whyus .accordion__item.is-open .accordion__icon { transform: rotate(180deg); background-color: transparent; background-image: var(--chev); }
.whyus .accordion__body p { padding: 0 0 20px; color: #62636c; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.15px; }

/* ---- Contact / map ---- */
/* ---- Contact / showroom ---- */
.contact { background: #fff; padding-top: clamp(3rem, 1.8rem + 3.6vw, 5rem); padding-bottom: 0; }
.contact__head { max-width: 860px; margin-inline: auto; text-align: center; padding-inline: clamp(1.25rem, 4vw, 5rem); display: flex; flex-direction: column; gap: 12px; }
.contact__head h2 { font-size: clamp(1.9rem, 1rem + 3vw, 3rem); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.contact__head p { font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; color: var(--c-body); max-width: 590px; margin: 0 auto; }

.contact__mapwrap { margin-top: 2.5rem; padding-bottom: 20px; background: #fbfdff; }
.contact__map { position: relative; width: 100%; aspect-ratio: 1440 / 420; background: #fff; overflow: hidden; }



.contact__map > picture { display: block; width: 100%; height: 100%; }
.contact__map > picture > img,
.contact__map > img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }

.map-pin { position: absolute; left: var(--pin-x, var(--pin-dx)); top: var(--pin-y, var(--pin-dy)); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.map-pin__icon { width: 25px; height: 32px; color: var(--c-primary); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15)); }
.map-pin__icon svg { width: 100%; height: 100%; display: block; }
.map-pin__label { background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.map-attribution { position: absolute; right: 8px; bottom: 6px; z-index: 1; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.82); color: #62636c; font-size: 9px; line-height: 1.2; }

.contact__cards { position: relative; z-index: 2; max-width: 994px; margin: -20px auto 0; padding-inline: 1.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.contact-card { background: #fdfdfd; border: 1px solid #f0f0f0; box-shadow: none; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.contact-card__icon { width: 28px; height: 28px; color: var(--c-ink); }
.contact-card__icon svg { width: 100%; height: 100%; display: block; }
.contact-card__label { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--c-ink); }
.contact-card__value { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #62636c; word-break: break-word; }
.contact-card--active { background: var(--c-primary); border-color: var(--c-primary); }
.contact-card--active .contact-card__icon,
.contact-card--active .contact-card__label,
.contact-card--active .contact-card__value { color: #fff; }

/* ---- Form section ---- */
.form-section { position: relative; background-size: cover; background-position: center; isolation: isolate; color: #fff; padding-block: clamp(3rem, 2rem + 3vw, 70px) clamp(3.5rem, 2rem + 3vw, 80px); }
.form-section__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); z-index: -1; }
.form-section__inner { width: 100%; max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.form-section__head { text-align: center; display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.form-section__head h2 { color: #fff; font-size: clamp(1.9rem, 1rem + 3vw, 3rem); line-height: 1; letter-spacing: -0.02em; max-width: 620px; margin: 0 auto; }
.form-section__head p { color: #fff; font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; max-width: 620px; margin: 0 auto; }

/* Glassmorphism form card */
.form-card {
	max-width: 620px;
	margin-inline: auto;
	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.149);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #fff;
}
.form-section .cib-form .wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
.form-section .cib-form p { margin: 0; }
.form-section .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-section .cib-form .wpcf7-form-control-wrap { display: block; }
.form-section .cib-form input,
.form-section .cib-form textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.102);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	color: #fff;
	font-family: var(--font-body);
	font-size: 14px;
	height: 52px;
	padding: 0 16px;
}
.form-section .cib-form textarea { height: auto; min-height: 88px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.form-section .cib-form ::placeholder { color: rgba(255, 255, 255, 0.85); opacity: 1; }
.form-section .cib-form input:focus,
.form-section .cib-form textarea:focus { border-color: rgba(255, 255, 255, 0.6); box-shadow: none; outline: none; }
.form-section .form-submit-wrap { text-align: center; margin-top: 0; }
.form-section .cib-form input[type="submit"] {
	width: auto;
	height: auto;
	background: var(--c-primary);
	color: #fff;
	border: 0;
	border-radius: 42px;
	padding: 11px 24px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.form-section .cib-form input[type="submit"]:hover { background: var(--c-accent); transform: translateY(-2px); }

/* ---- Benefit cards (indoor) ---- */
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.benefit-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.75rem; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.benefit-card:hover { transform: translateY(-5px); box-shadow: var(--sh-card); }
.benefit-card__num { font-family: var(--font-heading); font-weight: 700; color: var(--c-primary); font-size: 1.1rem; }
.benefit-card__title { font-size: 1.2rem; margin-block: 0.75rem 0.5rem; }
.benefit-card__text { color: var(--c-muted); font-size: var(--fs-sm); }

/* ---- Simple page (stubs / default page) ---- */
.page-content { padding-block: var(--section-py); }
.page-content .container { max-width: 820px; }
.page-content h2 { margin-block: 1.5rem 0.75rem; }
.page-content p { margin-bottom: 1rem; color: var(--c-body); }

/* ==========================================================================
   Awnings - energy-saving stats band
   ========================================================================== */
.stats-band { background: var(--c-nav); position: relative; overflow: hidden; border-bottom: 1px solid #e0e1e1; }
.stats-band__bg { position: absolute; left: 0; top: -159px; width: 102%; z-index: 0; pointer-events: none; }
.stats-band__bg svg { width: 100%; height: auto; display: block; }
.stats-band > .container { position: relative; z-index: 1; padding-inline: clamp(1.5rem, 0.5rem + 5vw, 5rem); }
.stats-band__grid { display: grid; grid-template-columns: 1fr 640px; gap: clamp(2.5rem, 5vw, 80px); align-items: stretch; }
.stats-band__text { display: flex; flex-direction: column; gap: 2.5rem; padding-top: 50px; }
.stats-band__head { display: flex; flex-direction: column; gap: 1.5rem; }
.stats-band__head h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.stats-band__head p { color: var(--c-ink); font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }
.stats-band__prompt { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: var(--c-ink); margin: 0; max-width: 16.5rem; }

.stats-band__cards { display: flex; flex-direction: column; gap: 24px; }
.stat-hero { background: var(--c-primary); color: #fff; border-radius: 32px; padding: 32px 48px; display: flex; align-items: center; gap: 40px; min-height: 201px; }
.stat-hero__gauge { position: relative; flex-shrink: 0; width: 244px; }
.stat-hero__gauge svg { display: block; width: 100%; height: auto; }
.stat-hero__num { position: absolute; left: 27%; bottom: 2px; font-family: var(--font-heading); font-weight: 700; font-size: 3.25rem; line-height: 1; }
.stat-hero__label { font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; line-height: 1.4; margin: 0; }

.stats-band__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat-mini { background: #fff; border: 1px solid var(--c-primary); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 1rem; }
.stat-mini__icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.stat-mini__icon svg { width: 26px; height: 26px; }
.stat-mini__title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--c-ink); margin: 0; }
.stat-mini__text { color: #62636c; font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.stats-band__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.stats-band__foot .btn { min-height: 60px; min-width: 284px; padding-block: 0.85rem; }

@media (max-width: 1024px) {
	.stats-band__grid { grid-template-columns: 1fr; }
	.stats-band__cards { width: 100%; }
	.stats-band__head h2 br, .stats-band__head p br, .stat-hero__label br { display: none; }
}
@media (max-width: 560px) {
	.stats-band__row { grid-template-columns: 1fr; }
	.stat-hero { flex-direction: column; align-items: flex-start; gap: 1rem; text-align: left; }
}

/* ==========================================================================
   Products overview - alternating image / content rows (one image, uniform bg)
   ========================================================================== */
.products-overview { padding-block: 0; overflow-x: clip; }
.product-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--c-nav); }
.product-row--media-right .product-row__media { order: 2; }
/* Match the home feature rows exactly (same min-height clamp), instead of the
   old 1:1 square that ballooned on wide screens. */
.product-row__media { position: relative; overflow: hidden; min-height: clamp(380px, 41.7vw, 720px); width: 100%; background-size: cover; background-position: center; }
.product-row__caption { position: absolute; left: 2.5rem; bottom: 2.5rem; color: #fff; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); line-height: 1; letter-spacing: 2px; }
.product-row--media-right .product-row__caption { left: auto; right: 2.5rem; text-align: right; }
.product-row__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 1.5rem; padding: clamp(2.5rem, 5vw, 6rem) clamp(1.75rem, 6vw, 6rem); }
.product-row__heading { font-size: clamp(1.9rem, 1rem + 3vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; color: #101010; margin: 0; }
.product-row__text { max-width: 34rem; }
.products-overview .btn { min-height: 56px; min-width: 192px; padding: 10px 32px; border-radius: 42px; border: 1px solid var(--c-primary); border-bottom-width: 2px; }
.product-row__text p { color: var(--c-body); font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }

@media (max-width: 900px) {
	.product-row { grid-template-columns: 1fr; }
	.product-row--media-right .product-row__media { order: -1; }
}

/* ==========================================================================
   Indoor Blinds hero variant + key benefits
   ========================================================================== */
/* Match the other pages' hero size (was viewport-HEIGHT based (72vh) so it came
   up short on wide/low screens; the rest of the site uses this width-based ramp). */
.page-hero--indoor { min-height: clamp(620px, 60vw, 884px); padding-block: clamp(4rem, 5vw + var(--nav-h), 7rem); }
.page-hero--indoor .page-hero__inner { max-width: 900px; }
.page-hero--indoor h1 { font-weight: 700; font-size: clamp(2.5rem, 1.3rem + 3.4vw, 3.75rem); line-height: 1.3; letter-spacing: 0.0083em; margin-block: 0.5rem 1rem; }
.page-hero--indoor .page-hero__sub { max-width: none; font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem); line-height: 1.5; }
.page-hero--indoor .page-hero__pill { width: 340px; max-width: 100%; height: 62px; padding: 13px 6px; font-size: 1.5rem; font-weight: 600; line-height: 36px; }
.page-hero--indoor .btn { min-height: 64px; padding: 1rem 1.5rem; font-size: 1.125rem; }

.key-benefits { background: #fff; }
.key-benefits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; }
.key-benefits__title { display: flex; flex-direction: column; gap: 1.5rem; }
.key-benefits__title h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); line-height: 1.1; letter-spacing: 0.0023em; margin: 0; }
.key-benefits__text { color: var(--c-body); font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; max-width: 36rem; }
.key-benefits__prompt { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--c-ink); margin: 0; }
.key-benefits__btn { margin-top: auto; }
.key-benefits__btn .btn { min-height: 48px; }
.key-benefits__cards { display: flex; flex-direction: column; gap: 20px; }
/* Mobile-only duplicate showroom CTA (rendered after the cards); hidden by
   default, revealed only on the Indoor template at <=900 (responsive.css). */
.key-benefits__showroom { display: none; }
.key-benefit { display: flex; gap: 20px; padding: 20px; background: #ebf3fe; border-radius: 24px; align-items: flex-start; }
.key-benefit__icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: 10px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.key-benefit__icon svg { width: 32px; height: 32px; }
.key-benefit__title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--c-ink); margin: 0 0 8px; }
.key-benefit__text { color: var(--c-body); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }

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

/* ==========================================================================
   Indoor product sub-pages (hero variant, intro, operation, process)
   ========================================================================== */
/* Background video (poster + dark scrim above it) */
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero--video .page-hero__scrim { position: absolute; inset: 0; z-index: 1; }
.page-hero--video .page-hero__content, .page-hero--video .page-hero__bar { position: relative; z-index: 2; }

.page-hero--product { min-height: clamp(620px, 60vw, 884px); padding-block: clamp(4rem, 5vw + var(--nav-h), 7rem); }
.page-hero--product .page-hero__inner { max-width: 980px; }

.page-hero--product .btn { min-height: 56px; min-width: 333px; padding: 10px 32px; font-size: 1.125rem; font-weight: 600; }
.page-hero--product h1 { font-weight: 700; font-size: clamp(2.5rem, 1.4rem + 3vw, 3.75rem); line-height: 1.3; letter-spacing: 0.5px; }
.page-hero--product .page-hero__sub { max-width: 632px; font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem); line-height: 1.5; letter-spacing: 0.15px; color: #fff; }
.page-hero--product .page-hero__pill { width: auto; min-height: 62px; padding: 13px 22px; font-size: 1rem; font-weight: 600; }

/* Product intro - text + image, white surface */
.product-intro { background: #fff; border-bottom: 1px solid var(--c-divider); }

.product-intro__grid { grid-template-columns: 1fr 1.2fr; align-items: stretch; gap: clamp(2.5rem, 5vw, 64px); }
.product-intro .container--wide { padding-right: 0; }
.product-intro__body { display: flex; flex-direction: column; gap: 1.25rem; }
/* Mobile-only duplicate showroom (prompt + button after the image); hidden on
   desktop, revealed when the split stacks (responsive.css). */
.product-intro__showroom { display: none; }
.product-intro__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #17191a; margin: 0; }
.product-intro__text { display: flex; flex-direction: column; gap: 1rem; }
.product-intro__text p { color: #62636C; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.25px; margin: 0; }

.page-slug-honeycomb-blinds .product-intro__text p { color: #444749; letter-spacing: 0.15px; }
.product-intro__btn .btn { min-width: 0; min-height: 56px; padding: 10px 32px; font-size: 1rem; }
.product-intro__btn .btn svg { width: 18px; height: 18px; }
.product-intro__prompt { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: #000; margin: auto 0 0; }
.product-intro__btn .btn { min-height: 56px; padding: 10px 32px; }
.product-intro__media { align-self: stretch; }
/* Fill the stretched column so the image matches the (often taller) content
   height on desktop, instead of stopping at its aspect-ratio height. */
.product-intro__media .media { aspect-ratio: 709 / 662; height: 100%; border-radius: 0; overflow: hidden; }
.product-intro__media img { width: 100%; height: 100%; object-fit: cover; }







@media (min-width: 1025px) {
	.product-intro__media .media { height: clamp(560px, 47.22vw, 748px); aspect-ratio: auto; }
}
/* Media-left variant (Standard awnings): image on the left, flush to the left edge */
.product-intro--media-left .container--wide { padding-right: var(--gutter); padding-left: 0; }
.product-intro--media-left .product-intro__grid { grid-template-columns: 1.2fr 1fr; }
.product-intro--media-left .product-intro__media { order: -1; }






.product-intro__ph { width: 100%; height: 100%; min-height: var(--ph-min, clamp(460px, 52vw, 760px)); background: #E8E8E8; border: 1px dashed #BBBBBB; }

/* Plain hero - flat placeholder surface + dark text (Standard awnings, no photo) */
.page-hero--plain { color: #101010; }
.page-hero--plain::before, .page-hero--plain::after { display: none; }
.page-hero--plain h1 { color: #101010; }
.page-hero--plain .page-hero__sub { color: #101010; }
.page-hero--plain .page-hero__eyebrow { color: #63686D; }


.page-template-page-awnings-product .page-hero__sub { max-width: 720px; font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: 0.15px; }

/* Operation - cards with faint watermark letter */
.product-operation { background: #fff; border-bottom: 1px solid #E0E1E1; }
.product-operation__head { max-width: none; margin: 0 auto clamp(2.5rem, 1.5rem + 2.5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.product-operation__head .eyebrow--muted { color: #63686D; }
.product-operation__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
@media (min-width: 1025px) { .product-operation__heading { white-space: nowrap; } }
.product-operation__intro { color: #62636c; font-size: 1.125rem; line-height: 1.5; margin: 0; }
.product-operation__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.product-operation__cards--3 { grid-template-columns: repeat(3, 1fr); }
.op-card { position: relative; overflow: hidden; padding: 40px; border-radius: 24px; background: #ebf3fe; display: flex; flex-direction: column; gap: 24px; }
.op-card--accent { background: #ebf3fe; }
.op-card__watermark { display: none; }
.op-card__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.op-card__icon svg { width: 28px; height: 28px; }
.op-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1.25; letter-spacing: 0.25px; color: #000; margin: 0; }
.op-card__text { color: #62636c; font-size: 1rem; line-height: 1.5; margin: 0; }

/* Process - 4-step connected grid */
.product-process { background: #fff; border-bottom: 1px solid #E0E1E1; }
.product-process__head { text-align: center; max-width: 820px; margin: 0 auto clamp(2.5rem, 5vw, 3rem); display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.product-process__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.product-process__sub { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }
.product-process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.process-step { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; border-top: 1px solid var(--c-primary); padding-top: 40px; }
.process-step__num { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: var(--c-primary); }
.process-step__title { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #000; text-transform: none; margin: 0; }
.process-step__text { color: #444749; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; margin: 0; max-width: none; }

@media (max-width: 900px) {
	.product-operation__cards,
	.product-operation__cards--3 { grid-template-columns: 1fr; }
	.product-process__steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
	.product-process__steps::before { display: none; }
}
@media (max-width: 560px) {
	.product-process__steps { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
	.product-intro__grid,
	.product-intro--media-left .product-intro__grid { grid-template-columns: 1fr; align-items: stretch; }
	.product-intro .container--wide,
	.product-intro--media-left .container--wide { padding-right: var(--gutter); padding-left: var(--gutter); }
	.product-intro--media-left .product-intro__media { order: -1; }
	.product-intro__prompt { margin-top: 0.5rem; }
	/* Stacked: image sits above content, so it uses its natural aspect (no stretch). */
	.product-intro__media .media { height: auto; }
}

/* ==========================================================================
   Flexible middle sections (feature grid / state demo / card grid / swatches / split)
   ========================================================================== */
.flex-sec { background: #fff; }
.flex-sec:nth-of-type(even) { background: #f5f5f5; }
.flex-sec__head { max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 3.25rem); display: flex; flex-direction: column; gap: 1rem; }
.flex-sec--card-grid .flex-sec__head,
.flex-sec--swatch-row .flex-sec__head { max-width: 46rem; margin-inline: auto; text-align: center; align-items: center; }
.flex-sec__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #17191a; margin: 0; }
.flex-sec__intro { color: #62636c; font-size: 1.125rem; line-height: 1.5; margin: 0; }

/* feature grid */
.flex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.flex-grid--2 { grid-template-columns: repeat(2, 1fr); }
.flex-grid--4 { grid-template-columns: repeat(4, 1fr); }
.flex-card { background: #ebf3fe; border-radius: 24px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.flex-card__icon { width: 56px; height: 56px; border-radius: 12px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.flex-card__icon svg { width: 28px; height: 28px; }
.flex-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: #17191a; margin: 0; }
.flex-card__text { color: #62636c; font-size: 1rem; line-height: 1.5; margin: 0; }


.flex-sec--feature-grid .flex-card { background: #fff; border: 1px solid var(--c-primary); }
.flex-sec--feature-grid .flex-card__icon { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--c-primary); place-items: start; }
.flex-sec--feature-grid .flex-card__icon svg { width: 32px; height: 32px; }
.flex-sec--feature-grid .flex-card__title { font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; line-height: 1.5; color: #17191a; }
.flex-sec--feature-grid .flex-card__text { color: #444749; }

.flex-sec.flex-sec--feature-grid {
	background: #eaf2fe url(../images/keybenefits-bg.png) center/cover no-repeat;
	padding-block: clamp(5rem, 3rem + 7vw, 9.5rem);
}

.flex-sec--feature-grid .container--wide { max-width: 1260px; margin-inline: auto; }
.flex-sec--feature-grid .flex-sec__head { max-width: none; }
.flex-sec--feature-grid .flex-sec__intro { max-width: 45rem; }

/* state demo */
.flex-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.state-card { margin: 0; }
.state-card__media { display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.state-card__media img { width: 100%; height: 100%; object-fit: cover; }
.state-card__cap { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0.25rem 0; }
.state-card__label { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: #17191a; }
.state-card__caption { color: #62636c; font-size: 0.95rem; }

/* card / room tiles */
.flex-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.flex-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 1.25rem; overflow: hidden; }
.flex-tile__title { color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* swatch palette */
.flex-swatches { display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; justify-content: center; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.swatch__chip { width: 72px; height: 72px; border-radius: 50%; border: 1px solid #e8e8e8; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.swatch__name { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #62636c; }

/* split feature */
.flex-split { align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.flex-split__body { display: flex; flex-direction: column; gap: 1.25rem; }
.flex-split__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: #17191a; margin: 0; }
.flex-split__text { color: #62636c; font-size: 1.125rem; line-height: 1.5; margin: 0; }
.flex-split__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.flex-split__tags li { padding: 0.4rem 1rem; border: 1px solid #d9d9d9; border-radius: 100px; font-size: 0.85rem; color: #2c2d33; }
.flex-split__media { position: relative; }
.flex-split__media .media { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; height: 100%; }
.flex-split__media .media img { width: 100%; height: 100%; object-fit: cover; }
.flex-split__badge { position: absolute; left: 1rem; bottom: 1rem; background: rgba(255,255,255,.92); color: var(--c-primary); font-weight: 600; font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 100px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
/* Icon feature list (e.g. Thermal insulation / Total privacy) */
.flex-split__features { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 0.25rem; }
.flex-split__feature { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.flex-split__feat-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary); color: #fff; display: grid; place-items: center; flex: none; }
.flex-split__feat-icon svg { width: 22px; height: 22px; }
.flex-split__feat-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.02em; color: #17191a; margin: 0 0 0.35rem; }
.flex-split__feat-body { color: #62636c; font-size: 1rem; line-height: 1.5; letter-spacing: 0.03em; margin: 0; max-width: 34rem; }
/* Split-feature action buttons */
.flex-split__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
/* Slider-demo overlay: two opposite-corner pills + dashed guide frame */
.flex-split__pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(140,140,140,0.38); border: 1px solid rgba(255,255,255,0.85); color: #fff; font-weight: 600; font-size: 0.9rem; padding: 0.5rem 0.95rem; border-radius: 100px; backdrop-filter: blur(3px); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.flex-split__pill--tr { top: 36%; left: 52%; }
.flex-split__pill--bl { bottom: 6%; left: 3%; }
.flex-split__pill--tr::after { content: "\00BB"; font-size: 1.05em; line-height: 1; }
.flex-split__pill--bl::before { content: "\00AB"; font-size: 1.05em; line-height: 1; }
/* Dashed perspective box tracing the blind area (points set in the SVG markup). */
.flex-split__guides { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flex-split__guides polygon { fill: none; stroke: rgba(255,255,255,0.95); stroke-width: 1.5; stroke-dasharray: 2 4.5; stroke-linecap: round; }
/* Full-bleed slider demo: image runs to the right viewport edge (desktop). */
@media (min-width: 1025px) {
	.flex-sec--slider .container--wide { padding-right: 0; }
	



	


	.flex-sec--slider .flex-split { grid-template-columns: 1fr 50vw; gap: var(--gutter); align-items: stretch; min-height: clamp(560px, 46vw, 620px); }
	.flex-sec--slider .flex-split__media { min-width: 0; position: relative; }
	.flex-sec--slider .flex-split__media .media { position: absolute; inset: 0; border-radius: 0; width: 100%; height: 100%; aspect-ratio: auto; }
	

	.flex-sec--slider .flex-split__body { justify-content: flex-start; }
	.flex-sec--slider .flex-split__actions { margin-top: auto; }
}
/* Icon-less feature blocks (e.g. "Precision engineering") stack title over text. */
.flex-split__feature--plain { display: block; }
.flex-split__feature--plain .flex-split__feat-title { margin-bottom: 0.5rem; }
/* Image-left split feature bleeds to the left viewport edge (desktop). */
.flex-split:not(.split--media-right) .flex-split__media { order: -1; }
@media (min-width: 1025px) {
	.flex-sec--media-left .container--wide { padding-left: 0; }
	/* Image = exactly half the viewport (bleeds to the left edge); content fills the
	   rest with its own left/right margins. min-width:0 stops the wide image from
	   blowing out its track. */
	.flex-sec--media-left .flex-split { grid-template-columns: 50vw 1fr; gap: 16px; align-items: center; }
	

	.flex-sec--media-left .flex-split__media { min-width: 0; height: clamp(560px, 49vw, 620px); }
	.flex-sec--media-left .flex-split__media .media { border-radius: 0; width: 100%; height: 100%; aspect-ratio: auto; }
	.flex-sec--media-left .flex-split__body { justify-content: center; padding-left: clamp(1.5rem, 0.5rem + 2.5vw, 3rem); }
}

.flex-sec.flex-sec--split-feature { background: #fff; }
/* Hairline splitter above the feature-explainer (slider) section. */
.flex-sec--slider { border-top: 1px solid #e6e7e9; }

.flex-sec--slider .flex-split__media img { filter: brightness(0.75); }


.flex-sec--slider .flex-split__actions .btn {
	min-height: 56px;
	padding: 10px 32px;
	gap: 12px;
	border-radius: 42px;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.15px;
}
.flex-sec--slider .flex-split__actions .btn--outline { border-width: 1px; }





.styles-sec { display: flex; justify-content: center; background: #fff; border-top: 1px solid #E0E1E1; border-bottom: 1px solid #E0E1E1; padding: clamp(3.5rem, 2rem + 4.5vw, 96px) clamp(1.5rem, 0.5rem + 3.5vw, 80px); }
.styles-sec__inner { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: clamp(2.5rem, 1.5rem + 2.5vw, 48px); }
.styles-sec__head { display: flex; flex-direction: column; gap: 24px; }
.styles-sec__eyebrow { color: #63686D; letter-spacing: 0.15px; }
.styles-sec__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #17191A; margin: 0; }

.styles-row { display: grid; grid-template-columns: 1.6706fr 1fr; gap: 48px; align-items: center; }
.styles-row--media-right { grid-template-columns: 1fr 1.6706fr; }
.styles-row--media-right .styles-row__media { order: 2; }
.styles-row__media { min-width: 0; margin: 0; aspect-ratio: 771 / 693; overflow: hidden; }
.styles-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }






@media (min-width: 1025px) {
	.page-slug-honeycomb-blinds .styles-row__media,
	.page-slug-smartdrapes .styles-row__media,
	.page-slug-s-fold-sheer-curtains .styles-row__media,
	.page-slug-standard-awnings .styles-row__media { height: clamp(440px, 47.5vw, 752px); aspect-ratio: auto; }
}
.styles-row__details { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.styles-row__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 2.2vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; color: #000; margin: 0; }
.styles-row__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.styles-row__tags li { padding: 4px 12px; background: #F9F9F9; border: 1px solid #101010; border-radius: 16px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #000; }
.styles-row__qualities { display: flex; flex-direction: column; gap: 32px; padding-top: 16.69px; }
.styles-row__body { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.styles-row__finishes { display: flex; flex-direction: column; gap: 4px; }
.styles-row__finishes-title { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #000; }
.styles-row__finishes-text { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.styles-row__divider { display: block; height: 0; border-top: 1px solid #E0E1E1; }
.styles-row__swatches { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 8px 0; }
.styles-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 48px; }
.styles-swatch__chip { width: 48px; height: 48px; border: 1px solid #E8E8E8; }
.styles-swatch--sel .styles-swatch__chip { outline: 1px solid #101010; outline-offset: 3px; }
.styles-swatch__name { font-family: var(--font-body); font-weight: 400; font-size: 10px; line-height: 15px; letter-spacing: 0.15px; color: #000; text-transform: uppercase; }
@media (max-width: 1024px) {
	.styles-row, .styles-row--media-right { grid-template-columns: 1fr; gap: 1.75rem; }
	.styles-row--media-right .styles-row__media { order: -1; }
	.styles-row__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) {
	.flex-grid, .flex-grid--2, .flex-grid--4 { grid-template-columns: 1fr; }
	.flex-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.flex-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gallery page - image grid
   ========================================================================== */
.gallery-page { background: #fff; }
.gallery-page__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.5vw, 1.5rem); }
.gallery-page__item { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; margin: 0; }
.gallery-page__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .gallery-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-page__grid { grid-template-columns: 1fr; } }







.contact2-hero { min-height: clamp(510px, calc(60vw - 110px), 774px); }
.contact2-hero .page-hero__content { padding-block: clamp(3rem, 2rem + 3.5vw, 64px); }




@media (min-width: 1025px) { .contact2-hero .page-hero__content { padding-block: 0; } }
.contact2-hero .page-hero__inner { max-width: 1040px; }
.contact2-hero h1 { font-size: clamp(2.25rem, 1rem + 4vw, 60px); line-height: 1.3; letter-spacing: 0.5px; }
.contact2-hero .page-hero__sub { font-size: 16px; line-height: 24px; letter-spacing: 0.15px; max-width: 640px; }
.contact2-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2rem; }
.contact2-hero__actions .btn { min-width: 0; min-height: 64px; padding: 17px 32px; gap: 14px; border-radius: 42px; font-size: 18px; font-weight: 600; }
.contact2-hero__actions .btn svg { width: 20px; height: 20px; }




.contact2-hero__actions .btn--primary { background-image: none; background-color: #0353B6; box-shadow: 0 2px 7.3px rgba(0, 0, 0, 0.18); }


.contact2-hero__actions .btn--primary:hover { background-color: var(--c-accent); box-shadow: 0 4px 14px rgba(3, 138, 211, 0.3); }
.contact2-hero__actions .btn--light { background-image: none; background-color: #fff; color: #0353B6; }
.contact2-hero__actions .btn--light:hover { background-color: var(--c-accent); color: #fff; }
/* Leading icon → trailing chevron swap on the outline buttons */
.contact2-hero__actions .c2btn__lead,
.contact2-hero__actions .c2btn__chev { display: inline-flex; align-items: center; }
.contact2-hero__actions .c2btn__chev { display: none; }
.contact2-hero__actions .btn--light:hover .c2btn__lead { display: none; }
.contact2-hero__actions .btn--light:hover .c2btn__chev { display: inline-flex; }

/* direct-call bar */
.contact2-bar { background: #101010; color: #fff; padding-block: 32px; }
.contact2-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.contact2-bar__left { display: flex; align-items: center; gap: 24px; }
.contact2-bar__ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 9999px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.contact2-bar__ico svg { width: 18px; height: 18px; }
.contact2-bar__left small { display: block; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #fff; }
.contact2-bar__left strong { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 30px; }
.contact2-bar__right { display: flex; align-items: center; gap: 32px; }
.contact2-bar__num { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; }
.contact2-bar__right .btn { background: #fff; color: #000; font-weight: 700; font-size: 16px; border-radius: 42px; padding: 16px 40px; min-height: 56px; }
/* Prototype hover: white pill fills the primary blue (#0353B6 - same as the
   "Call us now" resting colour), text + phone icon flip white. */
.contact2-bar__right .btn:hover { background: var(--c-primary); color: #fff; }
.contact2-bar__right .btn svg { width: 20px; height: 20px; }

/* two-column form + info */
.contact2-main { padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); background: #fff; border-bottom: 1px solid #E0E1E1; }
.contact2-grid { display: grid; grid-template-columns: 1.338fr 1fr; gap: 64px; align-items: stretch; }
.contact2-card__title { display: flex; align-items: center; gap: 16px; font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: #000; margin: 0 0 40px; }
.contact2-card__badge { flex: 0 0 auto; width: 46px; height: 40px; border-radius: 12px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.contact2-card__badge svg { width: 20px; height: 20px; }
.contact2-form-card { background: #EBF3FE; border-radius: 12px; padding: 48px; box-shadow: 0 2px 50.5px rgba(0,0,0,.1); }
.contact2-info-card { background: #fff; border: 1px solid var(--c-primary); border-radius: 24px; padding: 40px; }

.contact2-info-card .contact2-card__badge--ghost { width: 32px; height: 32px; border-radius: 0; background: transparent; color: #101010; }
.contact2-info-card .contact2-card__badge--ghost svg { width: 32px; height: 32px; stroke-width: 2.4; }

/* form fields */
.contact2-form { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
.contact2-form .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact2-form > div { margin-bottom: 0; }
.contact2-form label { display: block; font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #000; margin-bottom: 8px; }
.contact2-form input, .contact2-form textarea { width: 100%; border: 1px solid #D9D9D9; background: #fff; border-radius: 10px; padding: 13px 12px 14px; font-family: var(--font-body); font-size: 14px; line-height: 21px; color: #17191a; }
.contact2-form input::placeholder, .contact2-form textarea::placeholder { color: #B9BBC6; }
.contact2-form input:focus, .contact2-form textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); }
.contact2-form textarea { resize: vertical; min-height: 117px; }
.contact2-form .btn { align-self: flex-end; margin-top: 0; border-radius: 42px; padding: 14px 32px; min-height: 56px; font-size: 18px; font-weight: 600; }
.contact2-form__note { align-self: flex-end; text-align: right; color: #2C2D33; opacity: .6; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; margin: 0; }

/* showroom info list */
.contact2-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.contact2-info li { display: flex; gap: 24px; align-items: flex-start; }
.contact2-info--divide { border-top: 0; padding-top: 0; }
.contact2-info__ico { flex: 0 0 auto; width: 54px; height: 52px; border-radius: 12px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.contact2-info__ico svg { width: 20px; height: 20px; }
.contact2-info small { display: block; font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #62636C; margin-bottom: 3px; }
.contact2-info a, .contact2-info strong { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #000; display: block; }
.contact2-info em { font-style: normal; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #62636C; }
.contact2-info__addr2 { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: #444749; }
.contact2-hours { width: 100%; }
.contact2-hours > small { margin-bottom: 12px; }
.contact2-hours div { display: flex; justify-content: space-between; gap: 1rem; margin-top: 10px; color: #2C2D33; font-size: 16px; line-height: 24px; }
.contact2-hours b { font-weight: 700; color: #000; }
.contact2-hours b.contact2-closed { color: #0353B6; font-size: 14px; }

/* map + showroom details (single stacked card) */
.contact2-map-wrap { background: #fff; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); border-bottom: 1px solid #E0E1E1; }
.contact2-map { position: relative; border: 1px solid #E0E1E1; border-bottom: 0; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.contact2-map iframe { display: block; width: 100%; height: clamp(360px, 36vw, 520px); border: 0; }
.contact2-map__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #101010; color: #fff; padding: 24px; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; }
.contact2-map__bar a { color: #fff; font-weight: 600; white-space: nowrap; text-transform: uppercase; }
.contact2-details { margin-top: 0; background: #fff; border: 1px solid #E0E1E1; border-radius: 0 0 24px 24px; padding: 48px; }
.contact2-details h2 { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: #000; margin: 0 0 32px; }
.contact2-details ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.contact2-details li { display: flex; align-items: flex-start; gap: 16px; color: #000; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; }
.contact2-details li span { flex: 0 0 auto; color: #101010; display: inline-flex; }
.contact2-details li svg { width: 24px; height: 24px; }

@media (max-width: 1024px) {
	.contact2-grid { grid-template-columns: 1fr; gap: 2rem; }
	.contact2-form-card { padding: clamp(1.5rem, 1rem + 2vw, 48px); }
	.contact2-info-card { padding: clamp(1.5rem, 1rem + 2vw, 40px); }
	.contact2-details ul { grid-template-columns: 1fr; }
	.contact2-details { padding: clamp(1.5rem, 1rem + 2vw, 48px); }
}
@media (max-width: 768px) {
	.contact2-hero__actions .btn { flex: 1 1 100%; }
	.contact2-bar__inner { justify-content: flex-start; }
}
@media (max-width: 560px) {
	.contact2-form .form-grid-2 { grid-template-columns: 1fr; gap: 24px; }
	.contact2-bar__right { width: 100%; justify-content: space-between; gap: 1rem; }
}
.contact2-notice { padding: .85rem 1rem; border-radius: 10px; font-size: .9rem; margin: 0 0 1.25rem; }
.contact2-notice--ok { background: #e7f6ec; color: #1b7a3d; border: 1px solid #b6e2c4; }
.contact2-notice--err { background: #fdeaea; color: #b42318; border: 1px solid #f3c1bd; }
/* mobile: let grid items shrink and long tokens (email) wrap */
.contact2-grid > * { min-width: 0; }
.contact2-info a, .contact2-info strong, .contact2-info em { overflow-wrap: anywhere; }
.contact2-map__bar { flex-wrap: wrap; }




.gallery2-hero .page-hero__inner { max-width: 680px; }

.gallery2-filters { border: 1px solid #e5ebf0; border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: 2.5rem; }
.gallery2-filters__label { display: block; font-size: .8rem; color: var(--c-muted); margin-bottom: .75rem; }
.gallery2-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.gallery2-chip { padding: .6rem 1.25rem; border: 1px solid #d9e2ef; border-radius: 100px; background: #fff; font-family: var(--font-body); font-weight: 500; font-size: .9rem; color: #2c2d33; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.gallery2-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.gallery2-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.gallery2-chip--sm { padding: .45rem 1rem; font-size: .85rem; }
.gallery2-search input { width: 100%; border: 1px solid #d9e2ef; border-radius: 10px; padding: .7rem 1rem; font: inherit; }
.gallery2-search input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); }
.gallery2-filters__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; font-size: .9rem; color: var(--c-muted); }
.gallery2-clear { background: none; border: 0; color: var(--c-ink); font-weight: 600; font-size: .85rem; cursor: pointer; }
.gallery2-clear:hover { color: var(--c-primary); }

.gallery2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gallery2-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.gallery2-card--wide { grid-column: span 2; }
.gallery2-card__media { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.gallery2-card__tag { position: absolute; top: 12px; left: 12px; background: rgba(23,25,26,.78); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: 100px; backdrop-filter: blur(4px); }
.gallery2-card__body { padding: 1.1rem 1.25rem 1.4rem; background: #f5f7fa; flex: 1; }
.gallery2-card__body h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: #17191a; margin: 0 0 .35rem; }
.gallery2-card__body p { color: var(--c-muted); font-size: .9rem; margin: 0; }
.gallery2-empty { text-align: center; color: var(--c-muted); padding: 2rem 0; }
.gallery2-more { text-align: center; margin-top: 2.5rem; }

/* featured project */
.gallery2-feature { background: #f1f5f9; }
.gallery2-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.gallery2-feature__media .media { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.gallery2-feature__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: .75rem; }
.gallery2-feature__thumbs span { display: block; aspect-ratio: 1 / 1; border-radius: 10px; background-size: cover; background-position: center; }
.gallery2-feature__body h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 1.1rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: #17191a; margin: 0 0 1rem; }
.gallery2-feature__body > p { color: #62636c; font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.5rem; }
.gallery2-spec { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dbe3ee; border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; }
.gallery2-spec div { padding: 1rem 1.25rem; border-bottom: 1px solid #dbe3ee; }
.gallery2-spec div:nth-child(odd) { border-right: 1px solid #dbe3ee; }
.gallery2-spec div:nth-last-child(-n+2) { border-bottom: 0; }
.gallery2-spec small { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--c-muted); margin-bottom: .3rem; }
.gallery2-spec strong { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: #17191a; }

@media (max-width: 900px) {
	.gallery2-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery2-card--wide { grid-column: span 2; }
	.gallery2-feature__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.gallery2-grid { grid-template-columns: 1fr; }
	.gallery2-card--wide { grid-column: span 1; }
	.gallery2-filters__foot { flex-direction: column; align-items: flex-start; gap: .5rem; }
}





.zt-intro .eyebrow, .zt-materials .eyebrow, .zt-3d .eyebrow {
	font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.25;
	letter-spacing: 0.15px; text-transform: none; color: #63686d;
}

/* Hero - H1 Sora 700 60/78 ls .5px; body Inter 24/36 white */


.zt-hero { min-height: clamp(620px, 60vw, 884px); padding-block: clamp(4rem, 4vw + var(--nav-h), 6rem); }
.zt-hero .page-hero__inner { max-width: 1280px; }
.zt-hero h1 { font-weight: 700; font-size: clamp(2.5rem, 1.4rem + 3vw, 3.75rem); line-height: 1.3; letter-spacing: 0.5px; }
.zt-hero .page-hero__sub { max-width: 889px; font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem); line-height: 1.5; letter-spacing: 0.15px; color: #fff; }
.zt-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }


.zt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.zt-chips li { padding: 8px 16px; background: #f9f9f9; border: 1px solid #cecece; border-radius: 18px; font-size: .75rem; font-weight: 500; line-height: 1.5; letter-spacing: .15px; color: #444749; }


.zt-intro, .zt-materials, .zt-3d { padding-block: clamp(4.5rem, 2rem + 6vw, 7rem); }

/* product intro + schematic */
.zt-intro { background: #fff; border-bottom: 1px solid #e0e1e1; }

.zt-intro__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 3vw, 48px); align-items: center; padding-right: 0; }
.zt-intro__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #17191a; margin: 1.5rem 0; }
.zt-intro__lead { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: .15px; margin: 0 0 2rem; }
.zt-benefits { list-style: none; margin: 0 0 2rem; padding: 16px 0; display: flex; flex-direction: column; gap: 32px; }
.zt-benefits li { display: flex; align-items: center; gap: 24px; }
.zt-benefits li > div { display: flex; flex-direction: column; gap: 4px; }
.zt-benefits__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.zt-benefits__ico svg { width: 30px; height: 30px; }
.zt-benefits strong { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.5; letter-spacing: .15px; color: #17191a; }
.zt-benefits div span { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: .15px; }
.zt-schematic { background: #ebf3fe; min-height: clamp(480px, 43vw, 613px); display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 4vw, 64px); padding: clamp(1.75rem, 3.3vw, 48px); }
.zt-schematic__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid #bbb; font-size: .875rem; letter-spacing: .15px; color: #000; }
.zt-schematic__head span:last-child { color: #62636c; opacity: .5; }
.zt-schematic__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 48px); }
.zt-schematic__stats > div { position: relative; display: flex; flex-direction: column; gap: 8px; padding-bottom: 17px; border-bottom: 1px solid #bbb; }
.zt-schematic__stats > div::before, .zt-schematic__stats > div::after { content: ""; position: absolute; bottom: -3px; width: 6px; height: 6px; border-radius: 9999px; background: #101010; }
.zt-schematic__stats > div::before { left: 0; }
.zt-schematic__stats > div::after { right: 0; }
.zt-schematic__stats b { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.5rem, 1rem + 4vw, 3.75rem); line-height: 1.1; letter-spacing: .5px; color: #000; display: flex; align-items: baseline; gap: 8px; }
.zt-schematic__stats small { font-family: var(--font-body); font-size: .875rem; font-weight: 400; color: #000; }
.zt-schematic__stats span { font-size: .625rem; line-height: 1.5; letter-spacing: .15px; color: #2c2d33; }
.zt-schematic__gallery { display: flex; flex-direction: column; gap: 40px; padding-top: 32px; border-top: 1px solid #bbb; }
.zt-schematic__label { display: block; font-size: .75rem; line-height: 1.5; letter-spacing: .15px; color: #000; }
/* Curated colours: up to 5 square cards per row; the first 4 show, and the "+"
   reveals one more row (5) per click, disabling once everything is shown. */
.zt-schematic__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 90px)); gap: clamp(10px, 1.8vw, 30px); align-items: start; justify-content: start; }
.zt-chip { aspect-ratio: 1 / 1; border: 1px solid #bbb; display: block; }
.zt-chip--hidden { display: none; }
.zt-schematic__more { aspect-ratio: 1 / 1; border: 1px dashed #bbb; background: transparent; color: #101010; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; font-family: var(--font-body); }
.zt-schematic__more.is-disabled { opacity: .45; cursor: default; }

/* choose your material */
.zt-materials { background: #fff; border-bottom: 1px solid #e0e1e1; }

.zt-material.zt-material--media-left { grid-template-columns: 1.65fr 1fr; }
.zt-material.split--media-right { grid-template-columns: 1fr 1.65fr; }
.zt-materials__head { display: flex; flex-direction: column; gap: 24px; margin: 0 0 clamp(2rem, 4vw, 48px); }
.zt-materials__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #17191a; margin: 0; }
.zt-material { align-items: stretch; gap: clamp(2rem, 4vw, 48px); margin-bottom: clamp(2.5rem, 5vw, 80px); }
.zt-material:last-child { margin-bottom: 0; }
.zt-material .media { aspect-ratio: 770 / 745; border-radius: 0; overflow: hidden; height: 100%; }






@media (min-width: 1025px) {
	.zt-material .media { height: clamp(560px, 47.8vw, 757px); aspect-ratio: auto; }
}
/* Keep the baked-in Ziptrak watermark corner in view (mesh = bottom-left, pvc = bottom-right) */
.zt-material .media img { width: 100%; height: 100%; object-fit: cover; }
.zt-material--media-left .media img { object-position: left bottom; }
.zt-material.split--media-right .media img { object-position: right bottom; }
.zt-material__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

.zt-material__body .btn { margin-top: auto; min-height: 56px; padding: 10px 32px; font-size: 1.125rem; }
.zt-material__body h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; color: #000; margin: 0; }
.zt-material__body > p { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: .15px; margin: 0; }

.zt-material__body .zt-chips li { padding: 4px 12px; border: 1px solid #101010; border-radius: 16px; color: #2c2d33; }
.zt-material__flabel { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.5; letter-spacing: .15px; color: #000; }
.zt-material__fnote { color: #62636c; font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: .15px; margin: -1rem 0 0; }
.zt-swatches { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; border-top: 1px solid #e0e1e1; }
.zt-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .625rem; line-height: 1.5; letter-spacing: .15px; color: #000; }
.zt-swatch i { width: 48px; height: 48px; border-radius: 0; border: 1px solid #e8e8e8; }
.zt-mesh-swatches { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; padding-top: 16px; border-top: 1px solid #e0e1e1; }
.zt-mesh-swatch { display: flex; flex: 0 0 72px; flex-direction: column; align-items: center; gap: 8px; color: #17191a; font-size: .625rem; line-height: 1.25; text-align: center; }
.zt-mesh-swatch img { display: block; width: 64px; height: 64px; border: 1px solid #dfe1e2; object-fit: cover; }
.zt-mesh-swatch--more { min-width: 72px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
.zt-mesh-swatch--more strong { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #cbd0d3; background: #f5f6f6; color: var(--c-primary); font-size: 2rem; font-weight: 400; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.zt-mesh-swatch--more:hover strong,
.zt-mesh-swatch--more:focus-visible strong { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.zt-swatch-dialog { position: fixed; inset: 0; width: min(980px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; }
.zt-swatch-dialog::backdrop { background: rgba(8, 15, 22, .58); }
.zt-swatch-dialog__backdrop { position: fixed; inset: 0; z-index: -1; border: 0; background: transparent; cursor: default; }
.zt-swatch-dialog__panel { max-height: calc(100dvh - 32px); overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.zt-swatch-dialog__close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #17191a; box-shadow: 0 2px 12px rgba(0, 0, 0, .14); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.zt-swatch-dialog__header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 62px 12px 22px; border-bottom: 1px solid #e0e1e1; background: #f4f6f7; }
.zt-swatch-dialog__header h2 { margin: 0 0 2px; color: #17191a; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.15; }
.zt-swatch-dialog__header p { margin: 0; color: #62636c; font-size: .8125rem; }
.zt-swatch-dialog__header .btn { flex: 0 0 auto; min-height: 42px; padding: 7px 18px; font-size: .8125rem; }
.zt-swatch-dialog__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px 6px; padding: 18px 16px 20px; }
.zt-mesh-swatch--dialog { width: 100%; min-width: 0; gap: 5px; font-size: .625rem; line-height: 1.15; }
.zt-mesh-swatch--dialog img { width: 50px; height: 50px; }

@media (min-width: 1200px) {
	.zt-swatch-dialog { width: min(1120px, calc(100% - 48px)); max-height: calc(100dvh - 48px); }
	.zt-swatch-dialog__panel { max-height: calc(100dvh - 48px); }
	.zt-swatch-dialog__grid { gap: 16px 10px; padding: 22px 22px 24px; }
	.zt-mesh-swatch--dialog { gap: 7px; font-size: .6875rem; }
	.zt-mesh-swatch--dialog img { width: 70px; height: 70px; }
}

/* design a blind in 3D */
.zt-3d { background: #fff; }
.zt-3d__inner { max-width: calc(1280px + 2 * var(--gutter)); margin-inline: auto; text-align: center; }
.zt-3d__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 1.5rem 0 1rem; }
.zt-3d__sub { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: .15px; margin: 0 auto 2.5rem; max-width: 712px; }

.zt-3d__actions .btn--outline { border: 1px solid var(--c-primary); color: var(--c-primary); background: #fff; }
/* Accent-blue hover for all Ziptrak blue buttons (Book free / Try this design / Need inspiration) */
.page-template-page-ziptrak .btn--primary:hover,
.page-template-page-ziptrak .btn--outline:hover,
.page-template-page-automation .btn--primary:hover,
.page-template-page-automation .btn--outline:hover,
.page-template-page-indoor-product .btn--primary:hover,
.page-template-page-indoor-product .btn--outline:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; box-shadow: none; }
/* Nav "Get a Quote" pill - accent hover on every page */
.site-header__cta.btn--primary:hover { background: var(--c-accent); box-shadow: none; }
.zt-3d__frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #e5ebf0; box-shadow: 0 20px 50px -20px rgba(0,0,0,.25); }
.zt-3d__bar { display: flex; gap: .4rem; padding: .8rem 1rem; background: #17233a; }
.zt-3d__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.35); }
.zt-3d__frame img { display: block; width: 100%; }
.zt-3d__badge { position: absolute; top: 3.2rem; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.92); color: var(--c-primary); font-weight: 600; padding: .5rem 1.25rem; border-radius: 100px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.zt-3d__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

@media (max-width: 900px) {
	.zt-intro__grid { grid-template-columns: 1fr; padding-right: var(--gutter); }
	.zt-material,
	.zt-material.zt-material--media-left,
	.zt-material.split--media-right { grid-template-columns: 1fr; }
	.zt-material.split--media-right .split__media { order: -1; }
	/* stacked: media natural height, no forced stretch */
	.zt-material .media { height: auto; }
	.zt-swatch-dialog__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.zt-swatch-dialog__header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 54px 12px 16px; }
	.zt-swatch-dialog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; padding: 16px 10px 18px; }
	.zt-mesh-swatch--dialog img { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
	.zt-mesh-swatches { flex-wrap: nowrap; gap: 4px; }
	.zt-mesh-swatches .zt-mesh-swatch { flex: 1 1 0; min-width: 0; font-size: .5rem; }
	.zt-mesh-swatches .zt-mesh-swatch img,
	.zt-mesh-swatches .zt-mesh-swatch--more strong { width: 48px; height: 48px; }
	.zt-mesh-swatches .zt-mesh-swatch--more { min-width: 0; }
}





.auto-intro .eyebrow, .auto-methods .eyebrow, .auto-power .eyebrow, .auto-range .eyebrow, .auto-sensors .eyebrow, .auto-env .eyebrow {
	font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: 0.15px; text-transform: none; color: #63686d;
}

.auto-hero { background: #e8e8e8; display: flex; align-items: center; min-height: clamp(620px, 60vw, 884px); padding-block: clamp(4rem, 4vw + var(--nav-h), 6rem); }
/* When a hero background image is set, cover the section (grey stays the fallback). */
.auto-hero--image { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; isolation: isolate; }

.auto-hero--image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)); z-index: -1; }
.auto-hero--image .auto-hero__inner h1,
.auto-hero--image .auto-hero__inner p { color: #fff; }
.auto-hero__inner { max-width: 1280px; }
.auto-hero__inner h1 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.5rem, 1.4rem + 3vw, 3.75rem); line-height: 1.3; letter-spacing: 0.5px; color: #101010; margin: 0 0 2rem; }
.auto-hero__inner p { color: #101010; font-weight: 500; font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem); line-height: 1.5; letter-spacing: 0.15px; margin: 0 0 2rem; max-width: 718px; }

.auto-head { max-width: 1280px; margin: 0 0 clamp(2rem, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; }
.auto-head--center { margin-inline: auto; text-align: center; align-items: center; }
.auto-head h2, .auto-intro__body h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; color: #17191a; margin: 0; }
.auto-head p { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; max-width: 712px; }

/* product intro */
.auto-intro { background: #fff; border-bottom: 1px solid #e0e1e1; }



.auto-intro__grid { display: grid; grid-template-columns: 709fr 587fr; gap: clamp(2rem, 4.5vw, 64px); align-items: center; padding-left: 0; }
.auto-intro__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.auto-intro__body p { color: #62636c; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }
.auto-intro__body .btn { min-height: 56px; padding: 10px 32px; }
.auto-intro__media { align-self: stretch; }
.auto-intro__media .media { aspect-ratio: 709 / 662; border-radius: 0; overflow: hidden; height: 100%; }
.auto-intro__media .media img { width: 100%; height: 100%; object-fit: cover; }






.auto-intro__grid { align-items: stretch; }
.auto-intro__media { align-self: stretch; }
@media (min-width: 1025px) {
	.auto-intro__media .media { height: clamp(560px, 47.22vw, 748px); aspect-ratio: auto; }
	/* Bottom-pin the CTA to the image bottom (matches the product-intro rule). Desktop only
	   so the mobile stack isn't affected. */
	.auto-intro__body .btn { margin-top: auto; }
}

/* control methods 3x2 grid */
.auto-methods { background: #fff; border-bottom: 1px solid #e0e1e1; }
.auto-methods__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.auto-method { padding: clamp(1.75rem, 3vw, 48px); border-right: 1px solid #c4c7c9; }
.auto-method:nth-child(3n) { border-right: 0; }
.auto-method:nth-child(-n+3) { border-bottom: 1px solid #c4c7c9; }
.auto-method__ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--c-primary); color: #fff; margin-bottom: clamp(1.5rem, 3vw, 48px); }
.auto-method__ico svg { width: 28px; height: 28px; }
.auto-method h3 { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1.25; letter-spacing: 0.25px; color: #000; margin: 0 0 8px; }
.auto-method p { color: #62636c; font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }

/* generic light-blue tiles (powered / environments) */
.auto-power { background: #fff; border-bottom: 1px solid #e0e1e1; }


.auto-power__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-inline: 0; }
/* Below ~1025 the three 32px-title cards get too narrow (titles wrap, cards tall),
   so stack them full-width - same treatment the other 3-card sections use. */
@media (max-width: 1024px) { .auto-power__grid { grid-template-columns: 1fr; } }
.auto-env { background: #fff; border-bottom: 1px solid #e0e1e1; }
.auto-env__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-inline: clamp(0px, 4vw, 64px); }
.auto-tile { background: #ebf3fe; border-radius: 24px; display: flex; flex-direction: column; gap: 24px; }
.auto-tile__ico { display: grid; place-items: center; background: var(--c-primary); color: #fff; flex: 0 0 auto; }
/* Power tiles - left-aligned, H6 32/40, icon 56 */
.auto-power .auto-tile { padding: 41px; align-items: flex-start; }
.auto-power .auto-tile__ico { width: 56px; height: 56px; border-radius: 12px; }
.auto-power .auto-tile__ico svg { width: 28px; height: 28px; }
.auto-power .auto-tile h3 { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1.25; letter-spacing: 0.25px; color: #000; margin: 0 0 8px; }
/* Environment tiles - centred, H7 24/30, icon 64 */
.auto-env .auto-tile { padding: 40px; align-items: center; text-align: center; }
.auto-env .auto-tile__ico { width: 64px; height: 64px; border-radius: 16px; }
.auto-env .auto-tile__ico svg { width: 30px; height: 30px; }
.auto-env .auto-tile h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: #000; margin: 0; }
.auto-env__txt { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.auto-tile p { color: #62636c; font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; }

/* product range 3 cards */
.auto-range { background: #fff; border-bottom: 1px solid #e0e1e1; }
.auto-range__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.auto-range__card { background: #f9f9f9; border: 1px solid #e0e1e1; border-radius: 0; padding: 40px; min-height: 255px; display: flex; flex-direction: column; gap: 16px; }
.auto-range__card--active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; position: relative; overflow: hidden; }
.auto-range__deco { position: absolute; width: 256px; height: 256px; right: -79px; bottom: -80px; border: 2px solid rgba(255,255,255,.1); border-radius: 9999px; }
.auto-range__card h3 { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1.25; letter-spacing: 0.25px; color: #17191a; margin: 0; position: relative; z-index: 1; }
.auto-range__card p { color: #62636c; font-size: 1rem; line-height: 1.5; letter-spacing: 0.15px; margin: 0; position: relative; z-index: 1; }
.auto-range__card--active h3, .auto-range__card--active p { color: #fff; }

/* smart sensors strip */




.auto-sensors { background-color: #fff; background-image: url(../images/auto-sensors-bg.webp); background-size: cover; background-position: center; border-bottom: 1px solid #e0e1e1; }
.auto-sensors__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.auto-sensor { background: #fff; border: 1px solid var(--c-primary); border-radius: 12px; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.auto-sensor__ico { color: var(--c-primary); }
.auto-sensor__ico svg { width: 40px; height: 40px; stroke-width: 1.4; }
.auto-sensor span:last-child { font-size: .75rem; line-height: 1.5; letter-spacing: .15px; text-transform: uppercase; color: #101010; font-weight: 500; }

@media (max-width: 900px) {
	.auto-intro__grid { grid-template-columns: 1fr; padding-left: var(--gutter); }
	.auto-intro__media .media { height: auto; }
	.auto-methods__grid { grid-template-columns: repeat(2, 1fr); }
	.auto-method:nth-child(3n) { border-right: 1px solid #c4c7c9; }
	.auto-method:nth-child(2n) { border-right: 0; }
	.auto-range__grid { grid-template-columns: 1fr; }
	.auto-power__grid { grid-template-columns: 1fr; }   /* 3 power cards stack on tablet/mobile */
	.auto-sensors__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.auto-power__grid, .auto-env__grid { grid-template-columns: 1fr; padding-inline: 0; }
	.auto-methods__grid { grid-template-columns: 1fr; }
	.auto-method, .auto-method:nth-child(2n) { border-right: 0; }
	.auto-sensors__row { grid-template-columns: 1fr; }
}



/* inner is also a .container (58px gutter padding) - size so its CONTENT box is 726 */
.page-template-page-automation .cta__inner { max-width: calc(726px + 2 * var(--gutter)); }
.page-template-page-automation .cta__heading { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.27; letter-spacing: -0.02em; width: auto; text-wrap: normal; }
.page-template-page-automation .cta__text { max-width: 726px; }
.page-template-page-automation .cta .btn { min-height: 38px; padding: 10px 32px; font-size: 0.75rem; font-weight: 500; line-height: 18px; }
/* hide forced hero <br> on phones */
@media (max-width: 700px) { .auto-hero__inner h1 br { display: none; } }

/* ==========================================================================
   About page review tweaks (hero spacing, whyus image, form centering)
   ========================================================================== */



.page-hero--about { min-height: clamp(620px, 60vw, 884px); padding-block: clamp(2.5rem, 2vw + var(--nav-h), 4rem); }
.page-hero--about .page-hero__content .container { margin-top: auto; }   /* bottom-align content above the stats bar */
.page-hero--about .page-hero__inner { max-width: 1120px; padding-left: clamp(0.5rem, 1.5vw, 2rem); }

.page-hero--about h1 { font-size: 60px; font-weight: 700; line-height: 78px; letter-spacing: 0.5px; }
@media (max-width: 560px) { .page-hero--about h1 { font-size: clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem); line-height: 1.15; } }
.page-hero--about .page-hero__sub { max-width: 1000px; }


.whyus .split--bleed { grid-template-columns: 1.1fr 0.9fr; }


.whyus .split--bleed:not(.split--media-right) { grid-template-columns: 1fr 1fr; }


.whyus .split--bleed:not(.split--media-right) .split__body { justify-content: flex-start; }
.whyus .split--bleed:not(.split--media-right) .split__body h2 { margin-block: 1rem 1.25rem !important; }


.whyus .split__media { min-height: clamp(440px, 40vw, 620px); }





@media (min-width: 1025px) {
	.whyus .split--bleed .split__media { align-self: start; min-height: 0; }
	/* Explicit (not aspect-driven) height so Indoor and Awnings match despite
	   their different column widths. ~602px at 1440, same on both pages. */
	.whyus .split--bleed .media.whyus__media { height: clamp(440px, 42vw, 640px); min-height: 0; aspect-ratio: auto; }
	


	.page-slug-awnings .whyus .split--bleed { align-items: center; }
	.page-slug-awnings .whyus .split--bleed .split__media { align-self: center; }
	.page-slug-awnings .whyus .split--bleed .media.whyus__media { height: 496px; }
}

.page-slug-awnings .whyus { padding-block: clamp(3rem, 2rem + 4.4vw, 6rem); }

/* Form section: constrain intro text + centre the submit button */
.form-section__head p { padding-inline: 1rem; max-width: 640px; }
.form-section .form-card .form-submit-wrap { text-align: center; }










.form-section .form-card .wpcf7-submit,
.form-section .form-card button[type="submit"] { display: flex; margin-inline: auto; }
@media (max-width: 1024px) {
	




	.whyus .split--bleed { display: flex; flex-direction: column; gap: 1.25rem; }
	.whyus .split--bleed > .split__body { display: contents; }
	.whyus .split--bleed .eyebrow { order: 1; margin: 0; }
	.whyus .split--bleed .split__body > h2 { order: 2; margin-block: 0 !important; }
	.whyus .split--bleed .split__media { order: 3; min-height: clamp(300px, 60vw, 520px); }
	.whyus .split--bleed .accordion { order: 4; }
	.whyus .split--bleed .eyebrow,
	.whyus .split--bleed .split__body > h2,
	.whyus .split--bleed .accordion { padding-inline: var(--gutter); }
}

/* ==========================================================================
   S-fold sheer blinds - bespoke sections
   ========================================================================== */

/* Light diffusion: copy + before/after comparison widget */
.sfold-diffusion { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.sfold-diffusion__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sfold-diffusion__content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sfold-diffusion__content .eyebrow--muted { color: #63686D; }
.sfold-diffusion__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.sfold-diffusion__text { display: flex; flex-direction: column; gap: 16px; }
.sfold-diffusion__text p { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }

.sfold-compare { min-width: 0; background: #F9F9F9; border-radius: 24px; padding: clamp(1.75rem, 1rem + 3vw, 64px); display: flex; flex-direction: column; gap: 40px; }
.sfold-compare__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 1rem + 2vw, 34px); line-height: 1.26; letter-spacing: 0.25px; color: #000; text-align: center; margin: 0; }
.sfold-compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sfold-compare__card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; min-height: 320px; }
.sfold-compare__card--harsh { background: #fff; border: 1px solid #E5E5E5; }
.sfold-compare__card--soft { background: #EBF3FE; }
.sfold-compare__body { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sfold-compare__tint { position: absolute; inset: 0; background: #FEF08A; opacity: .2; }
.sfold-compare__lab { position: relative; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.15px; color: #000; text-align: left; }
.sfold-compare__lab--soft { color: #1961C5; }
.sfold-compare__ico { display: inline-flex; color: #101010; }
.sfold-compare__lab--soft .sfold-compare__ico { color: #0353B6; }
.sfold-compare__ico svg { width: 24px; height: 24px; }
.sfold-compare__foot { padding: 20.5px 0; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.15px; color: #fff; background: #101010; }
.sfold-compare__foot--soft { background: #0353B6; }

/* Where they work best: centered header + 6-card grid */
.sfold-env { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.sfold-env__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 48px; }
.sfold-env__head .eyebrow--muted { color: #63686D; }
.sfold-env__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.sfold-env__intro { max-width: 712px; font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.sfold-env__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sfold-env-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 40px; background: #EBF3FE; border-radius: 24px; }
.sfold-env-card__ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; background: var(--c-primary); color: #fff; display: grid; place-items: center; }
.sfold-env-card__ico svg { width: 26px; height: 26px; }
.sfold-env-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 30px; color: #000; margin: 0; }
.sfold-env-card__text { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #62636C; margin: 0; max-width: 330px; }

/* Textures block reuse: centered header + intro; let long swatch labels breathe */
.styles-sec--center .styles-sec__head { align-items: center; text-align: center; }
.styles-sec__intro { max-width: 640px; font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.styles-sec--center .styles-sec__intro { margin-inline: auto; }
.styles-swatch { width: auto; min-width: 48px; }

/* Operation - 2 large cards with a faint watermark letter (S-fold variant) */
.product-operation--watermark .product-operation__cards,
.product-operation--watermark .product-operation__cards--2 { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-inline: 64px; }
/* Three watermark cards (e.g. Valance styles) span the full width, no side inset. */
.product-operation--watermark .product-operation__cards--3 { grid-template-columns: repeat(3, 1fr); padding-inline: 0; }
.product-operation--watermark .op-card { position: relative; overflow: hidden; padding: 32px; border-radius: 24px; }
.product-operation--watermark .op-card__icon { width: 56px; height: 56px; border-radius: 14px; }
.product-operation--watermark .op-card__icon svg { width: 32px; height: 32px; }
.product-operation--watermark .op-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 1rem + 2vw, 34px); line-height: 1.26; letter-spacing: 0.25px; }
.product-operation--watermark .op-card__text { font-size: 16px; line-height: 24px; }
.product-operation--watermark .op-card__watermark { display: block; position: absolute; top: 20px; right: 40px; font-family: var(--font-body); font-weight: 400; font-size: 96px; line-height: 1.5; color: #101010; opacity: .05; z-index: 0; pointer-events: none; }
.product-operation--watermark .op-card > *:not(.op-card__watermark) { position: relative; z-index: 1; }


.product-process__head { text-align: center; align-items: center; max-width: 820px; margin-inline: auto; }






.page-hero--product .page-hero__sub { max-width: 820px; font-weight: 400; letter-spacing: 0.15px; }

@media (max-width: 1024px) {
	.sfold-diffusion__grid { grid-template-columns: 1fr; gap: 40px; }
	.sfold-env__grid { grid-template-columns: repeat(2, 1fr); }
	.product-operation--watermark .product-operation__cards,
	.product-operation--watermark .product-operation__cards--2 { grid-template-columns: 1fr; padding-inline: 0; }
}
@media (max-width: 560px) {
	.sfold-env__grid { grid-template-columns: 1fr; }
	.sfold-compare__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SmartDrapes - bespoke sections
   ========================================================================== */

/* Walkthrough feature: annotated image + copy/pills/metrics */
.sd-walk { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.sd-walk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.sd-walk__media { position: relative; min-width: 0; min-height: 0; margin: 0; border: 1px solid #B6D4FF; background: #fff; }
/* object-position bottom: the photo is portrait (dog in the lower ~45%); a landscape
   cover-crop from centre cut the dog off the bottom, so anchor to the bottom to keep it whole. */
.sd-walk__media img { position: absolute; top: 33px; left: 33px; width: calc(100% - 66px); height: calc(100% - 66px); object-fit: cover; object-position: center bottom; opacity: .9; }
.sd-walk__fig { position: absolute; top: 16px; left: 17px; display: inline-flex; align-items: center; padding: 8px; background: #fff; border: 1px solid #0353B6; border-radius: 16px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #0353B6; }
.sd-walk__coord { position: absolute; right: 17px; bottom: 17px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: 110px; }
.sd-walk__coord-line { width: 48px; height: 1px; background: #0353B6; }
.sd-walk__coord-tag { width: 100%; padding: 4px 12px; background: #fff; border: 1px solid rgba(118,118,128,0.12); border-radius: 12px; text-align: right; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #0353B6; }
.sd-walk__content { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 23px; }
.sd-walk__intro { display: flex; flex-direction: column; gap: 24px; }
.sd-walk__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.sd-walk__lead { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.sd-walk__divider { height: 1px; background: #D9D9D9; }
.sd-walk__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sd-walk__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #F0F0F0; border: 1px solid #D9D9D9; border-radius: 20px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #2C2D33; }
.sd-walk__dot { flex: 0 0 auto; width: 6px; height: 6px; background: #0353B6; border-radius: 50%; }
.sd-walk__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sd-metric { display: flex; flex-direction: column; padding: 24px; border: 1px solid #DBE1E7; border-radius: 16px; }
.sd-metric__label { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #63686D; }
.sd-metric__value { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 1rem + 2vw, 34px); line-height: 1.26; letter-spacing: 0.25px; color: #0353B6; margin: 4px 0 0; }
.sd-metric__detail { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #101010; }

/* Precision engineered benefits: 4-col blue-bordered grid */
.sd-benefits { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.sd-benefits__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 80px); }
.sd-benefits__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.sd-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #0353B6; }
.sd-benefit { display: flex; flex-direction: column; gap: 24px; padding: 48px; border-right: 1px solid #0353B6; border-bottom: 1px solid #0353B6; }
.sd-benefit:nth-child(4n) { border-right: 0; }
.sd-benefit__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: #0353B6; display: grid; place-items: center; }
.sd-benefit__ico img { width: 28px; height: 28px; object-fit: contain; }
.sd-benefit__body { display: flex; flex-direction: column; gap: 12px; }
.sd-benefit__title { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 30px; letter-spacing: 0.15px; color: #000; margin: 0; }
.sd-benefit__text { font-family: var(--font-body); font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #62636C; margin: 0; }

/* Versatile applications: 4 columns, blue top rule + icon + copy + photo */
.sd-apps { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.sd-apps__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 48px; }
.sd-apps__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #1A1C1B; margin: 0; }
.sd-apps__intro { max-width: 712px; font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.sd-apps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.sd-app { display: flex; flex-direction: column; gap: 24px; border-top: 1px solid #0353B6; padding-top: 48px; }
.sd-app__ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; background: #0353B6; display: grid; place-items: center; }
.sd-app__ico img { width: 28px; height: 28px; object-fit: contain; }
.sd-app__title { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: #000; margin: 0; }
.sd-app__text { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.sd-app__media { margin: 0; margin-top: auto; aspect-ratio: 296 / 395; overflow: hidden; }
.sd-app__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1024px) {
	.sd-walk__grid { grid-template-columns: 1fr; gap: 40px; }
	.sd-walk__media { aspect-ratio: 4 / 3; }
	.sd-benefits__grid { grid-template-columns: repeat(2, 1fr); }
	.sd-benefit:nth-child(4n) { border-right: 1px solid #0353B6; }
	.sd-benefit:nth-child(2n) { border-right: 0; }
	.sd-apps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sd-walk__metrics { grid-template-columns: 1fr; }
	.sd-benefits__grid { grid-template-columns: 1fr; }
	.sd-benefit { border-right: 0 !important; }
	.sd-apps__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Plantation shutters - bespoke sections
   ========================================================================== */

/* Tilt mechanism: 3 bordered state cards with blue slat diagrams */
.pl-tilt { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.pl-tilt__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 48px; }
.pl-tilt__head .eyebrow--muted { color: #63686D; }
.pl-tilt__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; max-width: 720px; }
.pl-tilt__intro { max-width: 740px; font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.pl-tilt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pl-tilt-card { display: flex; flex-direction: column; gap: 12px; padding: 48px; border: 1px solid #0353B6; border-radius: 24px; min-height: 471px; }
.pl-tilt-card__viz { flex: 1; display: grid; place-items: center; margin-bottom: 12px; }
.pl-tilt-card__viz img { display: block; max-width: 100%; max-height: 240px; object-fit: contain; }
.pl-tilt-card__state { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #2C2D33; }
.pl-tilt-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 1rem + 2vw, 34px); line-height: 1.26; letter-spacing: 0.25px; color: #0353B6; margin: 0; }
.pl-tilt-card__text { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #101010; margin: 0; }

/* Energy saving benefits: copy + Summer/Winter cards over a faint illustration */



.pl-energy { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 629px; background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }





.pl-energy__bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; opacity: .9; z-index: 0; pointer-events: none; }
.pl-energy__scrim { display: none; }
.pl-energy__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 418fr 750fr; gap: 32px; align-items: center; }
.pl-energy__content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-energy__content .eyebrow--muted { color: #63686D; }
.pl-energy__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.pl-energy__detail { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #2C2D33; margin: 0; }
.pl-energy__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-width: 0; }


.pl-energy-card { display: flex; flex-direction: column; gap: 15.4px; padding: 32px; min-height: 357px; background: #fff; border: 1px solid #0353B6; border-radius: 24px; }
.pl-energy-card__ico { color: #0353B6; display: inline-flex; }
.pl-energy-card__ico svg { width: 33px; height: 33px; }
.pl-energy-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.5vw, 32px); line-height: 1.25; letter-spacing: 0.25px; color: #000; margin: 0; }
.pl-energy-card__text { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #62636C; margin: 0; flex: 1; }
.pl-energy-card__bar { display: block; height: 4px; border-radius: 2px; background: #DCEBFF; overflow: hidden; }
.pl-energy-card__bar span { display: block; height: 100%; background: #0353B6; }

/* Materials and finishes: 4 image cards */
.pl-materials { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.pl-materials__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 64px); }
.pl-materials__head .eyebrow--muted { color: #63686D; }
.pl-materials__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #1A1C1B; margin: 0; }
.pl-materials__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

.pl-material { display: flex; flex-direction: column; gap: 8px; }
.pl-material__media { margin: 0 0 8px; aspect-ratio: 296 / 350; overflow: hidden; border-radius: 16px; }
.pl-material__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-material__title { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #000; margin: 0; }
.pl-material__text { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #62636C; margin: 0; }

/* Custom window shapes: 5 diagram cards */
.pl-windows { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.pl-windows__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 48px; }
.pl-windows__head .eyebrow--muted { color: #63686D; }
.pl-windows__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #1A1C1B; margin: 0; max-width: 720px; }
.pl-windows__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.pl-window { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pl-window__box { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid #0353B6; border-radius: 16px; display: grid; place-items: center; }
.pl-window__type { position: absolute; top: 10px; left: 14px; font-family: var(--font-body); font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #62636C; }
.pl-window__viz { display: block; height: 68%; }
.pl-window__viz svg { display: block; height: 100%; width: auto; }
.pl-window__meta { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pl-window__title { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 30px; letter-spacing: 0.15px; color: #1A1C1B; }
.pl-window__sub { font-family: var(--font-body); font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #2C2D33; }
.pl-windows__note { margin: 48px 0 0; text-align: center; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #747779; }

@media (max-width: 1024px) {
	.pl-tilt__grid { grid-template-columns: 1fr; }
	.pl-tilt-card { min-height: 0; }
	.pl-energy__inner { grid-template-columns: 1fr; gap: 32px; }
	/* Drop the fixed 629 frame once the columns stack - let it size to content. */
	.pl-energy { min-height: 0; justify-content: flex-start; }
	.pl-materials__grid { grid-template-columns: repeat(2, 1fr); }
	.pl-windows__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.pl-energy__cards { grid-template-columns: 1fr; }
	/* Cards stack full-width here - release the 357 min-height so they hug their
	   content instead of towering. Desktop (two-up) keeps the fixed height. */
	.pl-energy-card { min-height: 0; }
}
@media (max-width: 560px) {
	.pl-materials__grid { grid-template-columns: 1fr; }
	.pl-windows__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Roller blinds - bespoke sections
   ========================================================================== */

/* How roller blinds work: copy + 3 cord-position cards over a faint illustration */


.roller-hiw { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 581px; background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }




.roller-hiw__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; z-index: 0; pointer-events: none; }
.roller-hiw__scrim { display: none; }
.roller-hiw__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 509fr 707fr; gap: 64px; align-items: center; }
.roller-hiw__text { display: flex; flex-direction: column; gap: 23.3px; min-width: 0; }
.roller-hiw__text .eyebrow--muted { color: #63686D; }
.roller-hiw__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.roller-hiw__detail { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #000; margin: 0; }
.roller-hiw__cards { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 16px; min-width: 0; }
.rhiw-card { flex: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 32px; background: #fff; border: 1px solid #0353B6; border-radius: 24px; }
.rhiw-win { position: relative; display: block; width: 80px; height: 120px; border: 1px solid #0353B6; }
.rhiw-win__fill { position: absolute; left: 1px; right: 1px; background: #0353B6; }
.rhiw-win__fill--down { top: 1px; bottom: 1px; }
.rhiw-win__fill--half { top: 1px; bottom: 50%; }
.rhiw-win__fill--up { top: 1px; height: 8px; }
.rhiw-card__meta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; text-align: center; }
.rhiw-card__label { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #0353B6; }
.rhiw-card__sub { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #000; opacity: .6; }

/* Fabric rows: image badge overlay (reuses styles-selection) */
.styles-row__media { position: relative; }




.styles-row__media .styles-row__badge-img { position: absolute; top: 40px; left: 40px; height: 34px; width: auto; display: block; }
.styles-row--media-right .styles-row__media .styles-row__badge-img { left: auto; right: 40px; }
@media (max-width: 700px) { .styles-row__media .styles-row__badge-img { top: 16px; left: 16px; } .styles-row--media-right .styles-row__media .styles-row__badge-img { left: auto; right: 16px; } }
.styles-row__badge { position: absolute; top: 40px; left: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; backdrop-filter: blur(6px); color: #000; font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; }

.styles-row__badge::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230353B6'%3E%3Cpath d='M12 2c.5 4.7 2.3 6.5 8 8-5.7 1.5-7.5 3.3-8 8-.5-4.7-2.3-6.5-8-8 5.7-1.5 7.5-3.3 8-8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.styles-row__badge--dark { background: rgba(16,16,16,.82); color: #fff; }
.styles-row__badge--dark::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2c.5 4.7 2.3 6.5 8 8-5.7 1.5-7.5 3.3-8 8-.5-4.7-2.3-6.5-8-8 5.7-1.5 7.5-3.3 8-8z'/%3E%3C/svg%3E") center/contain no-repeat; }

@media (max-width: 1024px) {
	.roller-hiw__inner { grid-template-columns: 1fr; gap: 32px; }
	


	.roller-hiw__cards { justify-content: flex-start; justify-self: stretch; width: 100%; }
}
@media (max-width: 560px) {
	
	.roller-hiw__cards { flex-direction: column; align-items: stretch; }
	.rhiw-card { flex: 1 1 auto; width: 100%; }
	.styles-row__badge { top: 16px; left: 16px; }
}


.sfold-env-card__ico img { width: 28px; height: 28px; object-fit: contain; }
/* Full-tile env icon (fixed-guide: complete blue rounded tile PNG, no extra bg) */
.sfold-env-card__ico--tile { background: transparent; border-radius: 0; }
.sfold-env-card__ico--tile img { width: 100%; height: 100%; }

/* Fabric rows - "tall" variant (roller): taller + slightly wider media */
.styles-sec--tall .styles-row { grid-template-columns: 1.85fr 1fr; }
.styles-sec--tall .styles-row--media-right { grid-template-columns: 1fr 1.85fr; }






.styles-sec--tall .styles-row__media { aspect-ratio: 8 / 7; }
@media (min-width: 1025px) {
	.styles-sec--tall .styles-row__media { height: clamp(440px, 48vw, 760px); aspect-ratio: auto; }
}
@media (max-width: 768px) {
	.styles-sec--tall .styles-row,
	.styles-sec--tall .styles-row--media-right { grid-template-columns: 1fr; }
	.styles-sec--tall .styles-row__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Gallery page - filter + category rows + lightbox
   ========================================================================== */
.gal-projects { background: #fff; padding-block: clamp(3rem, 2rem + 3vw, 96px); }
.gal-projects > .container { display: flex; flex-direction: column; gap: clamp(3rem, 2rem + 3vw, 80px); }

/* Filter bar (white panel with a very light border) */
.gal-filter { display: flex; flex-direction: column; gap: 24px; background: none; border: 0; border-bottom: 1px solid #E0E1E1; border-radius: 0; padding: 0 0 clamp(2rem, 1rem + 3vw, 64px); box-shadow: none; }
.gal-filter__label { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #747779; }
.gal-filter__pills { display: flex; flex-wrap: wrap; gap: 16px; }
.gal-pill { display: inline-flex; align-items: center; justify-content: center; padding: 11px 32px; border: 1px solid #E0E1E1; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #62636C; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.gal-pill:hover { border-color: #0353B6; color: #0353B6; }
.gal-pill.is-active { background: #0353B6; border-color: #0353B6; color: #fff; box-shadow: none; }
.gal-filter__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.gal-filter__count { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #62636C; }
.gal-clear { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #000; }
.gal-clear span { font-size: 16px; line-height: 1; }

/* Category rows (flat on the white page) */
.gal-row { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.gal-row[hidden] { display: none; }
.gal-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #C4C7C9; margin-bottom: 38px; }
.gal-row__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1.2rem + 2vw, 48px); line-height: 1.25; letter-spacing: -0.015em; color: #17191A; margin: 0; }
.gal-row__nav { display: flex; gap: 12px; flex: none; }



.gal-row__filter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -16px; margin-bottom: 32px; }
@media (max-width: 768px) { .gal-row__filter { margin-top: -8px; margin-bottom: 24px; } }
.gal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #0353B6; border-radius: 50%; background: #fff; color: #0353B6; cursor: pointer; transition: background .18s, color .18s, opacity .18s; }
.gal-arrow svg { width: 20px; height: 20px; }
.gal-arrow:hover { background: #0353B6; color: #fff; }
.gal-arrow:disabled { opacity: .35; cursor: default; }
.gal-arrow:disabled:hover { background: #fff; color: #0353B6; }
/* Track bleeds to the screen edges (breaks out of the container gutter); inner
   padding + scroll-padding keep the first/last cards aligned under the header. */
.gal-track { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.gal-track::-webkit-scrollbar { display: none; }
/* Peek carousel: 3 full + 1/5 of the 4th at the screen edge. The visible span at
   rest is (track content-box + one gutter), so factor the gutter into the width.
   The max-width caps the card at ~110% of its 1440 size (peek ~390 -> 430) so tiles
   keep scaling up to that point and then stop growing on very wide screens. Below
   ~1440 the flex-basis is smaller than the cap, so nothing changes there. */
.gal-card { flex: 0 0 calc((100% + var(--gutter) - 96px) / 3.2); max-width: 440px; display: flex; flex-direction: column; gap: 24px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; scroll-snap-align: start; }
/* Rows with three cards fill the content width. Sparse rows are centred below. */
.gal-row--fit .gal-card { flex: 1 1 0; max-width: none; }
.gal-row--count-2 .gal-track,
.gal-row--count-1 .gal-track { justify-content: center; margin-inline: 0; padding-inline: 0; }
/* Sparse rows keep the standard tile HEIGHT but widen the cards: count-2 to 150% of
   the standard width, count-1 to 200%. Same height is achieved by widening the media
   aspect ratio (600/533, 800/533) so it resolves to the same height as the 400/533
   standard at any width. Widths track the standard card (x1.5 / x2) and cap at 1.5x /
   2x its 440 cap (660 / 880). */
.gal-row--count-2 .gal-card { flex: 0 1 calc(1.5 * (100% + var(--gutter) - 96px) / 3.2); max-width: 660px; }
.gal-row--count-1 .gal-card { flex: 0 1 calc(2 * (100% + var(--gutter) - 96px) / 3.2); max-width: 880px; }
@media (min-width: 769px) {
	.gal-row--count-2 .gal-card__media { aspect-ratio: 600 / 533; }
	.gal-row--count-1 .gal-card__media { aspect-ratio: 800 / 533; }
}
/* Three-card (fit) row: same 110%-of-1440 cap (~400 -> 440); once capped, centre the
   row so it doesn't leave a gap on one side on wide screens. Desktop-only centring so
   the mobile scroll track (78vw cards) isn't affected. */
.gal-row--count-3 .gal-card { max-width: 440px; }
@media (min-width: 1025px) { .gal-row--count-3 .gal-track { justify-content: center; } }
/* Wide screens: once the three cards hit their 440 cap (~1560px+), distribute the
   leftover width so the margins from the screen edge AND the gaps between images are
   all equal. padding-inline:0 lets the (already full-bleed) track span the whole
   viewport, so space-evenly measures the side margins from the screen, not the gutter.
   Gated at 1560px, where the cards have just capped, so card size doesn't jump. */
@media (min-width: 1560px) {
	.gal-row--count-3 .gal-track { justify-content: space-evenly; gap: 0; padding-inline: 0; }
	/* count-2 gets the same equal-spacing: full-bleed the track (its centred rule zeroed
	   the margins) so space-evenly measures the two side margins from the screen edge and
	   makes them equal to the gap between the pair. */
	.gal-row--count-2 .gal-track { justify-content: space-evenly; gap: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: 0; }
}
.gal-card__media { display: block; width: 100%; aspect-ratio: 400 / 533; background-size: cover; background-position: center; background-color: #EFEEEC; transition: transform .3s ease; }
.gal-card:hover .gal-card__media { transform: scale(1.02); }
.gal-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.4vw, 32px); line-height: 1.25; letter-spacing: 0.25px; color: #000; }
.gal-empty { text-align: center; color: #62636C; font-family: var(--font-body); font-size: 1.0625rem; }
.gal-cta-row { display: flex; justify-content: center; padding-top: 8px; }
.gal-cta-row .btn { min-height: 56px; font-size: 1.125rem; padding: 12px 44px; }
@media (max-width: 768px) { .gal-card, .gal-row--fit .gal-card { flex: 0 0 78vw; max-width: 78vw; } }
@media (max-width: 768px) {
	.gal-row--count-2 .gal-track,
	.gal-row--count-1 .gal-track { justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
	.gal-row--count-2 .gal-card,
	.gal-row--count-1 .gal-card { flex: 0 0 78vw; max-width: 78vw; }
}

/* Lightbox */
.gal-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gal-lightbox[hidden] { display: none; }
.gal-lightbox__overlay { position: absolute; inset: 0; background: rgba(16,16,16,.72); backdrop-filter: blur(2px); }
.gal-lightbox__dialog { position: relative; z-index: 1; width: min(1320px, 96vw); max-height: 94vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: clamp(1.25rem, 1rem + 1.5vw, 40px); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.gal-lightbox__close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 0; background: none; font-size: 30px; line-height: 1; color: #62636C; cursor: pointer; }
.gal-lightbox__grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 48px; align-items: start; }
.gal-lightbox__stage { display: block; width: 100%; height: clamp(300px, 70vh, 860px); background-size: cover; background-position: center; background-color: #EFEEEC; border-radius: 8px; }
.gal-lightbox__thumbs { display: flex; gap: 16px; margin-top: 16px; overflow-x: auto; padding-bottom: 8px; }
.gal-lightbox__thumbs[hidden] { display: none; }
.gal-lightbox__thumb { flex: 0 0 128px; width: 128px; height: 128px; border: 1px solid #E0E1E1; background-size: cover; background-position: center; opacity: .6; cursor: pointer; transition: opacity .18s, border-color .18s; }
.gal-lightbox__thumb.is-active { opacity: 1; border-color: #0353B6; }
.gal-lightbox__info { display: flex; flex-direction: column; gap: 24px; }
.gal-lightbox__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 1.8vw, 42px); line-height: 1.26; letter-spacing: -0.01em; color: #000; margin: 0; }
.gal-lightbox__desc { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.gal-lightbox__desc[hidden] { display: none; }
.gal-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.gal-lightbox__title { margin: 0; }
.gal-lightbox__btn { flex: none; }
.gal-lightbox__specs { display: grid; grid-template-columns: 1fr 1fr; }
.gal-lightbox__specs[hidden] { display: none; }
.gal-spec { display: flex; flex-direction: column; gap: 7.5px; padding: 24px; border: 1px solid #C4C7C9; }
.gal-lightbox__specs .gal-spec:nth-child(even), .gal-featured__specs .gal-spec:nth-child(even) { border-left: 0; }
.gal-spec small { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #2C2D33; }
.gal-spec strong { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #000; }
.gal-lightbox__specs .gal-spec:nth-child(n+3), .gal-featured__specs .gal-spec:nth-child(n+3) { border-top: 0; }

@media (max-width: 900px) {
	.gal-lightbox__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
	.gal-card { flex-basis: 78vw; max-width: 78vw; }
	.gal-lightbox__specs, .gal-featured__specs { grid-template-columns: 1fr; }
	.gal-lightbox__specs .gal-spec:nth-child(even), .gal-featured__specs .gal-spec:nth-child(even) { border-left: 1px solid #C4C7C9; }
	.gal-lightbox__specs .gal-spec:nth-child(n+2), .gal-featured__specs .gal-spec:nth-child(n+2) { border-top: 0; }
}

/* Hero: show more of the image top + 16px/2-line body (gallery only) */
.page-template-page-gallery .page-hero { background-position: center top; }
.page-template-page-gallery .page-hero--product .page-hero__sub { max-width: 700px; font-size: 1rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.15px; }

/* Featured product - always-visible detail block */
.gal-featured { background: #fff; border-top: 1px solid #E0E1E1; padding-block: clamp(3rem, 2rem + 3vw, 96px); }
.gal-featured__head { padding-bottom: 24px; border-bottom: 1px solid #C4C7C9; margin-bottom: 48px; }
.gal-featured__eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1.2rem + 2vw, 48px); line-height: 1.25; letter-spacing: -0.015em; color: #17191A; margin: 0; }
.gal-featured__grid { display: grid; grid-template-columns: 868fr 364fr; gap: 48px; align-items: start; }
.gal-featured__media { min-width: 0; }
.gal-featured__stage { position: relative; display: block; width: 100%; aspect-ratio: 868 / 649; background-size: cover; background-position: center; background-color: #EFEEEC; cursor: zoom-in; }



@media (min-width: 1025px) {
	.gal-featured__stage { max-height: 700px; }
}
.gal-featured__zoom { position: absolute; right: 24px; bottom: 24px; width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border: 1px solid #E0E1E1; border-radius: 16px; backdrop-filter: blur(6px); cursor: pointer; }
.gal-featured__zoom svg { width: 18px; height: 18px; }
.gal-featured__thumbs { display: flex; gap: 16px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.gal-featured__thumbs::-webkit-scrollbar { display: none; }
.gal-featured__thumb { flex: 0 0 128px; width: 128px; height: 128px; border: 1px solid #E0E1E1; background-size: cover; background-position: center; opacity: .6; cursor: pointer; transition: opacity .18s, border-color .18s; }
.gal-featured__thumb.is-active { opacity: 1; border-color: #0353B6; }
.gal-featured__info { display: flex; flex-direction: column; gap: 24px; }
.gal-featured__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 1.8vw, 42px); line-height: 1.26; letter-spacing: -0.01em; color: #000; margin: 0; }
.gal-featured__desc { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.gal-featured__btn { align-self: stretch; min-height: 64px; font-size: 1.0625rem; }
.gal-featured__specs { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
	.gal-featured__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
	.gal-featured__specs { grid-template-columns: 1fr; }
	.gal-featured__specs .gal-spec:nth-child(even) { border-left: 1px solid #C4C7C9; }
	.gal-featured__specs .gal-spec:nth-child(n+2) { border-top: 0; }
}





/* How they work: copy column + blue "Arm positions" panel */
.aw-arm { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.aw-arm--tint { background: #EEF3FB; border-bottom-color: #DCE6F5; }
/* faint line-art background illustration (folding arm) */
.aw-arm--illus { background-color: #EEF3FB; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom-color: #DCE6F5; }
.aw-arm-card__viz img { display: block; width: auto; max-width: 100%; max-height: 132px; object-fit: contain; }
.aw-arm--drop .aw-arm-card__viz img { max-height: 168px; }
.aw-arm__inner { display: grid; grid-template-columns: 557fr 659fr; gap: 64px; align-items: center; }
.aw-arm__text { display: flex; flex-direction: column; gap: 23px; min-width: 0; }
.aw-arm__text .eyebrow--muted { color: #63686D; }
.aw-arm__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.aw-arm__detail { font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #2C2D33; margin: 0; }
.aw-arm__panel { min-width: 0; display: flex; flex-direction: column; gap: 48px; padding: 48px; background: #0353B6; border-radius: 8px; }
.aw-arm__panel-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.aw-arm__panel-title { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: #fff; margin: 0; }
.aw-arm__badge { flex: none; padding: 4px 12px; border: 1px solid #F8F9F9; border-radius: 9999px; font-family: var(--font-body); font-size: 10px; line-height: 15px; letter-spacing: 0.15px; color: #fff; }
.aw-arm__cards { display: flex; gap: 32px; }
.aw-arm-card { flex: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 16px; min-height: 208px; background: #fff; border: 1px solid rgba(196,199,201,0.2); border-radius: 8px; }
.aw-arm-card__viz { flex: 1; width: 100%; display: grid; place-items: center; }
.aw-arm-card__viz svg { width: auto; height: 108px; max-width: 100%; }
.aw-arm-card__title { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #000; text-align: center; }
.aw-arm-card__sub { font-family: var(--font-body); font-size: 10px; line-height: 15px; letter-spacing: 0.15px; color: #62636C; text-align: center; }
.aw-arm__foot { padding-top: 24px; border-top: 1px solid #F8F9F9; text-align: center; }
.aw-arm__foot span { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #fff; }
/* drop variant (crank): panel stretches to the copy column, taller diagram cards */
.aw-arm--drop .aw-arm__inner { align-items: stretch; }
.aw-arm--drop .aw-arm__panel { justify-content: space-between; gap: 40px; }
.aw-arm--drop .aw-arm-card { min-height: 260px; }
.aw-arm-card__viz svg { width: auto; height: 108px; max-width: 100%; }
.aw-arm--drop .aw-arm-card__viz svg { height: 168px; }
/* optional feature cards under the copy */
.aw-arm__features { display: flex; flex-direction: column; gap: 16px; }
.aw-arm-feat { display: flex; align-items: flex-start; gap: 24px; padding: 24px; background: #EBF3FE; border-radius: 24px; }
.aw-arm-feat__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; background: #0353B6; color: #fff; display: grid; place-items: center; }
.aw-arm-feat__ico svg { width: 32px; height: 32px; }
.aw-arm-feat__body { display: flex; flex-direction: column; gap: 8px; }
.aw-arm-feat__title { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 30px; color: #000; margin: 0; }
.aw-arm-feat__text { font-family: var(--font-body); font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #2C2D33; margin: 0; }
/* optional numbered step list in the panel footer */
.aw-arm__steps { margin-top: auto; padding-top: 24px; border-top: 1px solid #F8F9F9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aw-arm-step { display: flex; flex-direction: column; gap: 16px; }
.aw-arm-step__num { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 36px; letter-spacing: 0.15px; color: #fff; }
.aw-arm-step__text { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #fff; margin: 0; }

/* Key features: centered header + 2x2 tinted cards */
.aw-features { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.aw-features__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; margin-bottom: 48px; }
.aw-features__head .eyebrow--muted { color: #63686D; }
.aw-features__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; max-width: 700px; }
.aw-features__intro { max-width: 620px; font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.aw-features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-inline: 40px; }
.aw-feature { display: flex; flex-direction: column; gap: 23px; padding: 48px; background: #EBF3FE; border-radius: 24px; }
.aw-feature__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: #0353B6; color: #fff; display: grid; place-items: center; }
.aw-feature__ico svg { width: 28px; height: 28px; }
.aw-feature__body { display: flex; flex-direction: column; gap: 8px; }
.aw-feature__title { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 30px; color: #000; margin: 0; }
.aw-feature__text { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: #444749; margin: 0; }

/* Protection and performance: bordered 4-cell benefit grid */
.aw-protect { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.aw-protect__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 48px; }
.aw-protect__head .eyebrow--muted { color: #63686D; }
.aw-protect__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; max-width: 640px; }
.aw-protect__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #0353B6; }
.aw-benefit { display: flex; flex-direction: column; gap: 24px; padding: 48px; border-right: 1px solid #0353B6; border-bottom: 1px solid #0353B6; }
.aw-benefit:nth-child(4n) { border-right: 0; }
.aw-benefit__ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; background: #0353B6; display: grid; place-items: center; }
.aw-benefit__ico svg { width: 24px; height: 24px; }
.aw-benefit__body { display: flex; flex-direction: column; gap: 12px; }
.aw-benefit__title { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 30px; letter-spacing: 0.15px; color: #000; margin: 0; }
.aw-benefit__text { font-family: var(--font-body); font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #62636C; margin: 0; }

/* Tailored to your space: tinted panel with cassette cards + colours/materials */
.aw-mat { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
/* Fixed-guide: the Colours / Fabric-textures panel belongs to the customisation
   section above it, so remove the divider line + collapse the gap (no splitter). */
.styles-sec--texture { border-bottom: 0; padding-bottom: clamp(2rem, 1rem + 2vw, 48px); }
.styles-sec--texture + .aw-mat { padding-top: 0; }
.aw-mat__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 48px; }
.aw-mat__head .eyebrow--muted { color: #63686D; }
.aw-mat__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.aw-mat__intro { max-width: 620px; font-family: var(--font-body); font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636C; margin: 0; }
.aw-mat__panel { display: flex; flex-direction: column; gap: 48px; padding: clamp(1.75rem, 1rem + 3vw, 64px); background: #EBF3FE; }
.aw-mat__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.aw-mat-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.aw-mat-card__media { display: block; aspect-ratio: 360 / 370; overflow: hidden; background: #EFEEEC; border: 1px solid rgba(196,199,201,0.3); }
.aw-mat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-mat-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 30px; color: #000; }
.aw-mat__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.aw-mat-block { display: flex; flex-direction: column; gap: 24px; }
.aw-mat-block__head { display: flex; align-items: center; gap: 12px; }
.aw-mat-block__ico { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #0353B6; color: #fff; display: grid; place-items: center; }
.aw-mat-block__ico svg { width: 24px; height: 24px; }
.aw-mat-block__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 1rem + 2vw, 34px); line-height: 1.26; letter-spacing: 0.25px; color: #000; margin: 0; }
.aw-mat-block__desc { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #2C2D33; margin: 0; }
.aw-mat__swatches { display: flex; flex-wrap: wrap; gap: 24px; }
.aw-swatch { display: flex; flex-direction: column; align-items: center; gap: 16px; }



.page-slug-fixed-guide-awnings .aw-mat__swatches,
.page-slug-crank-awnings .aw-mat__swatches { justify-content: center; gap: 14px; }
.page-slug-fixed-guide-awnings .aw-swatch,
.page-slug-crank-awnings .aw-swatch { width: 54px; gap: 12px; text-align: center; }
.aw-swatch__chip { width: 48px; height: 48px; border-radius: 0; border: 1px solid #C4C7C9; } 
.aw-swatch--sel .aw-swatch__chip { outline: 1px solid #17191A; outline-offset: 4px; }
.aw-swatch__name { font-family: var(--font-body); font-size: 10px; line-height: 15px; letter-spacing: 0.15px; color: #000; opacity: .6; }
.aw-mat__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.aw-pill { box-sizing: border-box; padding: 11px 32px; border: 1px solid #7BA9EE; border-radius: 20px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #000; }
.aw-pill--active { background: #0353B6; border-color: #0353B6; color: #fff; }
.aw-mat-block__note { margin: 0; padding-top: 32px; border-top: 1px solid rgba(217,217,217,.6); font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #2C2D33; }

@media (max-width: 1024px) {
	.aw-arm__inner { grid-template-columns: 1fr; gap: 40px; }
	.aw-features__grid { padding-inline: 0; }
	.aw-protect__grid { grid-template-columns: repeat(2, 1fr); }
	.aw-benefit:nth-child(4n) { border-right: 1px solid #0353B6; }
	.aw-benefit:nth-child(2n) { border-right: 0; }
	.aw-mat__cards { grid-template-columns: 1fr; }
	.aw-mat__cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
	.aw-arm__cards { flex-wrap: wrap; }
	.aw-arm-card { flex: 1 1 40%; }
	.aw-arm__steps { grid-template-columns: 1fr; }
	.aw-features__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.aw-protect__grid { grid-template-columns: 1fr; }
	.aw-benefit { border-right: 0 !important; }
	.aw-mat__swatches { gap: 16px; }
}

/* Fixed-guide "How it works" - showcase panel (reuses .aw-arm__text left column) */
.aw-guide { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.aw-guide .aw-arm__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
.aw-guide__panel { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 33px; background: #0353B6; border: 1px solid rgba(255,255,255,0.05); border-radius: 24px; }
.aw-guide__title { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: #fff; text-align: center; opacity: .9; margin: 0; }
.aw-guide__diagram { width: 100%; max-width: 398px; padding: 45px 24px; background: #fff; border-radius: 16px; display: grid; place-items: center; }
.aw-guide__diagram svg, .aw-guide__diagram img { width: 100%; height: auto; display: block; }
.aw-guide__callout img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.aw-guide__callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.aw-guide__callout { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: #fff; border-radius: 12px; text-align: center; }
.aw-guide__callout svg { width: 20px; height: 20px; color: #0353B6; flex: none; }
.aw-guide__callout .txt { font-family: var(--font-body); font-weight: 500; font-size: 10px; line-height: 15px; letter-spacing: 0.15px; color: #000; opacity: .7; }

/* Fixed-guide comparison - two columns of yes/no/muted list items */
.aw-compare { background: #fff; border-bottom: 1px solid #E0E1E1; padding-block: clamp(3.5rem, 2rem + 4.5vw, 96px); }
.aw-compare__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; margin-bottom: 48px; }
.aw-compare__head .eyebrow--muted { color: #63686D; }
.aw-compare__heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 1rem + 3vw, 56px); line-height: 1.27; letter-spacing: -0.02em; color: #000; margin: 0; }
.aw-compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-inline: 40px; }
.aw-compare-col { display: flex; flex-direction: column; gap: 32px; padding: 40px; background: #fff; border: 1px solid #0353B6; border-radius: 26px; }
.aw-compare-col--accent { background: #EBF3FE; border-color: transparent; }
.aw-compare-col__head { display: flex; flex-direction: column; gap: 24px; }
.aw-compare-col__ico { width: 56px; height: 56px; display: grid; place-items: center; color: #0353B6; }
.aw-compare-col__ico svg { width: 32px; height: 32px; }
.aw-compare-col__ico img { width: 56px; height: 56px; object-fit: contain; }
.aw-compare-col__title { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: 0.25px; color: #1A1C1B; margin: 0; }
.aw-compare-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.aw-compare-item { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid #EFEEEC; }
.aw-compare-col--accent .aw-compare-item { border-bottom-color: #C4C7C9; }
.aw-compare-item:last-child { border-bottom: 0; padding-bottom: 0; }
.aw-compare-item__mark { flex: 0 0 auto; margin-top: 2px; display: inline-flex; }
.aw-compare-item__mark svg { width: 20px; height: 20px; }
.aw-compare-item--yes .aw-compare-item__mark { color: #0353B6; }
.aw-compare-item--no .aw-compare-item__mark,
.aw-compare-item--muted .aw-compare-item__mark { color: #ACB2B8; }
.aw-compare-item__body { display: flex; flex-direction: column; }
.aw-compare-item__txt { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #000; }
.aw-compare-item--muted .aw-compare-item__txt { color: #62636C; }
.aw-compare-item__sub { font-family: var(--font-body); font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #62636C; }

/* Texture-choice rows (fixed guide) - bump styles-selection title to 56px */
.styles-sec--texture .styles-row__title { font-size: clamp(2rem, 1rem + 3vw, 56px); letter-spacing: -0.02em; }

@media (max-width: 900px) {
	.aw-compare__grid { grid-template-columns: 1fr; padding-inline: 0; }
}
@media (max-width: 768px) {
	.aw-guide .aw-arm__inner { grid-template-columns: 1fr; gap: 40px; }
	.aw-guide__callouts { grid-template-columns: 1fr; }
}












.cta .btn.btn--underline {
	box-sizing: border-box;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 24px;
	color: #fff;
	text-transform: none;
	letter-spacing: normal;
	height: 38px;
	min-height: 0;
	padding: 0 1.75rem;
	gap: 8px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cta .btn--underline:hover { background: #fff; color: var(--c-primary); border-bottom-color: #fff; transform: none; }





/* ==========================================================================
   Legal pages (Privacy Policy / Terms) - sticky TOC + numbered prose.
   Uses the shared page-hero for the header; this styles the body only.
   ========================================================================== */
.legal { background: #fff; }
/* Legal pages get a compact hero (just the title) so the body starts near the
   top of the screen - the base 60vh product hero was too tall here. */
.page-template-page-legal .page-hero { min-height: 0; padding-block: calc(var(--nav-h) + 7.5rem) 8.75rem; }
/* The overlay is lighter here (less blue), so protect the white text against the
   bright sky area of the photo with a soft shadow. */
.page-template-page-legal .page-hero__inner h1,
.page-template-page-legal .page-hero__eyebrow { text-shadow: 0 1px 14px rgba(3, 53, 120, 0.55); }
.legal__wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }

/* Sticky table of contents */
.legal__aside { min-width: 0; }
.legal__toc { position: sticky; top: calc(var(--nav-h) + 24px); background: #ebf3fe; border: 1px solid #d5e6fb; border-radius: 20px; padding: 24px; }
.legal__toc-title { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-primary); margin-bottom: 14px; }
.legal__toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: flex; gap: 8px; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.4; color: var(--c-body); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.legal__toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-weight: 700; color: var(--c-primary); opacity: 0.6; }
.legal__toc a:hover { color: var(--c-primary); }

/* Prose column */
.legal__prose { max-width: 760px; counter-reset: legal; }
.legal__block { margin-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.legal__block:last-child { margin-bottom: 0; }
/* Headings - numbered. Covers hand-authored .legal__block and raw editor H2s. */
.legal__block > h2,
.legal__prose > h2 { counter-increment: legal; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); margin: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) 0 1rem; scroll-margin-top: calc(var(--nav-h) + 20px); }
.legal__prose > h2:first-child { margin-top: 0; }
.legal__block > h2::before,
.legal__prose > h2::before { content: counter(legal, decimal-leading-zero); display: inline-block; margin-right: 0.6rem; color: var(--c-primary); font-size: 0.72em; font-weight: 700; vertical-align: 0.12em; }
.legal__prose > h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--c-ink); margin: 1.75rem 0 0.6rem; }
.legal__prose p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--c-body); margin: 0 0 1rem; }
.legal__prose p:last-child { margin-bottom: 0; }
.legal__prose strong { color: var(--c-ink); font-weight: 600; }
.legal__prose a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.legal__prose a:hover { color: var(--c-accent); }

/* Lists - brand markers. Covers .legal__list and raw editor <ul>/<ol>. */
.legal__list,
.legal__prose ul,
.legal__prose ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.legal__list li,
.legal__prose ul li,
.legal__prose ol li { position: relative; padding-left: 1.75rem; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--c-body); }
.legal__list li::before,
.legal__prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }





.legal__prose ol { counter-reset: legalli; }
.legal__prose ol > li { counter-increment: legalli; }
.legal__prose ol > li::before { position: absolute; left: 0; top: 0; color: var(--c-primary); font-weight: 700; content: counter(legalli) "."; }
/* Sub-points: roman in every case (more specific than the alpha top-level rule below, so it wins). */
.legal__prose ol ol > li::before { content: "(" counter(legalli, lower-roman) ")"; }
/* Alpha mode swaps only the top level to (a), (b), (c). */
.legal__prose--alpha ol > li::before { content: "(" counter(legalli, lower-alpha) ")"; }
/* Nested lists inherit the base ol's bottom margin, which adds an extra gap after
   the sub-points; drop it and use a small top gap instead. */
.legal__prose ol ol { margin: 0.7rem 0 0; }

/* Contact callout */
.legal__block--contact { background: #ebf3fe; border: 1px solid #d5e6fb; border-radius: 20px; padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
.legal__block--contact > h2 { margin-top: 0; }
.legal__contact-btn { margin-top: 0.5rem; }
/* Single-column variant (Terms placeholder - no TOC) + un-numbered heading. */
.legal__wrap--single { grid-template-columns: minmax(0, 720px); justify-content: center; }
.legal__block > h2.legal__soon-title::before { content: none; }

@media (max-width: 900px) {
	/* TOC moves above the prose and stops sticking */
	.legal__wrap { grid-template-columns: 1fr; gap: 2rem; }
	.legal__toc { position: static; }
	.legal__toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
}
@media (max-width: 560px) {
	.legal__toc ol { grid-template-columns: 1fr; }
	.legal__list li, .legal__prose li, .legal__prose p { font-size: 14px; line-height: 1.6; }
}





.page-slug-terms-of-service .legal__prose > h2:first-of-type { counter-increment: none; }
.page-slug-terms-of-service .legal__prose > h2:first-of-type::before { content: none; }
.page-slug-terms-of-service .legal__prose > h2::before { content: counter(legal) "."; font-size: 1em; vertical-align: baseline; margin-right: 0.5rem; }
.page-slug-terms-of-service .legal__prose > ol { margin-left: 1.75rem; }              /* level 2 (1.1) indented from level 1 (1.) */
.page-slug-terms-of-service .legal__prose ol > li { padding-left: 2.6rem; }
.page-slug-terms-of-service .legal__prose ol > li::before { content: counter(legal) "." counter(legalli); }
.page-slug-terms-of-service .legal__prose ol ol { margin-left: 1.75rem; margin-top: 0.6rem; } /* level 3 ((a)) indented from level 2 */
.page-slug-terms-of-service .legal__prose ol ol > li { padding-left: 2rem; }
.page-slug-terms-of-service .legal__prose ol ol > li::before { content: "(" counter(legalli, lower-alpha) ")"; }

/* ==========================================================================
   Fixed Guide - "Tailored to your space" interim 2-card customisation section
   (template-parts/sections/awnings-tailored.php). Simple centered header +
   two icon cards; the icon tiles carry their own #0353B6 box + white glyph.
   ========================================================================== */



.awn-tailored { background: #fff; border-top: 1px solid #E0E1E1; border-bottom: 1px solid #E0E1E1; }
.awn-tailored__head {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 1.5rem + 1.5vw, 3rem);
	text-align: center;
}
.awn-tailored__heading {
	font-size: var(--fs-h2);
	line-height: 1.268;
	letter-spacing: -0.02em;
	margin-top: 0.5rem;
}
.awn-tailored__intro {
	margin-top: 1rem;
	color: var(--c-body);
	line-height: 1.5;
	letter-spacing: 0.15px;
}
.awn-tailored__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	

	max-width: 1152px;
	margin-inline: auto;
}
.awn-tailored-card {
	position: relative;
	isolation: isolate; /* contains the negative-z watermark to this card */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 24px; /* icon → details */
	min-height: 253px;
	background: #EBF3FE;
	border-radius: 24px;
	padding: 32px;
}


.awn-tailored-card__wm {
	position: absolute;
	top: 33px;
	right: 49px;
	z-index: -1;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 96px;
	line-height: 144px;
	color: #101010;
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
}
.awn-tailored-card__ico { display: inline-flex; }
.awn-tailored-card__ico img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.awn-tailored-card__details {
	display: flex;
	flex-direction: column;
	gap: 12px; /* title → text */
}
.awn-tailored-card__title {
	font-size: var(--fs-h5); /* Sora 700 34/43 */
	line-height: 1.265;
	letter-spacing: 0.25px;
}
.awn-tailored-card__text {
	color: #62636C;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0.15px;
}
@media (max-width: 768px) {
	.awn-tailored__grid { grid-template-columns: 1fr; }
	.awn-tailored-card { padding: 24px; min-height: 0; }
	.awn-tailored-card__wm { font-size: 7rem; line-height: 1; top: 24px; right: 28px; }
}