/* =========================================================================
   WeSearch UCompare — marketing section styles (block-content driven).
   Loaded after main.css. Consumes --ws-* tokens from style.css.
   These style the native-block sections authored into marketing pages
   (homepage + landing pages), reproducing the old Elementor design without
   Elementor/JetEngine. Class namespace: ws-mk-  (marketing).
   ========================================================================= */

/* The page content wrapper on marketing pages spans full width (sections
   manage their own inner container), unlike the narrow .ws-container--text. */
.ws-mk .wp-block-group__inner-container,
.ws-mk__inner { width: 100%; max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-space-3); }

.ws-mk-section { padding-block: var(--ws-space-6); }
.ws-mk-section__head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: var(--ws-space-4); }
.ws-mk-section__title { font-size: var(--ws-fs-2xl); margin-bottom: var(--ws-space-2); }
.ws-mk-section__lead { font-size: var(--ws-fs-lead); color: var(--ws-muted-2); margin: 0; }

/* ---------- 1. HERO ---------- */
.ws-mk-hero { background: var(--ws-indigo); color: var(--ws-white); padding-block: 4.5rem; }
.ws-mk-hero__inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--ws-space-3); align-items: center;
	width: 100%; max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-space-3); }
.ws-mk-hero__content { max-width: 420px; }
.ws-mk-hero__title { color: var(--ws-white); font-size: clamp(2.05rem, 3.2vw, 3.1rem); line-height: 1.1; font-weight: var(--ws-fw-bold); margin-bottom: var(--ws-space-2); }
.ws-mk-hero__text { color: rgba(255,255,255,0.9); font-size: var(--ws-fs-base); max-width: 40ch; margin: 0; }
.ws-mk-hero__media { justify-self: end; }
.ws-mk-hero__media img { width: 100%; height: auto; max-width: 680px; }
/* Block-authored sections: this install wraps every group's children in a
   .wp-block-group__inner-container. Collapse that wrapper with display:contents
   so the children participate directly in the parent's grid/flex. This lets the
   hand-authored section CSS (written for a direct-child structure) work whether a
   section is raw HTML or native blocks — no per-section patches needed. */
[class*="ws-mk-"] > .wp-block-group__inner-container { display: contents; }
[class*="ws-mk-"] .wp-block-image { margin: 0; }
.ws-mk-hero__media .wp-block-image img { max-width: 680px; width: 100%; height: auto; }
.ws-mk-hero__actions { display: flex; gap: var(--ws-space-2); flex-wrap: wrap; margin-top: var(--ws-space-3); }
.ws-mk-hero__actions .ws-btn--ghost { background: transparent; color: var(--ws-white); border-color: rgba(255,255,255,0.6); }
.ws-mk-hero__actions .ws-btn--ghost:hover { background: var(--ws-white); color: var(--ws-indigo); }

/* ---------- 1b. TRUST STRIP (light band under hero) ---------- */
.ws-mk-trust { background: var(--ws-surface); padding-block: var(--ws-space-3); }
.ws-mk-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ws-space-3); }
.ws-mk-trust__item { display: flex; align-items: center; gap: var(--ws-space-2); }
.ws-mk-trust__icon { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--ws-radius-sm); background: var(--ws-white); color: var(--ws-indigo); box-shadow: var(--ws-shadow); }
.ws-mk-trust__icon svg { width: 18px; height: 18px; }
.ws-mk-trust__label { font-weight: var(--ws-fw-semibold); color: var(--ws-indigo); font-size: var(--ws-fs-sm); }

/* ---------- 2. SERVICE / CATEGORY GRID ---------- */
.ws-mk-services { background: var(--ws-white); }
.ws-mk-services__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ws-space-3); }
/* Category tiles ARE provider cards: the markup carries .ws-provider-card, so the
   box (white, hairline border, radius, shadow, padding, centred) has exactly one
   definition — the one in main.css used by the /utility/ and /broadband/ deal
   cards. Nothing here may restate background, border, radius, shadow or padding,
   or the two will drift apart again. These rules only lay out the icon and title
   inside the card. There is deliberately no hover lift or shadow change: the
   tiles must sit as flat as the deal cards do. */
/* height:auto lets the flex line stretch every tile to the tallest in its row
   (the provider card's own height:100% would otherwise cancel that and leave
   two-line titles hanging lower than their neighbours). */
