/*
 * Building blocks for inner pages (page template "Sections (full width)").
 * Page content is plain HTML using these classes plus the design's own: .sec .tint .wrap .sec-head .kicker .lead .intro .btn.
 *
 *   <section class="pg-hero">            page header: .pg-hero-copy (+ optional .pg-hero-media)
 *   <div class="split [rev]">            image + text side by side: .split-media + .split-copy
 *   <ul class="ticks [cols-2]">          checklist
 *   <div class="cards">                  card grid; .card-ic for an icon/number badge
 *   <div class="stats">                  key figures: <div><b>value</b><span>label</span></div>
 *   <article class="product">            product: .product-media + .product-copy (.tag, .stats, .ticks)
 *   <nav class="pills">                  jump links
 *   <div class="cta-band">               dark call-to-action band
 *   <div class="info-list">              contact details
 *   [dexter_form]                        lead form (Dexter Manager plugin)
 */

.dx-page { background: #fff; }
.dx-page p { max-width: 70ch; }
.dx-page .muted { color: var(--muted); }

/* Page header */
.pg-hero {
	padding: 72px 0 64px;
	background:
		radial-gradient(900px 420px at 92% -20%, #dff2e6 0, #dff2e600 65%),
		radial-gradient(700px 360px at -10% 120%, #e2f0f5 0, #e2f0f500 60%),
		var(--tint);
}
.pg-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.pg-hero .wrap:not(:has(.pg-hero-media)) { grid-template-columns: minmax(0, 860px); }
.pg-hero-copy { display: grid; gap: 18px; justify-items: start; }
.pg-hero-copy h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; }
.pg-hero-copy .lead { font-weight: 400; color: var(--text); }
.pg-hero-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: var(--shadow-lg);
	background: #fff;
}
.pg-hero-media.contain img { object-fit: contain; padding: 28px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pg-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--muted); }
.pg-facts li { display: flex; align-items: center; gap: 8px; }
.pg-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }

