/* =========================================================
   WEATHERDUCK — HOMEPAGE (Elementor front page)
   Consumes design-tokens.css. Every section root carries
   .wd-home so nothing leaks into other Elementor content.
   Dark chrome values mirror site-dark-chrome.css; inversion
   tier colours mirror inversion.css (not loaded here).
   Approved design: development-only/homepage-lab/homepage.html
   ========================================================= */

.wd-home {
	/* chrome (site-dark-chrome.css values) */
	--wd-chrome: #1e2b22;
	--wd-chrome-raise: rgba(255,255,255,.08);
	--wd-chrome-border: rgba(255,255,255,.22);
	--wd-chrome-hair: rgba(255,255,255,.10);
	--wd-on-chrome-72: rgba(255,255,255,.72);
	--wd-on-chrome-62: rgba(255,255,255,.62);
	--wd-on-chrome-35: rgba(255,255,255,.35);
	--wd-cta: #6bc97f;
	--wd-cta-hover: #5db96f;

	/* inversion tier palette (inversion.css values) */
	--inv-excellent: #2E7DB5;
	--inv-good: #2f9955;
	--inv-moderate: #c68a1a;

	/* unified card hairline */
	--wd-card-line: rgba(47,74,54,.18);

	--wd-home-gutter: 20px;
	--wd-home-maxw: 1180px;

	background: var(--wd-bg-page);
	color: var(--wd-text-primary);
	font-family: 'Montserrat', var(--wd-font, sans-serif);
	font-size: 16px;
	line-height: 1.55;
	padding: 48px 0;
	-webkit-font-smoothing: antialiased;
}

.wd-home *,
.wd-home *::before,
.wd-home *::after { box-sizing: border-box; }

.wd-home img { max-width: 100%; display: block; }

.wd-home .wd-home-wrap {
	width: 100%;
	max-width: var(--wd-home-maxw);
	margin-inline: auto;
	padding-inline: var(--wd-home-gutter);
}

/* dark sections */
.wd-home.on-dark {
	background: var(--wd-chrome);
	color: #fff;
}

.wd-home--subtle { background: var(--wd-bg-subtle); }

/* ── v2 container guards ──
   In the editable template, sections and wraps ARE Elementor
   containers. The kit's container defaults (padding/gap) arrive at
   (0,1,0); these qualified rules keep the design CSS in charge.
   Grid gap classes later in the file re-override where needed. */
.wd-home .e-con { gap: 0; overflow: visible; }
.wd-home.e-con { padding: 48px 0; overflow: visible; }
.wd-home.e-con.wd-home--hero { padding: 44px 0 0; }
/* Whichever section sits directly after the hero clears the photo
   overhang (48px base / 64px ≥769) plus breathing room. Keyed on
   adjacency so reordering sections in the editor can't strand it. */
.wd-home--hero + .wd-home.e-con { padding-top: 86px; }

/* ══════════════ SHARED VOCABULARY ══════════════ */
.wd-home .wd-microlabel {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	line-height: 1.1;
	color: var(--wd-text-muted);
	margin: 0 0 var(--wd-space-md);
}
.wd-home.on-dark .wd-microlabel { color: var(--wd-on-chrome-62); }

