/*
Theme Name: Dexter Energy
Theme URI: https://dexterenergy.in/
Author: Prism Infoways
Author URI: https://prisminfoways.com/
Description: Theme for Dexter Energy (rooftop solar, Gurugram): the savings-calculator landing page as the front page, with a dynamic header, footer and menus. Header, footer, contact details and leads are managed with the companion "Dexter Manager" plugin. Pages built with Elementor keep working inside the theme's header and footer.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dexter-energy
Tags: custom-menu, one-column, featured-images, threaded-comments, translation-ready
*/

/* The design itself is assets/css/dexter.css. This file adds what WordPress needs on top of it. */

/* ---------- Header: menus from Appearance → Menus ---------- */
.brand-logo { height: 58px; width: auto; }
@media (max-width: 760px) { .brand-logo { height: 50px; } }

/* "Other" site type: its text box shows only while Other is picked. */
.seg-other,
.site-other { display: none; margin-top: 10px; }
.chips:has([data-seg="other"][aria-pressed="true"]) + .seg-other,
#f-site:has(input[value="Other"]:checked) + .site-other { display: block; }
.brand-name { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.nav { align-items: center; }
.nav a[aria-current="page"] { color: var(--deep); background: #e9f3f6; }

/* One dropdown level. Opens on hover and keyboard focus. */
.nav-dd { position: relative; display: flex; }
.nav > .nav-dd > a,
.nav > .nav-dd > button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 11px;
	border: 0;
	border-radius: 999px;
	background: none;
	font-size: 14.5px;
	font-weight: 600;
	line-height: inherit;
	color: var(--muted);
	white-space: nowrap;
	text-decoration: none;
}
.nav > .nav-dd > :first-child::after {
	content: "";
	width: 6px;
	height: 6px;
	margin: -3px 0 0 2px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.nav > .nav-dd:hover > :first-child,
.nav > .nav-dd:focus-within > :first-child { color: var(--ink); background: var(--tint); }
.nav .nav-sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	display: none;
	min-width: 220px;
	margin-top: 6px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--shadow-lg);
}
.nav .nav-sub::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; } /* keeps hover across the gap */
.nav-dd:hover > .nav-sub,
.nav-dd:focus-within > .nav-sub { display: grid; }
.nav-dd.closed > .nav-sub { display: none; } /* Escape (assets/js/site.js) */
.nav > .nav-dd:has(> .nav-sub [aria-current="page"]) > :first-child { color: var(--deep); }
.nav .nav-sub a { border-radius: 10px; white-space: normal; }

@media (max-width: 1180px) {
	.nav > .nav-dd > a,
	.nav > .nav-dd > button { padding: 8px; font-size: 14px; }
}

/* Above page-builder sections, which often set their own z-index (not on the landing page: its overlays sit above the header). */
body:not(.dx-landing) .hdr { z-index: 1001; }
body:not(.dx-landing) .menu { z-index: 1000; }
body:not(.dx-landing) .skip { z-index: 1002; }

/* Mobile menu: children listed under their parent. */
.menu .nav-dd { display: grid; }
.menu .nav-dd > button {
	padding: 16px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	font-size: 19px;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
}
.menu .nav-sub { display: grid; padding-left: 16px; }
.menu .nav-sub a { padding: 12px 0; font-size: 17px; font-weight: 400; }
.menu nav a[aria-current="page"] { color: var(--deep); }

/* Admin bar on top of the sticky header and the full-screen menu. */
.admin-bar .hdr { top: 32px; }
.admin-bar .menu { top: calc(var(--hdr) + 32px); }
@media (max-width: 782px) {
	.admin-bar .hdr { top: 46px; }
	.admin-bar .menu { top: calc(var(--hdr) + 46px); }
}
@media (max-width: 600px) {
	.admin-bar .hdr { top: 0; }
	.admin-bar .menu { top: var(--hdr); }
}