.ws-mk-services__grid > .ws-mk-tile { flex: 0 1 calc(25% - var(--ws-space-3)); height: auto; }
.ws-mk-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto var(--ws-space-2); color: var(--ws-indigo); }
.ws-mk-card__icon svg { width: 46px; height: 46px; }
.ws-mk-card__title { font-size: var(--ws-fs-md); margin: 0; }
a.ws-mk-tile { text-decoration: none; cursor: pointer; }
a.ws-mk-tile .ws-mk-card__title { font-weight: var(--ws-fw-bold); color: var(--ws-indigo); transition: color .15s ease; }
a.ws-mk-tile:hover .ws-mk-card__title,
a.ws-mk-tile:focus-visible .ws-mk-card__title { color: var(--ws-cta); }

/* ---------- 3. BRAND LOGOS BAND ---------- */
.ws-mk-brands { background: var(--ws-success); color: var(--ws-white); }
.ws-mk-brands .ws-mk-section__title { color: var(--ws-white); font-size: var(--ws-fs-lg); }
/* All logos sit on a single row: no wrap, and each logo is capped so 8 of them
   plus the gaps fit inside the 1200px container (8x150 + 7x24 = 1368 worst case,
   but the logos' aspect ratios keep the real row well under the 1152 available). */
.ws-mk-brands__row { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: var(--ws-space-3); }
.ws-mk-brands__row img { flex: 0 1 auto; min-width: 0; height: 88px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; }

/* ---------- 4. MEDIA + TEXT (why people use / how it works) ---------- */
.ws-mk-media { background: var(--ws-surface); }
.ws-mk-media .wp-block-media-text { gap: var(--ws-space-5); align-items: center; }
.ws-mk-media .wp-block-media-text__content { padding: 0; }
.ws-mk-media h2 { font-size: var(--ws-fs-2xl); }
.ws-mk-media img { border-radius: var(--ws-radius-card); }

/* ---------- 5. STEP-BY-STEP ---------- */
.ws-mk-steps { background: #B1D1A0; }
.ws-mk-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ws-space-3); counter-reset: step; }
.ws-mk-step { background: var(--ws-white); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow);
	padding: var(--ws-space-4) var(--ws-space-3); text-align: center; position: relative; }
.ws-mk-step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%; background: var(--ws-cta-soft); color: var(--ws-cta-dark); border: 2px solid var(--ws-cta);
	font-weight: 700; font-size: 1.6rem; margin-bottom: var(--ws-space-2); }
.ws-mk-step__title { font-size: var(--ws-fs-md); margin-bottom: var(--ws-space-1); }
.ws-mk-step__text { color: var(--ws-muted-2); font-size: var(--ws-fs-sm); margin: 0; }
/* Hand-drawn numbered badge images (Layer_1/2/3.png) replace the CSS counter when present. */
.ws-mk-step__num { display: block; width: 72px; height: auto; margin: 0 auto var(--ws-space-2); }
.ws-mk-step:has(.ws-mk-step__num)::before { content: none; }

/* ---------- 6. WHY USE US ---------- */
.ws-mk-why { background: var(--ws-white); }
.ws-mk-why__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ws-space-5); align-items: center;
	width: 100%; max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-space-3); }
.ws-mk-why__list { list-style: none; padding: 0; margin: var(--ws-space-3) 0 0; display: grid; gap: var(--ws-space-2); }
.ws-mk-why__list li { position: relative; padding-left: 2em; font-size: var(--ws-fs-lead); }
.ws-mk-why__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ws-success); font-weight: 700; }
/* Icon variant: each bullet carries its own brand icon (mirrors live "Why Use Us?"). */
.ws-mk-why__list--icons { gap: var(--ws-space-3); }
.ws-mk-why__list--icons li { padding-left: 0; display: flex; align-items: center; gap: 0.75em; }
.ws-mk-why__list--icons li::before { content: none; }
.ws-mk-why__icon { flex: 0 0 auto; width: 25px; height: 26px; line-height: 0; }
.ws-mk-why__icon svg { display: block; width: 100%; height: 100%; }
.ws-mk-why__media img { width: 100%; height: auto; }
/* Block-authored why/media sections: same inner-container handling as the hero. */
.ws-mk-why__inner:has(> .wp-block-group__inner-container) { display: block; }
.ws-mk-why__inner > .wp-block-group__inner-container {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--ws-space-5); align-items: center;
}
.ws-mk-why__media .wp-block-image { margin: 0; }