.wd-home .wd-h2 {
	font-size: clamp(1.6rem, 5.6vw, 2.15rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.012em;
	margin: 0 0 var(--wd-space-md);
	text-wrap: balance;
	color: inherit;
}

.wd-home .wd-lede {
	font-size: 1rem;
	line-height: 1.62;
	color: var(--wd-text-secondary);
	margin: 0 0 var(--wd-space-2xl);
	max-width: 56ch;
}
.wd-home.on-dark .wd-lede { color: var(--wd-on-chrome-72); }

/* Buttons. `.wd-btn` = the raw anchor (HTML-widget template).
   `.wd-btn-slot` goes on an Elementor button widget's wrapper
   (editable template) and styles its inner .elementor-button —
   both templates share one source of truth here. */
.wd-home .wd-btn,
.wd-home .wd-btn-slot .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: var(--wd-green);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: .88rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	/* labels stay on one line — the inversion CTA sits in a flex row
	   next to its note and would otherwise wrap to two lines */
	white-space: nowrap;
	transition: background .15s, transform .1s;
}
.wd-home .wd-btn:hover,
.wd-home .wd-btn-slot .elementor-button:hover { background: var(--wd-green-hover); color: #fff; }
.wd-home .wd-btn:active,
.wd-home .wd-btn-slot .elementor-button:active { transform: translateY(1px); }
.wd-home .wd-btn--bright,
.wd-home .wd-btn-slot--bright .elementor-button { background: var(--wd-cta); color: #1e2b22; }
.wd-home .wd-btn--bright:hover,
.wd-home .wd-btn-slot--bright .elementor-button:hover { background: var(--wd-cta-hover); color: #1e2b22; }
.wd-home .wd-btn--ghost,
.wd-home .wd-btn-slot--ghost .elementor-button {
	background: transparent;
	color: var(--wd-green);
	border: 1px solid var(--wd-border-strong);
}
.wd-home .wd-btn--ghost:hover,
.wd-home .wd-btn-slot--ghost .elementor-button:hover { background: var(--wd-bg-subtle); color: var(--wd-green); }
.wd-home.on-dark .wd-btn--ghost,
.wd-home.on-dark .wd-btn-slot--ghost .elementor-button { color: #fff; border-color: var(--wd-chrome-border); background: transparent; }
.wd-home.on-dark .wd-btn--ghost:hover,
.wd-home.on-dark .wd-btn-slot--ghost .elementor-button:hover { background: var(--wd-chrome-raise); color: #fff; }

.wd-home .wd-home-card {
	background: var(--wd-bg-card);
	border: 1px solid var(--wd-card-line);
	border-radius: 0;
	padding: var(--wd-space-xl);
}

/* honest labelling for illustrative figures */
.wd-home .wd-example {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wd-text-muted);
	border: 1px dashed var(--wd-border-strong);
	border-radius: var(--wd-radius-pill);
	padding: 3px 10px;
}

/* ══════════════ SCROLL-REVEAL ══════════════
   `translate` (not transform) so it composes with the hero
   photo's overlap transform. One-shot, JS adds .fx-in. */
.wd-home .fx {
	opacity: 0;
	translate: 0 18px;
	transition: opacity .65s ease, translate .65s cubic-bezier(.22,.61,.36,1);
	transition-delay: calc(var(--fx-i, 0) * 90ms);
}
.wd-home .fx.fx-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
	.wd-home .fx { opacity: 1; translate: none; transition: none; }
}

/* Elementor editor: widgets re-render dynamically after home.js has
   run, so reveals would leave them stuck invisible. No animation
   while editing. */
body.elementor-editor-active .wd-home .fx {
	opacity: 1;
	translate: none;
	transition: none;
}

/* ══════════════ 1 · HERO (dark) ══════════════ */
.wd-home--hero {
	padding: 44px 0 0;
	text-align: center;
	/* The photo deliberately overhangs into the next section. Elementor
	   puts `position: relative` on every container, so hero and the
	   following section are both positioned with z-index:auto and paint
	   in DOM order — the next section painted OVER the overhang, hiding
	   the caption and making the photo look cut off at the boundary.
	   Lifting the hero keeps its overhang on top. */
	position: relative;
	z-index: 1;
}

.wd-home .hero__title {
	font-size: clamp(2.05rem, 8.4vw, 3.3rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.018em;
	margin: 0 0 var(--wd-space-lg);
	text-wrap: balance;
	color: #fff;
}
.wd-home .hero__title em { font-style: normal; color: var(--wd-cta); }

.wd-home .hero__lede {
	font-size: 1.02rem;
	line-height: 1.62;
	color: var(--wd-on-chrome-72);
	margin: 0 auto var(--wd-space-2xl);
	max-width: 48ch;
}

/* hero search — same autocomplete plumbing as the header.
   Mobile sizing mirrors .wdm-search exactly (44px controls,
   14px input, 11px/800 button); desktop grows to 54px. */
.wd-home .hero__search {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 0 auto;
}

/* Elementor puts the search and photo in separate animated `.fx` stacking
   contexts. Lift the whole search widget so the later photo cannot cover the
   input or autocomplete panel; raising the panel alone cannot escape its
   parent stacking context. */
.wd-home--hero .elementor-widget-html:has(.hero__search) {
	position: relative;
	z-index: 2;
}

.wd-home .hero__search-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.wd-home .hero__search-wrap input {
	width: 100%;
	height: var(--wd-control-h);
	padding: 0 14px;
	border-radius: 6px;
	border: 1px solid var(--wd-border-strong);
	background: var(--wd-bg-card);
	color: var(--wd-text-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.wd-home .hero__search-wrap input::placeholder { color: var(--wd-text-muted); font-weight: 400; }
/* The same search block serves the dark hero and the light closing
   CTA — chrome colours only apply under .on-dark. */
.wd-home.on-dark .hero__search-wrap input {
	border-color: var(--wd-chrome-border);
	background: var(--wd-chrome-raise);
	color: #fff;
}
.wd-home.on-dark .hero__search-wrap input::placeholder { color: var(--wd-on-chrome-35); }
.wd-home .hero__search-wrap input:focus {
	border-color: var(--wd-cta);
	box-shadow: 0 0 0 3px rgba(107,201,127,.22);
}

.wd-home .hero__search-wrap .wdh__autocomplete {
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	text-align: left;
}

.wd-home .hero__search-btn {
	flex: none;
	height: var(--wd-control-h);
	padding: 0 14px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: var(--wd-cta);
	color: #1e2b22;
	font-family: inherit;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .15s;
	-webkit-appearance: none;
	appearance: none;
}
.wd-home .hero__search-btn:hover { background: var(--wd-cta-hover); }

.wd-home .hero__note {
	margin: var(--wd-space-md) 0 0;
	font-size: .78rem;
	color: var(--wd-on-chrome-62);
}

.wd-home .hero__how {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: var(--wd-space-xl);
	font-size: .86rem;
	font-weight: 600;
	color: var(--wd-on-chrome-72);
	text-decoration: none;
}
.wd-home .hero__how:hover { color: #fff; }
.wd-home .hero__how svg { width: 15px; height: 15px; }

/* photo card overlapping the section boundary */
.wd-home .hero__photo {
	position: relative;
	margin: 34px 0 0;
	border-radius: var(--wd-radius-md);
	overflow: hidden;
	box-shadow: var(--wd-shadow-lg);
	transform: translateY(48px);
}
.wd-home .hero__photo img {
	width: 100%;
	height: min(56vw, 400px);
	object-fit: cover;
	object-position: center 42%;
}
.wd-home .hero__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 22px 14px 12px;
	text-align: left;
	background: linear-gradient(to top, rgba(30,43,34,.88), rgba(30,43,34,0));
	color: rgba(255,255,255,.9);
	font-size: .74rem;
	letter-spacing: .02em;
	margin: 0;
}
.wd-home .hero__caption b { font-weight: 700; color: #fff; }

/* ══════════════ 2 · PILLARS ══════════════ */
.wd-home--hero + .wd-home { padding-top: 86px; }

.wd-home .pillars__grid { display: grid; gap: 12px; }

.wd-home .pillar h3 {
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0 0 var(--wd-space-sm);
	color: var(--wd-text-primary);
}
.wd-home .pillar p {
	margin: 0;
	font-size: .88rem;
	line-height: 1.58;
	color: var(--wd-text-secondary);
}
/* Pillar icon: an empty Elementor container (so its size/spacing stay
   editable) with the glyph painted on from the shared hand-drawn set in
   assets/img/ui-icons/. To change an icon, edit the modifier class in
   Elementor → Advanced → CSS Classes — any name listed below works. */
.wd-home .pillar__icon {
	width: 38px;
	height: 38px;
	margin-bottom: var(--wd-space-md);
	display: grid;
	place-items: center;
	border-radius: var(--wd-radius-sm);
	background-color: var(--wd-green-light);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	color: var(--wd-green);
}
/* v1/v2 templates put an inline <svg> inside — still supported */
.wd-home .pillar__icon svg { width: 21px; height: 21px; }

.wd-home .pillar__icon--daylight-arc { background-image: url('../../img/ui-icons/daylight-arc.svg'); }
.wd-home .pillar__icon--cloud-layer  { background-image: url('../../img/ui-icons/cloud-layer.svg'); }
/* the cratered moon from the hourly forecast table (clear-night icon) */
.wd-home .pillar__icon--moon         { background-image: url('../../img/weather-icons/01n.svg'); }
.wd-home .pillar__icon--moon-full    { background-image: url('../../img/ui-icons/moon-full.svg'); }
.wd-home .pillar__icon--aurora       { background-image: url('../../img/ui-icons/aurora.svg'); }
.wd-home .pillar__icon--mountain     { background-image: url('../../img/ui-icons/mountain.svg'); }
.wd-home .pillar__icon--thermometer  { background-image: url('../../img/ui-icons/thermometer.svg'); }
.wd-home .pillar__icon--wind         { background-image: url('../../img/ui-icons/wind.svg'); }
.wd-home .pillar__icon--rain         { background-image: url('../../img/ui-icons/rain.svg'); }
.wd-home .pillar__icon--sunrise      { background-image: url('../../img/ui-icons/sunrise.svg'); }
.wd-home .pillar__icon--meteor       { background-image: url('../../img/ui-icons/meteor.svg'); }
.wd-home .pillar__icon--topsoil      { background-image: url('../../img/ui-icons/topsoil.svg'); }
.wd-home .pillar__icon--calendar     { background-image: url('../../img/ui-icons/calendar.svg'); }

/* ── Tick lists — native Elementor Icon List widgets ──
   No icon is selected in the widget; the tick is the site's own check.svg
   painted on ::before. That keeps the text editable inline in Elementor
   while avoiding icon fonts and per-item media picking. check.svg is a
   green core with a near-black outline, so on the dark pricing cards the
   outline recedes and the green reads cleanly — one asset, both grounds. */
.wd-home .wd-ticklist .elementor-icon-list-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wd-home .wd-ticklist .elementor-icon-list-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--wd-text-secondary);
}
.wd-home .wd-ticklist .elementor-icon-list-item::before {
	content: '';
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	background: url('../../img/ui-icons/check.svg') no-repeat center;
	background-size: contain;
}
.wd-home .wd-ticklist .elementor-icon-list-text { color: inherit; }
.wd-home.on-dark .wd-ticklist .elementor-icon-list-item { color: var(--wd-on-chrome-72); }

/* score section: larger type with bold lead-ins */
.wd-home .wd-ticklist--lead .elementor-icon-list-item { font-size: .9rem; line-height: 1.55; }
.wd-home .wd-ticklist--lead .elementor-icon-list-item::before { width: 17px; height: 17px; }
.wd-home .wd-ticklist--lead b { color: var(--wd-text-primary); font-weight: 700; }
.wd-home.on-dark .wd-ticklist--lead b { color: #fff; }

/* pricing cards: list stretches so buttons align on a common baseline */
.wd-home .wd-ticklist--plan .elementor-icon-list-item { font-size: .85rem; }
.wd-home .plan .elementor-widget-icon-list { flex: 1 1 auto; }

/* ══════════════ 3 · SCORE ══════════════ */
.wd-home .score__head { margin-bottom: var(--wd-space-xl); }

.wd-home .score__demo { padding: var(--wd-space-lg); }

.wd-home .score__demo-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: var(--wd-space-lg);
}
.wd-home .score__demo-title { font-size: .9rem; font-weight: 700; margin: 0; }

.wd-home .score__hours {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
}
.wd-home .score__hr {
	text-align: center;
	padding: 9px 2px 10px;
	border-radius: var(--wd-radius-sm);
}
.wd-home .score__hr b { display: block; font-size: .95rem; font-weight: 800; line-height: 1.1; }
.wd-home .score__hr span {
	display: block;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wd-text-muted);
	margin-top: 3px;
}
.wd-home .score__hr--excellent { background: var(--wd-score-excellent); }
.wd-home .score__hr--excellent b { color: var(--wd-score-excellent-text); }
.wd-home .score__hr--good { background: var(--wd-score-good); }
.wd-home .score__hr--good b { color: var(--wd-score-good-text); }
.wd-home .score__hr--fair { background: var(--wd-score-fair); }
.wd-home .score__hr--fair b { color: var(--wd-score-fair-text); }
.wd-home .score__hr--poor { background: var(--wd-score-poor); }
.wd-home .score__hr--poor b { color: var(--wd-score-poor-text); }

.wd-home .score__legend {
	margin: var(--wd-space-lg) 0 0;
	font-size: .8rem;
	color: var(--wd-text-secondary);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.wd-home .score__legend svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--wd-green); }

.wd-home .score__list {
	list-style: none;
	margin: var(--wd-space-xl) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wd-space-md);
}
.wd-home .score__list li {
	display: flex;
	gap: 11px;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--wd-text-secondary);
}
.wd-home .score__list b { color: var(--wd-text-primary); font-weight: 700; }
.wd-home .score__list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--wd-green); }

