/*
 * Workplace Mental Health page (/workplace-mental-health/) - scoped styles.
 * Everything is scoped under #wmh-canvas so it cannot touch the site chrome.
 * Palette: navy #1B2D4F (headings), forest #2E5D4B (CTA/links), teal tint
 * #E6F4F3 (panels). Fonts: DM Serif Display (headings), Work Sans (body).
 * WCAG AA: body text and buttons clear 4.5:1; hero text sits on a dark scrim.
 */

#wmh-canvas {
	--wmh-navy: #1B2D4F;
	--wmh-forest: #2E5D4B;
	--wmh-forest-dark: #234A3B;
	/* Teal for secondary/utility actions, so the forest CTA colour stays reserved
	   for real conversion actions. Deepened from the brand teal #2F8F76, which
	   only reaches 3.95:1 on white text and fails AA; this is 5.19:1. */
	--wmh-teal: #257A64;
	--wmh-teal-dark: #1C6552;
	--wmh-tint: #E6F4F3;
	--wmh-ink: #2A2E35;
	--wmh-muted: #5B6470;
	--wmh-line: #E3E7EC;
	font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--wmh-ink);
	background: #fff;
}
#wmh-canvas *,
#wmh-canvas *::before,
#wmh-canvas *::after { box-sizing: border-box; }

#wmh-canvas h1,
#wmh-canvas h2,
#wmh-canvas h3 {
	font-family: "DM Serif Display", Georgia, serif;
	color: var(--wmh-navy);
	font-weight: 400;
	line-height: 1.15;
}
#wmh-canvas p { line-height: 1.65; margin: 0 0 1.1em; }
#wmh-canvas a { color: var(--wmh-forest); text-decoration: underline; text-underline-offset: 2px; }
#wmh-canvas a:hover { color: var(--wmh-forest-dark); }
#wmh-canvas :focus-visible { outline: 3px solid var(--wmh-forest); outline-offset: 2px; }

/* ---------- Hero (branded-hero system, ported from inc/branded-hero.php for
   visual parity with the service pages; scoped + renamed .wmh-bhero*) ---------- */
#wmh-canvas .wmh-bhero {
	position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center;
	min-height: clamp(560px, 80vh, 720px); display: flex; align-items: center; justify-content: center;
	width: 100%; --bh-line: rgba(255,255,255,.58);
}
#wmh-canvas .wmh-bhero__img {
	position: absolute; inset: 0; z-index: 1; background-color: var(--wmh-navy);
	background-position: center 30%; background-size: cover; background-repeat: no-repeat;
	filter: saturate(.66) brightness(.72); transform: scale(1.02);
}
#wmh-canvas .wmh-bhero__veil {
	position: absolute; inset: 0; z-index: 2;
	background:
		radial-gradient(ellipse 64% 64% at 50% 50%, rgba(2,22,73,.26) 0%, rgba(2,22,73,0) 72%),
		linear-gradient(180deg, rgba(2,22,73,.60) 0%, rgba(2,22,73,.82) 100%);
}
#wmh-canvas .wmh-bhero__inner {
	position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;
	width: 100%; max-width: 880px; padding: 3.2rem 1.5rem; margin: 0 auto;
}
#wmh-canvas .wmh-bhero__symbol {
	width: 104px; height: 104px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--bh-line); border-radius: 50%;
}
#wmh-canvas .wmh-bhero__symbol img { width: 62px; height: 62px; object-fit: contain; display: block; margin: 0; }
#wmh-canvas .wmh-bhero__content {
	position: relative; margin-top: 3rem; width: fit-content; max-width: min(92vw, 780px);
	border-top: 1px solid var(--bh-line); border-bottom: 1px solid var(--bh-line); padding: 2.25rem 1.5rem;
}
#wmh-canvas .wmh-bhero__content::before {
	content: ""; position: absolute; top: -3rem; left: calc(50% - .5px); width: 1px; height: 3rem; background: var(--bh-line);
}
#wmh-canvas .wmh-bhero__content--top { margin-top: 0; }
#wmh-canvas .wmh-bhero__content--top::before { display: none; }
#wmh-canvas .wmh-bhero__eyebrow {
	color: #CFE6DD; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 0.8rem;
	letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.7rem;
}
#wmh-canvas .wmh-bhero__h1 {
	font-family: "DM Serif Display", Georgia, serif; font-weight: 400; color: #fff;
	font-size: clamp(2rem, 4.4vw, 2.7rem); line-height: 1.08; margin: 0; padding: 0;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