/* Image + text */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.split + .split { margin-top: 80px; }
.split.rev > .split-media { order: 2; }
.split-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	background: var(--tint);
}
.split-media.contain img { object-fit: contain; padding: 24px; background: radial-gradient(circle at 50% 55%, #eef3ec, #f7f9f6 70%); }
.split-copy { display: grid; gap: 16px; justify-items: start; }
.split-copy h2 { font-size: clamp(26px, 2.6vw, 36px); }

/* Checklist */
.ticks { display: grid; gap: 10px; }
.ticks.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.55; }
.ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e2f1e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231e7a34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cards > * {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	transition: box-shadow .2s, transform .2s;
}
.cards:has(> :nth-child(6):last-child),
.cards:has(> :nth-child(5):last-child),
.cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards > *:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tint .cards > * { border-color: #fff; }
.card-ic {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #e8f6ec;
	color: var(--green-dark);
	font-size: 16px;
	font-weight: 800;
}
.card-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cards h3 { font-size: 18px; }
.cards p { font-size: 15px; color: var(--muted); }

/* Key figures */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; }
.stats > div { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; background: var(--tint); }
.tint .stats > div { background: #fff; }
.stats b { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.stats span { font-size: 13px; color: var(--muted); }

/* Products */
.products { display: grid; gap: 24px; }
.product {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 44px;
	align-items: center;
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: #fff;
	scroll-margin-top: calc(var(--hdr) + 24px);
}
.product-media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 24px;
	border-radius: 20px;
	background: radial-gradient(circle at 50% 55%, #eef3ec, #f7f9f6 70%);
}
.product-copy { display: grid; gap: 14px; justify-items: start; }
.product-copy h2,
.product-copy h3 { font-size: clamp(24px, 2.4vw, 32px); }
.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #e9f3f6; color: var(--deep); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.fine { font-size: 13px; color: var(--muted); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a {
	padding: 8px 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.pills a:hover { border-color: var(--deep); color: var(--deep); }

/* Call to action */
.cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	gap: 32px;
	align-items: center;
	padding: 48px 56px;
	border-radius: 28px;
	background: radial-gradient(600px 300px at 100% 0, #26bca355, #26bca300 70%), linear-gradient(120deg, #0d4e69, #126587);
	color: #d7e9f0;
}
.cta-band h2 { color: #fff; font-size: clamp(26px, 2.8vw, 38px); }
.cta-band p { margin-top: 10px; }
.dx-page .cta-band .btn-row a.btn-primary { background: #fff; color: var(--deep); box-shadow: none; }
.dx-page .cta-band .btn-row a.btn-secondary { background: transparent; color: #fff; border-color: #ffffff80; }

/* Contact */
.contact-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.info-list { display: grid; gap: 12px; }
.info-list > div { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--tint); }
.info-list h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); }
.info-list p,
.info-list a { font-size: 16px; color: var(--ink); }
.map-embed iframe { width: 100%; height: 360px; border: 0; border-radius: 20px; }

/* Lead form ([dexter_form]) */
.dx-form { display: grid; gap: 16px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-lg); }
.dx-form h2,
.dx-form h3 { font-size: 22px; }
.dx-form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dx-form .hp { position: absolute; left: -9999px; }
.dx-form .btn { justify-self: start; }
.dx-form .form-done { display: grid; gap: 8px; padding: 8px 0; }
.dx-form .form-done b { font-size: 20px; color: var(--ink); }

/* Enquiry popup (Dexter Manager): a centred card; on phones a bottom sheet that stays above the keyboard. */
.dx-enquire[open] { display: flex; flex-direction: column; }
.dx-enquire { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: hidden; }
html:has(.dx-enquire[open]) { overflow: hidden; }
.dx-enquire .sheet-in { gap: 8px; min-height: 0; padding: 32px; overflow-y: auto; overscroll-behavior: contain; }
.dx-enquire .sheet-x { z-index: 1; }
.dx-enquire :is(h2, label, button, select) { font-family: inherit; text-transform: none; font-style: normal; letter-spacing: normal; }
.dx-enquire h2 { padding-right: 44px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.dx-enquire .sheet-in > p { font-size: 15px; color: var(--muted); }
.dx-enquire .dx-form { gap: 14px; margin-top: 10px; padding: 0; border-radius: 0; box-shadow: none; }
.dx-enquire .field > label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.dx-enquire .field small { font-weight: 400; color: var(--muted); }
.dx-enquire .dx-form .row2 { align-items: end; }
.dx-enquire input[type="file"] { padding: 9px 12px; font-size: 14px; }
.dx-enquire input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	border: 1.5px solid var(--deep);
	border-radius: 999px;
	background: #fff;
	color: var(--deep);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.dx-enquire .hint { margin-top: 0; }
.dx-enquire .form-done:focus { outline: none; }
.dx-enquire .dx-form .btn { justify-self: stretch; padding: 0 22px; border-radius: 999px; font-size: 15px; }
.dx-enquire .dx-enquire-alt { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.dx-enquire-alt a { margin-left: 4px; font-weight: 600; color: var(--deep); }
@media (max-width: 760px) {
	.dx-enquire {
		width: 100%;
		max-width: none;
		margin: auto 0 var(--kb, 0px);
		max-height: calc(100dvh - var(--kb, 0px) - max(16px, env(safe-area-inset-top)));
		border-radius: 22px 22px 0 0;
	}
	.dx-enquire .sheet-in { padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); }
	.dx-enquire .dx-form .row2 { gap: 14px; }
}

/* Gallery */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

/* Elementor's global "kit" styles reach these pages too; restate the design's type. */
.dx-page :is(h1, h2, h3, h4, h5, h6, label, button) { font-family: inherit; text-transform: none; font-style: normal; }
.dx-page h1 { font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.dx-page h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.dx-page h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.dx-page .cta-band h2 { color: #fff; }
.dx-page .split-copy h2 { font-size: clamp(26px, 2.6vw, 36px); }
.dx-page .product-copy :is(h2, h3) { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 800; }
.dx-page .cards h3 { font-size: 18px; }
.dx-page .dx-form :is(h2, h3) { font-size: 22px; }
.dx-page .info-list h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--green-dark); }
.dx-page a:not(.btn) { color: var(--deep); }
.dx-page .pills a { color: var(--ink); }
.dx-page label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.dx-page button.btn { padding: 0 22px; border-radius: 999px; font-size: 15px; line-height: 1.2; }
.dx-page :is(input, textarea, select) { font-family: inherit; }
.dx-page textarea { padding: 10px 14px; border: 1.5px solid #7c8983; border-radius: 12px; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.5; }
.dx-page textarea:focus { border-color: var(--deep); }

@media (max-width: 960px) {
	.pg-hero .wrap,
	.split,
	.product,
	.contact-split,
	.cta-band { grid-template-columns: minmax(0, 1fr); }
	.split.rev > .split-media { order: 0; }
	.product { gap: 24px; }
	.pg-hero .wrap { gap: 32px; }
}
@media (max-width: 760px) {
	.pg-hero { padding: 40px 0 44px; }
	.split { gap: 24px; }
	.split + .split { margin-top: 56px; }
	.ticks.cols-2,
	.dx-form .row2 { grid-template-columns: minmax(0, 1fr); }
	.product { padding: 20px; border-radius: 20px; }
	.cta-band { padding: 32px 24px; border-radius: 22px; }
	.dx-form { padding: 20px; border-radius: 18px; }
}