/* Score section sits on dark chrome since the Aug 2026 reorder
   (section root carries .on-dark); the demo stays a light
   wd-home-card, so only the left-column text flips. */
.wd-home.on-dark .score__list li { color: var(--wd-on-chrome-72); }
.wd-home.on-dark .score__list b { color: #fff; }
.wd-home.on-dark .score__list svg { color: var(--wd-cta); }

/* ══════════════ 4 · INVERSION (light) ══════════════
   Light-first since the Aug 2026 reorder moved this section onto
   the light band directly under the hero. The section root must
   NOT carry .on-dark. Tier colours are the raw inversion-tab
   values — that palette is designed for light backgrounds. */
.wd-home .inv__head { margin-bottom: var(--wd-space-2xl); }

/* The ladder reads as a white card on the subtle background,
   echoing the inversion tab's own card treatment. */
.wd-home .ladder {
	background: var(--wd-bg-card);
	border: 1px solid var(--wd-card-line);
	padding: var(--wd-space-sm) var(--wd-space-xl);
}

.wd-home .band {
	display: grid;
	grid-template-columns: 1fr 54px;
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--wd-card-line);
}
.wd-home .band:last-child { border-bottom: 0; }
.wd-home .band__name { font-size: .95rem; font-weight: 700; color: var(--wd-text-primary); }
.wd-home .band__desc {
	display: block;
	font-size: .79rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wd-text-secondary);
	margin-top: 2px;
}
.wd-home .band__meter {
	height: 6px;
	border-radius: var(--wd-radius-pill);
	background: rgba(30,43,34,.10);
	position: relative;
	overflow: hidden;
}
.wd-home .band__meter i {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: var(--wd-radius-pill);
}