@media (min-width: 900px) { #wmh-canvas .wmh-bhero__h1 { white-space: nowrap; } }
#wmh-canvas .wmh-bhero__lede {
	max-width: 52ch; margin: 1.25rem auto 0; padding: 0; font-family: "Work Sans", sans-serif;
	font-size: clamp(1.02rem, 1.55vw, 1.14rem); line-height: 1.6; color: rgba(255,255,255,.95);
	font-weight: 400; text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
#wmh-canvas .wmh-bhero__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 1.5rem; }
#wmh-canvas .wmh-bhero__cta {
	display: inline-block; background: var(--wmh-forest); color: #fff; text-decoration: none;
	font-family: "Work Sans", sans-serif; font-weight: 600; font-size: .95rem;
	padding: .75rem 1.6rem; border-radius: 6px; transition: background .15s ease; border: 0;
}
#wmh-canvas .wmh-bhero__cta:hover { background: var(--wmh-forest-dark); color: #fff; }
#wmh-canvas .wmh-bhero__cta-sub { font-family: "Work Sans", sans-serif; font-size: .82rem; color: rgba(255,255,255,.8); margin: 0; }
#wmh-canvas .wmh-bhero__nav { margin-top: 3rem; position: relative; }
#wmh-canvas .wmh-bhero__nav::before { content: ""; position: absolute; top: -3rem; left: calc(50% - .5px); width: 1px; height: 3rem; background: var(--bh-line); }
#wmh-canvas .wmh-bhero__nav ul {
	display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--bh-line); border-radius: 6px; overflow: hidden; background: rgba(2,22,73,.18);
}
#wmh-canvas .wmh-bhero__nav li { border-left: 1px solid rgba(255,255,255,.22); margin: 0; padding: 0; }
#wmh-canvas .wmh-bhero__nav li:first-child { border-left: 0; }
#wmh-canvas .wmh-bhero__nav a {
	display: block; padding: .62rem 1.1rem; color: #fff; text-decoration: none;
	font-family: "Work Sans", sans-serif; font-size: .72rem; letter-spacing: .13rem; text-transform: uppercase; white-space: nowrap;
}
#wmh-canvas .wmh-bhero__nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
@media (max-width: 800px) {
	#wmh-canvas .wmh-bhero__nav ul { gap: .45rem; border: 0; border-radius: 0; overflow: visible; background: transparent; max-width: 100%; }
	#wmh-canvas .wmh-bhero__nav li { border: 1px solid var(--bh-line); border-radius: 6px; background: rgba(2,22,73,.30); }
	#wmh-canvas .wmh-bhero__nav li:first-child { border-left: 1px solid var(--bh-line); }
	#wmh-canvas .wmh-bhero__nav a { padding: .55rem .9rem; }
}
@media (max-width: 640px) {
	#wmh-canvas .wmh-bhero { min-height: clamp(480px, 66vh, 620px); }
	#wmh-canvas .wmh-bhero__inner { padding: 2.2rem 1.25rem; }
	#wmh-canvas .wmh-bhero__symbol { width: 90px; height: 90px; }
	#wmh-canvas .wmh-bhero__symbol img { width: 50px; height: 50px; }
	#wmh-canvas .wmh-bhero__content { max-width: 92vw; margin-top: 1.9rem; padding: 1.7rem 1rem; }
	#wmh-canvas .wmh-bhero__content::before { top: -1.9rem; height: 1.9rem; }
	#wmh-canvas .wmh-bhero__nav { margin-top: 1.9rem; }
	#wmh-canvas .wmh-bhero__nav::before { top: -1.9rem; height: 1.9rem; }
	#wmh-canvas .wmh-bhero__nav a { padding: .48rem .75rem; font-size: .64rem; letter-spacing: .09rem; }
}

/* ---------- Buttons ---------- */
#wmh-canvas .wmh-btn {
	display: inline-block;
	background: var(--wmh-forest);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.85rem 1.6rem;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}
#wmh-canvas .wmh-btn:hover { background: var(--wmh-forest-dark); color: #fff; }