/* ---------- Footer ---------- */
/* Footer menu in columns: each top-level item with children is a column heading. */
.ftr-grid:has(.ftr-col) { grid-template-columns: 1fr 3fr .9fr; }
.ftr-links:has(.ftr-col) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; gap: 28px 24px; }
.ftr-col { display: grid; align-content: start; }
.ftr .ftr-col h2 { margin-bottom: 8px; font-size: 15px; line-height: 1.1; font-weight: 800; color: #fff; letter-spacing: 0; text-align: left; }
@media (max-width: 1180px) {
	.ftr-grid:has(.ftr-col) { grid-template-columns: 4fr 1fr; }
	.ftr-grid:has(.ftr-col) .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 979px) {
	.ftr-grid:has(.ftr-col) { grid-template-columns: 1fr 1fr; }
	.ftr-links:has(.ftr-col) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.ftr-grid:has(.ftr-col) { grid-template-columns: 1fr; }
	.ftr-links:has(.ftr-col) { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	/* The design reserves room for the landing page's bottom bar; other pages don't have it. */
	body:not(.dx-landing) .ftr { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* Plugin widgets (WhatsApp, chat) were not in the design: keep them off the bottom bar, the open menu and typing. */
@media (max-width: 760px) {
	body:has(#mbar:not(.hide)) .qlwapp__container { bottom: calc(65px + env(safe-area-inset-bottom)) !important; }
	body:has(#mbar:not(.hide)) #nb-open { bottom: calc(165px + env(safe-area-inset-bottom)) !important; }
}
body.typing .qlwapp__container,
body.typing #nb-open,
html:has(#menu:not([hidden])) .qlwapp__container,
html:has(#menu:not([hidden])) #nb-open { display: none !important; }

/* ---------- Pages, posts, blog ---------- */
.page-hero { padding: 64px 0 48px; }
.page-hero .wrap { display: grid; gap: 14px; }
.page-hero .kicker a { color: inherit; text-decoration: none; }
.page-hero .intro p { margin: 0; }
.post-meta { font-size: 14px; color: var(--muted); }
.page-body { padding: 56px 0 88px; }
.empty { display: grid; gap: 18px; justify-items: start; }

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}
.card {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow); }
.card-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 24px; }
.card-meta { font-size: 13px; color: var(--muted); }
.card-title { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--deep); }
.card-text { font-size: 15px; color: var(--muted); }

.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.pagination .page-numbers.current { border-color: var(--deep); background: var(--deep); color: #fff; }

.post-thumb { margin-bottom: 40px; }
.post-thumb img { width: 100%; border-radius: 20px; }
.post-tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a { padding: 6px 14px; border-radius: 999px; background: var(--tint); font-size: 14px; font-weight: 600; text-decoration: none; }
.post-navigation { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { display: grid; gap: 2px; font-weight: 600; text-decoration: none; }

/* Reading column for page and post content. The design resets margins and list styles; bring them back here. */
.entry-content { max-width: 760px; font-size: 17px; line-height: 1.7; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 1.6em; }
.entry-content h3 { font-size: 21px; margin-top: 1.4em; }
.entry-content h4 { font-size: 17px; margin-top: 1.2em; }
.entry-content ul,
.entry-content ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { padding-left: 1.4em; }
.entry-content ul,
.elementor-widget-text-editor ul { list-style: disc; }
.entry-content ol,
.elementor-widget-text-editor ol { list-style: decimal; }
.entry-content li + li { margin-top: .35em; }
.entry-content blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--green); color: var(--ink); font-size: 19px; }
.entry-content img { border-radius: 12px; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th,
.entry-content td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content pre { overflow-x: auto; padding: 16px; border-radius: 12px; background: var(--tint); }
.entry-content::after { content: ""; display: table; clear: both; }
.elementor-widget-text-editor p + p { margin-top: 1em; }

/* Search form */
.search-form { display: flex; gap: 10px; width: min(100%, 480px); }
.search-form label { flex: 1; }
.search-form input.search-field[type="search"] { font-family: inherit; }

/* Comments */
.comments { margin-top: 56px; display: grid; gap: 24px; max-width: 760px; }
.comment-list,
.comment-list .children { display: grid; gap: 20px; }
.comment-list .children { margin-top: 20px; padding-left: 24px; }
.comment-body { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius); background: var(--tint); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; }
.comment-meta img { display: inline; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.comment-form { display: grid; gap: 14px; }
.comment-form label { display: block; margin-bottom: 4px; font-weight: 600; }

/* ---------- WordPress core classes ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.screen-reader-text:focus {
	z-index: 100;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	background: #fff;
}
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1200px; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption,
figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sticky .card-title::before { content: "★ "; color: var(--green-dark); }
.bypostauthor > .comment-body { border-left: 3px solid var(--green); }

/* ---------- Elementor ----------
 * Elementor's global "kit" styles (fonts, heading sizes, link and button colours) are scoped to the
 * whole body, so they also reach the theme's header, footer and blog. Restate the design there. */
:is(.hdr, .menu, .ftr, .page-hero, .page-body) :is(h1, h2, h3, h4, h5, h6, button, label) {
	font-family: inherit;
	text-transform: none;
	font-style: normal;
	text-decoration: none;
}
.page-hero h1 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; }
.ftr .ftr-contact h2 { font-size: 15px; line-height: 1.1; font-weight: 800; text-align: left; }
.post-grid .card-title { font-size: 19px; line-height: 1.3; font-weight: 600; }
.entry-content :is(h2, h3, h4) { line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.comments .comments-title { font-size: 24px; line-height: 1.2; }
.comments .comment-reply-title { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.hdr .menu-btn { padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: inherit; }
body:not(.elementor-page) { background: var(--surface); }
a.btn-primary,
a.btn-primary:hover,
:is(.hdr, .menu) .btn-primary,
:is(.hdr, .menu) .btn-primary:hover { color: #fff; }
a.btn-secondary,
a.btn-secondary:hover,
:is(.hdr, .menu) .btn-secondary,
:is(.hdr, .menu) .btn-secondary:hover { color: var(--deep); }
.hdr .hdr-phone { color: var(--ink); }
a.skip,
a.skip:hover { color: #fff; }
.entry-content a { color: var(--deep); }
.entry-content a:hover { color: var(--deep-dark); }
/* The design styles every input except radios, checkboxes and ranges, so submit buttons need the stronger selector. */
.search-form input.search-submit[type="submit"],
.comment-form input.submit[type="submit"] {
	width: auto;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--deep);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.search-form input.search-submit[type="submit"]:hover,
.comment-form input.submit[type="submit"]:hover { background: var(--deep-dark); }
@media (max-width: 359px) {
	.hdr .menu-btn { padding: 0 12px; }
}

@media (max-width: 760px) {
	.page-hero { padding: 40px 0 32px; }
	.page-body { padding: 36px 0 56px; }
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }
}

/* ---------- Sideways-scrolling rows: prev/next buttons and dots (added by assets/js/site.js) ---------- */
.dx-rowctl { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.dx-rowctl[hidden] { display: none; }
.losses + .dx-rowctl { justify-content: center; margin: -14px 0 28px; }
.dx-rowbtn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1.5px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--deep);
	cursor: pointer;
	touch-action: manipulation; /* iPhone: quick repeat taps step the row instead of zooming the page. */
	transition: border-color .2s, opacity .2s;
}
.dx-rowbtn:hover { border-color: var(--deep); }
.dx-rowbtn[aria-disabled="true"] { opacity: .35; cursor: default; }
.dx-rowbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Swipe with a finger, drag with a mouse. */
.dx-drag { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; cursor: grab; }
.dx-dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
.dx-dragging * { pointer-events: none; }
.dx-dots { display: flex; gap: 6px; }
.dx-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .2s, background-color .2s; }
.dx-dots i.on { width: 20px; background: var(--deep); }
@media (prefers-reduced-motion: reduce) {
	.dx-rowbtn,
	.dx-dots i { transition: none; }
}

/* ---------- Home hero: a recorded drone flight over a client roof. Scrolling flies it to four stops (home.js). ---------- */
.flight { position: relative; display: grid; background: #06202a; color: #fff; }
.flight > * { grid-area: 1 / 1; }
/* The page scrolls over a stage that stays put; only the copy, cards and controls take clicks. */
.flight-track { position: relative; z-index: 1; pointer-events: none; }
.hero-copy > *,
.chapter-card { pointer-events: auto; }
.flight-frame { position: relative; z-index: 0; }
.flight-stage { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); overflow: hidden; background: #06202a; }
.flight-media { position: absolute; inset: 0; }
.flight-media img,
.flight-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flight-media .hold { opacity: 0; transition: opacity .35s; }
.flight-media .hold.on { opacity: 1; }
.flight-media video { opacity: 0; transition: opacity .35s; }
.flight-stage.live video { opacity: 1; }
/* Shade where the words sit: the copy on the left first, then the card at the bottom left. */
.flight-stage:after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(4 26 34 / .86) 0%, rgb(4 26 34 / .62) 36%, rgb(4 26 34 / 0) 62%),
		linear-gradient(180deg, rgb(4 26 34 / .45), transparent 22%);
	transition: opacity .5s;
	pointer-events: none;
}
.flight-stage:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(70% 60% at 0% 100%, rgb(4 26 34 / .7), transparent 70%);
	opacity: 0;
	transition: opacity .5s;
	pointer-events: none;
}
.flight-stage[data-stop]:not([data-stop="0"]):after { opacity: 0; }
.flight-stage[data-stop]:not([data-stop="0"]):before { opacity: 1; }

/* Marks drawn on the footage, one set per stop. */
.flight-marks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.flight-marks g { opacity: 0; transition: opacity .3s; }
.flight-marks text { fill: #fff; font: 600 24px/1 Inter, system-ui, sans-serif; paint-order: stroke; stroke: rgb(4 26 34 / .55); stroke-width: 6px; stroke-linejoin: round; }
.flight-marks circle { fill: #fff; stroke: rgb(255 255 255 / .35); stroke-width: 10px; }
.mark-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s .15s ease-out; }
.mark-box { fill: rgb(79 211 106 / .14); stroke: #4fd36a; stroke-width: 3; stroke-linejoin: round; }
.flight-marks [data-for="4"] text { fill: #c8f7d3; }
.flight-stage[data-stop="1"] [data-for="1"],
.flight-stage[data-stop="3"] [data-for="3"],
.flight-stage[data-stop="4"] [data-for="4"] { opacity: 1; }
.flight-stage[data-stop="1"] [data-for="1"] .mark-line,
.flight-stage[data-stop="3"] [data-for="3"] .mark-line { stroke-dashoffset: 0; }

.site-tag { position: absolute; z-index: 3; right: 32px; top: 20px; max-width: 34ch; padding: 7px 12px; border-radius: 8px; background: rgb(4 26 34 / .72); font-size: 13px; line-height: 1.35; color: #e4eeea; }

/* Stops rail: right edge, a line that fills as the flight goes on. */
.rail { position: absolute; z-index: 3; right: 32px; top: 50%; transform: translateY(-50%); }
.rail ol { position: relative; display: grid; gap: 30px; }
.rail ol:before,
.rail ol:after { content: ""; position: absolute; right: 15px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: rgb(255 255 255 / .3); }
.rail ol:after { bottom: auto; height: calc((100% - 32px) * var(--fill, 0)); background: #4fd36a; transition: height .5s; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
.rail span { position: relative; z-index: 1; padding: 4px 10px; border-radius: 6px; background: rgb(4 26 34 / .72); opacity: .9; transition: opacity .2s; } /* 4.5:1 even over the white roof */
.rail b { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .7); background: #06202a; font-size: 13px; transition: background .2s, border-color .2s, color .2s; }
.rail a:hover span,
.rail a[aria-current] span { opacity: 1; }
.rail a[aria-current] b { background: #4fd36a; border-color: #4fd36a; color: #06200f; }
.rail a:focus-visible { outline: 2px solid #8fe3a8; outline-offset: 4px; }
/* Narrow stages: only the current stop is named, so the names never cover the marks on the footage. */
@media (max-width: 1199px) {
	.rail a:not([aria-current]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Screen one: the offer. */
.hero-screen { display: flex; align-items: center; min-height: calc(100svh - var(--hdr)); padding: 40px 0 72px; }
.hero-band { display: none; }
.hero-copy { display: grid; gap: 18px; justify-items: start; }
.hero-copy > * { max-width: 620px; }
.flight .kicker { color: #8fe3a8; }
.flight h1 { color: #fff; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / .3); }
.flight .hero-sub { max-width: 46ch; color: #d9e6e1; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.flight .bill-form {
	width: min(560px, 100%);
	border: 1px solid rgb(255 255 255 / .16);
	border-top: 3px solid #4fd36a;
	background: rgb(9 52 70 / .62);
	box-shadow: 0 24px 60px rgb(0 0 0 / .28);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.flight .bill-form label { color: #fff; }
.flight .bill-form .hint { color: #c9dad4; }
.flight .bill-form .hint a { color: #fff; font-weight: 600; }
.flight .bill-input input { font-size: 18px; font-variant-numeric: tabular-nums; }
.flight .bill-form .btn-primary { background: #4fd36a; color: #06200f; box-shadow: 0 6px 18px rgb(79 211 106 / .3); }
.flight .bill-form .btn-primary:hover { background: #6ee086; }
.flight .seg-label,
.flight .seg-line { color: #fff; }
.flight .seg-line a { color: #8fe3a8; }
.flight .chip { min-height: 36px; border-color: rgb(255 255 255 / .4); background: rgb(4 26 34 / .4); color: #fff; font-size: 13.5px; }
.flight .chip:hover { border-color: #fff; }
.flight .chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.flight :focus-visible { outline-color: #8fe3a8; }
.flight-cue { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.flight-cue:before { content: ""; width: 18px; height: 28px; border: 2px solid rgb(255 255 255 / .75); border-radius: 10px; background: radial-gradient(circle at 50% 30%, #fff 0 2.5px, transparent 3px); }

/* Stops: one card per screen, at the bottom left, over the flight. */
.chapter { display: flex; align-items: flex-end; min-height: calc(100svh - var(--hdr)); padding-bottom: 10vh; }
.chapter-card { display: grid; gap: 10px; width: min(420px, 100%); padding: 22px 24px; border-radius: 14px; border-top: 3px solid #4fd36a; background: #fff; color: var(--text); box-shadow: 0 24px 60px rgb(0 0 0 / .3); }
.chapter-card h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; outline: 0; }
.chapter-card p { font-size: 15px; color: var(--muted); }
.chapter-card .chapter-num { font-size: 13px; font-weight: 600; color: var(--green-dark); }
.chapter-num b { font-size: 20px; color: var(--ink); }
.chapter-card .stop-tag { font-size: 13px; font-weight: 600; color: var(--deep); background: #e9f3f6; padding: 6px 10px; border-radius: 8px; }
.chapter-link { font-size: 15px; font-weight: 600; }
.chapter-card :focus-visible { outline-color: var(--deep); }
/* Power stop: live clear-sky estimate under the sun's real path today. */
.sun-now { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: #fff8e8; }
.sun-now svg { width: 76px; height: auto; overflow: visible; }
.sun-path { fill: none; stroke: #c9a55a; stroke-width: 1.5; stroke-dasharray: 2 3; }
.sun-done { fill: none; stroke: #f59e0b; stroke-width: 2.5; stroke-linecap: round; }
.sun-dot { fill: #f59e0b; stroke: #fde3a7; stroke-width: 3; }
.sun-now.night .sun-dot { fill: #94a3b8; stroke: #e2e8f0; }
.chapter-card .sun-now p { font-size: 14px; line-height: 1.45; color: var(--text); }
.sun-now b { color: var(--ink); }
.sun-now small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Numbers, straight after the flight. */
.hero-stats { background: var(--deep-dark); color: #fff; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 32px 28px; }
.stats > div + div { border-left: 1px solid rgb(255 255 255 / .16); }
.stats dd { margin: 0; font-size: clamp(30px, 3vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats dd small { font-size: .5em; font-weight: 700; letter-spacing: 0; color: #8fe3a8; }
.stats dt { font-size: 14px; line-height: 1.4; color: #c5dbe3; }

/* Client logos, in colour. */
.clients { padding: 48px 0 16px; }
.clients-title { margin-bottom: 20px; text-align: center; font-weight: 600; color: var(--muted); }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: dx-marquee 45s linear infinite; }
.marquee:hover .marquee-track,
.clients.paused .marquee-track { animation-play-state: paused; }
.marquee li { flex: none; }
.marquee img { width: auto; height: 96px; object-fit: contain; }
.marquee-toggle { display: block; margin: 12px auto 0; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.marquee-toggle:hover { border-color: var(--deep); }
@keyframes dx-marquee { to { transform: translateX(calc(-50% - 20px)); } }

/* Scrolled header: solid, so the hero never shows through it. */
.dx-landing .hdr.scrolled { background: #fff; box-shadow: 0 6px 20px rgb(16 40 30 / .06); }

/* Laptop screens (1536x864, 1440x900, 1280x720): screen one, scroll cue included, fits above the fold. */
@media (min-width: 980px) and (max-height: 920px) {
	.hero-screen { padding: 24px 0 48px; }
	.hero-copy { gap: 14px; }
	.flight h1 { font-size: clamp(36px, 3.8vw, 54px); }
}
@media (min-width: 980px) and (max-height: 760px) {
	.flight-cue { display: none; }
}
@media (max-width: 979px) {
	.flight-stage:after { background: linear-gradient(180deg, rgb(4 26 34 / .5), transparent 30%); }
	.flight-stage:before { background: linear-gradient(0deg, rgb(4 26 34 / .75), transparent 55%); }
	.flight-marks { display: none; }
	.hero-screen { display: block; min-height: 0; padding: 0 0 40px; background: #06202a; }
	.hero-band { display: block; position: relative; }
	.hero-band img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 46svh; object-fit: cover; }
	.hero-band:after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, #06202a, transparent); }
	.hero-copy { position: relative; margin-top: -36px; }
	.flight h1 { font-size: clamp(31px, 8.4vw, 44px); }
	.flight .bill-form { background: rgb(9 52 70 / .9); }
	.hero-screen { pointer-events: auto; } /* opaque here: taps must not reach the rail hidden under it */
	.chapter { min-height: calc(100svh - var(--hdr)); padding-bottom: calc(150px + env(safe-area-inset-bottom)); } /* clear of the savings bar and WhatsApp button */
	.site-tag { left: 16px; right: auto; top: 64px; bottom: auto; font-size: 12px; }
	.rail { left: 16px; right: 16px; top: 16px; transform: none; }
	.rail ol { display: flex; justify-content: space-between; gap: 0; }
	.rail ol:before,
	.rail ol:after { left: 16px; right: 16px; top: 15px; bottom: auto; width: auto; height: 2px; }
	.rail ol:after { right: auto; width: calc((100% - 32px) * var(--fill, 0)); transition: width .5s; }
	.rail a { flex-direction: row-reverse; gap: 6px; font-size: 12.5px; }
	.rail a[aria-current] span { background: rgb(4 26 34 / .7); }
	.stats { grid-template-columns: 1fr 1fr; }
	.stats > div:nth-child(3) { border-left: 0; }
	.stats > div:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / .16); }
	.still figcaption { right: 168px; }
}
@media (max-width: 760px) {
	.flight-stage { top: 0; height: 100svh; } /* the phone header slides away on scroll */
	.flight-stage .rail,
	.flight-stage .site-tag { transition: transform .3s; }
	body:has(.hdr:not(.hide)) .flight-stage .rail,
	body:has(.hdr:not(.hide)) .flight-stage .site-tag { transform: translateY(var(--hdr)); } /* header back on scroll-up: move below it */
	.chapter { min-height: 100svh; }
	.dx-offer .qlwapp__container { opacity: 0; visibility: hidden; } /* WhatsApp button off the bill form on screen one */
	.dx-landing .ftr { padding-bottom: calc(164px + env(safe-area-inset-bottom)); } /* last line clears the savings bar and the WhatsApp button */
	.stats > div { padding: 20px 16px; }
	.stats dt { font-size: 13px; }
	.clients { padding-top: 36px; }
	.marquee-track { gap: 24px; }
	.marquee img { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
	.flight-media .hold,
	.flight-marks g,
	.mark-line,
	.rail ol:after { transition: none; }
	.marquee { -webkit-mask: none; mask: none; } /* static rows: no faded edge logos */
	.marquee-track { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 var(--gutter); animation: none; }
	.marquee li[aria-hidden],
	.marquee-toggle { display: none; }
}

/* Drone shot at the top of the ways-to-pay, power, care and AI sections. Phones have always had it; wide screens
   now get it too, as a wide band. "Watch drone video" opens the clip full screen. */
@media (min-width: 980px) {
	.still { display: block; aspect-ratio: 21 / 8; margin-bottom: 48px; border-radius: 22px; box-shadow: var(--shadow-lg); }
	.still img { object-position: 50% 55%; }
	.still figcaption { left: 24px; bottom: 24px; right: auto; max-width: 440px; padding: 12px 16px; font-size: 16px; }
	.view3d { right: 24px; bottom: 24px; min-height: 48px; padding: 0 22px; font-size: 15px; }
	.viewer-cap { left: 24px; right: auto; bottom: 24px; max-width: 560px; }
}

/* "Watch the video" dialog: the clip fills the screen. */
.viewer { background: #06202a; }
.viewer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Calculator: "What is this?" sits under its label, not centred in the grid row. */
.field > .gl-q { justify-self: start; margin: -4px 0 0; }
/* Hero bill: a wrong entry looks wrong, not just a changed hint. */
.flight #hero-bill[aria-invalid="true"] { border-color: #ff8a7a; box-shadow: 0 0 0 2px #ff8a7a; }
.flight .bill-form:has(#hero-bill[aria-invalid="true"]) .hint { color: #ffc2b8; font-weight: 600; }
/* Lead form: the consent error sits with its checkbox. */
.check.consent { min-height: 24px; } /* the 44px min left ~21px of dead space under the box; full-width 24px row still meets WCAG 2.5.8 */
#f-consent-err { margin-top: -12px; }
/* Solution tabs: fit in one row on ~1024px screens instead of scrolling a few pixels. */
@media (max-width: 1100px) { #sol-tabs .tablist [role=tab] { padding: 0 14px; } }