/* Tier colours = the site's own --inv-* values, used raw on the
   white card. Same ladder as the inversion tab:
   neutral → gold → green → blue. */
.wd-home .band--1 .band__meter i { width: 24%; background: rgba(30,43,34,.28); }
.wd-home .band--2 .band__meter i { width: 50%; background: var(--inv-moderate); }
.wd-home .band--3 .band__meter i { width: 76%; background: var(--inv-good); }
.wd-home .band--4 .band__meter i { width: 100%; background: var(--inv-excellent); }

/* Names pick up their tier hue, darkened for contrast on white. */
.wd-home .band--2 .band__name { color: color-mix(in srgb, var(--inv-moderate) 70%, #000); }
.wd-home .band--3 .band__name { color: color-mix(in srgb, var(--inv-good) 74%, #000); }
.wd-home .band--4 .band__name { color: color-mix(in srgb, var(--inv-excellent) 78%, #000); }

.wd-home .inv__foot {
	margin-top: var(--wd-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--wd-space-md);
	align-items: flex-start;
}
.wd-home .inv__note {
	margin: 0;
	font-size: .82rem;
	color: var(--wd-text-secondary);
	max-width: 44ch;
}
.wd-home .inv__photo {
	margin-top: var(--wd-space-2xl);
	border-radius: var(--wd-radius-md);
	overflow: hidden;
	border: 1px solid var(--wd-card-line);
}
/* Mobile: the hero's Skiddaw photo sits directly above this section,
   so the second sky photo is hidden to keep the ladder next to the
   copy. It returns at ≥769px where it fills the left column. */
@media (max-width: 768px) {
	.wd-home .inv__photo { display: none; }
}
.wd-home .inv__photo img { width: 100%; height: min(46vw, 260px); object-fit: cover; }

/* ══════════════ 5 · NIGHT + GROUND ══════════════ */
.wd-home .duo { display: grid; gap: var(--wd-space-xl); }

.wd-home .feature {
	border: 1px solid var(--wd-card-line);
	background: var(--wd-bg-card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* Height is set on the <img> itself, not the wrapper, so this works
   whether the image is a raw <img> (HTML widget) or an Elementor
   image widget — the latter nests it in .elementor-widget-container,
   which would break a height:100% chain. */
.wd-home .feature__img { overflow: hidden; line-height: 0; }
.wd-home .feature__img img { width: 100%; height: 170px; object-fit: cover; }
.wd-home .feature__body { padding: var(--wd-space-xl); }
.wd-home .feature h3 {
	font-size: 1.08rem;
	font-weight: 800;
	margin: 0 0 var(--wd-space-sm);
	color: var(--wd-text-primary);
}
.wd-home .feature p {
	margin: 0 0 var(--wd-space-lg);
	font-size: .89rem;
	line-height: 1.58;
	color: var(--wd-text-secondary);
}
.wd-home .feature ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wd-home .feature li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .84rem;
	color: var(--wd-text-secondary);
}
.wd-home .feature li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--wd-green); }

/* ══════════════ 6 · SIX TABS ══════════════ */
.wd-home .tabs__grid {
	display: grid;
	gap: 1px;
	background: var(--wd-card-line);
	border: 1px solid var(--wd-card-line);
}
.wd-home .tabcell { background: var(--wd-bg-card); padding: var(--wd-space-lg); }
.wd-home .tabcell h3 {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 6px;
	color: var(--wd-green);
}
.wd-home .tabcell p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--wd-text-secondary); }
.wd-home .tabcell--soon h3 { color: var(--wd-text-muted); }

/* ══════════════ 7 · PRICING (dark) ══════════════ */
.wd-home .plans { display: grid; gap: var(--wd-space-lg); margin-top: var(--wd-space-2xl); }

.wd-home .plan {
	border: 1px solid var(--wd-chrome-hair);
	background: var(--wd-chrome-raise);
	padding: var(--wd-space-xl);
	display: flex;
	flex-direction: column;
}
.wd-home .plan--feature { border-color: var(--wd-cta); background: rgba(107,201,127,.1); }
.wd-home .plan__flag {
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wd-cta);
	margin: 0 0 var(--wd-space-sm);
}
.wd-home .plan__name { font-size: 1.02rem; font-weight: 800; margin: 0 0 var(--wd-space-xs); color: #fff; }
.wd-home .plan__price {
	font-size: 2.15rem;
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
	margin: var(--wd-space-sm) 0 var(--wd-space-lg);
}
.wd-home .plan__price small { font-size: .8rem; font-weight: 600; color: var(--wd-on-chrome-62); margin-left: 4px; }
.wd-home .plan ul { list-style: none; margin: 0 0 var(--wd-space-xl); padding: 0; display: grid; gap: 9px; flex: 1; }
.wd-home .plan li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .85rem;
	color: var(--wd-on-chrome-72);
	line-height: 1.5;
}
.wd-home .plan li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--wd-cta); }
.wd-home .plan .wd-btn { width: 100%; }
.wd-home .plans__note {
	margin: var(--wd-space-xl) 0 0;
	font-size: .78rem;
	color: var(--wd-on-chrome-62);
	text-align: center;
}