/* ---------- Problem -> solved evidence band ---------- */
#wmh-canvas .wmh-evidence { border-left: 4px solid var(--wmh-forest); padding: 0.25rem 0 0.25rem 1.5rem; }
#wmh-canvas .wmh-evidence__problem { font-family: "DM Serif Display", Georgia, serif; color: var(--wmh-navy); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.25; margin: 0 0 0.85rem; }
#wmh-canvas .wmh-evidence__solved { font-size: 1.15rem; line-height: 1.6; color: var(--wmh-ink); margin: 0 0 0.85rem; }
#wmh-canvas .wmh-evidence__sources { font-size: 0.82rem; color: var(--wmh-muted); margin: 0; }
#wmh-canvas .wmh-cite { color: var(--wmh-muted); font-size: 0.72em; white-space: nowrap; }

/* ---------- Body + sections ---------- */
/* Canvas opens up on large screens so the media rows, the deck, the insurer bar
   and the contact block can use the width. Reading blocks are held back to a
   measure below, so a wide monitor never produces a long line. At 1120px each
   media-row text column lands around 10 to 12 words per line. */
#wmh-canvas .wmh-body {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}
/* The reading measure. Single-column prose stays centred and capped; anything
   two-column or visual keeps the full canvas. */
#wmh-canvas .wmh-evidence,
#wmh-canvas .wmh-coverage > .wmh-prose {
	max-width: 66ch;
	margin-left: auto;
	margin-right: auto;
}
#wmh-canvas .wmh-offer,
#wmh-canvas .wmh-faq__item {
	max-width: 74ch;
	margin-left: auto;
	margin-right: auto;
}
#wmh-canvas .wmh-section { margin: 0 0 clamp(2.5rem, 6vw, 3.75rem); }
#wmh-canvas .wmh-section > h2 {
	font-size: clamp(1.75rem, 3vw, 2.1rem);
	margin: 0 0 1.25rem;
	text-align: center;
}
#wmh-canvas .wmh-prose > p:last-child { margin-bottom: 0; }
#wmh-canvas .wmh-lead-in { font-weight: 600; color: var(--wmh-navy); }
#wmh-canvas ul { margin: 0 0 1.1em; padding-left: 1.25em; }
#wmh-canvas li { line-height: 1.6; margin: 0 0 0.55em; }

/* ---------- Offers (progressive-disclosure accordion) ---------- */
#wmh-canvas .wmh-offers > h2 { margin-bottom: 1.25rem; }
#wmh-canvas .wmh-offer {
	border: 1px solid var(--wmh-line);
	border-radius: 12px;
	background: #fff;
	/* "auto" left/right, not 0: this shorthand runs AFTER the reading-measure rule
	   above, so "margin: 0 0 .85rem" would reset the centring and drop the boxes
	   to the left of their centred H2. */
	margin: 0 auto 0.85rem;
	overflow: hidden;
}
#wmh-canvas .wmh-offer__title {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: "DM Serif Display", Georgia, serif;
	color: var(--wmh-navy);
	font-size: clamp(1.1rem, 2.4vw, 1.3rem);
	line-height: 1.25;
	padding: 1.05rem 1.4rem;
}
#wmh-canvas .wmh-offer__title::-webkit-details-marker { display: none; }
#wmh-canvas .wmh-offer__title::after {
	content: "+"; margin-left: auto; color: var(--wmh-forest); font-size: 1.5rem; line-height: 1; flex: 0 0 auto;
}
#wmh-canvas .wmh-offer[open] .wmh-offer__title::after { content: "\2212"; }
#wmh-canvas .wmh-offer__num {
	flex: 0 0 auto;
	width: 2rem; height: 2rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wmh-tint);
	color: var(--wmh-forest-dark);
	border-radius: 50%;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
}
/* Per-offer icon badge (replaces the number; SVG inherits forest colour). */
#wmh-canvas .wmh-offer__icon {
	flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wmh-tint); color: var(--wmh-forest-dark); border-radius: 50%;
}
#wmh-canvas .wmh-offer__icon svg { width: 1.35rem; height: 1.35rem; display: block; }

/* ---------- Interactive overview (click-to-load B2B presentation deck) ---------- */
#wmh-canvas .wmh-deck__lede { text-align: center; max-width: 62ch; margin: 0 auto 1.4rem; }
#wmh-canvas .wmh-deck__frame {
	position: relative; width: 100%; border-radius: 18px;
	overflow: hidden; border: 1px solid var(--wmh-line); background: #fff;
	box-shadow: 0 10px 34px rgba(4, 10, 22, .10);
}
#wmh-canvas .wmh-deck__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Facade: a page-native preview card. The real opening slide shows clean (no
   video-style scrim, no play button) and the control sits in a caption bar
   underneath, so this reads as page furniture instead of an embedded player. */