/* ---------- 7. FAQ (light lavender band, white cards, 2-up grid — matches live) ---------- */
.ws-mk-faq { background: #D6BED8; color: var(--ws-ink); padding-bottom: 200px; }
.ws-mk-faq .ws-mk-section__title { color: #1a1a1a; }
/* Single centered column: with one item open at a time, this reads cleanly and
   avoids the empty-cell gap a 2-column grid leaves beside an expanded answer. */
.ws-mk-faq__list { max-width: 780px; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: var(--ws-space-2); align-items: start; }
.ws-mk-faq__item { background: var(--ws-white); border: 1px solid var(--ws-border); border-radius: var(--ws-radius-card); padding: 0; box-shadow: var(--ws-shadow); }
.ws-mk-faq__item summary { cursor: pointer; padding: var(--ws-space-3); font-weight: var(--ws-fw-semibold); font-size: var(--ws-fs-base); color: var(--ws-indigo);
	list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--ws-space-2); }
.ws-mk-faq__item summary::-webkit-details-marker { display: none; }
.ws-mk-faq__item summary::after { content: "+"; font-size: 1.4em; line-height: 1; flex: 0 0 auto; color: var(--ws-cta); }
.ws-mk-faq__item[open] summary::after { content: "–"; }
/* Answer body: pad the block once (inline always, bottom only on the last
   child) and use tight, even margins so multi-paragraph / list answers don't
   accumulate big vertical gaps. */
.ws-mk-faq__item > *:not(summary) { padding: 0 var(--ws-space-3); color: var(--ws-muted-2); margin-block: 0; }
.ws-mk-faq__item > summary + * { padding-top: var(--ws-space-1); }
.ws-mk-faq__item > *:not(summary):last-child { padding-bottom: var(--ws-space-3); }
.ws-mk-faq__item p { margin: 0 0 0.6em; }
.ws-mk-faq__item p:last-child { margin-bottom: 0; }
.ws-mk-faq__item ul { margin: 0 0 0.6em; padding-left: 1.25rem; }
.ws-mk-faq__item li { margin: 0.2em 0; }
/* Smooth expand/collapse. Progressive enhancement via ::details-content +
   interpolate-size; browsers lacking them fall back to the native instant
   toggle (no regression). The + / – marker also eases. */
.ws-mk-faq__list { interpolate-size: allow-keywords; }
.ws-mk-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 280ms ease, content-visibility 280ms allow-discrete;
}
.ws-mk-faq__item[open]::details-content { block-size: auto; }
.ws-mk-faq__item summary::after { transition: transform 200ms ease; }
@media (prefers-reduced-motion: reduce) {
	.ws-mk-faq__item::details-content { transition: none; }
}
@media (max-width: 760px) { .ws-mk-faq__list { grid-template-columns: 1fr; } }

/* ---------- 8. CTA (free resources): rounded card with bg photo + overlay, inset on the surface band (matches live) ---------- */
/* flow-root stops the card's negative margin-top from collapsing through and
   dragging the white background up over the pink FAQ band — the card must
   straddle the pink/white boundary ~50/50 (matches live). */
.ws-mk-cta { background: var(--ws-white); padding-block: 0 var(--ws-space-6); display: flow-root; }
.ws-mk-cta .ws-mk__inner { background-image: linear-gradient(rgba(26,20,73,0.55), rgba(26,20,73,0.55)), url("/wp-content/uploads/2025/11/photovoltaics-factory-manager-meeting-with-investor-talking-scaled-1.jpg");
	background-size: cover; background-position: top center; border-radius: 22px; padding: var(--ws-space-6) var(--ws-space-5); color: var(--ws-white); text-align: left;
	margin-top: -160px; position: relative; }
.ws-mk-cta .ws-mk-section__head { text-align: left; max-width: none; margin: 0 0 var(--ws-space-2); }
.ws-mk-cta .ws-mk-section__title { color: var(--ws-white); }
.ws-mk-cta__text { color: rgba(255,255,255,0.9); max-width: 60ch; margin: 0 0 var(--ws-space-3); }
.ws-mk-cta .ws-btn--cta { background: var(--ws-white); border: 0; color: var(--ws-ink); }
.ws-mk-cta .ws-btn--cta:hover { background: rgba(255,255,255,0.88); color: var(--ws-ink); }

/* ---------- 9. SUGGESTED GUIDES ---------- */
.ws-mk-guides { background: var(--ws-white); }
.ws-mk-guides__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ws-space-3); }
.ws-mk-guide { background: var(--ws-white); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); overflow: hidden; display: flex; flex-direction: column; }
.ws-mk-guide__media { aspect-ratio: 16/10; overflow: hidden; }
.ws-mk-guide__media img { width: 100%; height: 100%; object-fit: cover; }
.ws-mk-guide__body { padding: var(--ws-space-3); display: flex; flex-direction: column; gap: var(--ws-space-1); flex: 1; }
.ws-mk-guide__tag { align-self: flex-start; background: var(--ws-indigo-soft); color: var(--ws-indigo); font-size: var(--ws-fs-xs);
	font-weight: var(--ws-fw-semibold); padding: 2px 10px; border-radius: var(--ws-radius-pill); }