/* ══════════════ 8 · CLOSING CTA ══════════════ */
.wd-home--close { text-align: center; }
.wd-home--close .wd-h2 { margin-bottom: var(--wd-space-sm); }
.wd-home--close .wd-lede { margin-inline: auto; }
.wd-home .close__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
	margin: 0 auto;
}

/* ══════════════ ≥769px ══════════════ */
@media (min-width: 769px) {
	.wd-home { --wd-home-gutter: 32px; padding: 72px 0; }
	.wd-home.e-con { padding: 72px 0; }
	.wd-home.e-con.wd-home--hero { padding: 66px 0 0; }
	.wd-home--hero + .wd-home.e-con { padding-top: 124px; }
	.wd-home .wd-lede { font-size: 1.04rem; }

	.wd-home--hero { padding-top: 66px; }
	.wd-home .hero__lede { font-size: 1.1rem; }
	.wd-home .hero__search { max-width: 560px; gap: 10px; }
	.wd-home .hero__search-wrap input { height: 54px; padding: 0 16px; font-size: .95rem; }
	.wd-home .hero__search-btn { height: 54px; padding: 0 20px; font-size: .8rem; font-weight: 700; }
	.wd-home .hero__photo { transform: translateY(64px); margin-top: 44px; }
	.wd-home .hero__photo img { height: 430px; object-position: center 46%; }
	.wd-home .hero__caption { padding: 30px 22px 16px; font-size: .8rem; }

	.wd-home--hero + .wd-home { padding-top: 124px; }
	.wd-home .pillars__grid { grid-template-columns: repeat(3, 1fr); }

	.wd-home .score__wrap {
		display: grid;
		grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
		gap: 48px;
		align-items: center;
	}
	.wd-home .score__head { margin-bottom: 0; }
	.wd-home .score__list { margin-top: var(--wd-space-2xl); }
	.wd-home .score__hours { grid-template-columns: repeat(8, 1fr); gap: 5px; }

	.wd-home .inv__wrap {
		display: grid;
		grid-template-columns: minmax(0,.9fr) minmax(0,1fr);
		gap: 56px;
		align-items: start;
	}
	.wd-home .inv__head { margin-bottom: 0; }
	.wd-home .inv__photo { margin-top: var(--wd-space-xl); }
	.wd-home .inv__photo img { height: 200px; }
	.wd-home .inv__foot { flex-direction: row; align-items: center; gap: var(--wd-space-xl); }

	.wd-home .duo { grid-template-columns: repeat(2, 1fr); }
	.wd-home .feature__img img { height: 190px; }

	.wd-home .tabs__grid { grid-template-columns: repeat(3, 1fr); }

	.wd-home .plans { grid-template-columns: repeat(3, 1fr); }

	.wd-home .close__actions { flex-direction: row; justify-content: center; max-width: none; }
}