#wmh-canvas .wmh-deck__launch { display: block; text-decoration: none; color: inherit; }
#wmh-canvas .wmh-deck__shot {
	display: block; width: 100%; aspect-ratio: 16 / 10;
	background-image: var(--wmh-deck-poster);
	background-size: cover; background-position: center;
}
#wmh-canvas .wmh-deck__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding: 0.95rem 1.25rem; background: var(--wmh-tint); border-top: 1px solid var(--wmh-line);
}
#wmh-canvas .wmh-deck__bar-text { font-size: 0.98rem; font-weight: 600; color: var(--wmh-navy); }
#wmh-canvas .wmh-deck__bar-btn {
	display: inline-block; background: var(--wmh-teal); color: #fff; font-weight: 600;
	font-size: 0.9rem; padding: 0.55rem 1.2rem; border-radius: 8px; transition: background .15s ease;
}
#wmh-canvas .wmh-deck__launch:hover .wmh-deck__bar-btn { background: var(--wmh-teal-dark); }
#wmh-canvas .wmh-deck__hint { margin-top: 10px; font-size: 0.95rem; text-align: center; color: var(--wmh-muted); }
#wmh-canvas .wmh-deck__hint a { font-weight: 700; }
/* older browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 10) { #wmh-canvas .wmh-deck__shot { height: 0; padding-top: 62.5%; } }

/* Full-screen overlay for the deck. It is appended to <body> (outside #wmh-canvas) so it
   escapes any ancestor stacking/overflow context; these rules are intentionally UNSCOPED,
   and workplace.css only ever loads on this one template. */
.wmh-deck__overlay {
	position: fixed; inset: 0; z-index: 100000; background: rgba(9, 17, 33, .94);
	display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 2.5vw, 2rem);
}
.wmh-deck__stage {
	position: relative; width: min(97vw, calc((100vh - 4.5rem) * 1.6));
	aspect-ratio: 16 / 10; max-height: calc(100vh - 4.5rem);
	border-radius: 12px; overflow: hidden; background: #0f1a2e;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.wmh-deck__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
/* The theme's global button styles are more specific than a bare class, so these are
   forced: without them the close control renders as a square teal theme button. */
.wmh-deck__overlay .wmh-deck__close {
	position: absolute; top: 0.9rem; right: 1.1rem; z-index: 2;
	width: 2.75rem !important; height: 2.75rem !important; min-width: 0 !important;
	padding: 0 !important; margin: 0 !important; cursor: pointer;
	border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, .38) !important;
	background: rgba(255, 255, 255, .12) !important; box-shadow: none !important;
	color: #fff !important; font-size: 1.75rem !important; line-height: 1 !important;
	font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
	display: flex !important; align-items: center; justify-content: center; transition: background .15s ease;
}
.wmh-deck__overlay .wmh-deck__close:hover { background: rgba(255, 255, 255, .26) !important; }
@supports not (aspect-ratio: 16 / 10) { .wmh-deck__stage { height: calc(100vh - 4.5rem); } }
#wmh-canvas .wmh-offer__body { padding: 0 1.4rem 1.25rem; }
#wmh-canvas .wmh-offer__body > p:first-child { margin-top: 0; }
#wmh-canvas .wmh-offer__body > p:last-child,
#wmh-canvas .wmh-offer__body > ul:last-child { margin-bottom: 0; }

/* ---------- Coverage + insurer bar (copied from homepage, scoped) ---------- */
#wmh-canvas .insurance-grid-wrapper { text-align: center; padding: 0.75rem 0 0; }
/* Demoted to a small eyebrow so it does not read as a second H2 duplicating the
   section heading "Will your people's benefits cover it?". */
#wmh-canvas .insurance-grid-wrapper h3 {
	font-family: "Work Sans", sans-serif; font-weight: 700; color: var(--wmh-muted);
	font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem;
}
#wmh-canvas .insurance-subtext { font-size: 0.85rem; color: var(--wmh-muted); margin: 0 0 1.75rem; font-style: italic; }
#wmh-canvas .insurance-scroll-container { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.6rem; }
#wmh-canvas .insurance-grid { display: inline-block; text-align: center; min-width: 640px; }
#wmh-canvas .insurance-row { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
#wmh-canvas .insurance-row:nth-child(even) { margin-left: 40px; }
#wmh-canvas .insurance-item { width: 104px; text-align: center; flex-shrink: 0; }
#wmh-canvas .insurance-item img { max-height: 46px; width: auto; max-width: 96px; display: block; margin: 0 auto; object-fit: contain; }