.ws-mk-guide__title { font-size: var(--ws-fs-base); margin: 0; }
.ws-mk-guide__title a { text-decoration: none; }

/* ---------- Suggested Guides — featured layout (large lead card + 2x2 grid), matches live ---------- */
.ws-mk-guides__featured { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 1fr; gap: var(--ws-space-3); }
.ws-mk-fguide { background: #EEF4F9; border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); overflow: hidden; display: flex; flex-direction: column; }
.ws-mk-fguide__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.ws-mk-fguide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-mk-fguide__body { padding: var(--ws-space-3); display: flex; flex-direction: column; gap: var(--ws-space-1); flex: 1; }
.ws-mk-fguide__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ws-mk-fguide__tags .ws-chip { background: var(--ws-cta); color: #fff; }
.ws-mk-fguide__tags .ws-chip--alt { background: var(--ws-indigo); color: #fff; }
.ws-mk-fguide__title { font-size: var(--ws-fs-base); margin: var(--ws-space-1) 0 0; }
.ws-mk-fguide__title a { color: #1a1a1a; text-decoration: none; }
.ws-mk-fguide__title a:hover { color: var(--ws-cta); }
.ws-mk-fguide__more { color: var(--ws-cta); font-weight: var(--ws-fw-semibold); font-size: var(--ws-fs-sm); text-decoration: none; margin-top: auto; padding-top: var(--ws-space-1); }
/* Lead card: col 1, spans both rows; image fills the extra height (absolute so it always renders). */
.ws-mk-fguide--lead { grid-column: 1; grid-row: 1 / span 2; }
.ws-mk-fguide--lead .ws-mk-fguide__media { aspect-ratio: auto; flex: 1; position: relative; min-height: 220px; }
.ws-mk-fguide--lead .ws-mk-fguide__media img { position: absolute; inset: 0; }
.ws-mk-fguide--lead .ws-mk-fguide__title { font-size: var(--ws-fs-lead); }
/* Intro teaser fills the taller lead card's body (no dead space). Lead card only. */
.ws-mk-fguide__intro { color: var(--ws-muted-2); font-size: var(--ws-fs-sm); line-height: 1.55; margin: var(--ws-space-1) 0 0; }
/* Keep the lead text block compact so the image absorbs the extra height — this
   removes the gap that appeared when the body was stretched to fill the 2 rows. */
.ws-mk-fguide--lead .ws-mk-fguide__body { flex: 0 0 auto; }
.ws-mk-fguide--lead .ws-mk-fguide__more { margin-top: var(--ws-space-2); }
@media (max-width: 880px) {
	.ws-mk-guides__featured { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
	.ws-mk-fguide--lead { grid-column: 1 / -1; grid-row: auto; }
	.ws-mk-fguide--lead .ws-mk-fguide__media { aspect-ratio: 16 / 9; flex: none; position: static; }
	.ws-mk-fguide--lead .ws-mk-fguide__media img { position: static; }
}
@media (max-width: 560px) {
	.ws-mk-guides__featured { grid-template-columns: 1fr; }
}

/* ---------- Landing page header + embedded offers ---------- */
.ws-mk-landing-head { background: var(--ws-surface); padding-block: var(--ws-space-5) var(--ws-space-2); text-align: center; }
.ws-mk-landing-head__inner { max-width: 820px; }
.ws-mk-landing-head .ws-mk-section__lead { margin-inline: auto; }
.ws-mk-offers { background: var(--ws-surface); padding-block: var(--ws-space-3) var(--ws-space-6); }
.ws-mk-offers__title { text-align: center; margin-top: var(--ws-space-5); margin-bottom: var(--ws-space-4); }
.ws-mk-offers__empty { text-align: center; color: var(--ws-muted-2); margin: 0; padding-block: var(--ws-space-2); }

/* ---------- Lead form embedded in a marketing page ---------- */
.ws-mk .ws-lf-form { max-width: 720px; margin: 0 auto; padding: 0 var(--ws-space-3) var(--ws-space-6); }
.ws-mk-landing-head .ws-btn { margin-top: var(--ws-space-2); }

/* ---------- Thank-you + disclaimer ---------- */
.ws-mk-thanks { padding-block: var(--ws-space-6); }
.ws-mk-thanks .ws-btn { margin-top: var(--ws-space-1); }
.ws-mk-thanks .ws-mk-section__lead { margin: 0 0 var(--ws-space-2); font-size: var(--ws-fs-lead); line-height: 1.5; }
.ws-mk-thanks .ws-mk-landing-head__inner > p { max-width: 620px; margin: 0 auto var(--ws-space-3); }
.ws-mk-disclaimer { background: var(--ws-white); color: var(--ws-muted); }
.ws-mk-disclaimer .ws-container--text { margin-inline: auto; }
.ws-mk-disclaimer h2 { font-size: var(--ws-fs-md); }
.ws-mk-disclaimer p { font-size: var(--ws-fs-sm); }

/* ---------- Footer logo fix ----------
   Footer sits on indigo; the brand logo is a dark wordmark, so invert it to
   white and cap its width so it can't render cropped/oversized. */
.ws-footer__logo img,
.ws-footer__logo .custom-logo { max-height: 56px; width: auto; max-width: 240px; object-fit: contain; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ws-mk-guides__grid { grid-template-columns: repeat(2, 1fr); }
	.ws-mk-services__grid > .ws-mk-tile { flex-basis: calc(50% - var(--ws-space-3)); }
	.ws-mk-steps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.ws-mk-hero__inner,
	.ws-mk-why__inner { grid-template-columns: 1fr; gap: var(--ws-space-3); }
	.ws-mk-why__media { order: -1; }
	.ws-mk-section { padding-block: var(--ws-space-4); }
	.ws-mk-hero__title { font-size: var(--ws-fs-2xl); }
	.ws-mk-guides__grid { grid-template-columns: 1fr; }
	.ws-mk-services__grid > .ws-mk-tile { flex-basis: 100%; }
	/* The trust strip is a fixed 3-column grid, which does not fit a phone: the
	   labels crushed to 3-4 lines each and the third item ran past the viewport,
	   making the whole homepage scroll sideways. One per row on mobile. */
	.ws-mk-trust__grid { grid-template-columns: 1fr; gap: var(--ws-space-1); }
	/* Get one pressable thing into the first screen. The hero's 4.5rem block
	   padding and the stacked trust strip together pushed the first category
	   tile to 929px on a 390x860 phone — just past the fold — so the visitor met
	   a wall of copy before anything they could act on. The hero illustration is
	   only 161px, so it is not the cost and stays at full size. */
	.ws-mk-hero { padding-block: var(--ws-space-4); }
	.ws-mk-trust { padding-block: var(--ws-space-2); }
	/* 8 logos on one row is illegible on a phone — allow wrapping below this width. */
	.ws-mk-brands__row { flex-wrap: wrap; gap: var(--ws-space-3); }
	.ws-mk-brands__row img { height: 40px; max-width: 100px; }
	/* The band is a secondary trust signal; don't let it eat a whole screen. */
	.ws-mk-brands.ws-mk-section { padding-block: var(--ws-space-4); }
	/* The CTA ("Free Resources") card is pulled up by a negative margin so it
	   straddles the FAQ's lilac band and the white below it. The FAQ reserves room
	   for that pull with padding-bottom:200px — but the generic .ws-mk-section
	   rule above resets padding-block on mobile and wiped that reserve, so the
	   card landed on top of the last FAQ item. Restore a reserve that stays larger
	   than the pull, and keep the straddle proportional to the smaller screen.
	   The card IS .ws-mk__inner, so its own padding replaced the container's edge
	   padding and left it flush to the screen; inset it via the section instead. */
	.ws-mk-faq { padding-bottom: 140px; }
	.ws-mk-cta { padding-block: 0 var(--ws-space-5); padding-inline: var(--ws-space-2); }
	.ws-mk-cta .ws-mk__inner { margin-top: -100px; padding: var(--ws-space-4) var(--ws-space-3); }
	.ws-mk-media .wp-block-media-text { display: block; }
	.ws-mk-media .wp-block-media-text__media { margin-bottom: var(--ws-space-3); }
	/* Same thumb-sized hit area the resource cards get — this was the last control
	   on the site still under 32px on a phone. */
	.ws-mk-fguide__more { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =========================================================================
   Marketing pages — landing / lead-form / contact / thank-you /
   secured-loan(s) / PMI / red-ribbon. Added for live parity (block-content
   driven, free-ACF path). Reuses the ws-* tokens above.
   ========================================================================= */

/* Lead & contact forms (auto-injected by wesearch-leadforms after content):
   present as a clean white card by default. */
.ws-mk .ws-lf-form { background: var(--ws-white); border: 1px solid var(--ws-border); border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow); max-width: 720px; margin: var(--ws-space-4) auto var(--ws-space-6); padding: var(--ws-space-4) var(--ws-space-3); }
@media (max-width: 760px) { .ws-mk .ws-lf-form { padding: var(--ws-space-3); } }

/* Lead-form hero: 2-column — heading + benefits left, form card right (matches live). */
.ws-mk-leadform-hero__inner,
.ws-mk-hero--lead .ws-mk-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--ws-space-4); align-items: start; max-width: var(--ws-container); }
.ws-mk-leadform-hero .ws-mk-hero__content,
.ws-mk-hero--lead .ws-mk-hero__content { max-width: none; }
.ws-mk-leadform-hero .ws-mk-why__list { margin-top: var(--ws-space-2); }
.ws-mk-leadform-hero .ws-mk-why__list li { color: rgba(255,255,255,0.92); font-size: var(--ws-fs-base); }
.ws-mk-leadform-hero__benefits-title { color: var(--ws-white); font-weight: var(--ws-fw-bold); margin: var(--ws-space-3) 0 var(--ws-space-1); }
.ws-mk-leadform-hero__smallprint { font-size: var(--ws-fs-xs); color: rgba(255,255,255,0.7); margin-top: var(--ws-space-2); }
/* The lead form sits in the hero's right column as a white card. */
.ws-mk-hero__form .ws-lf-form { margin: 0; max-width: 100%; }
@media (max-width: 880px) {
	.ws-mk-leadform-hero__inner,
	.ws-mk-hero--lead .ws-mk-hero__inner { grid-template-columns: 1fr; }
}

/* Standalone lead hero with white-tick benefits (secured-loan, secured-loans). */
.ws-mk-hero--lead .ws-mk-hero__text { font-size: var(--ws-fs-lead); font-weight: var(--ws-fw-semibold); max-width: none; margin-bottom: var(--ws-space-3); }
.ws-mk-hero__benefits-title { font-weight: var(--ws-fw-semibold); color: var(--ws-white); margin: 0 0 var(--ws-space-2); }
.ws-mk-hero__list { list-style: none; padding: 0; margin: var(--ws-space-2) 0 var(--ws-space-3); display: grid; gap: var(--ws-space-2); }
.ws-mk-hero__list li { position: relative; padding-left: 1.9em; color: rgba(255,255,255,0.92); }
.ws-mk-hero__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ws-white); font-weight: 700; }
.ws-mk-leadhead { background: var(--ws-surface); text-align: center; }
.ws-mk-leadhead .ws-mk-section__lead { margin-inline: auto; }

/* secured-loans extra bands. */
.ws-mk-services--soft { background: #d8e6f3; }
.ws-mk-services--soft .ws-mk-tile { background: #eef0f7; border-color: transparent; }
/* Promo banner: same treatment as the homepage Free Resources CTA — the
   photovoltaics photo under a purple overlay in a rounded card that sits half
   over the section above it (flow-root stops the negative margin collapsing). */
.ws-mk-promo { background: var(--ws-white); padding-block: 0 var(--ws-space-6); display: flow-root; }
.ws-mk-promo__inner {
	display: flex; justify-content: center; text-align: center;
	background-image: linear-gradient(rgba(26,20,73,0.55), rgba(26,20,73,0.55)), url("/wp-content/uploads/2025/11/photovoltaics-factory-manager-meeting-with-investor-talking-scaled-1.jpg");
	background-size: cover; background-position: center; border-radius: 22px;
	padding: var(--ws-space-6) var(--ws-space-5); color: var(--ws-white);
	margin-top: -80px; position: relative;
}
.ws-mk-promo__content { max-width: 640px; }
.ws-mk-promo__title { color: var(--ws-white); font-size: var(--ws-fs-2xl); margin-bottom: var(--ws-space-1); }
.ws-mk-promo__text { color: rgba(255,255,255,0.92); font-size: var(--ws-fs-lead); margin-bottom: var(--ws-space-3); }
.ws-mk-promo .ws-btn--cta { background: var(--ws-white); border: 0; color: var(--ws-ink); }
.ws-mk-promo .ws-btn--cta:hover { background: rgba(255,255,255,0.88); color: var(--ws-ink); }
@media (max-width: 760px) { .ws-mk-promo__content { max-width: 100%; } .ws-mk-promo__inner { margin-top: -48px; } }

/* Contact page (169): piggy illustration + indigo panel; the auto-injected form is painted indigo to read as one card. */
.ws-mk-contact { background: var(--ws-surface); padding-block: var(--ws-space-6); }
.ws-mk-contact__inner { width: 100%; max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-space-3);
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--ws-space-5); align-items: start; }
.ws-mk-contact__media img { width: 100%; height: auto; max-width: 520px; margin-inline: auto; display: block; }
.ws-mk-contact__panel { background: var(--ws-indigo); color: var(--ws-white); border-radius: var(--ws-radius-card); padding: var(--ws-space-4); }
.ws-mk-contact__title { color: var(--ws-white); font-size: var(--ws-fs-2xl); margin-bottom: var(--ws-space-2); }
.ws-mk-contact__lead { color: rgba(255,255,255,0.9); font-size: var(--ws-fs-lead); margin: 0; }
@media (max-width: 760px) { .ws-mk-contact__inner { grid-template-columns: 1fr; gap: var(--ws-space-3); }
	.ws-mk-contact__media { order: 2; } .ws-mk-contact__panel { order: 1; } }
body.page-id-169 .ws-mk-contact__panel .ws-lf-form { background: transparent; border: 0; box-shadow: none; padding: 0; margin: var(--ws-space-3) 0 0; max-width: 100%; }
body.page-id-169 .ws-mk-contact__panel .ws-lf-label,
body.page-id-169 .ws-mk-contact__panel .ws-lf-intro,
body.page-id-169 .ws-mk-contact__panel .ws-lf-group--consent label { color: var(--ws-white); }
body.page-id-169 .ws-mk-contact__panel .ws-lf-input { background: var(--ws-white); border-color: transparent; }
/* The SECURE/SSL footnote defaults to grey body text, which is near-illegible on
   the indigo panel — put it (and its lock glyph) in white like the rest of the
   panel, and keep the privacy link visible against the same background. */
body.page-id-169 .ws-mk-contact__panel .ws-lf-secure__note,
body.page-id-169 .ws-mk-contact__panel .ws-lf-secure__badge { color: var(--ws-white); }
body.page-id-169 .ws-mk-contact__panel .ws-lf-secure__badge svg { color: var(--ws-white); }
body.page-id-169 .ws-mk-contact__panel .ws-lf-group--consent label a,
body.page-id-169 .ws-mk-contact__panel .ws-lf-secure__note a { color: var(--ws-white); text-decoration: underline; }

/* broadband-landing featured offer card. */
.ws-mk-featured { background: #d8eef5; }
.ws-mk-featured__card { display: grid; grid-template-columns: auto 1fr; gap: var(--ws-space-4); align-items: center; max-width: 960px;
	margin-inline: auto; text-align: left; background: var(--ws-white); border: 1px solid var(--ws-border); border-radius: var(--ws-radius-card);
	box-shadow: var(--ws-shadow); padding: var(--ws-space-4); }
.ws-mk-featured__media img { display: block; width: 120px; height: auto; border-radius: var(--ws-radius-sm); }
.ws-mk-featured__title { color: var(--ws-indigo); font-size: var(--ws-fs-md); margin: 0 0 var(--ws-space-1); }
.ws-mk-featured__price { color: var(--ws-cta); font-weight: var(--ws-fw-semibold); font-size: var(--ws-fs-lead); margin: 0 0 var(--ws-space-2); }
.ws-mk-featured__text { color: var(--ws-muted-2); font-size: var(--ws-fs-sm); margin: 0 0 var(--ws-space-3); }
@media (max-width: 760px) { .ws-mk-featured__card { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* thank-you / opt-me-in. */
.ws-mk-thanks__optlogo { margin: var(--ws-space-3) 0 var(--ws-space-1); }
.ws-mk-thanks__optlogo img { max-width: 200px; height: auto; display: inline-block; }
.ws-mk-thanks__media { margin-top: var(--ws-space-5); }
.ws-mk-thanks__media img { max-width: 920px; width: 100%; height: auto; display: inline-block; }
@media (max-width: 760px) { .ws-mk-thanks__media img { max-width: 100%; } }

/* PMI cards-with-photo + light FAQ band. */
.ws-mk-card__media { display: block; margin: calc(-1 * var(--ws-space-3)) calc(-1 * var(--ws-space-3)) var(--ws-space-2);
	border-radius: var(--ws-radius-card) var(--ws-radius-card) 0 0; overflow: hidden; aspect-ratio: 16/10; }
.ws-mk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-mk-faq--light { background: var(--ws-indigo-soft); color: var(--ws-ink); }
.ws-mk-faq--light .ws-mk-section__title { color: var(--ws-ink); }
.ws-mk-faq--light .ws-mk-faq__item { background: var(--ws-white); border-color: var(--ws-border); box-shadow: var(--ws-shadow); }
.ws-mk-faq--light .ws-mk-faq__item summary { color: var(--ws-indigo); }
.ws-mk-faq--light .ws-mk-faq__item > *:not(summary) { color: var(--ws-muted-2); }
.ws-mk-why__actions { margin-top: var(--ws-space-3); }

/* red-ribbon thank-you green disclaimer + logos. */
.ws-mk-thanks__logo { display: block; width: auto; max-width: 220px; height: auto; margin: 0 auto var(--ws-space-3); }
.ws-mk-thanks__actions { margin: var(--ws-space-3) 0; }
.ws-mk-disclaimer--green { background: var(--ws-success); color: rgba(255,255,255,0.92); }
.ws-mk-disclaimer--green h2, .ws-mk-disclaimer--green h3, .ws-mk-disclaimer--green p, .ws-mk-disclaimer--green li { color: inherit; }
.ws-mk-disclaimer--green a { color: var(--ws-white); text-decoration: underline; }
.ws-mk-disclaimer__subhead { font-size: var(--ws-fs-md); margin-top: var(--ws-space-3); margin-bottom: var(--ws-space-2); }
.ws-mk-disclaimer__list { margin: 0 0 var(--ws-space-3); padding-left: 1.25em; display: grid; gap: var(--ws-space-2); font-size: var(--ws-fs-sm); }
.ws-mk-disclaimer__copyright { font-size: var(--ws-fs-xs); margin-top: var(--ws-space-3); opacity: 0.85; }

/* red-ribbon 3-up investment grid. */
.ws-mk-guides__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .ws-mk-guides__grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .ws-mk-guides__grid--3 { grid-template-columns: 1fr; } }

/* ---------- Page-scoped parity tweaks ---------- */
/* secured-loans (125): the 'How Does it Work' band is white on live, not the steps green. */
body.page-id-125 .ws-mk-steps { background: var(--ws-white); }
/* PMI (123): hero CTA is a ghost/outline button; section headings are near-black on live. */
body.page-id-123 .ws-mk-hero__actions .ws-btn--cta { background: transparent; border: 2px solid var(--ws-cta); color: var(--ws-cta); }
body.page-id-123 .ws-mk-hero__actions .ws-btn--cta:hover { background: var(--ws-cta); color: var(--ws-white); }
body.page-id-123 .ws-mk-services .ws-mk-section__title,
body.page-id-123 .ws-mk-why__text h2 { color: var(--ws-ink); }
/* red-ribbon (119): the disclaimer sits on the green band, like the thank-you variant. */
body.page-id-119 .ws-mk-disclaimer { background: var(--ws-success); color: rgba(255,255,255,0.92); }
body.page-id-119 .ws-mk-disclaimer h2,
body.page-id-119 .ws-mk-disclaimer h3,
body.page-id-119 .ws-mk-disclaimer p,
body.page-id-119 .ws-mk-disclaimer li { color: inherit; }

/* Centered hero variant (resource landing — no media column, centered like live). */
.ws-mk-hero--center .ws-mk-hero__inner { grid-template-columns: 1fr; text-align: center; }
.ws-mk-hero--center .ws-mk-hero__content { max-width: 760px; margin-inline: auto; }
.ws-mk-hero--center .ws-mk-hero__text { margin-inline: auto; }

/* Lead-form hero background photos (indigo overlay keeps the white text legible) — matches live. */
body.page-id-162 .ws-mk-leadform-hero,
body.page-id-152 .ws-mk-leadform-hero,
body.page-id-133 .ws-mk-hero--lead { background-size: cover; background-position: center; }
body.page-id-162 .ws-mk-leadform-hero { background-image: linear-gradient(rgba(58,38,99,0.82), rgba(58,38,99,0.82)), url("/wp-content/uploads/2025/11/Utilities.png"); }
body.page-id-152 .ws-mk-leadform-hero { background-image: linear-gradient(rgba(58,38,99,0.82), rgba(58,38,99,0.82)), url("/wp-content/uploads/2025/11/Broadband.png"); }
body.page-id-133 .ws-mk-hero--lead { background-image: linear-gradient(rgba(58,38,99,0.82), rgba(58,38,99,0.82)), url("/wp-content/uploads/2025/11/Background-scaled-1.png"); }

/* Marketing section headings are neutral near-black on live (not the indigo --ws-ink). */
.ws-mk-section__title { color: #1a1a1a; }
.ws-mk-why__text h2,
.ws-mk-media h2 { color: #1a1a1a; }

/* Home brand-logo band uses the same single-row sizing as the landing pages. */

/* Home category tiles sit on the tinted surface band, like the deal cards on
   the /utility/ and /broadband/ grids — a white card on white gave the 1px
   border nothing to read against. Scoped to home so the PMI and Secured Loans
   service bands keep their live-parity backgrounds. */
body.home .ws-mk-services { background: var(--ws-surface); }