/* ══════════════ ≥1025px ══════════════ */
@media (min-width: 1025px) {
	.wd-home { padding: 88px 0; }
	.wd-home.e-con { padding: 88px 0; }
	.wd-home.e-con.wd-home--hero { padding: 80px 0 0; }
	.wd-home--hero + .wd-home.e-con { padding-top: 142px; }
	.wd-home--hero { padding-top: 80px; }
	.wd-home .hero__photo img { height: 480px; }
	.wd-home--hero + .wd-home { padding-top: 142px; }
	.wd-home .tabs__grid { grid-template-columns: repeat(6, 1fr); }
	.wd-home .tabcell { padding: var(--wd-space-xl) var(--wd-space-lg); }
}

/* ═════════════════════════════════════════════════════════
   ELEMENTOR-NATIVE MAPPINGS (editable template v2)
   In v2 the design classes sit on widget/container WRAPPERS,
   so inner Elementor markup must inherit from them instead of
   taking Elementor's kit defaults. Harmless to the HTML-widget
   template, which has no native widgets.
   ═════════════════════════════════════════════════════════ */

/* Native heading + text widgets inherit everything from wrapper */
.wd-home .elementor-widget-heading .elementor-heading-title,
.wd-home .elementor-widget-text-editor p {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-wrap: inherit;
	color: inherit;
	margin: 0;
}