/* ---------- Scope / safety callout ---------- */
#wmh-canvas .wmh-scope {
	background: var(--wmh-tint);
	border-radius: 12px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
}
#wmh-canvas .wmh-scope > h2 { margin-top: 0; }
#wmh-canvas .wmh-scope__list { list-style: none; margin: 0; padding: 0; }
#wmh-canvas .wmh-scope__list li { margin: 0 0 1rem; padding-left: 1.5rem; position: relative; }
#wmh-canvas .wmh-scope__list li:last-child { margin-bottom: 0; }
#wmh-canvas .wmh-scope__list li::before {
	content: ""; position: absolute; left: 0; top: 0.55em;
	width: 0.6rem; height: 0.6rem; border-radius: 50%;
	background: var(--wmh-forest);
}
#wmh-canvas .wmh-scope__list strong { color: var(--wmh-navy); }

/* ---------- Getting started ---------- */
#wmh-canvas .wmh-cta { text-align: center; }
#wmh-canvas .wmh-cta .wmh-prose { max-width: 52ch; margin: 0 auto 1.5rem; }
#wmh-canvas .wmh-signoff { font-family: "DM Serif Display", Georgia, serif; color: var(--wmh-navy); font-size: 1.2rem; }

/* ---------- FAQ accordion ---------- */
#wmh-canvas .wmh-faq__item { border-bottom: 1px solid var(--wmh-line); }
#wmh-canvas .wmh-faq__item:first-of-type { border-top: 1px solid var(--wmh-line); }
#wmh-canvas .wmh-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 2rem 1.1rem 0;
	position: relative;
	font-weight: 600;
	color: var(--wmh-navy);
	font-size: 1.05rem;
}
#wmh-canvas .wmh-faq__q::-webkit-details-marker { display: none; }
#wmh-canvas .wmh-faq__q::after {
	content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.4rem; color: var(--wmh-forest); line-height: 1;
}
#wmh-canvas .wmh-faq__item[open] .wmh-faq__q::after { content: "\2212"; }
#wmh-canvas .wmh-faq__a { padding: 0 0 1.1rem; }
#wmh-canvas .wmh-faq__a p { margin: 0; color: var(--wmh-ink); }

/* ---------- Contact (on-page form + info) ---------- */
#wmh-canvas .wmh-contact { background: var(--wmh-tint); border-radius: 12px; padding: clamp(1.5rem, 4vw, 2.25rem); scroll-margin-top: 90px; }
#wmh-canvas .wmh-contact > h2 { margin-top: 0; }
#wmh-canvas .wmh-contact > .wmh-prose { max-width: 62ch; }
#wmh-canvas .wmh-contact__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: stretch; margin-top: 1.5rem; }
#wmh-canvas .wmh-contact__main { display: flex; flex-direction: column; gap: 1.25rem; }
#wmh-canvas .wmh-contact__form .wpforms-container { margin: 0; }
#wmh-canvas .wmh-contact__info { background: #fff; border-radius: 10px; padding: 1.4rem 1.5rem; }
#wmh-canvas .wmh-contact__info h3 { font-size: 1.15rem; margin: 0 0 0.9rem; }
#wmh-canvas .wmh-contact__info p { font-size: 1rem; line-height: 1.5; margin: 0 0 0.9rem; }
#wmh-canvas .wmh-contact__info p:last-child { margin-bottom: 0; }
#wmh-canvas .wmh-contact__media { margin: 0; }
#wmh-canvas .wmh-contact__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 6px 24px rgba(27,45,79,.12); }
/* The old 940px break-out is gone: it existed only to escape the former 760px body
   cap, and at the current 1120px canvas it would make this section NARROWER than
   its neighbours. Contact now simply fills the canvas. */
/* Tablet + phone: stack (form gets full width, image becomes a band below it). */
@media (max-width: 900px) {
	#wmh-canvas .wmh-contact__grid { grid-template-columns: 1fr; align-items: start; }
	#wmh-canvas .wmh-contact__media img { height: auto; max-height: 340px; }
}