/* (Container width/padding/gap guards live near the top of this
   file — the templates set content_width:full and nothing else,
   so the design CSS owns all layout.) */

/* Card/title/text wrapper classes for native widgets — mirror the
   element-selector styles used by the HTML-widget template. */
.wd-home .pillar__title {
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0 0 var(--wd-space-sm);
	color: var(--wd-text-primary);
}
.wd-home .pillar__text {
	font-size: .88rem;
	line-height: 1.58;
	color: var(--wd-text-secondary);
}

.wd-home .feature__title {
	font-size: 1.08rem;
	font-weight: 800;
	margin: 0 0 var(--wd-space-sm);
	color: var(--wd-text-primary);
}
.wd-home .feature__text {
	font-size: .89rem;
	line-height: 1.58;
	color: var(--wd-text-secondary);
	margin: 0 0 var(--wd-space-lg);
}

.wd-home .tabcell__title {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 6px;
	color: var(--wd-green);
}
.wd-home .tabcell--soon .tabcell__title { color: var(--wd-text-muted); }
.wd-home .tabcell__text {
	font-size: .84rem;
	line-height: 1.5;
	color: var(--wd-text-secondary);
}

/* Plan cards: the feature list stretches so buttons align to the
   card bottom. In v2 the list lives in an html widget, so its
   wrapper is the flex child that must grow. */
.wd-home .plan .elementor-widget-html { flex: 1 1 auto; }
.wd-home .plan .elementor-widget-html ul {
	list-style: none;
	margin: 0 0 var(--wd-space-xl);
	padding: 0;
	display: grid;
	gap: 9px;
}

/* ─────────────────────────────────────────────────────────
   ELEMENTOR NEUTRALISATION
   Diagnosed against the live render, 31 Jul 2026. Elementor's
   kit + flex-container CSS beats the design layer in 3 ways:

   1. `.e-con` feeds kit padding (10px) and gap (20px) in through
      CSS custom properties — so any container we don't explicitly
      pad picked up 10px on all sides.
   2. `.elementor.elementor .e-con > .elementor-widget` (0,4,0)
      forces `max-width:100%` and `margin-block-end:0` on EVERY
      widget wrapper — this killed the bottom margin under every
      heading and paragraph.
   3. `.elementor .elementor-widget:not(...) figure` (0,4,1) forces
      `margin:0`, which flattened the hero photo's overlap.

   Elementor deliberately doubles its own class to win specificity
   wars, so `!important` is the sanctioned last resort here (same
   approach as the unified-tabs Elementor isolation).

   Only affects the editable template — the HTML-widget master has
   no native widgets, and these values match it exactly.
   ───────────────────────────────────────────────────────── */

/* 1 · Kit padding + gap → 0. Real padding/gap declarations above
   (cards, plans, tabcells, sections, grids) still win normally. */
.wd-home,
.wd-home .e-con,
.wd-home .e-con-inner {
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
}

/* 2 · Widths and centring only.
   IMPORTANT — do not re-add forced margins here. The v3 template carries
   every margin as an Elementor `_margin` setting so it shows in the editor
   and can be changed there; an `!important` here would silently block those
   edits. Elementor's per-element CSS (0,3,0) already beats the plain design
   rules above, so the template wins without help.

   The two that stay are ones Elementor has no control for: a `ch`-based
   measure, and auto side-margins for the centred hero copy (the template's
   margin shorthand would otherwise reset those to 0). */
.wd-home .wd-lede { max-width: 56ch !important; }
.wd-home .hero__lede {
	max-width: 48ch !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wd-home--close .wd-lede { margin-inline: auto !important; }

/* 3 · Hero photo. The 34/44px top margin now lives on the HTML widget's
   `_margin` setting (editable); Elementor's own figure reset zeroes the
   <figure> itself, which is what we want. Only the overlap stays here —
   `transform` has no Elementor control in the free version. */

/* Button widgets: wrapper width follows layout, inner fills it */
.wd-home .plan .wd-btn,
.wd-home .plan .wd-btn-slot .elementor-button { width: 100%; }
.wd-home .close__actions .elementor-widget-button { width: 100%; }
.wd-home .close__actions .wd-btn-slot .elementor-button { width: 100%; }

@media (min-width: 769px) {
	.wd-home .close__actions .elementor-widget-button { width: auto; }
	.wd-home .close__actions .wd-btn-slot .elementor-button { width: auto; }
}