/* ---------- Insurer bar: fits on desktop (no scroll); scrolls only on small screens ---------- */
@media (min-width: 769px) {
	#wmh-canvas .insurance-scroll-container { overflow-x: visible; }
	#wmh-canvas .insurance-grid { min-width: 0; display: block; }
	#wmh-canvas .insurance-row { flex-wrap: wrap; }
	#wmh-canvas .insurance-row:nth-child(even) { margin-left: 0; }
}

/* ---------- Anchor scroll offset (the on-page nav now lives inside the hero) ---------- */
#wmh-canvas .wmh-section[id] { scroll-margin-top: 92px; }

/* Short section intros read as a centered unit under their centered H2. */
#wmh-canvas .wmh-coverage > .wmh-prose,
#wmh-canvas .wmh-contact > .wmh-prose { text-align: center; margin-left: auto; margin-right: auto; }
#wmh-canvas .wmh-contact__opt { font-weight: 400; font-size: 0.82rem; color: var(--wmh-muted); }

/* ---------- Alternating media rows (image + text; service-page pattern) ----------
   The image FILLS the full height of the text block beside it (align-items:stretch +
   object-fit:cover), so each image matches its content block instead of floating short. */
#wmh-canvas .wmh-media-row {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.5rem); align-items: stretch;
}
/* The image must FILL the text column's height, never drive it. These are tall
   portraits (640x1480, 820x1200), so at a wide canvas their natural height far
   exceeds the text and they leave a gap. Absolute positioning makes the TEXT set
   the row height and the photo crop to fit, which holds at any width. */
#wmh-canvas .wmh-media-row__media {
	position: relative; margin: 0; border-radius: 12px; overflow: hidden;
	box-shadow: 0 6px 24px rgba(27, 45, 79, .10); min-height: 240px;
}
#wmh-canvas .wmh-media-row__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
#wmh-canvas .wmh-media-row--right .wmh-media-row__media { order: 2; }
/* These are tall portraits whose top half is empty sky, so the default centred
   crop shows sky and ridgeline. Anchor them to the bottom of the frame, where
   the shoreline, water and the tree actually are. */
#wmh-canvas .wmh-opening .wmh-media-row__media img,
#wmh-canvas .wmh-credibility .wmh-media-row__media img { object-position: center bottom; }
#wmh-canvas .wmh-media-row__text > *:first-child { margin-top: 0; }
#wmh-canvas .wmh-media-row__text > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
	#wmh-canvas .wmh-media-row { grid-template-columns: 1fr; gap: 1.25rem; }
	#wmh-canvas .wmh-media-row--right .wmh-media-row__media { order: 0; }
	/* Stacked: the photo returns to normal flow, capped so a tall portrait does
	   not become a full screen of scrolling on a phone. */
	#wmh-canvas .wmh-media-row__media { min-height: 0; }
	#wmh-canvas .wmh-media-row__media img { position: static; height: auto; max-height: 420px; }
}

/* ---------- "Keep reading" reveal (styled as a clear dropdown control) ---------- */
#wmh-canvas .wmh-reveal { margin-top: 0.75rem; }
#wmh-canvas .wmh-reveal > summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.55rem;
	font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 0.92rem; color: var(--wmh-forest-dark);
	padding: 0.5rem 0.95rem; border: 1px solid var(--wmh-forest); border-radius: 8px;
	background: var(--wmh-tint); transition: background 0.15s ease;
}
#wmh-canvas .wmh-reveal > summary::-webkit-details-marker { display: none; }
#wmh-canvas .wmh-reveal > summary:hover { background: #d7ede9; }
/* chevron (points down when closed, flips up when open) */
#wmh-canvas .wmh-reveal > summary::after {
	content: ""; width: 0.5rem; height: 0.5rem; margin-top: -0.22rem;
	border-right: 2px solid var(--wmh-forest); border-bottom: 2px solid var(--wmh-forest);
	transform: rotate(45deg); transition: transform 0.2s ease;
}
#wmh-canvas .wmh-reveal[open] > summary::after { transform: rotate(-135deg); margin-top: 0.12rem; }
#wmh-canvas .wmh-reveal[open] > summary { margin-bottom: 0.85rem; }
#wmh-canvas .wmh-reveal > p:last-child { margin-bottom: 0; }

/* ---------- Progressive-disclosure toggle (e.g. deeper credibility) ---------- */
#wmh-canvas .wmh-toggle { border-top: 1px solid var(--wmh-line); margin-top: 1.25rem; }
#wmh-canvas .wmh-toggle > summary { cursor: pointer; list-style: none; padding: 0.9rem 0; font-weight: 600; color: var(--wmh-forest-dark); position: relative; }
#wmh-canvas .wmh-toggle > summary::-webkit-details-marker { display: none; }
#wmh-canvas .wmh-toggle > summary::after { content: "+"; position: absolute; right: 0.25rem; color: var(--wmh-forest); font-size: 1.35rem; line-height: 1; }
#wmh-canvas .wmh-toggle[open] > summary::after { content: "\2212"; }

/* ---------- WPForms, scoped to THIS page only (/contact/ is untouched) ----------
   The B2B form's own theme config carries the brand colours (forest submit,
   10px input radius, navy labels). These rules cover what that config cannot:
   the page font inside inputs, the radio accent, focus rings, and spacing. */
/* WPForms drives its colours through custom properties set on #wpforms-<id>
   (specificity 1-0-0). Setting them on the form record did NOT take, because the
   form uses wpformsTheme "default", which ignores the stored colour values. So
   override the properties themselves here: this selector is 1-1-0 on the same
   element, so it wins cleanly without a single !important. */
#wmh-canvas .wpforms-container {
	--wpforms-button-background-color: var(--wmh-forest);
	--wpforms-button-border-color: var(--wmh-forest);
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-border-radius: 8px;
	--wpforms-field-border-radius: 10px;
	--wpforms-field-border-color: rgba(27, 45, 79, .18);
	--wpforms-field-text-color: var(--wmh-ink);
	--wpforms-label-color: var(--wmh-navy);
	--wpforms-label-sublabel-color: var(--wmh-muted);
	--wpforms-label-error-color: #A3322D;
	--wpforms-page-break-color: var(--wmh-forest);
}
#wmh-canvas .wpforms-container input[type="text"],
#wmh-canvas .wpforms-container input[type="email"],
#wmh-canvas .wpforms-container input[type="tel"],
#wmh-canvas .wpforms-container textarea,
#wmh-canvas .wpforms-container select {
	font-family: "Work Sans", sans-serif; font-size: 1rem; color: var(--wmh-ink);
}
#wmh-canvas .wpforms-container .wpforms-field-label {
	font-family: "Work Sans", sans-serif; font-weight: 600; color: var(--wmh-navy);
}
#wmh-canvas .wpforms-container .wpforms-field-sublabel,
#wmh-canvas .wpforms-container .wpforms-field-description {
	font-family: "Work Sans", sans-serif; color: var(--wmh-muted);
}
/* The default red asterisk is the only red on the page; mute it. */
#wmh-canvas .wpforms-container .wpforms-required-label { color: var(--wmh-muted); }
#wmh-canvas .wpforms-container input[type="radio"],
#wmh-canvas .wpforms-container input[type="checkbox"] { accent-color: var(--wmh-forest); }
#wmh-canvas .wpforms-container input:focus,
#wmh-canvas .wpforms-container textarea:focus { outline: 3px solid var(--wmh-forest); outline-offset: 1px; }
#wmh-canvas .wpforms-container textarea { min-height: 130px; }
#wmh-canvas .wpforms-container button[type="submit"] { font-family: "Work Sans", sans-serif; font-weight: 600; }
#wmh-canvas .wpforms-container button[type="submit"]:hover { background-color: var(--wmh-forest-dark) !important; }

/* ---------- Softer corners (the boxes read too square) ---------- */
#wmh-canvas .wmh-offer,
#wmh-canvas .wmh-media-row__media,
#wmh-canvas .wmh-contact__media img { border-radius: 16px; }
#wmh-canvas .wmh-scope,
#wmh-canvas .wmh-contact,
#wmh-canvas .wmh-deck__frame { border-radius: 18px; }
#wmh-canvas .wmh-contact__info { border-radius: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	#wmh-canvas .insurance-grid { min-width: 560px; }
	#wmh-canvas .insurance-item { width: 88px; }
	#wmh-canvas .insurance-item img { max-height: 38px; max-width: 78px; }
	#wmh-canvas .insurance-row:nth-child(even) { margin-left: 24px; }
	#wmh-canvas .wmh-offer__title { font-size: 1.15rem; }
}