/*
Theme Name:   Astra Child
Theme URI:    https://crescentwoundcare.com
Description:  Child theme for Crescent Wound Care. Custom CSS and PHP live
              here so they survive Astra parent-theme updates.
Author:       Crescent Wound Care
Template:     astra
Version:      3.69.1
Text Domain:  astra-child
*/

/* ===================================================================
   RESPONSIVE FIXES — PC / TABLET / MOBILE
   Every rule fixes a problem measured on the live site.
   Deliberately conservative: the Elementor design is untouched;
   only interaction ergonomics that were measurably wrong change.
   =================================================================== */


/* -------------------------------------------------------------------
   1. STOP iOS ZOOMING WHEN A FORM FIELD IS TAPPED
   Measured: inputs at 13px / 14px / 14.59px / 15px. iOS Safari
   force-zooms the page when a focused field is under 16px, stranding
   visitors mid-form. 16px is the documented threshold.
   Mobile/tablet only — desktop is untouched.
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	select,
	textarea {
		font-size: 16px !important;
	}
}


/* -------------------------------------------------------------------
   2. FINGER-SIZED TAP TARGETS
   44x44 is the Apple HIG / WCAG 2.5.5 minimum. Padding and overlays
   grow the touch area without changing font size, so the design holds.
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-button,
	.ast-button,
	.wp-block-button__link,
	button[type="submit"],
	input[type="submit"] {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Service-card CTAs ("Learn More ➔") are bare <a> tags inside
	   .svc-card, so generic button selectors never reached them.
	   Measured at 104x28 — raised to a 44px touch area with the text
	   size and card design left exactly as built. */
	.svc-card a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Carousel dots measured 13x13 — far too small for a fingertip.
	   An invisible overlay enlarges the hit area while the dot stays
	   visually 13px. Width is capped at 32px so neighbouring dots
	   don't overlap and steal each other's taps. */
	.svc-dots button {
		position: relative;
	}
	.svc-dots button::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 32px;
		height: 44px;
	}

	/* Mobile menu toggle measured 42x42 — just under the threshold. */
	.ast-mobile-menu-trigger-minimal,
	.menu-toggle,
	button.menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	/* Space stacked nav links so neighbours aren't mis-tapped. */
	.ast-mobile-popup-content .menu-item > a,
	.main-header-menu .menu-item > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}


/* -------------------------------------------------------------------
   3. NEVER LET MEDIA FORCE SIDEWAYS SCROLL
   The homepage currently relies on body{overflow-x:hidden} to mask
   content running past the viewport. That hides the symptom, but one
   oversized image on any other page would still break the layout.
   These are safety nets, not overrides.
   ------------------------------------------------------------------- */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Long URLs / unbroken words shouldn't stretch their container. */
@media (max-width: 767px) {
	p, li, h1, h2, h3, h4, h5, h6, td, dd {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* Wide tables scroll inside themselves rather than the whole page. */
@media (max-width: 1024px) {
	table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* -------------------------------------------------------------------
   4. LEGIBILITY ON PHONES
   Stops mobile browsers inflating text unpredictably in landscape.
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
	body {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
}


/* -------------------------------------------------------------------
   5. DELIBERATELY LEFT ALONE
   .skip-link.screen-reader-text renders at 1x1 by design — it is the
   keyboard "Skip to content" link and must stay visually hidden until
   focused; enlarging it would expose it to sighted users. The logo
   link is likewise left at its designed size, since forcing it to
   44px would shove the header layout around for no real gain.
   ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
   6. SUBSCRIBE BUTTON — WHITE FILL, BLACK LABEL
   The newsletter form (WPForms id 10) shipped with the plugin default
   #0067FF. It sits in a section whose background is #0F779A, so a
   white fill makes it the clear primary action on that band.

   Background stays white in every state — only the label colour moves,
   to #0F779A on hover.

   Contrast: black on white is 21:1; #0F779A on white is 5.09:1. Both
   clear WCAG AA (4.5:1), so the label stays legible in either state.
   ------------------------------------------------------------------- */
.wpforms-container button[type="submit"],
.wpforms-container button.wpforms-submit,
#wpforms-10 button.wpforms-submit,
button#wpforms-submit-10 {
	background-color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
	color: #000000 !important;
	transition: color 0.2s ease;
}

/* Hover / focus / active: fill is unchanged, only the label recolours. */
.wpforms-container button[type="submit"]:hover,
.wpforms-container button.wpforms-submit:hover,
#wpforms-10 button.wpforms-submit:hover,
button#wpforms-submit-10:hover,
button#wpforms-submit-10:focus,
button#wpforms-submit-10:active {
	background-color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
	color: #0F779A !important;
}

/* The button is white on a teal band, so a white focus ring would be
   invisible — outline in the teal instead, offset clear of the edge. */
button#wpforms-submit-10:focus-visible {
	outline: 2px solid #0F779A;
	outline-offset: 3px;
}


/* -------------------------------------------------------------------
   7. HEADER NAVIGATION — BRAND COLOUR
   Top-level menu items rendered #005EE9. That value is Astra's global
   link colour (--ast-global-color-1), applied through the site-wide
   rule "a, .page-title { color: var(--ast-global-color-1) }" — so it
   is NOT a menu-specific setting. Overriding the variable itself would
   recolour every link on the site, so this targets the header menu
   only, which is what was asked for.

   Child combinators (>) restrict this to top-level items; dropdown
   entries keep their existing #364151 and are untouched.

   #0F779A on white measures 5.09:1, clearing WCAG AA (4.5:1).
   ------------------------------------------------------------------- */
.main-header-menu > .menu-item > .menu-link,
.ast-nav-menu > .menu-item > .menu-link,
.main-header-menu > .menu-item > .menu-link .ast-icon,
.ast-mobile-popup-content .main-header-menu > .menu-item > .menu-link,
.elementor-nav-menu > li > a.elementor-item {
	color: #0F779A;
}

/* Hover / focus / current page — a darker shade so the interaction
   still registers against the new base colour. */
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item > .menu-link:focus,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-nav-menu > .menu-item > .menu-link:hover,
.ast-nav-menu > .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-content .main-header-menu > .menu-item > .menu-link:hover,
.elementor-nav-menu > li > a.elementor-item:hover,
.elementor-nav-menu > li > a.elementor-item.elementor-item-active {
	color: #0C6180;
}


/* -------------------------------------------------------------------
   8. EDUCATION PAGE
   Full rebuild of crescentwoundcare.com/education/ on this site.
   Copy is reproduced verbatim; the layout is rebuilt rather than
   copied, so it uses this site's brand colour and is fluid at every
   width instead of relying on the source's fixed Bootstrap grid.
   ------------------------------------------------------------------- */

/* --- shared layout primitives --- */
.cwc-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.cwc-wrap--narrow { max-width: 860px; }

.cwc-band { padding: clamp(2.75rem, 7vw, 5rem) 0; }
.cwc-band--tint { background: #F4FAFD; }
.cwc-band--stats { background: #0F779A; }
.cwc-band--cta { background: #EAF6FB; }

.cwc-h2 {
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.2;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 1rem;
}
.cwc-h2--center { text-align: center; }

.cwc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: #0F779A;
	margin: 0 0 0.6rem;
}

.cwc-body {
	font-size: clamp(1rem, 1.6vw, 1.05rem);
	line-height: 1.7;
	color: #364151;
	margin: 0 0 1rem;
}
.cwc-body--center { text-align: center; max-width: 75ch; margin-inline: auto; }

.cwc-grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.cwc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cwc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --- cards --- */
.cwc-card {
	background: #FFFFFF;
	border: 1px solid #E2ECF2;
	border-radius: 14px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: 0 2px 10px rgba(15, 119, 154, 0.06);
}
.cwc-card p { font-size: 0.97rem; line-height: 1.65; color: #364151; margin: 0; }
.cwc-card__h { font-size: 1.1rem; font-weight: 700; color: #0F172A; margin: 0 0 0.55rem; line-height: 1.3; }
.cwc-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: #0F779A;
	color: #FFFFFF;
	font-weight: 800;
	font-size: 0.95rem;
	margin-bottom: 0.9rem;
}
.cwc-card--icon img { width: 56px; height: auto; margin-bottom: 0.9rem; }

/* Tick lists reuse one drawn marker so cards, pricing and hero match. */
.cwc-ticks { list-style: none; margin: 1rem 0 0; padding: 0; }
.cwc-ticks li,
.cwc-price__list li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.45em;
	font-size: 0.93rem;
	color: #364151;
}
.cwc-ticks li::before,
.cwc-price__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background-color: #16A34A;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-size: 70% 70%;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- stats band --- */
.cwc-stats {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	text-align: center;
}
.cwc-stat img {
	width: 44px;
	height: auto;
	margin: 0 auto 0.6rem;
	display: block;
	/* The source icons are black line art on a transparent background.
	   brightness(0) flattens them to solid black while keeping the alpha
	   channel, then invert(1) flips that to white — so they read against
	   the teal band without needing a second set of image files. */
	filter: brightness(0) invert(1);
}
.cwc-stat__n {
	display: block;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.1;
}
.cwc-stat__n i { font-style: normal; opacity: 0.85; }
.cwc-stat__l { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.88); margin-top: 0.25rem; }

/* --- pricing cards --- */
.cwc-price,
.cwc-plan {
	background: #FFFFFF;
	border-radius: 16px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	max-width: 420px;
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	text-align: center;
	box-shadow: 0 8px 28px rgba(11, 34, 57, 0.12);
	position: relative;
}
.cwc-plan { margin-top: clamp(2rem, 5vw, 3rem); border: 2px solid #0F779A; }
.cwc-price__flag,
.cwc-plan__tag {
	display: inline-block;
	background: #16A34A;
	color: #FFFFFF;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.4em 1em;
	border-radius: 999px;
	margin-bottom: 0.9rem;
}
.cwc-plan__tag {
	background: #0F779A;
	position: absolute;
	top: -0.9rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
}
.cwc-plan__icon { width: 60px; height: auto; margin: 0.6rem auto 0.75rem; display: block; }
.cwc-price__title,
.cwc-plan__type { font-size: 1.35rem; font-weight: 800; color: #0F172A; margin: 0 0 0.5rem; }
.cwc-plan__name { font-weight: 600; color: #0F779A; margin: 0 0 0.5rem; }
.cwc-price__amounts { margin: 0 0 0.25rem; font-size: 1rem; color: #6B7A8C; }
.cwc-price__amounts s { opacity: 0.7; margin-right: 0.4rem; }
.cwc-price__amounts strong { font-size: clamp(2rem, 5vw, 2.75rem); color: #0F779A; font-weight: 800; }
.cwc-price__sub { font-size: 0.9rem; color: #6B7A8C; margin: 0 0 1.1rem; }
.cwc-price__list {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	text-align: left;
	display: inline-block;
}
.cwc-note {
	margin: clamp(1.5rem, 4vw, 2rem) auto 0;
	max-width: 75ch;
	text-align: center;
	font-size: 0.88rem;
	line-height: 1.65;
	color: #6B7A8C;
}

/* --- role pills --- */
.cwc-pills {
	list-style: none;
	margin: clamp(1.5rem, 4vw, 2rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
}
.cwc-pills li {
	background: #FFFFFF;
	border: 1px solid rgba(15, 119, 154, 0.28);
	border-radius: 999px;
	padding: 0.65em 1.25em;
	font-size: 0.95rem;
	font-weight: 600;
	color: #0F172A;
}

/* --- testimonials --- */
.cwc-quote {
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #E2ECF2;
	border-radius: 14px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: 0 2px 10px rgba(15, 119, 154, 0.06);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cwc-quote blockquote { margin: 0; font-size: 0.97rem; line-height: 1.7; color: #364151; }
.cwc-quote blockquote::before {
	content: "\201C";
	display: block;
	font-size: 2.5rem;
	line-height: 0.6;
	color: #0F779A;
	opacity: 0.5;
	margin-bottom: 0.4rem;
}
.cwc-quote figcaption { margin-top: auto; }
.cwc-quote__name { display: block; font-weight: 700; color: #0F172A; }
.cwc-quote__role { display: block; font-size: 0.87rem; color: #0F779A; }

/* --- numbered steps --- */
.cwc-steps {
	list-style: none;
	margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.cwc-steps li {
	background: #FFFFFF;
	border: 1px solid #E2ECF2;
	border-radius: 14px;
	padding: clamp(1.25rem, 3vw, 1.6rem);
	text-align: center;
	box-shadow: 0 2px 10px rgba(15, 119, 154, 0.06);
}
.cwc-steps img { width: 52px; height: auto; margin: 0 auto 0.75rem; display: block; }
.cwc-steps__n {
	display: block;
	font-size: 0.8rem;
	font-weight: 800;
	color: #0F779A;
	letter-spacing: 0.08em;
	margin-bottom: 0.3rem;
}
.cwc-steps h3 { font-size: 1.02rem; font-weight: 700; color: #0F779A; margin: 0 0 0.45rem; }
.cwc-steps p { font-size: 0.92rem; line-height: 1.6; color: #364151; margin: 0; }

/* --- accreditation logos --- */
.cwc-accred {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
	justify-content: center;
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}
.cwc-accred img { max-width: 190px; width: 100%; height: auto; }

/* --- FAQ accordion --------------------------------------------------
   Built on native <details>/<summary>, so it opens and closes with no
   JavaScript at all and still works if scripts fail to load. The
   default disclosure triangle is replaced with a chevron that rotates.
   -------------------------------------------------------------------- */
.cwc-faq { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.cwc-faq__item {
	background: #FFFFFF;
	border: 1px solid #E2ECF2;
	border-radius: 12px;
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.cwc-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: #0F172A;
	line-height: 1.4;
	position: relative;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.cwc-faq__item summary::-webkit-details-marker { display: none; }
.cwc-faq__item summary::after {
	content: "";
	position: absolute;
	right: 1.15rem;
	top: 50%;
	width: 0.7em;
	height: 0.7em;
	margin-top: -0.35em;
	border-right: 2.5px solid #0F779A;
	border-bottom: 2.5px solid #0F779A;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.cwc-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -0.15em; }
.cwc-faq__item summary:hover { background: #F4FAFD; }
.cwc-faq__item summary:focus-visible { outline: 2px solid #0F779A; outline-offset: -2px; }
.cwc-faq__a { padding: 0 1.25rem 1.15rem; }
.cwc-faq__a p, .cwc-faq__a li { font-size: 0.97rem; line-height: 1.7; color: #364151; }
.cwc-faq__a p { margin: 0 0 0.6rem; }
.cwc-faq__a ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.cwc-faq__a li { margin-bottom: 0.3rem; }
.cwc-faq__a a { color: #0F779A; }

/* --- hero (kept from the first build) --- */
.cwc-cert-hero {
	background: #EAF6FB;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.cwc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #0F779A;
	color: #FFFFFF;
	font-weight: 700;
	font-size: clamp(0.8rem, 1.6vw, 0.95rem);
	line-height: 1.2;
	padding: 0.7em 1.2em;
	border-radius: 999px;
}
.cwc-badge__icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }
.cwc-cert-title {
	margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
	font-size: clamp(1.9rem, 5vw, 3.25rem);
	line-height: 1.15;
	font-weight: 800;
	/* One colour across the whole heading: the client asked for the first
	   half to match the teal the second half already used, rather than the
	   near-black it had. The __accent span below now restates this rather
	   than contrasting with it, and is left in place because the page
	   markup still carries the class. */
	color: #0F779A;
}
.cwc-cert-title__accent { color: #0F779A; }
.cwc-cert-lede,
.cwc-cert-intro {
	margin: clamp(0.9rem, 2vw, 1.4rem) 0 0;
	font-size: clamp(1rem, 1.6vw, 1.05rem);
	line-height: 1.6;
	color: #364151;
	max-width: 70ch;
}
.cwc-cert-list {
	list-style: none;
	margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
	padding: 0;
	max-width: 80ch;
}
.cwc-cert-list li {
	position: relative;
	padding-left: 2.1em;
	margin-bottom: 0.85em;
	font-size: clamp(1rem, 1.6vw, 1.05rem);
	line-height: 1.55;
	color: #364151;
}
.cwc-cert-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background-color: #16A34A;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-size: 70% 70%;
	background-position: center;
	background-repeat: no-repeat;
}
.cwc-cert-list strong { color: #0F172A; font-weight: 700; }
.cwc-cert-cta { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.cwc-cert-cta--center { text-align: center; }
.cwc-cert-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.85em 1.9em;
	background: #0F779A;
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: clamp(0.95rem, 1.6vw, 1rem);
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.cwc-cert-btn:hover,
.cwc-cert-btn:focus { background: #0C6180; color: #FFFFFF !important; }
.cwc-cert-btn:focus-visible { outline: 2px solid #0F779A; outline-offset: 3px; }

/* -------------------------------------------------------------------
   9. EDUCATION PAGE — HIDE THE THEME PAGE TITLE
   The page title is disabled natively via Astra's "site-post-title"
   post meta, which removes the element from the markup entirely.

   This rule is a deliberate fallback: that meta lives in the database,
   which is not version-controlled, so if the database is restored or
   the meta is cleared the title would reappear. This keeps it hidden.

   The hero heading is the page's h1 — promoted from h2 once the theme
   title was removed, so the page still has exactly one h1.
   ------------------------------------------------------------------- */
.page-id-2011 .entry-header.ast-header-without-markup {
	display: none;
}


/* -------------------------------------------------------------------
   11. HOMEPAGE NEWSLETTER — WHITE LOGO WATERMARK
   The newsletter band carries the logo as a ::before background overlay.
   The artwork is the dark/teal logo, which sits almost invisibly on the
   #0F779A band behind it.

   brightness(0) flattens it to solid black while preserving the alpha
   channel; invert(1) then flips that to white. Same approach as the
   stats icons, so there is still only one logo file to maintain rather
   than a separate white copy that can fall out of sync.

   Targeted by Elementor's generated element class. That class is stable
   while the section exists, but Elementor will mint a new one if the
   section is deleted and rebuilt — if the watermark ever returns to dark,
   this selector is what needs repointing.
   ------------------------------------------------------------------- */
.elementor-element-74e4305::before {
	filter: brightness(0) invert(1);
}



/* -------------------------------------------------------------------
   13. STUDENT REGISTRATION
   Tutor ships a single-column white form on a plain page, which runs to
   roughly twice the height of the legacy screen. This lays the fields out
   as a two-column grid inside a branded card, so the whole form fits
   without scrolling on a laptop.

   Tutor's First Name / Last Name inputs are hidden rather than removed:
   they carry `required`, and a hidden empty required field makes browsers
   refuse to submit. They are filled from the Full Name field in JS.

   No photograph is used behind the form. The site's own media is clinical
   procedure imagery, which reads badly behind a sign-up form, so the
   backdrop is built from brand colour.
   ------------------------------------------------------------------- */

/* --- the photographic field behind the card ---
   The image is the one the legacy register.php used, copied across from
   that site over FTP.

   It is painted on a fixed, viewport-sized layer rather than on
   .site-content. Sized to the container, "cover" scales the 1400x788
   photo to whatever height the form happens to be — and the
   registration form is tall, so the sides got cropped away until only a
   sleeve was visible. Pinned to the viewport, the framing stays the same
   no matter how long the form is.

   A teal wash sits over it so white cards and labels stay readable
   wherever they fall on the image. */
.cwc-auth-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(135deg, rgba(15, 119, 154, 0.80) 0%, rgba(10, 80, 104, 0.85) 100%),
		url("/wp-content/themes/astra-child/images/auth-bg.jpg");
	background-size: cover;
	background-position: center 22%;
	background-repeat: no-repeat;
}

.cwc-auth-page,
.cwc-auth-page .site-content {
	background-color: transparent !important;
}

.cwc-auth-page .site-content {
	padding: clamp(1.5rem, 4vw, 3rem) 0;
}

/* Astra paints these white on top of .site-content, which hides the
   background entirely. They have to be cleared for it to show. */
.cwc-auth-page .ast-container,
.cwc-auth-page #primary,
.cwc-auth-page .entry-content,
.cwc-auth-page .ast-article-single {
	background: transparent !important;
	box-shadow: none !important;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* The theme page title is redundant beside the card's own heading. */
.page-id-2430 .entry-header {
	display: none;
}

/* --- the card --- */
.page-id-2430 #tutor-registration-form {
	max-width: 720px;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(10, 80, 104, 0.26);
	padding: clamp(1.4rem, 3vw, 2.1rem) !important;
}

/* Logo and heading, injected so no template override is needed. */
/* --- two-column grid --- */
.page-id-2430 .tutor-form-wrap,
.page-id-2430 #tutor-registration-form > .tutor-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
	align-items: start;
}

.page-id-2430 .tutor-form-group,
.page-id-2430 .tutor-password-field {
	margin-bottom: 0.55rem;
	min-width: 0;
}

/* Fields that read better full width. */
.page-id-2430 .cwc-col-full,
.page-id-2430 .tutor-form-col-12 {
	grid-column: 1 / -1;
}

/* --- hide Tutor's split name fields (JS keeps them filled) --- */
/* The input sits inside a .tutor-input-field wrapper, so this must be a
   descendant match — a child combinator here silently matches nothing. */
.page-id-2430 .tutor-form-group:has(input[name="first_name"]),
.page-id-2430 .tutor-form-group:has(input[name="last_name"]),
.page-id-2430 .cwc-hidden-field {
	display: none !important;
}

/* --- labels --- */
.page-id-2430 .tutor-block,
.page-id-2430 .tutor-form-group label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 0.28rem !important;
	letter-spacing: 0.01em;
}

/* --- inputs --- */
.page-id-2430 .tutor-form-control,
.page-id-2430 .tutor-input,
.page-id-2430 select.tutor-form-control {
	width: 100%;
	background: #F7FAFC !important;
	border: 1px solid #D7E5ED !important;
	border-radius: 8px !important;
	padding: 0.62em 0.85em !important;
	font-size: 16px !important;   /* 16px keeps iOS from zooming on focus */
	line-height: 1.35 !important;
	color: #0F172A !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-id-2430 .tutor-form-control:focus,
.page-id-2430 .tutor-input:focus {
	border-color: #0F779A !important;
	box-shadow: 0 0 0 3px rgba(15, 119, 154, 0.14);
	outline: none;
	background: #FFFFFF !important;
}

/* --- terms --- */
.cwc-reg-terms {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.88rem;
	font-weight: 400 !important;
	color: #364151;
	line-height: 1.45;
	cursor: pointer;
	margin: 0.15rem 0 0.35rem;
}

.cwc-reg-terms input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin-top: 0.14rem;
	flex: 0 0 auto;
	accent-color: #0F779A;
}

/* --- submit --- */
.page-id-2430 .tutor-btn-primary,
.page-id-2430 button[name="tutor_register_student_btn"] {
	width: 100%;
	min-height: 46px;
	background: #0F779A !important;
	border-color: #0F779A !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-size: 0.98rem !important;
	border-radius: 8px !important;
	transition: background-color 0.2s ease;
}

.page-id-2430 .tutor-btn-primary:hover,
.page-id-2430 button[name="tutor_register_student_btn"]:hover {
	background: #0C6180 !important;
	border-color: #0C6180 !important;
}

.page-id-2430 #tutor-registration-form a {
	color: #0F779A;
	font-weight: 600;
}

/* --- validation messages --- */
.page-id-2430 .tutor-alert {
	grid-column: 1 / -1;
	font-size: 0.88rem;
	border-radius: 8px;
}

/* --- single column on small screens --- */
@media (max-width: 640px) {
	.page-id-2430 .tutor-form-wrap,
	.page-id-2430 #tutor-registration-form > .tutor-form-row {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* -------------------------------------------------------------------
   14. LOGIN FORM + TUTOR PRIMARY BUTTONS
   The login card is what visitors see at /dashboard/ before signing in.
   It shipped unbranded: no logo, and Tutor's default indigo button.

   The button rule is deliberately NOT scoped to the login page. The same
   .tutor-btn-primary is the main action throughout the LMS — enrol, start
   quiz, submit — and leaving those indigo while everything else is teal
   would look unfinished. Scoped to Tutor's own class, so no other
   plugin's buttons are affected.
   ------------------------------------------------------------------- */

/* --- logo above the login heading --- */
.tutor-login-form-wrapper::before {
	content: "";
	display: block;
	width: 178px;
	height: 58px;
	margin: 0 auto 1.5rem;
	background-image: url("/wp-content/uploads/2026/08/cropped-Crescent-Wound-Care-Logo-01-1-1-scaled-1-250x91.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Centre the greeting under the logo. */
.tutor-login-form-wrapper .tutor-h3 {
	text-align: center;
	color: #0F172A;
}

/* --- the card --- */
.tutor-login-wrap {
	border-radius: 16px !important;
	box-shadow: 0 16px 44px rgba(10, 80, 104, 0.14) !important;
}

/* --- Tutor's primary button, brand colour --- */
.tutor-btn.tutor-btn-primary,
button.tutor-btn-primary,
a.tutor-btn-primary {
	background-color: #0F779A !important;
	border-color: #0F779A !important;
	color: #FFFFFF !important;
	font-weight: 600;
	border-radius: 8px !important;
	min-height: 44px;              /* same tap-target floor as section 2 */
	transition: background-color 0.2s ease;
}

.tutor-btn.tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:focus,
button.tutor-btn-primary:hover,
a.tutor-btn-primary:hover {
	background-color: #0C6180 !important;
	border-color: #0C6180 !important;
	color: #FFFFFF !important;
}

.tutor-btn.tutor-btn-primary:focus-visible {
	outline: 2px solid #0F779A;
	outline-offset: 3px;
}

/* --- links in the login card --- */
.tutor-login-form-wrapper a,
.tutor-login-wrap a.tutor-btn-link {
	color: #0F779A !important;
	font-weight: 600;
}

.tutor-login-form-wrapper a:hover {
	color: #0C6180 !important;
}

/* --- inputs, matching the registration card --- */
.tutor-login-form-wrapper .tutor-form-control,
.tutor-login-form-wrapper input[type="text"],
.tutor-login-form-wrapper input[type="password"] {
	background: #F7FAFC !important;
	border: 1px solid #D7E5ED !important;
	border-radius: 8px !important;
	font-size: 16px !important;   /* 16px keeps iOS from zooming on focus */
	padding: 0.7em 0.9em !important;
}

.tutor-login-form-wrapper .tutor-form-control:focus,
.tutor-login-form-wrapper input[type="text"]:focus,
.tutor-login-form-wrapper input[type="password"]:focus {
	border-color: #0F779A !important;
	box-shadow: 0 0 0 3px rgba(15, 119, 154, 0.14);
	outline: none;
	background: #FFFFFF !important;
}

/* --- "Keep me signed in" checkbox --- */
.tutor-login-form-wrapper input[type="checkbox"] {
	accent-color: #0F779A;
}

@media (max-width: 544px) {
	.tutor-login-form-wrapper::before {
		width: 148px;
		height: 48px;
		margin-bottom: 1.1rem;
	}
}


/* -------------------------------------------------------------------
   15. AUTH PAGES — CARD PLACEMENT ON THE PHOTO
   The login card is narrower than the registration card; both need to
   sit centred with breathing room rather than flush against the header.
   ------------------------------------------------------------------- */
.cwc-auth-page .tutor-login-wrap {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
	background: #FFFFFF !important;
}

.cwc-auth-page .site-content {
	min-height: 78vh;
	display: flex;
	align-items: center;
}

.cwc-auth-page .ast-container {
	width: 100%;
}

/* The theme title would sit on the photo above the card; the cards
   carry their own heading, so it is redundant here. */
.cwc-auth-page .entry-header {
	display: none;
}


/* -------------------------------------------------------------------
   16. REGISTRATION CARD HEADING
   Logo, title and strapline, rendered as markup by the theme so their
   order is explicit. Spans the full width of the two-column grid.
   ------------------------------------------------------------------- */
.cwc-reg-head {
	grid-column: 1 / -1;
	text-align: center;
	margin-bottom: 1.1rem;
}

.cwc-reg-head__logo {
	display: block;
	width: 168px;
	height: auto;
	margin: 0 auto 0.6rem;
}

.cwc-reg-head__title {
	font-size: clamp(1.35rem, 3vw, 1.7rem);
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 0.35rem;
	line-height: 1.2;
}

.cwc-reg-head__sub {
	font-size: 0.85rem;
	line-height: 1.45;
	color: #52606D;
	max-width: 44ch;
	margin: 0 auto;
}

@media (max-width: 544px) {
	.cwc-reg-head__logo { width: 142px; }
}


/* -------------------------------------------------------------------
   17. INLINE FIELD ERROR
   Tutor prints every validation error in one block near the top of the
   form. The terms message is moved out of that block and rendered beside
   its own checkbox instead, which is several hundred pixels further
   down; this styles it in place.
   ------------------------------------------------------------------- */
.cwc-field-error {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.4rem 0 0;
	padding: 0.55rem 0.75rem;
	background: #FDECEE;
	border: 1px solid #F5C2C7;
	border-radius: 7px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: #842029;
}

.cwc-field-error::before {
	content: "!";
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: #B02A37;
	color: #FFFFFF;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.05rem;
	text-align: center;
}

/* Draw the eye to the control the message is about. */
.cwc-reg-terms--error input[type="checkbox"] {
	outline: 2px solid #B02A37;
	outline-offset: 2px;
}

/* Input outlined in red when its message is showing. */
.cwc-input-error {
	border-color: #B02A37 !important;
	box-shadow: 0 0 0 3px rgba(176, 42, 55, 0.12) !important;
}


/* -------------------------------------------------------------------
   18. TERMS AND CONDITIONS PAGE
   Nine numbered clauses. Legal text is read by scanning for the relevant
   clause rather than top to bottom, so the numbers are made prominent
   and each clause is given its own card — easier to point someone at
   "section 4" than to hunt down a wall of paragraphs.
   ------------------------------------------------------------------- */
.cwc-terms-hero {
	background: linear-gradient(135deg, #0F779A 0%, #0C6180 100%);
	padding: clamp(2.25rem, 6vw, 3.75rem) 0;
	text-align: center;
}

.cwc-terms-hero .cwc-badge {
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
}

.cwc-terms-hero .cwc-badge__icon {
	fill: #FFFFFF;
}

.cwc-terms-title {
	margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
	font-size: clamp(1.8rem, 4.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	color: #FFFFFF;
}

.cwc-terms-lede {
	margin: 0.75rem auto 0;
	max-width: 60ch;
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* --- the clauses --- */
.cwc-terms {
	list-style: none;
	counter-reset: clause;
	margin: 0;
	padding: 0;
}

.cwc-terms__item {
	counter-increment: clause;
	position: relative;
	background: #FFFFFF;
	border: 1px solid #E2ECF2;
	border-radius: 14px;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.1rem, 2.5vw, 1.5rem) clamp(3.6rem, 7vw, 4.4rem);
	margin-bottom: 0.9rem;
	box-shadow: 0 2px 10px rgba(15, 119, 154, 0.06);
}

/* The clause number, drawn from the counter so the markup carries no
   hard-coded numbers to fall out of step if a clause is added. */
.cwc-terms__item::before {
	content: counter(clause);
	position: absolute;
	top: clamp(1.25rem, 3vw, 1.75rem);
	left: clamp(1.1rem, 2.5vw, 1.5rem);
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #EAF6FB;
	color: #0F779A;
	font-size: 0.88rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.cwc-terms__h {
	margin: 0 0 0.6rem;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	font-weight: 700;
	color: #0F172A;
	line-height: 1.3;
}

.cwc-terms__item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cwc-terms__item li {
	position: relative;
	padding-left: 1.15rem;
	margin-bottom: 0.55rem;
	font-size: clamp(0.94rem, 1.5vw, 1rem);
	line-height: 1.6;
	color: #364151;
}

.cwc-terms__item li:last-child {
	margin-bottom: 0;
}

.cwc-terms__item li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #0F779A;
}

/* --- the acceptance statement --- */
.cwc-terms__accept {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding: clamp(1rem, 2.5vw, 1.35rem);
	background: #EAF6FB;
	border-left: 4px solid #0F779A;
	border-radius: 0 10px 10px 0;
	font-size: clamp(0.95rem, 1.6vw, 1.02rem);
	line-height: 1.6;
	font-weight: 600;
	color: #0F172A;
}

/* --- the "(Read Here)" link on the registration checkbox --- */
.cwc-terms-link {
	color: #0F779A;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cwc-terms-link:hover,
.cwc-terms-link:focus {
	color: #0C6180;
}

@media (max-width: 544px) {
	.cwc-terms__item::before {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.8rem;
	}
}

/* Keep the "(Read Here)" link on the same line as the consent text. */
.tutor-form-group:has(> .cwc-reg-terms) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.35rem;
}

.tutor-form-group:has(> .cwc-reg-terms) .cwc-reg-terms {
	margin-bottom: 0;
}


/* -------------------------------------------------------------------
   19. FOOTER
   Quick Links and Our Services get chevron markers; Contact Info gets a
   circular icon per row, matching the legacy footer.

   Icons are inline SVG in data URIs rather than an icon font. The site
   loads no icon font, and pulling one in for six glyphs would cost a
   render-blocking request on every page.

   Contact rows are keyed off classes on the menu items, not
   :nth-child(), so reordering them in Appearance > Menus cannot silently
   put the phone icon next to the address.
   ------------------------------------------------------------------- */

/* --- chevrons on the two link lists --- */
.site-footer #menu-menu-1 .menu-item,
.site-footer #menu-menu-2 .menu-item {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.35rem;
}

.site-footer #menu-menu-1 .menu-item::before,
.site-footer #menu-menu-2 .menu-item::before {
	/* A drawn double-chevron rather than the » character. That glyph is
	   font-dependent: some faces render it soft and undersized, others as
	   spaced guillemets. Masking an SVG with currentColor keeps the shape
	   identical everywhere while still inheriting the link colour. */
	content: "";
	position: absolute;
	left: 0;
	top: 0.44em;
	width: 0.7em;
	height: 0.7em;
	background-color: currentColor;
	opacity: 0.9;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 4l7 8-7 8M13 4l7 8-7 8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 4l7 8-7 8M13 4l7 8-7 8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- contact rows --- */
.site-footer #menu-menu-3 .menu-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding-left: 0;
	margin-bottom: 0.85rem;
	line-height: 1.5;
}

.site-footer #menu-menu-3 .menu-item::before {
	content: "";
	flex: 0 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	/* Solid brand teal, not a translucent white.
	   The icons themselves are white, and this footer has a white
	   background — a translucent white disc left white glyphs sitting on
	   white, so the icons rendered but could not be seen. */
	background-color: #0F779A;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.05rem 1.05rem;
}

/* phone */
.site-footer #menu-menu-3 .cwc-contact-phone::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

/* email */
.site-footer #menu-menu-3 .cwc-contact-email::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

/* address */
.site-footer #menu-menu-3 .cwc-contact-address::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* states served */
.site-footer #menu-menu-3 .cwc-contact-states::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.6a15.6 15.6 0 0 0-1.2-3.4A8 8 0 0 1 18.9 8zM12 4c.7 1 1.3 2.3 1.7 4h-3.4C10.7 6.3 11.3 5 12 4zM4.3 14a8 8 0 0 1 0-4h3a17.6 17.6 0 0 0 0 4zm.8 2h2.6c.3 1.2.7 2.4 1.2 3.4A8 8 0 0 1 5.1 16zm2.6-8H5.1a8 8 0 0 1 3.8-3.4A15.6 15.6 0 0 0 7.7 8zM12 20c-.7-1-1.3-2.3-1.7-4h3.4c-.4 1.7-1 3-1.7 4zm2.1-6H9.9a15.9 15.9 0 0 1 0-4h4.2a15.9 15.9 0 0 1 0 4zm1 5.4c.5-1 .9-2.2 1.2-3.4h2.6a8 8 0 0 1-3.8 3.4zm1.6-5.4a17.6 17.6 0 0 0 0-4h3a8 8 0 0 1 0 4z'/%3E%3C/svg%3E");
}

/* The states row is information, not a destination. */
.site-footer #menu-menu-3 .cwc-not-a-link > a {
	pointer-events: none;
	cursor: default;
}

/* Keep the text block beside its icon rather than under it. */
.site-footer #menu-menu-3 .menu-item > a {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 544px) {
	.site-footer #menu-menu-3 .menu-item::before {
		width: 1.85rem;
		height: 1.85rem;
		background-size: 0.95rem 0.95rem;
	}
}


/* -------------------------------------------------------------------
   20. CORPORATE PARTNERS — CONTINUOUS MARQUEE
   Elementor drives this carousel with Swiper on a stepped autoplay, so it
   pauses and then jumps. Swiper has no continuous mode, so the track is
   animated here instead and Swiper is stopped in JS. The speed is set in
   inc/partners-marquee.php (pxPerSecond), not in Elementor.

   The animation travels exactly half the track, because the script
   duplicates the slide set — at the halfway point the second copy is
   sitting exactly where the first began, so the restart is invisible.
   ------------------------------------------------------------------- */
.cwc-marquee .swiper,
.cwc-marquee .swiper-container,
.cwc-marquee .elementor-image-carousel-wrapper {
	overflow: hidden;
}

.cwc-marquee .swiper-wrapper {
	display: flex;
	width: max-content;
	/* Swiper's leftover inline transform is cleared in JS, not here.
	   "transform: none !important" would win against the animation —
	   an !important declaration outranks animated values — so the
	   animation would run while the element never moved. */
	transition: none !important;
	animation: cwc-marquee-scroll var(--cwc-marquee-duration, 40s) linear infinite;
	will-change: transform;
}

.cwc-marquee .swiper-slide {
	flex: 0 0 auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes cwc-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Let people stop it to read a logo. */
.cwc-marquee:hover .swiper-wrapper,
.cwc-marquee:focus-within .swiper-wrapper {
	animation-play-state: paused;
}

/* Swiper's arrows and dots do nothing once it is destroyed, so they are
   hidden rather than left as controls that silently fail. Elementor's own
   rule also uses .elementor-swiper-button, so this needs the extra
   specificity of the section class to win. */
.cwc-marquee .elementor-swiper-button.elementor-swiper-button-prev,
.cwc-marquee .elementor-swiper-button.elementor-swiper-button-next,
.cwc-marquee .swiper-button-prev,
.cwc-marquee .swiper-button-next,
.cwc-marquee .swiper-pagination {
	display: none !important;
}

/* Continuous motion is a common migraine and vestibular trigger, so it
   is switched off for anyone who has asked the system for less of it. */
@media (prefers-reduced-motion: reduce) {
	.cwc-marquee .swiper-wrapper {
		animation: none;
	}
	.cwc-marquee .swiper,
	.cwc-marquee .elementor-image-carousel-wrapper {
		overflow-x: auto;
	}
}


/* --- stop the carousel widening the page ---------------------------- */

/* Elementor gives an image carousel a negative horizontal margin so the
   slide gutters line up with the container edge, which makes the widget
   itself wider than the column holding it — measured at 793px inside 753px
   on a tablet. Nothing clipped that, so the page gained 20px of sideways
   scroll at tablet and phone widths.

   The clip goes on the widget rather than on .elementor-widget-container,
   because the container is the element that is oversized; clipping it has
   no effect on its own overflow.

   "clip" rather than "hidden": hidden would turn this into a scroll
   container and let a stray focus jump nudge the track sideways. Verified
   the logos do not move — only the empty gutter is trimmed.

   Written against the widget type rather than one element id so the same
   Elementor behaviour cannot reintroduce this on another carousel. */
.elementor-widget-image-carousel {
	overflow-x: clip;
}

/* -------------------------------------------------------------------
   21. HEADER SUB-MENU WIDTH
   Astra's Customizer emits an inline rule setting the sub-menu to a
   fixed 1000px — almost certainly inherited from the imported starter
   template rather than chosen. With two short items that leaves a panel
   several times wider than its content.

   Sized to the content instead, with a floor so a single short label
   does not look cramped and a ceiling so a long one cannot run off the
   edge. !important is needed here because the Customizer rule is inline
   and would otherwise win.

   The underlying setting lives at Appearance > Customize > Header
   Builder > Primary Menu > Sub Menu Width; changing it there would make
   this rule redundant, but it is kept in the theme so the fix is
   version-controlled rather than sitting only in the database.
   ------------------------------------------------------------------- */
.ast-builder-menu-1 .sub-menu,
.ast-builder-menu-1 .inline-on-mobile .sub-menu,
.main-header-menu .sub-menu {
	width: max-content !important;
	/* 8rem is a floor for very short labels only. The current items come
	   to 176px on their own, so the text is what sets the width; the floor
	   only matters if a shorter item is added later. */
	min-width: 8rem !important;
	max-width: 20rem !important;
}

/* Keep each row on one line so the panel width tracks the longest label. */
.ast-builder-menu-1 .sub-menu .menu-link,
.main-header-menu .sub-menu .menu-link {
	white-space: nowrap;
}

/* On mobile Astra stacks the sub-menu inline, where a content-sized
   panel would look wrong — let it fill the width there. */
@media (max-width: 921px) {
	.ast-builder-menu-1 .sub-menu,
	.ast-builder-menu-1 .inline-on-mobile .sub-menu,
	.main-header-menu .sub-menu {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* -------------------------------------------------------------------
   22. HEADER SUB-MENU — ROUNDED PANEL AND SLIDE-IN
   Rounded corners to match the button style used elsewhere on the site,
   and the items slide in from the left in sequence when the panel opens.

   The stagger is done with transition-delay on each row rather than a
   keyframe animation. A hover-triggered animation restarts from its
   first frame every time the pointer crosses the item, which flickers on
   the way to a sub-item; a transition simply reverses, so moving the
   pointer in and out reads as one smooth movement.
   ------------------------------------------------------------------- */
.ast-builder-menu-1 .sub-menu,
.main-header-menu .sub-menu {
	border-radius: 10px !important;
	border: 1px solid rgba(15, 119, 154, 0.22) !important;
	box-shadow: 0 10px 28px rgba(11, 34, 57, 0.12) !important;
	overflow: hidden;
	padding: 0.3rem 0 !important;
}

/* Rows start slightly left and transparent. */
.ast-desktop .ast-builder-menu-1 .sub-menu > .menu-item,
.ast-desktop .main-header-menu .sub-menu > .menu-item {
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ...and settle into place when the parent is hovered or focused. */
.ast-desktop .ast-builder-menu-1 .menu-item-has-children:hover > .sub-menu > .menu-item,
.ast-desktop .ast-builder-menu-1 .menu-item-has-children:focus-within > .sub-menu > .menu-item,
.ast-desktop .main-header-menu .menu-item-has-children:hover > .sub-menu > .menu-item,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within > .sub-menu > .menu-item {
	opacity: 1;
	transform: translateX(0);
}

/* Each row arrives a little after the one above it. The delays are set
   only on the hover/focus state, so they apply while the panel opens and
   not while it closes — the rows leave together rather than rippling
   out, which would drag out every exit. Six covers any realistic
   sub-menu; a seventh simply arrives with the sixth. */
.ast-desktop .menu-item-has-children:hover > .sub-menu > .menu-item:nth-child(1),
.ast-desktop .menu-item-has-children:focus-within > .sub-menu > .menu-item:nth-child(1) { transition-delay: 0.03s; }
.ast-desktop .menu-item-has-children:hover > .sub-menu > .menu-item:nth-child(2),
.ast-desktop .menu-item-has-children:focus-within > .sub-menu > .menu-item:nth-child(2) { transition-delay: 0.09s; }
.ast-desktop .menu-item-has-children:hover > .sub-menu > .menu-item:nth-child(3),
.ast-desktop .menu-item-has-children:focus-within > .sub-menu > .menu-item:nth-child(3) { transition-delay: 0.15s; }
.ast-desktop .menu-item-has-children:hover > .sub-menu > .menu-item:nth-child(4),
.ast-desktop .menu-item-has-children:focus-within > .sub-menu > .menu-item:nth-child(4) { transition-delay: 0.21s; }
.ast-desktop .menu-item-has-children:hover > .sub-menu > .menu-item:nth-child(5),
.ast-desktop .menu-item-has-children:focus-within > .sub-menu > .menu-item:nth-child(5) { transition-delay: 0.27s; }
.ast-desktop .menu-item-has-children:hover > .sub-menu > .menu-item:nth-child(n+6),
.ast-desktop .menu-item-has-children:focus-within > .sub-menu > .menu-item:nth-child(n+6) { transition-delay: 0.33s; }

/* Rounded highlight on each row, inset so it sits inside the panel. */
.ast-builder-menu-1 .sub-menu .menu-link,
.main-header-menu .sub-menu .menu-link {
	border-radius: 7px;
	margin: 0 0.3rem;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.ast-builder-menu-1 .sub-menu .menu-item > .menu-link:hover,
.main-header-menu .sub-menu .menu-item > .menu-link:hover {
	background-color: rgba(15, 119, 154, 0.09);
	color: #0F779A;
}

/* Movement is decoration here, so it is dropped for anyone who has asked
   the system for less of it — the panel still opens, just without travel. */
@media (prefers-reduced-motion: reduce) {
	.ast-desktop .ast-builder-menu-1 .sub-menu > .menu-item,
	.ast-desktop .main-header-menu .sub-menu > .menu-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* -------------------------------------------------------------------
   23. FORM CONFIRMATION MESSAGE
   WPForms renders the confirmation as bare #333 text with no background.
   On the newsletter band, which is #0F779A, that is dark grey on teal at
   roughly 1.9:1 — unreadable, and competing with the watermark behind it.

   The class depends on a plugin setting. Frontend.php line 626 picks
   "wpforms-confirmation-container-full" when disable-css is 1 and
   "wpforms-confirmation-container" otherwise, and this site produces the
   second. Targeting only the -full variant, as this rule first did, meant
   none of it applied. Both are matched with a substring selector so the
   styling survives that setting being changed either way.
   ------------------------------------------------------------------- */
[class*="wpforms-confirmation-container"] {
	display: flex !important;
	align-items: flex-start;
	gap: 0.85rem;
	max-width: 34rem;
	margin: 1rem auto 0 !important;
	padding: 1.1rem 1.35rem !important;
	background: #FFFFFF !important;
	border: 1px solid #D7E5ED !important;
	border-left: 4px solid #16A34A !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px rgba(11, 34, 57, 0.14);
	text-align: left;
}

/* The markup inside is generated server-side and swapped in with .html(),
   so it may not be a <p>. The band's text colour is white, so anything
   not explicitly coloured would inherit white and vanish against this
   panel — hence colouring every descendant rather than one element. */
[class*="wpforms-confirmation-container"],
[class*="wpforms-confirmation-container"] * {
	color: #0F172A !important;
}

[class*="wpforms-confirmation-container"] a,
[class*="wpforms-confirmation-container"] a * {
	color: #0F779A !important;
	font-weight: 600;
}

/* Drawn tick — this site loads no icon font. */
[class*="wpforms-confirmation-container"]::before {
	content: "";
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.1rem;
	border-radius: 50%;
	background-color: #16A34A;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-size: 65% 65%;
	background-position: center;
	background-repeat: no-repeat;
}

/* WPForms adds ::after only to clear floats; in a flex row it becomes a
   stray item, so it is taken out of the layout. */
[class*="wpforms-confirmation-container"]::after {
	display: none !important;
}

/* Any direct child takes the remaining width, so the text cannot
   collapse to nothing beside the tick. */
[class*="wpforms-confirmation-container"] > *:not(style):not(script) {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	font-size: 0.98rem;
	line-height: 1.55;
}

[class*="wpforms-confirmation-container"] > * + * {
	margin-top: 0.4rem !important;
}

@media (max-width: 544px) {
	[class*="wpforms-confirmation-container"] {
		padding: 0.95rem 1.05rem !important;
		gap: 0.7rem;
	}
	[class*="wpforms-confirmation-container"]::before {
		width: 1.4rem;
		height: 1.4rem;
	}
}


/* -------------------------------------------------------------------
   24. ALREADY-SIGNED-IN CARD
   Replaces Tutor's bare "You are already logged in" heading on the
   registration pages. Styled to match the registration card it stands in
   place of, since it appears on the same photographic background.
   ------------------------------------------------------------------- */
.cwc-signedin {
	max-width: 30rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(10, 80, 104, 0.26);
	text-align: center;
}

.cwc-signedin__icon {
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background-color: #16A34A;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-size: 58% 58%;
	background-position: center;
	background-repeat: no-repeat;
}

.cwc-signedin__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 800;
	color: #0F172A;
	line-height: 1.2;
}

.cwc-signedin__who {
	margin: 0 0 1.4rem;
	font-size: 0.96rem;
	line-height: 1.6;
	color: #364151;
}

.cwc-signedin__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
}

.cwc-signedin__actions .cwc-cert-btn {
	width: 100%;
}

.cwc-signedin__link {
	color: #0F779A;
	font-weight: 600;
	font-size: 0.95rem;
}

.cwc-signedin__alt {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid #E2ECF2;
	font-size: 0.87rem;
	color: #6B7A8C;
}

.cwc-signedin__alt a {
	color: #0F779A;
	font-weight: 600;
}


/* ===================================================================
   25. TESTIMONIAL CAROUSEL — "What People Say About Us" (front page)

   Replaces a hand-written widget that carried a stock photograph, a
   five-star rating and placeholder text. Both the photo and the stars
   were dropped: these are professional references from named clinicians
   at partner facilities, and a star rating reads as a product review.

   The quotes vary from one line to three paragraphs, so the slides are
   stacked and cross-faded and the viewport animates to the height of
   whichever one is showing. A conventional side-by-side track would
   have to stay as tall as the longest quote, leaving a large empty box
   under the short ones.
   =================================================================== */

.cwc-tst {
	/* Room inside the clipped viewport for the card's drop shadow, which
	   would otherwise be sliced off square at the edges. */
	--cwc-tst-gutter-x: 20px;
	--cwc-tst-gutter-y: 16px;
	/* How far a slide travels as it enters or leaves. */
	--cwc-tst-travel: 26px;

	max-width: 680px;
	margin: 0;
}

/* -------------------------------------------------------------------
   Before the script runs — and if it never does — the quotes simply
   stack. The section is readable either way; nothing is hidden behind
   JavaScript that has not loaded.
   ------------------------------------------------------------------- */

.cwc-tst__slide + .cwc-tst__slide {
	margin-top: 1.25rem;
}

.cwc-tst__controls {
	display: none;
}

/* -------------------------------------------------------------------
   The card
   ------------------------------------------------------------------- */

.cwc-tst__slide {
	padding: var(--cwc-tst-gutter-y) var(--cwc-tst-gutter-x);
}

.cwc-tst__card {
	position: relative;
	margin: 0;
	padding: clamp(1.6rem, 1rem + 2vw, 2.5rem);
	background: #FFFFFF;
	border: 1px solid rgba(15, 119, 154, 0.10);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(16, 60, 80, 0.10);
	/* blockquote picks up a default indent in some browsers */
	quotes: none;
}

/* Oversized quote mark, set well back so it reads as texture rather
   than punctuation competing with the text. */
.cwc-tst__mark {
	position: absolute;
	top: 0.08em;
	right: 0.35em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5.5rem;
	line-height: 1;
	color: rgba(15, 119, 154, 0.13);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.cwc-tst__quote {
	position: relative;
	z-index: 1;
}

.cwc-tst__quote p {
	margin: 0 0 0.9em;
	font-size: clamp(15.5px, 0.95rem + 0.25vw, 17px);
	line-height: 1.75;
	color: #33454F;
}

.cwc-tst__quote p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------
   Attribution
   ------------------------------------------------------------------- */

.cwc-tst__by {
	margin-top: 1.5rem;
	padding-top: 1.15rem;
	border-top: 1px solid #E4EDF2;
}

.cwc-tst__name {
	display: block;
	font-style: normal; /* <cite> is italic by default */
	font-size: 1rem;
	font-weight: 700;
	color: #10222F;
	letter-spacing: 0.01em;
}

.cwc-tst__creds {
	display: inline-block;
	margin-left: 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0F779A;
	vertical-align: 0.08em;
}

.cwc-tst__role {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	color: #5E6E7B;
}

.cwc-tst__org {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #0F779A;
}

/* -------------------------------------------------------------------
   Running carousel
   ------------------------------------------------------------------- */

.cwc-tst--ready .cwc-tst__viewport {
	position: relative;
	overflow: hidden;
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.cwc-tst--ready .cwc-tst__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 0;
	opacity: 0;
	transform: translateX(var(--cwc-tst-travel));
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

/* The first slide holds the viewport open until the script measures it. */
.cwc-tst--ready .cwc-tst__slide.is-active {
	position: relative;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Start position for a slide arriving from the left (a "previous" step).
   Applied for one frame with transitions suppressed, so the slide has
   somewhere to travel from. */
.cwc-tst--ready .cwc-tst__slide.is-still {
	transition: none;
}

.cwc-tst--ready .cwc-tst__slide.is-from-left {
	transform: translateX(calc(var(--cwc-tst-travel) * -1));
}

.cwc-tst--ready .cwc-tst__slide.is-out {
	opacity: 0;
}

.cwc-tst--ready .cwc-tst__slide.is-out--left {
	transform: translateX(calc(var(--cwc-tst-travel) * -1));
}

.cwc-tst--ready .cwc-tst__slide.is-out--right {
	transform: translateX(var(--cwc-tst-travel));
}

/* -------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------- */

.cwc-tst--ready .cwc-tst__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.35rem;
	/* line up with the card, which is inset by the shadow gutter */
	padding: 0 var(--cwc-tst-gutter-x);
}

.cwc-tst__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(15, 119, 154, 0.30);
	border-radius: 50%;
	background: #FFFFFF;
	color: #0F779A;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cwc-tst__arrow:hover,
.cwc-tst__arrow:focus-visible {
	background: #0F779A;
	border-color: #0F779A;
	color: #FFFFFF;
}

.cwc-tst__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 auto 0 0.25rem;
}

.cwc-tst__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #C4D7E0;
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.cwc-tst__dot.is-active {
	width: 24px;
	background: #0F779A;
}

/* The dots are 8px tall, far below a comfortable touch target, so the
   hit area is enlarged without changing how they look. */
.cwc-tst__dot::before {
	content: "";
	position: absolute;
	inset: -12px -4px;
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cwc-tst {
		--cwc-tst-gutter-x: 12px;
		--cwc-tst-travel: 16px;
		max-width: none;
	}

	.cwc-tst__mark {
		font-size: 4rem;
	}

	.cwc-tst__by {
		margin-top: 1.25rem;
		padding-top: 1rem;
	}
}

/* -------------------------------------------------------------------
   Reduced motion — the carousel still works, it just stops sliding and
   stops advancing on its own (the script skips autoplay entirely).
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-tst--ready .cwc-tst__viewport {
		transition: none;
	}

	.cwc-tst--ready .cwc-tst__slide,
	.cwc-tst--ready .cwc-tst__slide.is-from-left,
	.cwc-tst--ready .cwc-tst__slide.is-out--left,
	.cwc-tst--ready .cwc-tst__slide.is-out--right {
		transform: none;
		transition: opacity 0.2s ease;
	}

	.cwc-tst__dot {
		transition: none;
	}
}


/* -------------------------------------------------------------------
   26. FOOTER — SERVICE AREAS

   The column between Quick Links and Contact Info. Sixteen state names,
   marked with the same map pin used for the address row in Contact Info
   so the footer reads as one set of icons rather than three.

   The pin is drawn small and in brand teal rather than white-on-a-disc
   like the contact rows: sixteen filled 2.1rem discs would outweigh
   everything else in the footer.

   These are not links — there are no per-state pages. The column this
   replaces was nine menu items all pointing at "#", which looked
   clickable and did nothing.
   ------------------------------------------------------------------- */

.site-footer .cwc-areas {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Sixteen states in a single column would make this by far the
	   tallest thing in the footer. Two keeps it level with Quick Links. */
	columns: 2;
	column-gap: 1rem;
}

.site-footer .cwc-areas__item {
	position: relative;
	/* Without this a name can be split across the column break. */
	break-inside: avoid;
	padding-left: 1.3rem;
	margin-bottom: 0.2rem;
	line-height: 1.5;
}

.site-footer .cwc-areas__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.8em;
	height: 0.8em;
	background-color: #0F779A;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Four columns leave roughly 180px each on a tablet, which is too narrow
   to split again — "Pennsylvania" would wrap mid-word. The footer row
   drops to two columns at that width (set in the Astra footer builder),
   giving this column room for both sub-columns. */

/* Each state is now a link to the contact page, so it needs a target
   big enough to hit on a phone. The text row is about 22px; the padding
   brings the link to roughly 28px, and the margin below the item was
   reduced by the same amount so the column's height barely changes.

   Colour and hover are deliberately left to inherit from the footer's
   own link styles, so these match Quick Links beside them rather than
   being a second, slightly different blue. */

.site-footer .cwc-areas__item > a {
	display: inline-block;
	padding: 0.2rem 0;
	text-decoration: none;
}

/* The pin sits on the row rather than inside the link, so that the link's
   padding cannot shift it. Dimming it with the row keeps the marker and
   its label reading as one thing under the cursor. */
.site-footer .cwc-areas__item:hover::before {
	opacity: 0.7;
}

/* -------------------------------------------------------------------
   27. FOOTER — SHARED POLISH

   Small alignment corrections that apply across the footer columns now
   that there are four of them again.
   ------------------------------------------------------------------- */

/* Headings sat at slightly different heights because one column starts
   with an image and the others with a heading. */
.site-footer .footer-widget-area .widget-title {
	margin-bottom: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Give the columns breathing room when they stack, so a heading is not
   sitting directly on the last item of the column above it. */
@media (max-width: 921px) {
	.site-footer .footer-widget-area {
		margin-bottom: 1.6rem;
	}

	.site-footer .footer-widget-area:last-child {
		margin-bottom: 0;
	}
}

/* --- the band of space above and below the columns -------------------
   Astra's footer builder ships 80px of padding on the top and bottom of
   the primary footer row. Against 327px of actual content that is 160px
   of empty band — nearly half the height of the whole footer — so the
   columns float in the middle of it. Halved to 40px on a desktop and 28
   on a phone, which still separates the footer from the page above and
   the copyright bar below without the columns swimming.

   The horizontal 30px in the same shorthand is deliberately left alone;
   only the two axes the client marked are touched.

   Astra writes its value inline from the Customizer, at
   .site-primary-footer-wrap[data-section="..."] — one class and one
   attribute. The extra .site-footer here is only there to outrank that
   without resorting to !important.

   Worth knowing: because this now wins, the Footer Builder's own top and
   bottom padding controls in the Customizer will look like they do
   nothing. If those are wanted back, delete this block rather than
   fighting it from the settings screen. */

.site-footer .site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
	padding-top: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
	padding-bottom: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
}

/* -------------------------------------------------------------------
   28. FOR SNFs — FAQ BLOCK PHOTO

   The FAQ block is a two-column grid whose left column holds only an
   eyebrow, a title and a one-line lead — 262px of content in a row that
   the accordion beside it stretches to 1024px. Because the grid aligns
   to the start, that left about 762px of blank space. This photo fills it.

   The markup lives in that page's Elementor HTML widget; only the
   styling is here, so it stays in version control.
   ------------------------------------------------------------------- */

.faq-side .faq-media {
	/* Matches the spacing rhythm of the text above it rather than the
	   browser's default figure margin, which also indents sideways. */
	margin: 1.75rem 0 0;
}

.faq-side .faq-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(16, 60, 80, 0.12);
}

/* Once the grid collapses to one column the photo sits between the intro
   and the questions, and at its natural 4:5 it would push the first
   question about 440px down the page — someone on a phone came here for
   the answers. Cropping it to a wide band keeps the picture without
   burying them.

   The crop is weighted towards the top of the frame because that is
   where the faces are; a centred crop cuts them off. */
@media (max-width: 767px) {
	.faq-side .faq-media img {
		max-height: 260px;
		object-fit: cover;
		object-position: center 22%;
	}
}


/* ===================================================================
   29. OUTCOMES REPORT — front page

   Replaces a flat PNG of a dashboard with real markup.

   Ported from the supplied data.html. Every selector is prefixed: that
   file styled bare `body`, `section`, `h1,h2,h3` and `a`, and used
   generic class names — .eyebrow, .reveal, .swatch, .section-head —
   which other hand-written blocks on this site already use. Dropped in
   as written it would have restyled the entire page.

   The animated states live under .cwc-out--js, a class the script adds
   to itself. Bars therefore sit at full width and text at full opacity
   until JavaScript is confirmed running, rather than the report being
   blank for anyone whose script never arrives.
   =================================================================== */

.cwc-out {
	--cwc-out-ink: #E7F6FF;
	--cwc-out-panel: #D2EEFC;
	--cwc-out-panel-2: #BFE6FA;
	--cwc-out-gauze: #0E1918;
	--cwc-out-dim: #2E4E5A;
	--cwc-out-sage: #0F779A;
	--cwc-out-sage-dim: #436656;
	--cwc-out-amber: #E3A857;
	--cwc-out-rose: #C97B72;
	--cwc-out-line: rgba(14, 25, 24, 0.16);
	--cwc-out-radius: 14px;

	background: var(--cwc-out-ink);
	color: var(--cwc-out-gauze);
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.cwc-out *,
.cwc-out *::before,
.cwc-out *::after {
	box-sizing: border-box;
}

.cwc-out__wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 28px;
}

.cwc-out__section {
	padding: 88px 0;
	border-top: 1px solid var(--cwc-out-line);
}

.cwc-out__eyebrow {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 500;
	color: var(--cwc-out-sage);
}

.cwc-out h2,
.cwc-out h3,
.cwc-out h4 {
	margin: 0;
	/* Astra applies text-transform: capitalize to headings, which
	   rewrote these sentence-case titles on screen — "Nearly every wound
	   reaches resolution." rendered as "Nearly Every Wound Reaches
	   Resolution.". They are shown as written. */
	text-transform: none;
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
	/* Brand teal with the rest of the site's headings; the gauze ink
	   stays on the report's body text and its big figures. */
	color: #0F779A;
}

.cwc-out__head {
	max-width: 640px;
	margin-bottom: 48px;
}

.cwc-out__head h3 {
	margin-top: 0;
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.15;
}

.cwc-out__head p:not(.cwc-out__eyebrow) {
	margin: 14px 0 0;
	font-size: 16px;
	color: var(--cwc-out-dim);
}

/* -------------------------------------------------------------------
   01 — outcome breakdown
   ------------------------------------------------------------------- */

.cwc-out__bar {
	display: flex;
	width: 100%;
	height: 34px;
	margin-bottom: 28px;
	border: 1px solid var(--cwc-out-line);
	border-radius: 8px;
	background: var(--cwc-out-panel-2);
	overflow: hidden;
}

.cwc-out__seg {
	height: 100%;
	/* Full width by default; the script collapses it before replaying. */
	width: var(--cwc-out-w);
}

.cwc-out--js .cwc-out__seg {
	width: 0;
	transition: width 1.4s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-out--js .cwc-out__bar.is-in .cwc-out__seg {
	width: var(--cwc-out-w);
}

.cwc-out__legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cwc-out__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 0;
	border-top: 1px solid var(--cwc-out-line);
}

.cwc-out__swatch {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-top: 5px;
	border-radius: 3px;
}

.cwc-out__name {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

.cwc-out__meta {
	display: block;
	margin-top: 2px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12.5px;
	color: var(--cwc-out-dim);
}

/* -------------------------------------------------------------------
   02 — time to heal
   ------------------------------------------------------------------- */

.cwc-out__row {
	padding: 16px 0;
	border-top: 1px solid var(--cwc-out-line);
}

.cwc-out__row.is-total {
	margin-top: 6px;
	padding: 20px 0;
	border-top: 1px solid var(--cwc-out-sage-dim);
	border-bottom: 1px solid var(--cwc-out-sage-dim);
}

.cwc-out__rowtop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.cwc-out__hname {
	font-size: 15.5px;
	font-weight: 600;
}

.cwc-out__vals {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 13px;
	color: var(--cwc-out-dim);
}

.cwc-out__vals b {
	font-weight: 600;
	color: var(--cwc-out-sage);
}

.cwc-out__track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--cwc-out-panel-2);
}

.cwc-out__fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--cwc-out-w);
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cwc-out-sage-dim), var(--cwc-out-sage));
}

.cwc-out--js .cwc-out__fill {
	width: 0;
	transition: width 1.3s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-out--js .cwc-out__row.is-in .cwc-out__fill {
	width: var(--cwc-out-w);
}

/* The benchmark tick. Sits above the bar so it reads as a threshold
   rather than as part of the fill. */
.cwc-out__marker {
	position: absolute;
	top: -5px;
	left: var(--cwc-out-m);
	width: 2px;
	height: 20px;
	background: var(--cwc-out-dim);
	opacity: 0.8;
}

.cwc-out--js .cwc-out__marker {
	left: 0;
	opacity: 0;
	transition: opacity 0.6s ease, left 1.6s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-out--js .cwc-out__row.is-in .cwc-out__marker {
	left: var(--cwc-out-m);
	opacity: 0.8;
}

/* -------------------------------------------------------------------
   National context
   ------------------------------------------------------------------- */

.cwc-out__callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 56px;
	padding: 36px;
	border: 1px solid var(--cwc-out-line);
	border-radius: var(--cwc-out-radius);
	background: radial-gradient(120% 140% at 0% 0%, rgba(15, 119, 154, 0.08), transparent 60%);
}

.cwc-out__ctext {
	max-width: 340px;
}

.cwc-out__ctext h4 {
	margin: 4px 0 0;
	font-size: 20px;
}

.cwc-out__ctext p:not(.cwc-out__eyebrow) {
	margin: 6px 0 0;
	font-size: 14.5px;
	color: var(--cwc-out-dim);
}

.cwc-out__csource {
	margin-top: 10px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	opacity: 0.7;
}

.cwc-out__cnums {
	display: flex;
	gap: 36px;
}

.cwc-out__cn {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--cwc-out-gauze);
	/* Keeps the row from reflowing as the digits count up. */
	font-variant-numeric: tabular-nums;
}

.cwc-out__cnum.is-hi .cwc-out__cn {
	color: var(--cwc-out-sage);
}

.cwc-out__cl {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--cwc-out-dim);
}

/* -------------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------------- */

.cwc-out--js .cwc-out__reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.cwc-out--js .cwc-out__reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cwc-out__section {
		padding: 56px 0;
	}

	.cwc-out__wrap {
		padding: 0 18px;
	}

	.cwc-out__head {
		margin-bottom: 32px;
	}

	.cwc-out__callout {
		margin-top: 36px;
		padding: 24px;
		gap: 24px;
	}

	.cwc-out__cnums {
		gap: 24px;
	}

	.cwc-out__cn {
		font-size: 32px;
	}

	/* The two figures and the wound-type rows both read better stacked
	   than squeezed side by side at this width. */
	.cwc-out__rowtop {
		gap: 4px;
	}
}

/* -------------------------------------------------------------------
   Reduced motion — the script returns early, so nothing here animates.
   These rules only matter if the class was already applied.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-out--js .cwc-out__seg,
	.cwc-out--js .cwc-out__fill,
	.cwc-out--js .cwc-out__marker,
	.cwc-out--js .cwc-out__reveal {
		transition: none;
	}

	.cwc-out--js .cwc-out__reveal {
		opacity: 1;
		transform: none;
	}
}

/* --- report masthead ------------------------------------------------ */

/* The report title, added above both sections. The "01 —" / "02 —"
   labels that used to head each section were dropped at the client's
   request, so the sections now open straight on their own headline. */

.cwc-out__masthead {
	padding: 64px 0 40px;
}

.cwc-out__title {
	/* The floor is well above the section headings own 28px floor: at a
	   phone width the two clamps otherwise landed 30px and 28px apart,
	   which does not read as a level of hierarchy. */
	font-size: clamp(34px, 4.6vw, 46px);
	line-height: 1.12;
	max-width: 900px;
}

/* The masthead already provides the space above the first section, and a
   rule between a title and the block it introduces reads as a division
   that is not there. */
.cwc-out__masthead + .cwc-out__section {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 767px) {
	.cwc-out__masthead {
		padding: 44px 0 28px;
	}
}


/* ===================================================================
   30. ABOUT US PAGE

   The page was empty while being linked from the main menu as "Our
   Story". Three parts: an introduction with a portrait photograph,
   the mission and vision statements, and the three service
   commitments.

   Colours are taken from what the rest of the site already uses —
   brand teal #0F779A, and the pale blue #EAF6FC that the front page
   sections sit on — rather than introducing a new palette. No
   webfonts: this page inherits the site's own faces.

   Every selector is scoped to .cwc-ab.
   =================================================================== */

.cwc-ab {
	--cwc-ab-teal: #0F779A;
	--cwc-ab-teal-dark: #0B5D79;
	--cwc-ab-tint: #EAF6FC;
	--cwc-ab-ink: #0F779A;
	--cwc-ab-body: #43555F;
	--cwc-ab-muted: #6B7A86;
	--cwc-ab-line: #DEEAF1;
	--cwc-ab-card: #FFFFFF;

	color: var(--cwc-ab-body);
}

.cwc-ab *,
.cwc-ab *::before,
.cwc-ab *::after {
	box-sizing: border-box;
}

.cwc-ab__wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

.cwc-ab__section {
	padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0;
}

/* Alternating grounds, so the three parts read as three parts without
   needing rules between them. */
.cwc-ab__section--mv {
	background: var(--cwc-ab-tint);
}

/* -------------------------------------------------------------------
   Shared type
   ------------------------------------------------------------------- */

/* A short teal rule before the label, the same device the front page
   uses above its section titles. */
.cwc-ab__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cwc-ab-teal);
}

.cwc-ab__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

.cwc-ab__h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.15rem);
	line-height: 1.1;
	color: var(--cwc-ab-ink);
}

.cwc-ab__head {
	max-width: 620px;
	margin: 0 auto clamp(2rem, 1rem + 3vw, 3rem);
	text-align: center;
}

/* Centred means the rule-and-label needs centring too, which flex
   alignment handles rather than text-align. */
.cwc-ab__head .cwc-ab__eyebrow {
	justify-content: center;
}

.cwc-ab__head h2 {
	margin: 0;
	font-size: clamp(1.65rem, 1.15rem + 1.8vw, 2.5rem);
	line-height: 1.18;
	color: var(--cwc-ab-ink);
}

/* -------------------------------------------------------------------
   1 — introduction
   ------------------------------------------------------------------- */

.cwc-ab__split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}

.cwc-ab__quote {
	position: relative;
	margin: 0;
	padding-left: 1.6rem;
	border-left: 3px solid var(--cwc-ab-teal);
}

.cwc-ab__quote p {
	margin: 0 0 1rem;
	font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
	line-height: 1.75;
}

.cwc-ab__quote p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------
   Photographs
   ------------------------------------------------------------------- */

.cwc-ab__figure {
	position: relative;
	margin: 0;
}

.cwc-ab__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(16, 60, 80, 0.16);
}

/* A teal card offset behind the portrait, so a fairly small image still
   carries enough weight to balance the text beside it. */
.cwc-ab__figure--portrait::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border-radius: 18px;
	background: var(--cwc-ab-teal);
	opacity: 0.12;
	z-index: -1;
}

.cwc-ab__figure--banner {
	margin-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

.cwc-ab__figure--banner img {
	/* The two landscape photographs are 996x664. Held to a slightly
	   wider crop they sit as a band rather than as a large block that
	   pushes the cards below the fold. */
	aspect-ratio: 16 / 8;
	object-fit: cover;
	object-position: center 40%;
}

.cwc-ab__figure--closing {
	margin: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) 0 0;
}

/* -------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------- */

.cwc-ab__cards {
	display: grid;
	gap: clamp(1.1rem, 0.6rem + 1.6vw, 1.75rem);
}

/* Explicit column counts rather than auto-fit. With two cards, auto-fit
   still generated a third track: it collapsed to 0px as intended but the
   gutter beside it was not collapsed, so the cards came out 532px instead
   of 548px with dead space on the right. */
.cwc-ab__cards--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cwc-ab__cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Three across is too tight once the wrap drops below about 1000px. */
@media (max-width: 1024px) {
	.cwc-ab__cards--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.cwc-ab__cards--2,
	.cwc-ab__cards--3 {
		grid-template-columns: 1fr;
	}
}

.cwc-ab__card {
	position: relative;
	padding: clamp(1.5rem, 1rem + 1.4vw, 2.15rem);
	background: var(--cwc-ab-card);
	border: 1px solid var(--cwc-ab-line);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(16, 60, 80, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.cwc-ab__card:hover {
	transform: translateY(-4px);
	border-color: rgba(15, 119, 154, 0.35);
	box-shadow: 0 18px 40px rgba(16, 60, 80, 0.12);
}

.cwc-ab__card h3 {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--cwc-ab-ink);
}

.cwc-ab__card p {
	margin: 0;
	font-size: 0.965rem;
	line-height: 1.72;
}

.cwc-ab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background: rgba(15, 119, 154, 0.10);
	color: var(--cwc-ab-teal);
	transition: background-color 0.35s ease, color 0.35s ease;
}

.cwc-ab__card:hover .cwc-ab__icon {
	background: var(--cwc-ab-teal);
	color: #FFFFFF;
}

/* -------------------------------------------------------------------
   Reveal on scroll

   The starting state only applies once the script has confirmed it is
   running, so the page is fully readable if it never does.
   ------------------------------------------------------------------- */

.cwc-ab--js .cwc-ab__reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1);
	transition-delay: var(--cwc-ab-delay, 0ms);
}

.cwc-ab--js .cwc-ab__reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Photographs settle in from very slightly enlarged, which reads as the
   image arriving rather than as the box sliding. */
.cwc-ab--js .cwc-ab__figure img {
	transform: scale(1.03);
	transition: transform 0.9s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-ab--js .cwc-ab__figure.is-in img {
	transform: scale(1);
}

/* --- the founder's letter: a paired, directional entrance ------------
   The default reveal lifts everything from below, which is right for a
   column of blocks but says nothing about this section's shape. Here the
   portrait comes in from the left and the letter from the right, so the
   two halves read as one movement meeting in the middle rather than two
   things fading independently.

   The travel is deliberately short. This runs on thirteen paragraphs in
   sequence, and anything longer turns reading the letter into waiting
   for it. */

.cwc-ab--js .cwc-ab__reveal.is-fromleft {
	transform: translate3d(-32px, 0, 0);
}

.cwc-ab--js .cwc-ab__reveal.is-fromright {
	transform: translate3d(22px, 0, 0);
}

.cwc-ab--js .cwc-ab__reveal.is-fromleft.is-in,
.cwc-ab--js .cwc-ab__reveal.is-fromright.is-in {
	transform: none;
}

/* The portrait is the one thing that should feel like it settles rather
   than slides, so it gets a longer, softer curve than the paragraphs. */
.cwc-ab--js .cwc-ab__founderphoto.is-fromleft {
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* Paragraphs are quicker: they are read in sequence, so each one wants to
   be finished by the time the eye reaches it. */
.cwc-ab--js .cwc-ab__founderbody p.is-fromright,
.cwc-ab--js .cwc-ab__sig.is-fromright {
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* The quote mark is texture behind the opening line; it fades without
   moving, so it does not compete with the paragraph arriving over it. */
.cwc-ab--js .cwc-ab__mark.is-fromright {
	transform: none;
	transition: opacity 1.1s ease;
}

/* Reduced motion: the script returns early so nothing reveals at all,
   but if it is ever changed to run, nothing here should travel. */
@media (prefers-reduced-motion: reduce) {
	.cwc-ab--js .cwc-ab__reveal.is-fromleft,
	.cwc-ab--js .cwc-ab__reveal.is-fromright {
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 860px) {
	.cwc-ab__split {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* The portrait leads on a phone, ahead of the text, because a
	   column of prose with a photograph stranded underneath reads as an
	   afterthought. */
	.cwc-ab__split .cwc-ab__figure--portrait {
		order: -1;
		max-width: 420px;
	}

	.cwc-ab__figure--portrait::before {
		inset: 14px -14px -14px 14px;
	}
}

@media (max-width: 767px) {
	.cwc-ab__wrap {
		padding: 0 18px;
	}

	.cwc-ab__figure--banner img {
		/* Squeezed to a 16:8 band on a narrow screen the people in these
		   photographs become unrecognisable; a squarer crop keeps them
		   legible. */
		aspect-ratio: 4 / 3;
	}

	.cwc-ab__quote {
		padding-left: 1.1rem;
	}
}

/* -------------------------------------------------------------------
   Reduced motion — the script returns early, so nothing animates. The
   hover lift is removed here too, since that is motion as well.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-ab__card,
	.cwc-ab__icon {
		transition: none;
	}

	.cwc-ab__card:hover {
		transform: none;
	}
}

/* --- headings render as written -------------------------------------- */

/* Astra sets text-transform: capitalize on headings. Elsewhere on the site
   that is invisible, because those headings are already title case. Here it
   rewrote the client's copy: "Excellence and Compassion" appeared as
   "Excellence And Compassion" and "No cost" as "No Cost". The wording is
   theirs, so it is shown exactly as supplied. */
.cwc-ab h1,
.cwc-ab h2,
.cwc-ab h3 {
	text-transform: none;
}

/* --- founder's statement --------------------------------------------- */

/* Sits between the introduction and the mission statements. The page
   otherwise alternates white and pale blue; a solid brand-teal band here
   marks this out as a signed statement rather than another block of body
   copy, and gives the three parts around it a rhythm of
   white -> teal -> pale blue -> white.

   All text on it is white or very near white. Against #0F779A that is
   about 5:1, which clears AA for body text; the tinted whites that were
   tried first for the attribution came in under 4.5:1. */

.cwc-ab__section--founder {
	background: var(--cwc-ab-teal);
	color: #FFFFFF;
	/* One text size for everything written in this section. The founder's
	   letter and the two profiles below it read from the same two values,
	   so they cannot drift apart again. */
	--cwc-ab-body-size: clamp(0.95rem, 0.93rem + 0.15vw, 1.02rem);
	--cwc-ab-body-leading: 1.72;
}

.cwc-ab__founder {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	padding-left: clamp(0px, -2rem + 8vw, 3.25rem);
}

/* An oversized quote mark, set low in opacity so it reads as texture
   behind the opening line rather than as punctuation to be read. On narrow
   screens the left indent collapses, so the mark is hidden rather than
   left sitting on top of the first word. */
.cwc-ab__mark {
	position: absolute;
	left: 0;
	top: -0.28em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5.5rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.28);
	pointer-events: none;
	user-select: none;
}

.cwc-ab__founderbody p {
	margin: 0 0 1.1rem;
	font-size: var(--cwc-ab-body-size);
	line-height: var(--cwc-ab-body-leading);
	color: #FFFFFF;
}

.cwc-ab__founderbody p:last-child {
	margin-bottom: 0;
}

/* The signature block. The rule sits under it, after "Crescent Wound
   Care", closing the letter off (moved from above the name on 12 Sep 2026,
   at the client's request). */
.cwc-ab__sig {
	margin-top: 1.85rem;
	padding-bottom: 1.35rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

.cwc-ab__signame {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #FFFFFF;
}

.cwc-ab__sigrole {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FFFFFF;
	opacity: 0.92;
}

@media (max-width: 640px) {
	.cwc-ab__mark {
		display: none;
	}
}


/* -------------------------------------------------------------------
   RECOVERED. This block styles the founder's letter and its portrait
   and belongs to the About Us page, but it used to sit at the tail of
   the Why Crescent section, past that section's own closing comment.
   Rebuilding Why Crescent meant replacing that section by line range,
   which took this with it — the letter lost its two-column grid, its
   sticky portrait and its lead/question typography in one go, and the
   page silently fell back to a stacked photo above a wall of text.

   Moved inside section 30 where it is read as part of About Us.
   ------------------------------------------------------------------- */

/* --- founder's photograph beside the statement ----------------------- */

/* The portrait (navy scrubs, supplied 12 Sep 2026) is shot on solid black.
   The card behind it is black to match, so while the image loads, and at
   any edge the crop leaves, the card and the photograph's own background
   are the same surface. */

.cwc-ab__foundergrid {
	display: grid;
	grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
	gap: clamp(1.75rem, 0.8rem + 3vw, 3.5rem);
	align-items: center;
}

.cwc-ab__founderphoto {
	background: #000000;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(6, 44, 58, 0.22);
}

.cwc-ab__founderimg {
	display: block;
	width: 100%;
	height: auto;
	/* The source is a 1147x1372 portrait, only a little wider than 4:5,
	   so covering the panel trims a sliver from each side. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* He is centred in the frame; held to the top so the square crop on
	   narrow screens keeps his head and shoulders, not his folded arms. */
	object-position: 50% top;
}

/* --- The founder's letter -------------------------------------------
   The two-paragraph statement this replaced sat happily beside a centred
   portrait. A letter of thirteen paragraphs does not: centred, the photo
   floats in the middle of a very tall column with white space above and
   below it, and it has scrolled away before the signature arrives. So the
   photo is pinned to the top of its column and follows the reader down. */

.cwc-ab__foundergrid {
	align-items: start;
}

.cwc-ab__founderphoto {
	position: sticky;
	top: 2rem;
}

/* The single-sentence paragraphs that carry the argument. They are set at
   the letter's body size like the rest of it, and carried by their weight
   and the extra space above them instead: at body weight, in a column this
   long, they read as sentences someone forgot to join to the paragraph
   above. */
.cwc-ab__founderbody p.is-lead {
	margin-top: 1.6rem;
	font-size: var(--cwc-ab-body-size);
	font-weight: 600;
	line-height: var(--cwc-ab-body-leading);
	letter-spacing: 0.005em;
}

/* The question the letter turns on. Indented behind a rule so the
   paragraph that answers it has something to answer. */
.cwc-ab__founderbody p.is-ask {
	margin: 1.5rem 0 1.5rem;
	padding-left: clamp(0.9rem, 0.5rem + 1.2vw, 1.5rem);
	border-left: 3px solid rgba(255, 255, 255, 0.5);
	font-size: var(--cwc-ab-body-size);
	font-style: italic;
	line-height: var(--cwc-ab-body-leading);
}

.cwc-ab__founderbody em {
	font-style: italic;
	/* Kept at the weight of the surrounding text: this is the clause the
	   sentence turns on, not a shout. */
	font-weight: 600;
}

.cwc-ab__sigorg {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FFFFFF;
	opacity: 0.92;
}

/* --- Read More on the founder's letter -------------------------------
   The letter opens folded after "A debridement should be performed....".
   The markup is the whole letter; the script adds is-folded to the figure,
   and only then is the rest hidden and the dots and button shown. Without
   the script the letter simply reads in full. */

.cwc-ab__folddots,
.cwc-ab__readmorewrap {
	display: none;
}

.cwc-ab__founder.is-folded .cwc-ab__folddots {
	display: inline;
}

.cwc-ab__founder.is-folded .cwc-ab__readmorewrap {
	display: block;
}

.cwc-ab__founder.is-folded .cwc-ab__foldrest,
.cwc-ab__founder.is-folded .cwc-ab__letterrest {
	display: none;
}

/* Focus lands here when the button is pressed; it is a reading position,
   not a control, so it does not draw a ring. */
.cwc-ab__letterrest:focus {
	outline: none;
}

/* The rest of the folded sentence fades in where the dots were. It is
   inline text, which cannot slide, so it only fades; the paragraphs below
   it arrive from the right through the usual reveal. */
.cwc-ab__founder.is-unfolded .cwc-ab__foldrest {
	animation: cwc-ab-unfold 0.55s ease both;
}

@keyframes cwc-ab-unfold {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* An outlined pill on the teal panel, filling white on hover. Stated at
   (0,2,0) and above so Astra's own button colours, padding and case do not
   apply. */
.cwc-ab__section--founder .cwc-ab__readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0.1rem 0 0;
	padding: 0.6rem 1.35rem;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cwc-ab__section--founder .cwc-ab__readmore svg {
	transition: transform 0.25s ease;
}

.cwc-ab__section--founder .cwc-ab__readmore:hover,
.cwc-ab__section--founder .cwc-ab__readmore:focus-visible {
	border-color: #FFFFFF;
	background: #FFFFFF;
	color: var(--cwc-ab-teal);
}

.cwc-ab__section--founder .cwc-ab__readmore:hover svg,
.cwc-ab__section--founder .cwc-ab__readmore:focus-visible svg {
	transform: translateY(2px);
}

.cwc-ab__section--founder .cwc-ab__readmore:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cwc-ab__founder.is-unfolded .cwc-ab__foldrest {
		animation: none;
	}

	.cwc-ab__section--founder .cwc-ab__readmore,
	.cwc-ab__section--founder .cwc-ab__readmore svg {
		transition: none;
	}
}

/* --- Leadership: the section heading and the two profiles -----------
   The founder's letter now sits inside a titled section with the rest of
   the leadership team beneath it.

   The headings here have to be given their colour explicitly, and at a
   specificity above (0,1,0). Section 38 sets every h1-h4 on the site in
   brand teal through `.entry-content :where(h1, h2, h3, h4)`, which is
   right everywhere else and invisible on this panel — the panel is that
   same teal. A plain class selector ties that rule and loses on source
   order, so these are scoped to the section, which outranks it. */

.cwc-ab__section--founder .cwc-ab__leadtitle {
	margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3.25rem);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: #FFFFFF;
}

/* A short rule under it, the same device the Why Crescent masthead uses,
   so the two pages open a section the same way. */
.cwc-ab__section--founder .cwc-ab__leadtitle::after {
	content: "";
	display: block;
	width: 66px;
	height: 4px;
	margin-top: clamp(0.9rem, 0.6rem + 0.8vw, 1.3rem);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
}

/* --- the two profiles --- */

.cwc-ab__team {
	list-style: none;
	margin: clamp(2.75rem, 1.8rem + 3vw, 4.5rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.1rem, 0.6rem + 1.6vw, 2rem);
}

/* Translucent rather than solid white: a white card on this panel would
   punch a hole in it and outweigh the founder's letter above, which is
   the piece that should carry the section. */
.cwc-ab__member {
	margin: 0;
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.07);
	transition: background 0.35s ease, border-color 0.35s ease,
		translate 0.35s cubic-bezier(0.16, 0.8, 0.28, 1),
		box-shadow 0.35s ease;
}

.cwc-ab__member:hover,
.cwc-ab__member:focus-within {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.34);
	translate: 0 -4px;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
}

.cwc-ab__memberhead {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 0.7rem + 0.9vw, 1.4rem);
	margin-bottom: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem);
	padding-bottom: clamp(1.1rem, 0.8rem + 0.8vw, 1.5rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* The initials are now only a fallback: they show if a profile's
   photograph cannot be found in the media library. Sized like a small
   portrait, so the row keeps its shape either way. */
.cwc-ab__monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	transition: transform 0.4s cubic-bezier(0.16, 0.8, 0.28, 1), background 0.35s ease;
}

.cwc-ab__member:hover .cwc-ab__monogram,
.cwc-ab__member:focus-within .cwc-ab__monogram {
	background: rgba(255, 255, 255, 0.26);
	transform: scale(1.06);
}

.cwc-ab__memberid {
	min-width: 0;
}

.cwc-ab__section--founder .cwc-ab__membername {
	margin: 0;
	font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
	line-height: 1.25;
	font-weight: 700;
	color: #FFFFFF;
}

.cwc-ab__section--founder .cwc-ab__memberrole {
	margin: 0.2rem 0 0;
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.cwc-ab__section--founder .cwc-ab__memberbio {
	margin: 0;
	font-size: var(--cwc-ab-body-size);
	line-height: var(--cwc-ab-body-leading);
	color: #FFFFFF;
}

/* The monogram settles in just after the card it sits in, the same
   fraction-late arrival the icons elsewhere on the site use. */
.cwc-ab--js .cwc-ab__reveal .cwc-ab__monogram {
	transform: scale(0.84);
}

.cwc-ab--js .cwc-ab__reveal.is-in .cwc-ab__monogram {
	transform: scale(1);
	transition-delay: calc(var(--cwc-ab-delay, 0ms) + 150ms);
}

@media (max-width: 860px) {
	.cwc-ab__team {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwc-ab__member,
	.cwc-ab__monogram {
		transition: none;
	}

	.cwc-ab__member:hover,
	.cwc-ab__member:focus-within {
		translate: none;
	}

	.cwc-ab__member:hover .cwc-ab__monogram,
	.cwc-ab__member:focus-within .cwc-ab__monogram {
		transform: none;
	}
}

/* Sticky needs a scroll container taller than the element. Below the
   breakpoint the grid is one column and the photo is above the letter,
   where pinning it would cover the text. */
@media (max-width: 860px) {
	.cwc-ab__founderphoto {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwc-ab__founderphoto {
		position: static;
	}
}

/* In a column now, so the centring and the width cap that suited a
   full-width band no longer apply. */
.cwc-ab__foundergrid .cwc-ab__founder {
	max-width: none;
	margin: 0;
}

@media (max-width: 860px) {
	.cwc-ab__foundergrid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	/* Full width the portrait would be taller than the statement it
	   introduces, so it is held to a size that reads as a portrait
	   rather than a hero image. */
	.cwc-ab__founderphoto {
		max-width: 300px;
	}

	.cwc-ab__founderimg {
		aspect-ratio: 1 / 1;
	}
}

/* --- Leadership portraits ---------------------------------------------
   Photographs in place of the initials on the two profiles.

   Framed the way the founder's portrait is, on a pale rounded panel: the
   cut-outs sit on a studio background with no transparency, and dropped
   straight onto the teal that background would read as a stray square.
   Cropped to head and shoulders before upload, so the face fills a frame
   this size rather than a whole standing figure shrinking into it.

   Each profile arrives in the order it is read: the card rises, the
   portrait settles just after it, then the short rule under the role
   draws itself. */

.cwc-ab__portrait {
	flex: 0 0 auto;
	display: block;
	width: clamp(92px, 4.5rem + 3vw, 124px);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 18px;
	background: #F1F5F5;
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.22),
		0 16px 34px -18px rgba(0, 0, 0, 0.55);
	transition: box-shadow 0.35s ease;
}

.cwc-ab__portraitimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-ab__member:hover .cwc-ab__portrait,
.cwc-ab__member:focus-within .cwc-ab__portrait {
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.5),
		0 22px 40px -18px rgba(0, 0, 0, 0.6);
}

.cwc-ab__member:hover .cwc-ab__portraitimg,
.cwc-ab__member:focus-within .cwc-ab__portraitimg {
	transform: scale(1.06);
}

.cwc-ab__memberrule {
	display: block;
	width: 38px;
	height: 3px;
	margin-top: 0.7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	transform-origin: left center;
	transition: width 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-ab__member:hover .cwc-ab__memberrule,
.cwc-ab__member:focus-within .cwc-ab__memberrule {
	width: 58px;
}

/* --- arrival --- */

.cwc-ab--js .cwc-ab__reveal .cwc-ab__portrait {
	opacity: 0;
	transform: scale(0.88);
}

.cwc-ab--js .cwc-ab__reveal.is-in .cwc-ab__portrait {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.55s ease calc(var(--cwc-ab-delay, 0ms) + 150ms),
		transform 0.6s cubic-bezier(0.16, 0.8, 0.28, 1) calc(var(--cwc-ab-delay, 0ms) + 150ms),
		box-shadow 0.35s ease;
}

.cwc-ab--js .cwc-ab__reveal .cwc-ab__memberrule {
	transform: scaleX(0);
}

.cwc-ab--js .cwc-ab__reveal.is-in .cwc-ab__memberrule {
	transform: scaleX(1);
	transition:
		transform 0.6s cubic-bezier(0.16, 0.8, 0.28, 1) calc(var(--cwc-ab-delay, 0ms) + 380ms),
		width 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* The reveal rule (".cwc-ab--js .cwc-ab__reveal", in "Reveal on scroll")
   outranks the card's own, so once a card had arrived its hover lost its
   easing, and the lift, then a transform, lost to the reveal's
   "transform: none" and never happened at all. The lift is a translate
   now, a property of its own, and an arrived card restates the reveal's
   timings alongside the hover's so neither overrides the other. */
.cwc-ab--js .cwc-ab__member.cwc-ab__reveal.is-in {
	transition:
		opacity 0.7s ease var(--cwc-ab-delay, 0ms),
		transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1) var(--cwc-ab-delay, 0ms),
		translate 0.35s cubic-bezier(0.16, 0.8, 0.28, 1),
		background 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

@media (max-width: 860px) {
	.cwc-ab__portrait {
		width: 96px;
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwc-ab__portrait,
	.cwc-ab__portraitimg,
	.cwc-ab__memberrule {
		transition: none;
	}

	.cwc-ab__member:hover .cwc-ab__portraitimg,
	.cwc-ab__member:focus-within .cwc-ab__portraitimg {
		transform: none;
	}
}

/* ===================================================================
   31. WHY CRESCENT PAGE

   Nine points: eight as a two-column card grid, then a closing panel.

   The eight were full-width alternating rows to begin with. Eight rows
   of the same shape ran to about 2,900px on desktop and read as one
   wall — the reader could not see how many points there were, and got
   from the first to the last only by scrolling a long way. Four rows of
   two halve the page and let the headings be compared side by side,
   which is how a list of principles is actually read.

   Cards are flat until pointed at. Eight permanently-boxed cards on a
   tinted ground fight the ground; lifting only the one under the cursor
   keeps the block calm. Same treatment as the Careers grid, so the two
   pages read as one site.

   Colours are the site's own — brand teal #0F779A and the pale blue the
   front page sits on. No webfonts: this page inherits the site's faces.

   Every selector is scoped to .cwc-why.
   =================================================================== */

.cwc-why {
	--cwc-why-teal: #0F779A;
	--cwc-why-teal-dark: #0B5D79;
	--cwc-why-deep: #123845;
	--cwc-why-tint: #EAF6FC;
	--cwc-why-ink: #0F779A;
	--cwc-why-body: #43555F;
	--cwc-why-line: #DEEAF1;

	color: var(--cwc-why-body);
}

.cwc-why *,
.cwc-why *::before,
.cwc-why *::after {
	box-sizing: border-box;
}

.cwc-why__wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Astra capitalises headings, which would rewrite the supplied copy —
   "Clinical Judgment Comes First" is fine but "Care at the Bedside"
   would become "Care At The Bedside". */
.cwc-why h1,
.cwc-why h2 {
	text-transform: none;
	color: var(--cwc-why-ink);
}

/* -------------------------------------------------------------------
   Masthead

   Sits on a soft wash of the brand teal rather than flat white, so the
   page opens on something and the card grid below reads as a separate
   band. No copy was added: the page has an eyebrow and a title, and
   inventing a strapline for it is not this file's job.
   ------------------------------------------------------------------- */

.cwc-why__hero {
	position: relative;
	overflow: hidden;
	padding: clamp(3.25rem, 1.5rem + 6vw, 6rem) 0 clamp(2.5rem, 1.2rem + 4vw, 4rem);
	background:
		radial-gradient(60rem 26rem at 12% -12%, rgba(15, 119, 154, 0.13) 0%, rgba(15, 119, 154, 0) 62%),
		linear-gradient(180deg, var(--cwc-why-tint) 0%, #FFFFFF 100%);
}

.cwc-why__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cwc-why-teal);
}

.cwc-why__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

.cwc-why__h1 {
	margin: 0;
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

/* A short rule under the title, the one piece of decoration the
   masthead gets. It draws itself in once the title has arrived. */
.cwc-why__h1::after {
	content: "";
	display: block;
	width: 74px;
	height: 4px;
	margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cwc-why-teal) 0%, var(--cwc-why-deep) 100%);
	transform-origin: left center;
}

/* -------------------------------------------------------------------
   The eight cards
   ------------------------------------------------------------------- */

.cwc-why__points {
	padding: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem);
	background: var(--cwc-why-tint);
}

.cwc-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 0.4rem + 1.8vw, 1.75rem);
}

.cwc-why__card {
	position: relative;
	margin: 0;
	padding: clamp(1.4rem, 0.9rem + 1.6vw, 2.15rem);
	background: #FFFFFF;
	border: 1px solid var(--cwc-why-line);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.35s ease, box-shadow 0.35s ease,
		transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* A teal edge that wipes in from the left on hover. It is the only thing
   that moves on the card besides the lift, so the card reads as one
   object responding rather than several. */
.cwc-why__card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, var(--cwc-why-teal) 0%, var(--cwc-why-deep) 100%);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.4s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-why__card:hover,
.cwc-why__card:focus-within {
	border-color: #C8E0EC;
	box-shadow: 0 18px 40px -22px rgba(16, 34, 47, 0.45);
	transform: translateY(-4px);
}

.cwc-why__card:hover::before,
.cwc-why__card:focus-within::before {
	transform: scaleY(1);
}


/* --- icon and number --- */

.cwc-why__cardtop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(0.9rem, 0.6rem + 0.8vw, 1.25rem);
}

.cwc-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	border-radius: 15px;
	color: #FFFFFF;
	background: linear-gradient(145deg, var(--cwc-why-teal) 0%, var(--cwc-why-deep) 100%);
	box-shadow: 0 8px 18px -10px rgba(18, 56, 69, 0.85);
	transition: transform 0.45s cubic-bezier(0.16, 0.8, 0.28, 1), box-shadow 0.45s ease;
}

.cwc-why__card:hover .cwc-why__icon,
.cwc-why__card:focus-within .cwc-why__icon {
	transform: scale(1.06) rotate(-4deg);
	box-shadow: 0 12px 24px -10px rgba(18, 56, 69, 0.95);
}

/* The number is set large and pale as a counter, on the opposite side of
   the card from the icon. At body size it competed with the heading; at
   this size and weight it is furniture, and it tells the reader how far
   through the eight they are. */
.cwc-why__num {
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cwc-why-teal);
	opacity: 0.16;
	user-select: none;
	transition: opacity 0.35s ease;
}

.cwc-why__card:hover .cwc-why__num,
.cwc-why__card:focus-within .cwc-why__num {
	opacity: 0.3;
}

/* --- the copy --- */

.cwc-why__card h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.42rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--cwc-why-teal);
}

.cwc-why__body p {
	margin: 0 0 0.85rem;
	font-size: clamp(0.95rem, 0.93rem + 0.14vw, 1.01rem);
	line-height: 1.72;
}

.cwc-why__body p:last-child {
	margin-bottom: 0;
}




/* -------------------------------------------------------------------
   The two calls to action
   ------------------------------------------------------------------- */

.cwc-why__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0 !important;
	padding-top: 1.35rem;
	border-top: 1px solid var(--cwc-why-line);
}

.cwc-why__btn {
	display: inline-flex;
	align-items: center;
	/* Comfortably past the 24px minimum for a touch target, and past
	   44px once the padding is counted. */
	min-height: 46px;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--cwc-why-teal);
	border-radius: 999px;
	background: var(--cwc-why-teal);
	color: #FFFFFF;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease,
		transform 0.25s ease, box-shadow 0.25s ease;
}

.cwc-why__btn:hover,
.cwc-why__btn:focus-visible {
	background: var(--cwc-why-teal-dark);
	border-color: var(--cwc-why-teal-dark);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(15, 119, 154, 0.9);
}

.cwc-why__btn.is-ghost {
	background: transparent;
	color: var(--cwc-why-teal);
}

.cwc-why__btn.is-ghost:hover,
.cwc-why__btn.is-ghost:focus-visible {
	background: var(--cwc-why-teal);
	color: #FFFFFF;
}

/* -------------------------------------------------------------------
   Closing statement

   The ninth point restates the argument the other eight make, so it
   closes the page rather than sitting in the grid. Same teal panel as
   the founder's letter on the About page, for consistency.

   White on #0F779A measures about 5:1, which clears AA for body text;
   the gradient only darkens from there, so the ratio improves.
   ------------------------------------------------------------------- */

.cwc-why__closing {
	padding: clamp(2.75rem, 1.5rem + 4vw, 4.75rem) 0;
	background: linear-gradient(135deg, var(--cwc-why-teal) 0%, var(--cwc-why-deep) 100%);
	color: #FFFFFF;
}

.cwc-why__closinginner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.cwc-why__closing .cwc-why__icon {
	background: rgba(255, 255, 255, 0.16);
	box-shadow: none;
	color: #FFFFFF;
}

.cwc-why__closing h2 {
	margin: 1.1rem 0 1.25rem;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
	line-height: 1.18;
	color: #FFFFFF;
}

.cwc-why__closing p {
	margin: 0 auto 1.05rem;
	max-width: 62ch;
	font-size: clamp(1rem, 0.96rem + 0.28vw, 1.14rem);
	line-height: 1.75;
	color: #FFFFFF;
}

/* The last line of the page, set apart from the paragraph above it. */
.cwc-why__kicker {
	margin: 1.75rem auto 0 !important;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.32);
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem) !important;
	font-weight: 600;
	line-height: 1.45 !important;
}

/* -------------------------------------------------------------------
   Reveal on scroll

   The starting state only applies once the script confirms it is
   running, so nothing is hidden if it never does.
   ------------------------------------------------------------------- */

.cwc-why--js .cwc-why__reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1);
	transition-delay: var(--cwc-why-delay, 0ms);
}

.cwc-why--js .cwc-why__reveal.is-in {
	opacity: 1;
	transform: none;
}

/* The icon settles in a fraction after the card it sits in. */
.cwc-why--js .cwc-why__reveal .cwc-why__icon {
	transform: scale(0.84);
}

.cwc-why--js .cwc-why__reveal.is-in .cwc-why__icon {
	transform: scale(1);
	transition-delay: calc(var(--cwc-why-delay, 0ms) + 160ms);
}

/* The rule under the title draws itself in rather than fading with the
   rest of the block. */
.cwc-why--js .cwc-why__h1::after {
	transform: scaleX(0);
	transition: transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1);
	transition-delay: calc(var(--cwc-why-delay, 0ms) + 260ms);
}

.cwc-why--js .cwc-why__h1.is-in::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cwc-why__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.cwc-why__wrap {
		padding: 0 18px;
	}

	.cwc-why__btn {
		/* Two long labels side by side wrap into an awkward stack of
		   uneven pills; full width reads as two clear choices. */
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* -------------------------------------------------------------------
   Reduced motion — the script returns early so nothing reveals. The
   hover movement is CSS and has to be turned off here.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-why__card,
	.cwc-why__icon,
	.cwc-why__btn,
	.cwc-why__num,
	.cwc-why__card::before {
		transition: none;
	}

	.cwc-why__card:hover,
	.cwc-why__card:focus-within,
	.cwc-why__btn:hover,
	.cwc-why__btn:focus-visible {
		transform: none;
	}

	.cwc-why__card:hover .cwc-why__icon,
	.cwc-why__card:focus-within .cwc-why__icon {
		transform: none;
	}

	/* The edge is shown outright rather than wiped in. */
	.cwc-why__card:hover::before,
	.cwc-why__card:focus-within::before {
		transform: scaleY(1);
	}
}


/* ===================================================================
   32. WEBINARS — the In-Service schedule

   Each session is a row: the date as a block on the left, the detail
   and a collapsed registration form on the right. Rows rather than
   cards because the sessions want reading in date order, and a grid of
   cards invites comparison instead.

   Colours are the site's own — brand teal #0F779A and the pale blue
   the other pages sit on. No webfonts.

   Every selector is scoped to .cwc-wb.
   =================================================================== */

.cwc-wb {
	--cwc-wb-teal: #0F779A;
	--cwc-wb-teal-dark: #0B5D79;
	--cwc-wb-tint: #EAF6FC;
	--cwc-wb-ink: #10222F;
	--cwc-wb-body: #43555F;
	--cwc-wb-muted: #6B7A86;
	--cwc-wb-line: #DEEAF1;

	color: var(--cwc-wb-body);
}

.cwc-wb *,
.cwc-wb *::before,
.cwc-wb *::after {
	box-sizing: border-box;
}

.cwc-wb__empty {
	margin: 0;
	padding: 1.5rem 1.75rem;
	border: 1px dashed var(--cwc-wb-line);
	border-radius: 14px;
	background: var(--cwc-wb-tint);
	color: var(--cwc-wb-body);
}

.cwc-wb__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.25rem;
}

.cwc-wb__item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
	padding: clamp(1.25rem, 0.8rem + 1.4vw, 1.85rem);
	background: #FFFFFF;
	border: 1px solid var(--cwc-wb-line);
	border-left: 4px solid var(--cwc-wb-teal);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(16, 60, 80, 0.06);
}

/* -------------------------------------------------------------------
   The date block
   ------------------------------------------------------------------- */

.cwc-wb__when {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0.65rem 0.4rem 0.8rem;
	background: var(--cwc-wb-tint);
	border-radius: 12px;
	text-align: center;
}

.cwc-wb__when time {
	display: block;
	line-height: 1;
}

.cwc-wb__day {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--cwc-wb-teal);
	/* Keeps single and double digit dates the same visual width so the
	   column does not jitter down the list. */
	font-variant-numeric: tabular-nums;
}

.cwc-wb__mon {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cwc-wb-ink);
}

.cwc-wb__time {
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: var(--cwc-wb-muted);
}

.cwc-wb__tbc {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cwc-wb-muted);
}

/* -------------------------------------------------------------------
   The detail
   ------------------------------------------------------------------- */

.cwc-wb__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	line-height: 1.3;
	color: var(--cwc-wb-ink);
	/* Astra capitalises headings, which would rewrite session titles. */
	text-transform: none;
}

.cwc-wb__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
	font-size: 0.85rem;
	color: var(--cwc-wb-muted);
}

.cwc-wb__tag {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(15, 119, 154, 0.10);
	color: var(--cwc-wb-teal);
	font-weight: 600;
	font-size: 0.78rem;
}

.cwc-wb__sep {
	opacity: 0.5;
}

.cwc-wb__left {
	font-weight: 600;
	color: #1D7A4F;
}

.cwc-wb__full {
	font-weight: 600;
	color: #B32D2E;
}

.cwc-wb__desc p {
	margin: 0 0 0.7rem;
	font-size: 0.95rem;
	line-height: 1.7;
}

.cwc-wb__desc p:last-child {
	margin-bottom: 0;
}

.cwc-wb__closed {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: #FDF3F3;
	color: #8A2B2C;
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------
   Result notices
   ------------------------------------------------------------------- */

.cwc-wb__notice {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	font-size: 0.92rem;
	font-weight: 500;
}

.cwc-wb__notice.is-ok {
	background: #EBF7F0;
	border-left: 3px solid #1D7A4F;
	color: #14603C;
}

.cwc-wb__notice.is-err {
	background: #FDF3F3;
	border-left: 3px solid #B32D2E;
	color: #8A2B2C;
}

/* -------------------------------------------------------------------
   Registration form

   A details element, so ten sessions are not ten open forms and the
   collapse still works with no JavaScript at all.
   ------------------------------------------------------------------- */

.cwc-wb__reg {
	margin-top: 1.1rem;
}

.cwc-wb__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.65rem 1.25rem;
	border: 1px solid var(--cwc-wb-teal);
	border-radius: 10px;
	background: var(--cwc-wb-teal);
	color: #FFFFFF;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Safari draws its own disclosure triangle unless this is removed. */
.cwc-wb__btn::-webkit-details-marker {
	display: none;
}

.cwc-wb__btn::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.25s ease;
}

.cwc-wb__reg[open] .cwc-wb__btn::after {
	transform: rotate(-135deg) translateY(-2px);
}

.cwc-wb__btn:hover,
.cwc-wb__btn:focus-visible {
	background: var(--cwc-wb-teal-dark);
	border-color: var(--cwc-wb-teal-dark);
}

.cwc-wb__form {
	margin-top: 1.1rem;
	padding: 1.25rem;
	border: 1px solid var(--cwc-wb-line);
	border-radius: 12px;
	background: var(--cwc-wb-tint);
}

.cwc-wb__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem 1rem;
}

.cwc-wb__field {
	margin: 0;
}

.cwc-wb__field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cwc-wb-ink);
}

.cwc-wb__field input,
.cwc-wb__field select {
	width: 100%;
	/* 16px stops iOS Safari zooming the viewport when a field is
	   focused, which it does for anything smaller. */
	font-size: 16px;
	padding: 0.6rem 0.7rem;
	border: 1px solid #C7D9E4;
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--cwc-wb-ink);
}

.cwc-wb__field input:focus,
.cwc-wb__field select:focus {
	outline: 2px solid var(--cwc-wb-teal);
	outline-offset: 1px;
	border-color: var(--cwc-wb-teal);
}

.cwc-wb__check {
	margin: 1rem 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
}

.cwc-wb__check label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	cursor: pointer;
}

.cwc-wb__check input {
	/* Default checkboxes are around 13px, well under a comfortable
	   target, and this one carries a consent decision. */
	width: 20px;
	height: 20px;
	margin-top: 0.1rem;
	flex: 0 0 auto;
	accent-color: var(--cwc-wb-teal);
}

.cwc-wb__actions {
	margin: 1.15rem 0 0;
}

.cwc-wb__submit {
	min-height: 46px;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: 10px;
	background: var(--cwc-wb-teal);
	color: #FFFFFF;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.cwc-wb__submit:hover,
.cwc-wb__submit:focus-visible {
	background: var(--cwc-wb-teal-dark);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------
   Reveal on scroll — starting state only applies once the script is
   confirmed running, so the schedule is never blank without it.
   ------------------------------------------------------------------- */

.cwc-wb--js .cwc-wb__reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-wb--js .cwc-wb__reveal.is-in {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 600px) {
	.cwc-wb__item {
		/* The date block becomes a strip across the top: an 96px column
		   beside the text leaves the title only a couple of words wide. */
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}

	.cwc-wb__when {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.5rem;
		padding: 0.5rem 0.8rem;
	}

	.cwc-wb__day,
	.cwc-wb__mon,
	.cwc-wb__time {
		display: inline;
		margin: 0;
	}

	.cwc-wb__day {
		font-size: 1.35rem;
	}

	.cwc-wb__fields {
		grid-template-columns: 1fr;
	}

	.cwc-wb__submit {
		width: 100%;
	}
}

/* -------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-wb__btn,
	.cwc-wb__btn::after,
	.cwc-wb__submit {
		transition: none;
	}

	.cwc-wb__submit:hover,
	.cwc-wb__submit:focus-visible {
		transform: none;
	}
}


/* ===================================================================
   33. COURSE TRACKS — keeping the two programmes apart

   Two small pieces of interface exist only because the free course and
   the paid certification are separate populations:

     .cwc-track-notice  the explanation shown after a redirect, so a
                        refused click does not just look broken

   Two others have been and gone, both for the same reason. A pair of
   cards asking which course to register for, and a banner on the form
   naming the course with a link to the other one: each existed to put a
   programme in front of somebody who had not asked about it, which is
   the one thing keeping the two courses apart is meant to prevent.
   ------------------------------------------------------------------- */


/* --- the explanation after a redirect --- */

.cwc-track-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: 900px;
	margin: 1.5rem auto;
	padding: 1rem 1.25rem;
	border: 1px solid #F0D9A8;
	border-left: 3px solid #C98A12;
	border-radius: 8px;
	background: #FDF7EA;
}

.cwc-track-notice__icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	margin-top: 1px;
	color: #C98A12;
}

.cwc-track-notice p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: #5B4715;
}

.cwc-track-notice a {
	color: #0F779A;
	text-decoration: underline;
}

/* One line under the Course Content heading on the gated course, saying
   why the module titles are not links. Muted, because it is a caption and
   not a warning — nothing has gone wrong. */
.cwc-curriculum-note {
	margin: -0.5rem 0 1.1rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: #55707B;
}

/* The titles keep their weight and size once the anchor is gone; only the
   link colour and the pointer go with it, which is the intended signal. */
.tutor-course-content-list-item-title {
	cursor: default;
}

/* The course panel on the "already signed in" card. One course, one
   action — either into module one or to pay for it — so it is stated as a
   block rather than a row of competing links. */
.cwc-signedin__course {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	margin: 1.4rem 0 0.25rem;
	padding: 1.15rem 1rem;
	border: 1px solid #DCE7EC;
	border-radius: 10px;
	background: #F7FBFC;
}

.cwc-signedin__coursename {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: #123845;
	text-align: center;
}

.cwc-signedin__go {
	min-width: 220px;
	text-align: center;
}

.cwc-signedin__note {
	font-size: 0.82rem;
	line-height: 1.5;
	color: #55707B;
	text-align: center;
}

/* Signing out, under the course entry box. Quiet: it is a way out, not a
   call to action, and it sits directly beneath the button that is. */
.cwc-signout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem;
	margin: 0.9rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid #E4EDF1;
	font-size: 0.84rem;
	line-height: 1.5;
	color: #55707B;
}

.cwc-signout__link {
	color: #0F779A;
	text-decoration: underline;
}

/* The timezone under the session time. Small and muted: it qualifies the
   time rather than competing with it, but it has to be there — the same
   session is advertised to sixteen states. */
.cwc-wb__tz {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #7C929C;
}


/* ===================================================================
   34. BLOGS — the article grid at /blogs/

   Cards rather than Astra's stacked list: these are short clinical
   articles being scanned, not read in sequence, so the picture and the
   headline need to sit side by side across the page.

   Four across on a wide screen, two on a tablet, one on a phone. Every
   card is the same height whatever the length of its title, and the
   Read more link is pinned to the bottom so the row of links stays on
   one line across the grid.
   ------------------------------------------------------------------- */

.cwc-blog {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2rem);
}

.cwc-blog__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}

.cwc-blog__title {
	margin: 0 0 0.7rem;
	font-size: clamp(28px, 1.5rem + 1.4vw, 40px);
	line-height: 1.15;
	color: #123845;
	text-transform: none;
}

.cwc-blog__intro,
.cwc-blog__intro p {
	margin: 0;
	font-size: clamp(15px, 0.9rem + 0.25vw, 17.5px);
	line-height: 1.65;
	color: #55707B;
}

.cwc-blog__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

@media (max-width: 1100px) {
	.cwc-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.cwc-blog__grid { grid-template-columns: minmax(0, 1fr); }
}

.cwc-blog__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid #DCE7EC;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 2px 12px rgba(18, 56, 69, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cwc-blog__card:hover,
.cwc-blog__card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(18, 56, 69, 0.13);
}

/* post_class() brings Astra's own article classes along, and
   ".ast-separate-container .ast-article-post" pads an article by
   5.34em 6.67em for Astra's stacked blog layout. Inside a 263px card that
   leaves a 48px content box, and every title wraps one word per line.

   Two classes, to match the specificity of the rule being undone rather
   than reaching for !important — which would win here but would also
   override anything set later for a good reason. The post classes
   themselves are kept: plugins and stylesheets legitimately hook them,
   and only the spacing Astra assumes needs undoing. */
.cwc-blog__grid .cwc-blog__card {
	padding: 0;
	margin: 0;
}

/* A fixed ratio, so a row of cards lines up whatever shape the
   uploaded images happen to be. */
.cwc-blog__thumb {
	display: block;
	width: 100%;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #EAF3F6;
}

.cwc-blog__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.cwc-blog__card:hover .cwc-blog__img { transform: scale(1.04); }

/* Stands in for a missing featured image so the grid keeps its rhythm. */
.cwc-blog__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0F779A 0%, #0B5E7A 100%);
	color: rgba(255, 255, 255, 0.55);
}

.cwc-blog__placeholder svg { width: 46px; height: 46px; }

.cwc-blog__body {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1 1 auto;
	padding: clamp(1rem, 2vw, 1.35rem);
}

.cwc-blog__name {
	margin: 0 0 0.6rem;
	font-size: clamp(16px, 0.95rem + 0.25vw, 18px);
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
}

.cwc-blog__name a {
	color: #123845;
	text-decoration: none;
}

.cwc-blog__name a:hover,
.cwc-blog__name a:focus-visible { color: #0F779A; }

.cwc-blog__excerpt {
	margin: 0 0 1.1rem;
	font-size: clamp(14px, 0.85rem + 0.15vw, 15px);
	line-height: 1.6;
	color: #55707B;
}

.cwc-blog__more {
	margin-top: auto;
	align-self: flex-start;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0F779A;
	text-decoration: none;
}

.cwc-blog__more span[aria-hidden] { margin-left: 0.25rem; }

.cwc-blog__more:hover,
.cwc-blog__more:focus-visible {
	color: #0B5E7A;
	text-decoration: underline;
}

.cwc-blog__empty {
	text-align: center;
	padding: 3rem 1rem;
	font-size: 1rem;
	color: #55707B;
}

.cwc-blog .navigation.pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.cwc-blog .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 0.45rem 0.7rem;
	margin: 0 0.15rem;
	border: 1px solid #DCE7EC;
	border-radius: 7px;
	color: #0F779A;
	text-decoration: none;
	font-size: 0.9rem;
}

.cwc-blog .page-numbers.current,
.cwc-blog .page-numbers:hover {
	background: #0F779A;
	border-color: #0F779A;
	color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.cwc-blog__card,
	.cwc-blog__img { transition: none; }
	.cwc-blog__card:hover,
	.cwc-blog__card:focus-within { transform: none; }
	.cwc-blog__card:hover .cwc-blog__img { transform: none; }
}

/* ===================================================================
   CAREERS / FOR PHYSICIANS  (page 2017)
   Section built by inc/careers-page.php.
   Every selector is scoped to .cwc-careers.
   =================================================================== */

.cwc-careers {
	--cwc-careers-teal: #0F779A;
	--cwc-careers-teal-dark: #0B5D79;
	--cwc-careers-deep: #123845;
	--cwc-careers-tint: #EAF6FC;
	--cwc-careers-ink: #10222F;
	--cwc-careers-body: #43555F;
	--cwc-careers-line: #DEEAF1;

	color: var(--cwc-careers-body);
}

.cwc-careers *,
.cwc-careers *::before,
.cwc-careers *::after {
	box-sizing: border-box;
}

/* Astra capitalises every heading, which would rewrite the copy —
   "Set Your Own Schedule" survives it, but "Bring Wound Care Back to the
   Bedside" would become "Bring Wound Care Back To The Bedside". */
.cwc-careers h1,
.cwc-careers h2,
.cwc-careers h3 {
	text-transform: none;
	color: var(--cwc-careers-ink);
}

.cwc-careers__wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}

/* -------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------- */

.cwc-careers__hero {
	padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) 0 clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
}

.cwc-careers__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cwc-careers-teal);
}

.cwc-careers__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

.cwc-careers__h1 {
	margin: 0;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.15rem);
	line-height: 1.1;
	max-width: 24ch;
}

.cwc-careers__intro {
	margin: 1.1rem 0 0;
	max-width: 66ch;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	line-height: 1.7;
}

/* -------------------------------------------------------------------
   The six points
   ------------------------------------------------------------------- */

.cwc-careers__opportunity {
	background: var(--cwc-careers-tint);
	padding: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem) 0;
}

.cwc-careers__head {
	text-align: center;
	margin: 0 auto clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
	max-width: 46rem;
}

.cwc-careers__head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
	line-height: 1.2;
	color: var(--cwc-careers-teal);
}

.cwc-careers__triad {
	margin: 0.7rem 0 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--cwc-careers-deep);
}

.cwc-careers__triad span {
	margin: 0 0.35rem;
	font-weight: 400;
	color: var(--cwc-careers-teal);
}

.cwc-careers__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.1rem, 0.5rem + 1.8vw, 2rem) clamp(1.5rem, 0.6rem + 3vw, 3.25rem);
}

.cwc-careers__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.9rem, 0.5rem + 1vw, 1.35rem);
	align-items: start;
	padding: clamp(1rem, 0.6rem + 1vw, 1.5rem);
	margin: 0;
	border-radius: 14px;
	background: transparent;
	border: 1px solid transparent;
	transition: background 0.35s ease, border-color 0.35s ease,
		box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* The card is flat until pointed at. Six permanently-boxed cards on a
   tinted ground fight the ground; lifting only the one under the cursor
   keeps the block calm and still rewards the pointer. */
.cwc-careers__card:hover,
.cwc-careers__card:focus-within {
	background: #FFFFFF;
	border-color: var(--cwc-careers-line);
	box-shadow: 0 14px 34px -18px rgba(16, 34, 47, 0.45);
	transform: translateY(-3px);
}

/* --- the icon disc --- */

.cwc-careers__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	border-radius: 50%;
	color: #FFFFFF;
	background: linear-gradient(145deg, var(--cwc-careers-teal) 0%, var(--cwc-careers-deep) 100%);
	box-shadow: 0 8px 18px -10px rgba(18, 56, 69, 0.85);
	transition: transform 0.4s cubic-bezier(0.16, 0.8, 0.28, 1), box-shadow 0.4s ease;
}

.cwc-careers__disc.is-onteal {
	background: #FFFFFF;
	color: var(--cwc-careers-teal);
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5);
}

.cwc-careers__card:hover .cwc-careers__disc,
.cwc-careers__card:focus-within .cwc-careers__disc {
	transform: scale(1.07) rotate(-4deg);
	box-shadow: 0 12px 24px -10px rgba(18, 56, 69, 0.95);
}

.cwc-careers__icon {
	display: inline-flex;
}

/* --- the copy beside it --- */

.cwc-careers__text h3 {
	margin: 0 0 0.4rem;
	font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
	line-height: 1.3;
	font-weight: 700;
	color: var(--cwc-careers-teal);
}

.cwc-careers__text p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.65;
}

/* -------------------------------------------------------------------
   Compensation
   ------------------------------------------------------------------- */

.cwc-careers__pay .cwc-careers__wrap {
	max-width: 920px;
}

.cwc-careers__pay {
	padding: clamp(2.5rem, 1.4rem + 3.4vw, 4rem) 0;
}

.cwc-careers__payinner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.1rem, 0.6rem + 1.4vw, 1.75rem);
	align-items: start;
	padding: clamp(1.5rem, 0.9rem + 2vw, 2.5rem);
	border-radius: 18px;
	background: linear-gradient(135deg, var(--cwc-careers-teal) 0%, var(--cwc-careers-deep) 100%);
	color: rgba(255, 255, 255, 0.92);
}

.cwc-careers__payinner h2 {
	margin: 0 0 0.5rem;
	color: #FFFFFF;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
	line-height: 1.25;
}

.cwc-careers__payinner p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.72;
}

/* -------------------------------------------------------------------
   Call to action
   ------------------------------------------------------------------- */

.cwc-careers__cta {
	border-top: 1px solid var(--cwc-careers-line);
	padding: clamp(2.25rem, 1.3rem + 3vw, 3.5rem) 0 clamp(2.75rem, 1.5rem + 3.5vw, 4.25rem);
}

.cwc-careers__ctainner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.cwc-careers__ctainner h2 {
	margin: 0 0 0.4rem;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
	line-height: 1.25;
}

.cwc-careers__ctainner p {
	margin: 0;
	max-width: 58ch;
	line-height: 1.65;
}

.cwc-careers__btn {
	display: inline-block;
	flex: 0 0 auto;
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	background: var(--cwc-careers-teal);
	color: #FFFFFF;
	font-weight: 600;
	font-size: 0.97rem;
	text-decoration: none;
	border: 2px solid var(--cwc-careers-teal);
	transition: background 0.3s ease, border-color 0.3s ease,
		transform 0.3s cubic-bezier(0.16, 0.8, 0.28, 1), box-shadow 0.3s ease;
}

.cwc-careers__btn:hover,
.cwc-careers__btn:focus-visible {
	background: var(--cwc-careers-teal-dark);
	border-color: var(--cwc-careers-teal-dark);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(15, 119, 154, 0.9);
}

/* -------------------------------------------------------------------
   Scroll reveal
   The starting state is only applied once the script has added
   .cwc-careers--js, so with no JS the page is simply visible.
   ------------------------------------------------------------------- */

.cwc-careers--js .cwc-careers__reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1);
	transition-delay: var(--cwc-careers-delay, 0ms);
}

.cwc-careers--js .cwc-careers__reveal.is-in {
	opacity: 1;
	transform: none;
}

/* The disc settles in a fraction after the card it sits in. */
.cwc-careers--js .cwc-careers__reveal .cwc-careers__disc {
	transform: scale(0.84);
}

.cwc-careers--js .cwc-careers__reveal.is-in .cwc-careers__disc {
	transform: scale(1);
	transition-delay: calc(var(--cwc-careers-delay, 0ms) + 160ms);
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 860px) {
	.cwc-careers__grid {
		grid-template-columns: 1fr;
	}

	.cwc-careers__h1 {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.cwc-careers__wrap {
		padding: 0 18px;
	}

	.cwc-careers__card,
	.cwc-careers__payinner {
		grid-template-columns: 1fr;
	}

	.cwc-careers__disc {
		width: 52px;
		height: 52px;
	}

	.cwc-careers__ctainner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cwc-careers__btn {
		width: 100%;
		text-align: center;
	}
}

/* -------------------------------------------------------------------
   Reduced motion — the script returns early so nothing reveals, but the
   hover transitions are CSS and have to be turned off here.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-careers__card,
	.cwc-careers__disc,
	.cwc-careers__btn {
		transition: none;
	}

	.cwc-careers__card:hover,
	.cwc-careers__card:focus-within,
	.cwc-careers__btn:hover,
	.cwc-careers__btn:focus-visible {
		transform: none;
	}

	.cwc-careers__card:hover .cwc-careers__disc,
	.cwc-careers__card:focus-within .cwc-careers__disc {
		transform: none;
	}
}

/* ===================================================================
   CAREERS — PHYSICIAN APPLICATION FORM
   Section built by inc/careers-form.php. Scoped to .cwc-careers.
   =================================================================== */

.cwc-careers__apply {
	padding: clamp(2.5rem, 1.4rem + 3.4vw, 4rem) 0 clamp(1rem, 0.6rem + 1vw, 1.5rem);
}

/* The card is the one white surface on the page and carries the teal
   edge, so the form reads as the thing being asked of the reader rather
   than as another block of copy. */
.cwc-careers__applycard {
	position: relative;
	max-width: 940px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 1px solid var(--cwc-careers-line);
	border-radius: 20px;
	padding: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);
	box-shadow: 0 26px 60px -34px rgba(16, 34, 47, 0.5);
	overflow: hidden;
}

.cwc-careers__applycard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cwc-careers-teal) 0%, var(--cwc-careers-deep) 55%, var(--cwc-careers-teal) 100%);
}

.cwc-careers__applyhead {
	margin-bottom: clamp(1.35rem, 0.9rem + 1.4vw, 2rem);
}

.cwc-careers__applyhead h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
	line-height: 1.2;
}

.cwc-careers__applyhead p {
	margin: 0;
	max-width: 60ch;
	line-height: 1.65;
}

/* -------------------------------------------------------------------
   Result message
   ------------------------------------------------------------------- */

.cwc-careers__notice {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.15rem;
	border-radius: 12px;
	border-left: 4px solid;
	font-size: 0.97rem;
	line-height: 1.6;
}

.cwc-careers__notice.is-ok {
	background: #E8F6EF;
	border-color: #1F8A5B;
	color: #14603F;
}

.cwc-careers__notice.is-bad {
	background: #FDF0EE;
	border-color: #C0503F;
	color: #8C3123;
}

/* -------------------------------------------------------------------
   Fields
   ------------------------------------------------------------------- */

.cwc-careers__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.9rem, 0.5rem + 1vw, 1.4rem) clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.cwc-careers__field {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

/* NPI sits on its own row beside the state, but the state select is the
   wider control, so the last field spans when it would otherwise be
   orphaned next to nothing. */
.cwc-careers__fields > .cwc-careers__field:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.cwc-careers__field label {
	margin-bottom: 0.4rem;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cwc-careers-deep);
}

.cwc-careers__req {
	color: var(--cwc-careers-teal);
}

.cwc-careers__field input,
.cwc-careers__field select {
	width: 100%;
	padding: 0.78rem 0.95rem;
	font-size: 0.97rem;
	font-family: inherit;
	color: var(--cwc-careers-ink);
	background: #F7FBFD;
	border: 1.5px solid var(--cwc-careers-line);
	border-radius: 10px;
	outline: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease,
		background 0.25s ease, transform 0.25s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-careers__field input::placeholder {
	color: #9DB2BE;
}

.cwc-careers__field input:hover,
.cwc-careers__field select:hover {
	border-color: #BFD9E5;
}

.cwc-careers__field input:focus,
.cwc-careers__field select:focus {
	background: #FFFFFF;
	border-color: var(--cwc-careers-teal);
	box-shadow: 0 0 0 4px rgba(15, 119, 154, 0.14);
	transform: translateY(-1px);
}

/* The select keeps its own arrow off so one arrow is drawn consistently
   across browsers. */
.cwc-careers__selectwrap {
	position: relative;
	display: block;
}

.cwc-careers__selectwrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--cwc-careers-teal);
	border-bottom: 2px solid var(--cwc-careers-teal);
	transform: rotate(45deg);
	pointer-events: none;
	transition: transform 0.25s ease;
}

.cwc-careers__selectwrap:focus-within::after {
	transform: rotate(225deg);
	margin-top: -2px;
}

.cwc-careers__field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.5rem;
	cursor: pointer;
}

.cwc-careers__hint {
	margin-top: 0.35rem;
	font-size: 0.81rem;
	line-height: 1.5;
	color: #6C808C;
}

/* --- a field the browser rejected --- */

.cwc-careers__field.has-error input,
.cwc-careers__field.has-error select {
	border-color: #C0503F;
	background: #FEF7F6;
	animation: cwc-careers-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.cwc-careers__field.has-error input:focus,
.cwc-careers__field.has-error select:focus {
	box-shadow: 0 0 0 4px rgba(192, 80, 63, 0.15);
}

@keyframes cwc-careers-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

/* -------------------------------------------------------------------
   The resume drop zone
   ------------------------------------------------------------------- */

.cwc-careers__field.is-file {
	margin-top: clamp(1rem, 0.6rem + 1vw, 1.5rem);
}

.cwc-careers__drop {
	position: relative;
	border: 2px dashed #C3DCE8;
	border-radius: 14px;
	background: #F7FBFD;
	transition: border-color 0.3s ease, background 0.3s ease,
		box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* The input covers the whole zone so the click target is the zone, not a
   small button inside it. It stays a real, focusable file input. */
.cwc-careers__file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cwc-careers__dropinner {
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 0.5rem + 0.9vw, 1.2rem);
	padding: clamp(1.1rem, 0.8rem + 1.1vw, 1.6rem) clamp(1rem, 0.7rem + 1vw, 1.5rem);
	pointer-events: none;
}

.cwc-careers__dropicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #FFFFFF;
	background: linear-gradient(145deg, var(--cwc-careers-teal) 0%, var(--cwc-careers-deep) 100%);
	box-shadow: 0 8px 18px -10px rgba(18, 56, 69, 0.85);
	transition: transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1), background 0.3s ease;
}

.cwc-careers__droptext {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cwc-careers__dropname {
	font-size: 0.99rem;
	font-weight: 700;
	color: var(--cwc-careers-deep);
	overflow-wrap: anywhere;
}

.cwc-careers__dropmeta {
	margin-top: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #6C808C;
}

.cwc-careers__drop:hover,
.cwc-careers__drop:focus-within {
	border-color: var(--cwc-careers-teal);
	background: #F0F8FC;
}

.cwc-careers__drop:focus-within {
	box-shadow: 0 0 0 4px rgba(15, 119, 154, 0.14);
}

.cwc-careers__drop:hover .cwc-careers__dropicon,
.cwc-careers__drop:focus-within .cwc-careers__dropicon {
	transform: translateY(-2px) scale(1.05);
}

/* --- a file is being dragged over it --- */

.cwc-careers__drop.is-over {
	border-color: var(--cwc-careers-teal);
	border-style: solid;
	background: #E4F3FA;
	transform: scale(1.01);
	box-shadow: 0 18px 40px -24px rgba(15, 119, 154, 0.8);
}

.cwc-careers__drop.is-over .cwc-careers__dropicon {
	animation: cwc-careers-bob 0.9s ease-in-out infinite;
}

@keyframes cwc-careers-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* --- a file has been chosen --- */

.cwc-careers__drop.is-filled {
	border-style: solid;
	border-color: #1F8A5B;
	background: #F1FAF5;
}

.cwc-careers__drop.is-filled .cwc-careers__dropicon {
	background: linear-gradient(145deg, #23A06A 0%, #14603F 100%);
	animation: cwc-careers-pop 0.4s cubic-bezier(0.16, 0.8, 0.28, 1);
}

@keyframes cwc-careers-pop {
	0%   { transform: scale(0.7); }
	60%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* --- the file was rejected before it was ever sent --- */

.cwc-careers__drop.is-bad {
	border-style: solid;
	border-color: #C0503F;
	background: #FDF3F1;
}

.cwc-careers__drop.is-bad .cwc-careers__dropicon {
	background: linear-gradient(145deg, #D2604E 0%, #8C3123 100%);
}

.cwc-careers__drop.is-bad .cwc-careers__dropmeta {
	color: #8C3123;
}

/* -------------------------------------------------------------------
   Submit
   ------------------------------------------------------------------- */

.cwc-careers__formfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(1.35rem, 0.9rem + 1.4vw, 2rem);
	padding-top: clamp(1.15rem, 0.8rem + 1.2vw, 1.6rem);
	border-top: 1px solid var(--cwc-careers-line);
}

.cwc-careers__submit {
	font-family: inherit;
	cursor: pointer;
	position: relative;
}

.cwc-careers__formnote {
	font-size: 0.84rem;
	color: #6C808C;
}

/* While the browser is uploading. The label is left alone — swapping the
   text would reflow the button mid-click. */
.cwc-careers__form.is-sending .cwc-careers__submit {
	pointer-events: none;
	opacity: 0.75;
}

.cwc-careers__form.is-sending .cwc-careers__submit::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.6em;
	vertical-align: -0.1em;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: cwc-careers-spin 0.7s linear infinite;
}

@keyframes cwc-careers-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------
   Honeypot — off screen rather than display:none, so something filling
   in every field still finds it.
   ------------------------------------------------------------------- */

.cwc-careers__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 700px) {
	.cwc-careers__fields {
		grid-template-columns: 1fr;
	}

	.cwc-careers__dropinner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cwc-careers__formfoot {
		flex-direction: column;
		align-items: stretch;
	}

	.cwc-careers__submit {
		width: 100%;
	}

	.cwc-careers__formnote {
		text-align: center;
	}
}

/* -------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-careers__field input,
	.cwc-careers__field select,
	.cwc-careers__drop,
	.cwc-careers__dropicon,
	.cwc-careers__selectwrap::after {
		transition: none;
	}

	.cwc-careers__field input:focus,
	.cwc-careers__field select:focus,
	.cwc-careers__drop.is-over {
		transform: none;
	}

	.cwc-careers__field.has-error input,
	.cwc-careers__field.has-error select,
	.cwc-careers__drop.is-over .cwc-careers__dropicon,
	.cwc-careers__drop.is-filled .cwc-careers__dropicon,
	.cwc-careers__form.is-sending .cwc-careers__submit::after {
		animation: none;
	}

	.cwc-careers__drop:hover .cwc-careers__dropicon,
	.cwc-careers__drop:focus-within .cwc-careers__dropicon {
		transform: none;
	}
}

/* ===================================================================
   CONTACT US — "Call Us" and "Email Us" (page 183)

   The address was breaking mid-word: "info@crescentwoundcare." above
   "com". The cause is the Email column's own padding, not the address.
   That column is 290px wide with padding 60px 60px 60px 30px, leaving a
   200px content box for an address needing 226px, while the Call Us
   column beside it uses 40px on the right for a 14-character phone
   number.

   So the space is rebalanced towards the column that needs it: the right
   padding comes down to 20px, and a min-width stops the column being
   squeezed back under its content — Elementor sets min-width:0 on .e-con,
   which is what let it collapse in the first place.

   276px is the arithmetic: 226 for the address, plus 20 right and 30 left
   padding. 280 rounds it up. The row is 570px and Call Us needs 280, so
   both fit with room to spare.

   min-width rather than flex-shrink:0, which was tried and is too blunt —
   it let this column claim the whole row and crushed Call Us to 72px.
   This was also tried in the page's Elementor data first, where the flex
   row just moved the shortfall to the other column.
   =================================================================== */

.elementor-183 .elementor-element.elementor-element-dff01f3 {
	min-width: 280px;
	padding-right: 20px;
}

.elementor-183 .elementor-element.elementor-element-8eb0e67 .elementor-icon-box-description {
	/* The box is wide enough now; this only guarantees the address itself
	   is never what breaks if the column is nudged again. */
	white-space: nowrap;
}

/* Below Elementor's tablet breakpoint the columns stack and each has the
   full width, so both rules come off and the page's own padding returns. */
@media (max-width: 1024px) {
	.elementor-183 .elementor-element.elementor-element-dff01f3 {
		min-width: 0;
		padding-right: 60px;
	}
}

/* On the narrowest phones the stacked column is only ~272px, and 60px of
   right padding leaves too little for the address again. Trimmed there
   rather than shrinking the type, so it stays the same size as the phone
   number beside it. */
@media (max-width: 360px) {
	.elementor-183 .elementor-element.elementor-element-dff01f3 {
		padding-right: 20px;
	}
}

/* ===================================================================
   35. FOOTER — COLUMN WIDTHS AND THE EMAIL ROW

   The four footer columns are equal quarters of the row, and what they
   hold is nothing like equal:

     Quick Links   needs 103px and had 235-262 — over 100px of trailing
                   white space, which is the wide channel you see
                   between it and Service Areas
     Service Areas needs 238px for two sub-columns of state names, so
                   almost nothing was left between them
     Contact Info  needs 272px to hold info@crescentwoundcare.com on one
                   line and had less, so it broke after the dot

   Measured, not estimated: the widest state name is "Pennsylvania" at
   98px plus 21px for its pin, so a sub-column needs 119px; the address
   needs 226px plus 46px for its icon and gap.

     logo           minmax(140px, 1fr)  takes the slack, never crushed
     Quick Links    auto                its own width, no trailing space
     Service Areas  up to 296px         two sub-columns and a channel
     Contact Info   272-276px           a hard floor, see below

   Quick Links sizing to content closes the wide channel, and the slack
   moving to the logo column shifts the other three left into an even
   rhythm.

   On the breakpoint, and two wrong guesses
   ----------------------------------------
   This started scoped to min-width 1280px, then 1080px, and the client
   still saw the old footer both times from a screen that looked about
   1366px wide in a screenshot. Screenshot pixels are not CSS pixels:
   with Windows display scaling a 1366px-wide capture is a 1093px or
   911px viewport, so guessing the breakpoint from an image is guessing.

   So it no longer depends on a guess. Everything applies across the
   whole range in which Astra keeps four columns — from 922px, where its
   own layout takes over and stacks them. Contact Info is given a hard
   272px floor rather than a cap, so the address is on one line at every
   width in that range instead of only on wide screens. The logo gets a
   140px floor so the slack column cannot be squeezed to nothing.

   The 50px channel inside Service Areas is the one thing that still
   needs room: below about 1080px the column cannot hold two 119px
   sub-columns and 50px between them, so it keeps the 16px it always had
   and steps up to 50px once there is space. That degrades rather than
   breaking — the alternative was state names wrapping, which was
   measured happening at 241px of column.
   =================================================================== */

@media (min-width: 922px) {

	.site-footer .ast-builder-footer-grid-columns.site-primary-footer-inner-wrap {
		grid-template-columns:
			minmax(140px, 1fr)
			auto
			minmax(0, 296px)
			minmax(272px, 276px);
	}

	/* The floor on Contact Info above is what makes this safe at every
	   width here, rather than only on a wide screen. */
	.site-footer .cwc-contact-email a {
		white-space: nowrap;
	}

	/* The list is CSS multi-column by default, which splits the box in
	   half and gives the leftover width to the sub-columns — so the names
	   sat wide apart while the channel between them stayed at the gap.

	   justify-content: space-between was tried and overshot the other
	   way: it pushes every spare pixel into the channel, which measured
	   72px against the grid's 50px, so the columns read as too far apart
	   rather than too close. The gap is set outright instead.

	   grid-auto-flow: column with an explicit row count fills downwards,
	   which a plain grid does not — it fills left to right, which turned
	   two contiguous alphabetical runs into a zigzag. The row count comes
	   from the widget as --cwc-areas-rows, derived from the list, so
	   adding a state needs no change here. */
	.site-footer .cwc-areas {
		columns: auto;
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(var(--cwc-areas-rows, 8), auto);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	/* The logo column takes the leftover width, so the logo grew with it
	   — 367px at 1440px against the 263px it was before. Capped near its
	   old size so it is the same object at every width.

	   The cap is on the widget rather than the image because WordPress
	   puts an inline max-width:100% on the img itself, which no
	   stylesheet rule outranks without !important. The image is 100% of
	   this box, so bounding the box bounds the image. */
	.site-footer .footer-widget-area .widget_media_image {
		max-width: 280px;
	}
}

/* Room for the full channel: 296px of column is two 123px sub-columns
   and 50px between them, matching the 50px between the columns. */
@media (min-width: 1080px) {
	.site-footer .cwc-areas {
		column-gap: 50px;
	}
}

/* ===================================================================
   36. HEADER — ONE WHITE BAR, AND AN UNDERLINE THAT SHOWS WHERE YOU ARE

   Four things the client asked for, all on the main navigation.

   The white bar is mostly not done here: Astra's transparent header is
   switched off in inc/header-nav.php by dropping the body class every
   one of its rules is scoped to. Doing that in CSS would have meant
   overriding a background, two link colours, a hover colour and a
   position, and hoping none was missed. Only the explicit white below is
   CSS, because the header's own background was never set to anything —
   it merely inherited the white of the page behind it, which is not the
   same thing as being white.

   The underline is one mechanism used twice: a 2px bar under the label
   that scales out from the left on hover, and stays put on the page you
   are on. Scale rather than width, so it is composited rather than
   re-laid-out every frame and reverses cleanly when the pointer leaves
   part-way through.

   Sub-menu links were #005EE9 — Astra's global link blue, nothing to do
   with the menu — against the #0F779A of the items above them. They now
   match, which is what makes the dropdown read as part of the same menu.
   =================================================================== */

/* -------------------------------------------------------------------
   A genuinely white bar, on every page
   ------------------------------------------------------------------- */

.site-header,
.ast-main-header-wrap,
.main-header-bar,
.ast-primary-header-bar {
	background-color: #FFFFFF;
}

/* -------------------------------------------------------------------
   The underline

   Anchored to the middle of the link rather than its bottom edge: the
   top-level links are 70px tall to give the bar its height, so a rule at
   the bottom would sit a long way under the text. 0.85em below the
   centre puts it just under the label whatever the line-height is.
   ------------------------------------------------------------------- */

.main-header-menu > .menu-item > .menu-link,
.ast-nav-menu > .menu-item > .menu-link,
.main-header-menu .sub-menu .menu-link,
.ast-nav-menu .sub-menu .menu-link {
	position: relative;
}

.main-header-menu > .menu-item > .menu-link::after,
.ast-nav-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	top: calc(50% + 0.85em);
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.16, 0.8, 0.28, 1);
	pointer-events: none;
}

/* The sub-menu rows are ordinary blocks, so their bar sits above the
   bottom padding rather than being centred on the text. */
.main-header-menu .sub-menu .menu-link::after,
.ast-nav-menu .sub-menu .menu-link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 8px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.16, 0.8, 0.28, 1);
	pointer-events: none;
}

/* --- pointer and keyboard --- */

.main-header-menu > .menu-item > .menu-link:hover::after,
.main-header-menu > .menu-item > .menu-link:focus-visible::after,
.ast-nav-menu > .menu-item > .menu-link:hover::after,
.ast-nav-menu > .menu-item > .menu-link:focus-visible::after,
.main-header-menu .sub-menu .menu-link:hover::after,
.main-header-menu .sub-menu .menu-link:focus-visible::after,
.ast-nav-menu .sub-menu .menu-link:hover::after,
.ast-nav-menu .sub-menu .menu-link:focus-visible::after {
	transform: scaleX(1);
}

/* --- the page you are actually on ---

   current-menu-item is the page itself; current-menu-ancestor keeps the
   parent marked while you are on one of its children, so "Education"
   stays underlined on the Certification and In-Service pages. Custom
   links get these classes from inc/header-nav.php, because WordPress
   cannot work them out for a hand-typed URL. */

.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after,
.main-header-menu > .menu-item.current_page_item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-parent > .menu-link::after,
.ast-nav-menu > .menu-item.current-menu-item > .menu-link::after,
.ast-nav-menu > .menu-item.current-menu-ancestor > .menu-link::after,
.ast-nav-menu > .menu-item.current_page_item > .menu-link::after,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link::after,
.main-header-menu .sub-menu .menu-item.current_page_item > .menu-link::after,
.ast-nav-menu .sub-menu .menu-item.current-menu-item > .menu-link::after,
.ast-nav-menu .sub-menu .menu-item.current_page_item > .menu-link::after {
	transform: scaleX(1);
}

/* The current item is also a shade darker and a little heavier, so the
   page you are on is still identifiable to anyone who cannot pick the
   underline out from the items either side of it. */
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item.current_page_item > .menu-link,
.ast-nav-menu > .menu-item.current-menu-item > .menu-link,
.ast-nav-menu > .menu-item.current-menu-ancestor > .menu-link {
	color: #0C6180;
	font-weight: 600;
}

/* -------------------------------------------------------------------
   Sub-menu colour — the same teal as the items above it
   ------------------------------------------------------------------- */

.main-header-menu .sub-menu .menu-link,
.ast-nav-menu .sub-menu .menu-link,
.ast-builder-menu .sub-menu .menu-link,
.ast-mobile-popup-content .sub-menu .menu-link {
	color: #0F779A;
	transition: color 0.25s ease;
}

.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:focus,
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,
.ast-nav-menu .sub-menu .menu-link:hover,
.ast-nav-menu .sub-menu .menu-link:focus,
.ast-nav-menu .sub-menu .menu-item.current-menu-item > .menu-link,
.ast-builder-menu .sub-menu .menu-link:hover,
.ast-mobile-popup-content .sub-menu .menu-link:hover {
	color: #0C6180;
}

/* -------------------------------------------------------------------
   The mobile menu

   Below Astra's 921px breakpoint the menu is a stacked full-width panel.
   A 2px rule running the width of every row there reads as a divider
   between rows rather than a marker on one of them, so the underline
   comes off and the current page is carried by weight and colour alone.
   ------------------------------------------------------------------- */

@media (max-width: 921px) {
	.main-header-menu > .menu-item > .menu-link::after,
	.ast-nav-menu > .menu-item > .menu-link::after,
	.main-header-menu .sub-menu .menu-link::after,
	.ast-nav-menu .sub-menu .menu-link::after {
		display: none;
	}
}

/* -------------------------------------------------------------------
   Reduced motion — the underline still appears, it just stops sliding.
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.main-header-menu .menu-link::after,
	.ast-nav-menu .menu-link::after {
		transition: none;
	}
}

/* ===================================================================
   37. THE BAND LEFT BEHIND BY THE TRANSPARENT HEADER

   Four pages carried theme-transparent-header-meta = enabled: the home
   page (319), About Us (134), Contact Us (183) and Services (157). Each
   was therefore built with the header floating over the top of it, and
   each was given roughly a header's worth of empty space at the top so
   its own content cleared the menu.

   Section 36 put the header back in the flow, which is what makes it
   opaque on every page. The clearance those four pages were carrying
   then stopped being clearance and became a visible empty band — about
   140px on Services and 260px on Contact Us.

   The header is 123px, so that is what comes off. The values below are
   each page's original spacing minus 123, not numbers picked to look
   right:

     home        168px of inner padding  ->  45
     Contact Us  200px                   ->  60 (rounded down: the
                                               breadcrumb pill reads
                                               better nearer the header)
     Services    a container holding two empty spacer widgets, 110px
                 plus 10px of inner padding, whose entire purpose was
                 the clearance — so it goes

   About Us is untouched: its hero is the hand-built .cwc-ab section,
   whose padding was written for a page that already had the header over
   it, so it never carried an allowance to remove.

   Scoped per page by ID rather than by a shared class because the four
   pages solve the same problem three different ways, and a single rule
   would have to guess which. Page IDs do not change.
   =================================================================== */

/* --- home ---
   Nothing left to take off: the hero container now holds the hand-built
   .cwc-hero carousel and has had its own 168px of padding cleared, so
   the banner starts directly under the header and owns its spacing. The
   rule stays at zero rather than being deleted, so that if the container
   is ever set back to boxed it cannot quietly reintroduce the band. */
.page-id-319 .elementor-319 > .e-con:first-child > .e-con-inner {
	padding-top: 0;
}

/* --- Contact Us ---
   Nothing here: the hero section inside this container, .cwc-contact-hero,
   carries 60px of its own padding, which is the spacing the design wants.
   The 200px on the container was 60px of that plus the header allowance,
   so removing the allowance leaves the hero to own its own spacing rather
   than the two stacking to 120px. */
.page-id-183 .elementor-183 > .e-con:first-child > .e-con-inner {
	padding-top: 0;
}

/* --- Services ---
   The container is two empty spacers and nothing else, so hiding it
   removes the band rather than merely shrinking it. Its own leading
   padding goes with it. */
.page-id-157 .elementor-157 [data-id="39e5ec1"] {
	display: none;
}

.page-id-157 .elementor-157 > .e-con:first-child > .e-con-inner {
	padding-top: 0;
}

/* On a phone the header is shorter, so the allowance that has to come
   off is smaller; leaving the desktop figures would over-tighten it. */
@media (max-width: 921px) {
	.page-id-319 .elementor-319 > .e-con:first-child > .e-con-inner {
		padding-top: 0;
	}

	.page-id-183 .elementor-183 > .e-con:first-child > .e-con-inner {
		padding-top: 0;
	}
}

/* ===================================================================
   38. HEADINGS IN BRAND TEAL

   The client asked for every heading that was black to take the teal the
   "Why People Trust Us" heading already uses — #0F779A, the brand colour
   the top menu and the section headings are set in.

   Four different darks were doing the job of "black" across the site:

     #0F172A  Astra's global heading colour, --ast-global-color-2. The
              bulk of them: Services, For SNFs, the home cards.
     #10222F  the ink in the hand-built sections (About, Why Crescent,
              Careers, the webinar list)
     #0E1918  the outcomes report on the home page
     #364151  the footer widget titles

   How this overrides Astra without touching anything else
   ------------------------------------------------------
   Astra sets the first of those inline, with
   `h1, h2, h3, h4, h5, h6, .entry-content :where(h1, h2, h3, h4, h5, h6)`.
   :where() contributes nothing to specificity, so those are only (0,0,1)
   and (0,1,0). The rule below copies that shape exactly rather than
   trying to outrank it: the child stylesheet loads after Astra's inline
   block — checked, not assumed — so an equal-specificity rule wins.

   Copying the shape rather than raising specificity is the point. It
   leaves the rule weak enough that everything more specific still beats
   it, which is what keeps the white headings white: the teal panels on
   About and Why Crescent set theirs at (0,1,1), and Elementor sets its
   hero headings per widget at far higher. Those were checked after the
   change and are untouched.

   h5 and h6 are deliberately not included — the client named h1 to h4.
   =================================================================== */

h1, h2, h3, h4,
.entry-content :where(h1, h2, h3, h4) {
	color: #0F779A;
}

/* The hand-built sections set their own heading colour at a specificity
   the rule above cannot reach, so each is pointed at the same teal.
   Where the ink variable is used only by headings it is changed at
   source; where it also colours form controls or a date block it is left
   alone and only the heading declaration is changed. */

.cwc-careers h1,
.cwc-careers h2,
.cwc-careers h3 {
	color: #0F779A;
}

.cwc-wb__title {
	color: #0F779A;
}

/* The footer widget titles are headings too, and Quick Links takes
   Astra's colour while Service Areas and Contact Info take #364151 — so
   leaving the footer out would have turned one of the three teal and
   left the other two grey. All three together instead. */
.site-footer .footer-widget-area .widget-title {
	color: #0F779A;
}

/* Three headings sat above the reach of the rule at the top of this
   section and were found by sweeping every page for a dark heading
   afterwards, rather than by assuming the one rule had caught them all:

     .cwc-contact-hero h1   set inline by the Contact page's own HTML
                            widget, so it needs the extra .entry-content
                            to be outranked
     .cwc-blog__title       set here, in the blog grid section
     .tutor-course-name     set by Tutor LMS on the course card */

.entry-content .cwc-contact-hero h1 {
	color: #0F779A;
}

.cwc-blog__title {
	color: #0F779A;
}

.tutor-course-card h3.tutor-course-name,
.tutor-course-card h3.tutor-course-name a {
	color: #0F779A;
}

/* The home page's map heading reads "Growing Across the U.S." as a
   phrase. The site's title case would set it as "Growing Across The U.S.",
   so this one heading is set as written. Specific enough to outrank the
   Elementor kit's heading styles, which can load after this file. */
.elementor .elementor-element.elementor-element-cwcarea1 .elementor-heading-title {
	text-transform: none;
}

/* ===================================================================
   39. THE FOOTER

   The client's design: a teal band with a dotted texture, the white
   wordmark and a "now serving" badge across the top, three columns
   beneath, and a rule-separated bottom bar. Markup is built in
   inc/footer.php, which replaces Astra's footer output.

   Colours are the design's own — #0d6e8f rather than the site's #0F779A,
   a shade deeper, which is what lets white text sit on it comfortably.
   White on #0d6e8f measures about 5.6:1, clearing AA for body text; the
   muted #cfe7ea used for secondary lines measures about 4.6:1, which
   also clears it.

   No webfonts. The design named Manrope and Inter, which would be seven
   more font files on every page of the site for one band at the bottom
   of it. The site already loads Rubik for headings and Open Sans for
   text, and they do the same job here; if the exact faces are wanted the
   change is one @import and a font-family on .cwc-ft.

   Sections 19, 26 and 27 still style the old Astra footer. They are left
   in place: nothing renders them now, and they are what the site falls
   back to if this footer is ever removed.
   =================================================================== */

.cwc-ft {
	--cwc-ft-bg: #0d6e8f;
	--cwc-ft-ink: #dcecee;
	--cwc-ft-muted: #cfe7ea;
	--cwc-ft-dim: #a8c9ce;
	--cwc-ft-accent: #8fd0d6;
	--cwc-ft-hover: #dceefc;
	--cwc-ft-deep: #0d4b56;

	position: relative;
	overflow: hidden;
	background: var(--cwc-ft-bg);
	color: var(--cwc-ft-ink);
}

.cwc-ft *,
.cwc-ft *::before,
.cwc-ft *::after {
	box-sizing: border-box;
}

/* The dotted texture. Masked to fade out at both edges so the band does
   not end on a hard line of dots. Behind everything and inert. */
.cwc-ft::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.4px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	pointer-events: none;
}

.cwc-ft__inner {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(1.25rem, 0.5rem + 3vw, 3rem) 0;
}

/* -------------------------------------------------------------------
   Wordmark and badge
   ------------------------------------------------------------------- */

.cwc-ft__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cwc-ft__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* --- the masthead band ----------------------------------------------
   The logo and the badge sit on white, full width, ending where the
   divider used to be. The white meeting the teal is now that divider, so
   the old 1px rule under the row comes off — drawing a line on the seam
   between two solid colours only makes the seam look uncertain.

   It is a band outside .cwc-ft__inner rather than the first row inside
   it, because the white has to run the full width of the screen. Inside
   the container it would have stopped at the 1320px content edge and
   read as a white card sitting on teal.

   position: relative because .cwc-ft::before paints the dot pattern over
   the whole footer in the positioned layer; without it the dots would
   sit on top of the white. */

.cwc-ft__topband {
	position: relative;
	background: #FFFFFF;
}

/* The same measure and side padding as .cwc-ft__inner, so the logo lines
   up with Quick Links below it rather than being independently centred. */
.cwc-ft__topinner {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(1.75rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
}

/* --- the wavy seam --------------------------------------------------
   The boundary between the white masthead and the teal below it is a
   wave that drifts sideways rather than a straight edge.

   It sits at top:100% — below the band's own box, hanging over the teal
   — and is filled the same white, so the band appears to end in a wave.
   The band is given a stacking context above .cwc-ft__inner, which is
   positioned and comes later in the markup and would otherwise paint
   over it.

   The svg is twice the container width and slides left by half of
   itself. Its path carries eight periods, so half a width is exactly
   four: it lands on the same shape it left and the loop is invisible.
   Any other pairing of width and period count shows a jump. */

.cwc-ft__topband {
	z-index: 2;
}

.cwc-ft__wave {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	/* Deep enough to read as a wave, shallow enough not to eat the
	   footer on a phone. */
	height: clamp(16px, 2.4vw, 30px);
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
}

.cwc-ft__wave svg {
	display: block;
	width: 200%;
	height: 100%;
	animation: cwc-ft-wave 18s linear infinite;
}

.cwc-ft__wave path {
	fill: #FFFFFF;
}

@keyframes cwc-ft-wave {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* A drifting edge is decoration, and the first thing to stop for anyone
   who has asked for less movement. The wave stays; only the drift goes. */
@media (prefers-reduced-motion: reduce) {
	.cwc-ft__wave svg {
		animation: none;
	}
}

.cwc-ft__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-bottom: 0;
	border-bottom: 0;
}

/* The teal side keeps its own top padding for the columns, which used to
   come from the container's padding above the masthead. */
.cwc-ft__inner {
	padding-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.cwc-ft__logo img {
	display: block;
	width: auto;
	/* The asset is trimmed to its artwork, so this height is all visible
	   logo. It previously carried about 22 per cent transparent padding
	   on the top and bottom, which meant a 140px box drew a 78px mark
	   floating in the middle of it -- the empty band above and below the
	   logo that was reported. No CSS could remove that; the file was
	   cropped to its alpha bounding box instead.

	   Height drives the size and width: auto keeps the ratio, which is
	   now 2.76 rather than the 1.96 of the padded file. 140px therefore
	   draws it about 386px wide, which is the size the supplied mock-up
	   showed. */
	height: clamp(72px, 10vw, 140px);
}

/* The masthead band behind this is white now, so the 6 per cent white
   that used to let the teal panel through has to be painted on: this
   is that exact composite, #0d6e8f under 6 per cent white, so the pill
   and its text look as they did. The pale border went with it — it
   read as an edge against teal and would vanish against white, and the
   filled pill gives its own edge. */
.cwc-ft__badge {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 100px;
	background: #1C7796;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 0.8, 0.28, 1), box-shadow 0.3s ease;
}

/* The badge links to the map of the states on the front page, so it
   answers a pointer the way a button does while looking as it always has
   at rest. */
.cwc-ft .cwc-ft__badge:hover,
.cwc-ft .cwc-ft__badge:focus-visible {
	background: #15637D;
	color: #FFFFFF;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -12px rgba(11, 74, 97, 0.6);
}

.cwc-ft .cwc-ft__badge:visited {
	color: #FFFFFF;
}

.cwc-ft .cwc-ft__badge:focus-visible {
	outline: 2px solid #0B4A61;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cwc-ft__badge {
		transition: none;
	}

	.cwc-ft .cwc-ft__badge:hover,
	.cwc-ft .cwc-ft__badge:focus-visible {
		transform: none;
	}
}

/* The map the footer badge links to, in the "Growing Across the U.S."
   section of the front page. A little room above it when the page jumps
   there, so it does not land hard against the top of the window. */
#service-map {
	scroll-margin-top: 24px;
}

/* -------------------------------------------------------------------
   The three columns

   The middle one is widest because sixteen pills need the room; the two
   either side are sized to their content.
   ------------------------------------------------------------------- */

.cwc-ft__grid {
	display: grid;
	grid-template-columns: 1fr 2.2fr 1fr;
	gap: clamp(1.75rem, 0.5rem + 3vw, 2.5rem);
	padding: clamp(1.75rem, 1rem + 2vw, 2.5rem) 0;
}

.cwc-ft__title {
	margin: 0 0 1rem;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	/* Section 38 turns every heading brand teal, which would be
	   invisible here. */
	color: #FFFFFF;
	text-transform: none;
}

/* --- link column --- */

.cwc-ft__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cwc-ft__list li {
	margin-bottom: 11px;
	font-size: 14.5px;
	line-height: 1.4;
}

.cwc-ft__list a {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.cwc-ft__list a:hover,
.cwc-ft__list a:focus-visible {
	opacity: 1;
	color: inherit;
}

/* The underline wipes in from the left, the same movement the header
   menu uses, so the two read as one site. */
.cwc-ft__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease;
}

.cwc-ft__list a:hover::after,
.cwc-ft__list a:focus-visible::after {
	transform: scaleX(1);
}

/* --- the states, as pills --- */

.cwc-ft__states {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.cwc-ft__states a {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 100px;
	color: var(--cwc-ft-muted);
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, transform 0.18s ease;
}

.cwc-ft__states a:hover,
.cwc-ft__states a:focus-visible {
	background: var(--cwc-ft-hover);
	border-color: var(--cwc-ft-hover);
	color: var(--cwc-ft-deep);
	transform: translateY(-2px);
}

/* --- contact column --- */

.cwc-ft__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.4;
}

.cwc-ft__ic {
	display: inline-flex;
	flex: 0 0 auto;
	color: #6fd0da;
}

.cwc-ft__contact a {
	color: inherit;
	text-decoration: none;
	/* The address is 26 characters and the column is the narrowest of the
	   three; without this it breaks after the dot. */
	white-space: nowrap;
}

.cwc-ft__contact a:hover,
.cwc-ft__contact a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cwc-ft__socials {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

/* White discs with the mark in the footer's own teal, as supplied. */
.cwc-ft__socials a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--cwc-ft-bg);
	box-shadow: 0 2px 8px rgba(6, 46, 60, 0.16);
	transition:
		transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow 0.35s ease,
		color 0.3s ease;
}

/* A ring that expands once and fades, run as an animation rather than a
   hover state: a state would have to unwind when the pointer leaves and
   would play the ring backwards, collapsing inwards. */
.cwc-ft__socials a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.75);
	opacity: 0;
	pointer-events: none;
}

.cwc-ft__socials a:hover,
.cwc-ft__socials a:focus-visible {
	transform: translateY(-4px);
	color: var(--cwc-ft-deep);
	box-shadow: 0 12px 22px -8px rgba(6, 46, 60, 0.45);
}

.cwc-ft__socials a:hover::before,
.cwc-ft__socials a:focus-visible::before {
	animation: cwc-ft-pulse 0.7s ease-out;
}

.cwc-ft__socials a:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.cwc-ft__socialicon {
	transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.cwc-ft__socials a:hover .cwc-ft__socialicon,
.cwc-ft__socials a:focus-visible .cwc-ft__socialicon {
	transform: scale(1.12);
}

@keyframes cwc-ft-pulse {
	from {
		transform: scale(1);
		opacity: 0.7;
	}

	to {
		transform: scale(1.6);
		opacity: 0;
	}
}

/* They arrive one after another as the footer is reached. Only under the
   class the script adds, so with no JavaScript they are simply there. */
.cwc-ft__socials--js a {
	opacity: 0;
	transform: translateY(14px) scale(0.85);
}

.cwc-ft__socials--js.is-in a {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease var(--cwc-ft-sd, 0ms),
		transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) var(--cwc-ft-sd, 0ms);
}

/* The rule above is more specific than the plain hover, so once they
   have arrived the lift has to be restated at the same weight or it
   would never take effect. */
.cwc-ft__socials--js.is-in a:hover,
.cwc-ft__socials--js.is-in a:focus-visible {
	transform: translateY(-4px);
	transition:
		transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow 0.35s ease,
		color 0.3s ease;
}

/* -------------------------------------------------------------------
   Bottom bar
   ------------------------------------------------------------------- */

.cwc-ft__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	color: var(--cwc-ft-dim);
}

.cwc-ft__bottom p {
	margin: 0;
}

.cwc-ft__legal a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cwc-ft__legal a:hover,
.cwc-ft__legal a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------
   Narrower screens
   ------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cwc-ft__grid {
		/* The states keep the wider of the two columns. */
		grid-template-columns: 1fr 1.4fr;
	}
}

@media (max-width: 600px) {
	.cwc-ft__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.cwc-ft__top {
		align-items: flex-start;
	}

	.cwc-ft__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cwc-ft__list a,
	.cwc-ft__list a::after,
	.cwc-ft__states a,
	.cwc-ft__socials a,
	.cwc-ft__socialicon {
		transition: none;
	}

	.cwc-ft__states a:hover,
	.cwc-ft__socials a:hover,
	.cwc-ft__socials--js.is-in a:hover {
		transform: none;
	}

	.cwc-ft__socials a:hover .cwc-ft__socialicon,
	.cwc-ft__socials a:focus-visible .cwc-ft__socialicon {
		transform: none;
	}

	/* The reveal is skipped by the script under reduced motion, so the
	   icons keep the class-free state; this is the belt to that brace. */
	.cwc-ft__socials--js a {
		opacity: 1;
		transform: none;
	}

	.cwc-ft__socials a:hover::before,
	.cwc-ft__socials a:focus-visible::before {
		animation: none;
	}
}


/* ===================================================================
   40. THE FRONT-PAGE HERO — THREE BANNERS THAT ROTATE

   Replaces the Elementor hero. Three banners share one grid cell, so
   the section is as tall as the tallest of them and nothing is clipped
   when a banner grows on a narrow screen; only the one carrying
   .is-active is visible.

   That hiding does not depend on the script. The markup ships with
   banner one active, so with no JavaScript the page shows one complete,
   readable banner rather than three stacked on top of each other. The
   .cwc-hero--js class the script adds only brings in the dots — which
   would otherwise be buttons that do nothing — and the stagger inside
   each banner.

   Rotation is the progress ring on the active dot: the advance is hung
   off its animationend, so pausing the ring pauses the rotation exactly,
   and reduced motion switches the ring off, which switches rotation off.

   Colours are the ones measured off the supplied designs rather than
   the site's existing scale, which is close but not identical:
   #E7F6FF ground, #0B4A61 deep, #0F5F7C mid, #0F779A brand, #8FD0E4 sky.
   =================================================================== */

.cwc-hero {
	--cwc-hero-deep: #0B4A61;
	--cwc-hero-mid: #0F5F7C;
	--cwc-hero-brand: #0F779A;
	--cwc-hero-sky: #8FD0E4;
	--cwc-hero-tint: #E7F6FF;
	--cwc-hero-wash: #DAEFF9;
	--cwc-hero-body: #4B5B64;
	--cwc-hero-dwell: 7000ms;

	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
}

.cwc-hero *,
.cwc-hero *::before,
.cwc-hero *::after {
	box-sizing: border-box;
}

/* --- the stack ---------------------------------------------------- */

.cwc-hero__slides {
	display: grid;
	min-height: clamp(540px, 44vw, 660px);
}

.cwc-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(2.5%, 0, 0);
	transition:
		opacity 0.6s ease,
		transform 0.8s cubic-bezier(0.16, 0.8, 0.28, 1),
		visibility 0s linear 0.8s;
}

.cwc-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 0.6s ease,
		transform 0.8s cubic-bezier(0.16, 0.8, 0.28, 1),
		visibility 0s;
	z-index: 1;
}

/* --- each banner's ground ----------------------------------------- */

.cwc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cwc-hero__bg--tint {
	background: var(--cwc-hero-tint);
}

/* The deeper wash the design carries in its top-right corner.

   Drawn as a soft radial rather than a shape with an edge: a rounded
   block reads as a corner on a wide screen, but on a phone the same
   block covers most of the width and its edge shows as a seam down the
   middle of the banner. A gradient has no edge to show at any width. */
.cwc-hero__wash {
	position: absolute;
	top: -30%;
	right: -12%;
	width: 62%;
	height: 150%;
	background: radial-gradient(
		closest-side at 60% 50%,
		var(--cwc-hero-wash) 0%,
		rgba(218, 239, 249, 0.5) 62%,
		rgba(218, 239, 249, 0) 100%
	);
}

/* The photograph sits under a teal wash heavy enough for white text to
   clear contrast over any part of it. Banner three's is heavier still —
   its picture is a small file, and at hero width it reads as texture
   rather than detail. */
.cwc-hero__bg--photo {
	background-color: var(--cwc-hero-mid);
	background-image:
		linear-gradient(100deg, rgba(11, 74, 97, 0.88) 0%, rgba(15, 95, 124, 0.66) 58%, rgba(15, 119, 154, 0.5) 100%),
		var(--cwc-hero-photo, none);
	background-size: cover, cover;
	background-position: center, 62% 18%;
	background-repeat: no-repeat, no-repeat;
}

.cwc-hero__bg--photo.is-deep {
	background-image:
		linear-gradient(100deg, rgba(11, 74, 97, 0.93) 0%, rgba(20, 84, 110, 0.88) 55%, rgba(15, 95, 124, 0.84) 100%),
		var(--cwc-hero-photo, none);
	background-position: center, center 34%;
}

/* --- shared furniture --------------------------------------------- */

.cwc-hero__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding:
		clamp(52px, 6.5vw, 82px)
		clamp(20px, 4vw, 48px)
		clamp(74px, 8vw, 96px);
}

.cwc-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 clamp(0.85rem, 0.6rem + 0.7vw, 1.15rem);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cwc-hero-brand);
}

.cwc-hero__rule {
	display: block;
	flex: 0 0 auto;
	width: 30px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

/* Section 38 sets every h1-h4 on the site in brand teal. On the light
   banner that is too pale against the tint, and on the dark ones it is
   invisible, so both are stated outright.

   The site also sets every heading in title case, which turned
   "Physician-led wound care, at the bedside" into "Physician-Led Wound
   Care, At The Bedside". These three headlines are written as sentences
   and are set as sentences. */
.cwc-hero .cwc-hero__title {
	margin: 0 0 clamp(1rem, 0.7rem + 1vw, 1.4rem);
	text-transform: none;
	font-size: clamp(2.05rem, 1.2rem + 2.6vw, 3.3rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cwc-hero-deep);
}

.cwc-hero__lead {
	max-width: 34em;
	margin: 0;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	line-height: 1.66;
	color: var(--cwc-hero-body);
}

.cwc-hero__inner.is-on-dark .cwc-hero__eyebrow,
.cwc-hero__inner.is-on-dark .cwc-hero__title {
	color: #FFFFFF;
}

.cwc-hero__inner.is-on-dark .cwc-hero__eyebrow {
	color: rgba(255, 255, 255, 0.78);
}

.cwc-hero__inner.is-on-dark .cwc-hero__lead {
	color: rgba(255, 255, 255, 0.9);
}

/* --- buttons ------------------------------------------------------- */

.cwc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: clamp(1.5rem, 1rem + 1.6vw, 2.1rem) 0 0;
}

.cwc-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: 6px;
	background: var(--cwc-hero-mid);
	color: #FFFFFF;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1),
		box-shadow 0.35s ease;
}

.cwc-hero__btn:hover,
.cwc-hero__btn:focus-visible {
	background: var(--cwc-hero-deep);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(11, 74, 97, 0.6);
}

.cwc-hero__btn.is-ghost {
	background: transparent;
	border-color: rgba(15, 95, 124, 0.4);
	color: var(--cwc-hero-mid);
}

.cwc-hero__btn.is-ghost:hover,
.cwc-hero__btn.is-ghost:focus-visible {
	background: var(--cwc-hero-mid);
	border-color: var(--cwc-hero-mid);
	color: #FFFFFF;
}

.cwc-hero__btn.is-bright {
	background: var(--cwc-hero-brand);
}

.cwc-hero__btn.is-bright:hover,
.cwc-hero__btn.is-bright:focus-visible {
	background: #128CB4;
}

.cwc-hero__btn.is-clear {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
}

.cwc-hero__btn.is-clear:hover,
.cwc-hero__btn.is-clear:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------
   Banner one — the introduction
   ------------------------------------------------------------------ */

.cwc-hero__slide--intro {
	justify-content: flex-start;
}

.cwc-hero__slide--intro .cwc-hero__inner {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding-bottom: clamp(34px, 4vw, 52px);
}

.cwc-hero__split {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
	width: 100%;
}

.cwc-hero__media {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* A soft disc behind the card, the same device the design uses to stop
   the picture sitting flat on the tint. */
.cwc-hero__disc {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(112%, 520px);
	aspect-ratio: 1;
	transform: translate(-46%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(15, 119, 154, 0.16), rgba(15, 119, 154, 0) 68%);
}

/* Square but for one deep radius at the foot, as drawn. White, because
   the photograph is a cut-out on white — on the tint its own background
   would have shown as a pale rectangle inside the frame.

   The design frames a landscape photograph; the picture that replaced it
   is all but square, and in a landscape frame it sat small with white
   either side of it. The frame follows the picture. */
.cwc-hero__frame {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px 10px 76px 10px;
	background: #FFFFFF;
	box-shadow: 0 26px 60px -34px rgba(11, 74, 97, 0.45);
}

.cwc-hero__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* --- the figures along the foot --- */

.cwc-hero__stats {
	flex: 0 0 auto;
	background: var(--cwc-hero-deep);
}

.cwc-hero__statsinner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 1240px;
	margin: 0 auto;
	/* The extra depth at the foot is the room the dots sit in. */
	padding: clamp(22px, 2.4vw, 30px) clamp(20px, 4vw, 48px) clamp(56px, 5vw, 66px);
}

.cwc-hero__stat {
	padding-left: clamp(16px, 2vw, 28px);
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.cwc-hero__stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.cwc-hero__statn {
	display: block;
	font-size: clamp(1.35rem, 1rem + 1.1vw, 1.72rem);
	font-weight: 700;
	line-height: 1.15;
	color: #FFFFFF;
}

.cwc-hero__statl {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--cwc-hero-sky);
}

/* ------------------------------------------------------------------
   Banner two — three ways in
   ------------------------------------------------------------------ */

.cwc-hero__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	list-style: none;
	margin: clamp(1.8rem, 1.2rem + 2vw, 2.6rem) 0 0;
	padding: 0;
}

.cwc-hero__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(18px, 1.8vw, 24px);
	border-radius: 8px;
	background: var(--cwc-hero-mid);
	color: #FFFFFF;
	text-decoration: none;
	transition:
		background 0.3s ease,
		transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1),
		box-shadow 0.35s ease;
}

.cwc-hero__card:hover,
.cwc-hero__card:focus-visible {
	background: var(--cwc-hero-deep);
	color: #FFFFFF;
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.55);
}

.cwc-hero__cardt {
	font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
}

.cwc-hero__cardd {
	margin-top: 8px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.cwc-hero__cardm {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: clamp(14px, 1.4vw, 20px);
	font-size: 0.84rem;
	font-weight: 600;
	color: #FFFFFF;
}

.cwc-hero__arrow {
	transition: transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-hero__card:hover .cwc-hero__arrow,
.cwc-hero__card:focus-visible .cwc-hero__arrow {
	transform: translateX(5px);
}

/* ------------------------------------------------------------------
   Banner three — the outcomes report
   ------------------------------------------------------------------ */

.cwc-hero__report {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) auto minmax(0, 0.92fr);
	gap: clamp(24px, 3.4vw, 52px);
	align-items: center;
	width: 100%;
}

/* --- the dial --- */

.cwc-hero__dial {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(150px, 14vw, 190px);
	aspect-ratio: 1;
}

.cwc-hero__dialsvg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	fill: none;
}

.cwc-hero__dialtrack {
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 9;
}

.cwc-hero__dialrun {
	stroke: var(--cwc-hero-sky);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: var(--cwc-hero-c, 339.29);
	stroke-dashoffset: var(--cwc-hero-o, 8.62);
}

.cwc-hero__dialtext {
	position: relative;
	text-align: center;
	line-height: 1.1;
}

.cwc-hero__dialn {
	display: block;
	font-size: clamp(1.35rem, 1rem + 1.1vw, 1.7rem);
	font-weight: 700;
	color: #FFFFFF;
}

.cwc-hero__diall {
	display: block;
	margin-top: 4px;
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.72);
}

/* --- the healing-time bars --- */

.cwc-hero__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(12px, 1.3vw, 17px);
}

.cwc-hero__barhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.9);
}

.cwc-hero__barname {
	min-width: 0;
}

.cwc-hero__barvals {
	flex: 0 0 auto;
	font-weight: 700;
	color: #FFFFFF;
}

.cwc-hero__barbench {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
}

.cwc-hero__bartrack {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.cwc-hero__barfill {
	display: block;
	width: var(--cwc-hero-w, 0%);
	height: 100%;
	border-radius: 999px;
	background: var(--cwc-hero-sky);
}

/* ------------------------------------------------------------------
   The row of circles
   ------------------------------------------------------------------ */

.cwc-hero__nav {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 1.8vw, 24px);
	z-index: 3;
	display: none;
	gap: 12px;
	transform: translateX(-50%);
}

.cwc-hero--js .cwc-hero__nav {
	display: flex;
}

.cwc-hero__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cwc-hero__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	transform: rotate(-90deg);
}

.cwc-hero__ringtrack {
	stroke: rgba(255, 255, 255, 0.34);
	stroke-width: 2;
}

.cwc-hero__ringrun {
	stroke: #FFFFFF;
	stroke-width: 2;
	stroke-linecap: round;
	/* 2 * pi * 15 */
	stroke-dasharray: 94.25;
	stroke-dashoffset: 94.25;
}

.cwc-hero__dotcore {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transition: background 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-hero__dot:hover .cwc-hero__dotcore {
	background: rgba(255, 255, 255, 0.85);
	transform: scale(1.15);
}

.cwc-hero__dot.is-active .cwc-hero__dotcore {
	background: #FFFFFF;
}

.cwc-hero__dot:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* The dots sit over the deep bar on banner one and over photographs on
   the other two, so white works throughout — except that the bar is the
   one place a white ring can look stark, where it is eased back. */
.cwc-hero.is-light .cwc-hero__ringtrack {
	stroke: rgba(255, 255, 255, 0.26);
}

/* The clock. Everything about the rotation follows from this one
   animation: it runs only on the active dot, pausing it holds the
   banner, and switching it off stops the carousel. */
.cwc-hero__dot.is-active .cwc-hero__ringrun {
	animation: cwc-hero-ring var(--cwc-hero-dwell) linear forwards;
}

.cwc-hero.is-held .cwc-hero__ringrun {
	animation-play-state: paused;
}

.cwc-hero.is-stopped .cwc-hero__ringrun {
	animation: none;
}

@keyframes cwc-hero-ring {
	from { stroke-dashoffset: 94.25; }
	to   { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------
   The stagger inside a banner as it arrives
   ------------------------------------------------------------------ */

.cwc-hero--js .cwc-hero__rise {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.6s ease,
		transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-hero--js .is-active .cwc-hero__rise {
	opacity: 1;
	transform: none;
	transition-delay: var(--cwc-hero-d, 0ms);
}

/* ------------------------------------------------------------------
   Narrower screens
   ------------------------------------------------------------------ */

@media (max-width: 1080px) {
	.cwc-hero__report {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: clamp(20px, 3vw, 34px) clamp(22px, 3vw, 40px);
	}

	.cwc-hero__bars {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px clamp(20px, 3vw, 34px);
	}
}

@media (max-width: 900px) {
	.cwc-hero__slides {
		min-height: 0;
	}

	.cwc-hero__split {
		grid-template-columns: 1fr;
		gap: clamp(24px, 4vw, 36px);
	}

	/* The picture leads on a phone, the way it sits alongside the words
	   on a wide screen. */
	.cwc-hero__media {
		order: -1;
		justify-content: center;
	}

	.cwc-hero__frame {
		max-width: 300px;
	}

	.cwc-hero__disc {
		width: 132%;
	}

	.cwc-hero__statsinner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(16px, 3vw, 24px) 0;
	}

	.cwc-hero__stat:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.cwc-hero__cards {
		grid-template-columns: 1fr;
	}

	.cwc-hero__card {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 12px;
	}

	.cwc-hero__cardd {
		margin-top: 4px;
		flex: 1 1 100%;
	}

	.cwc-hero__cardm {
		margin-top: 10px;
	}

	.cwc-hero__report {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.cwc-hero__bars {
		grid-column: auto;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.cwc-hero__dial {
		width: 150px;
	}
}

@media (max-width: 600px) {
	.cwc-hero__inner {
		padding-bottom: 78px;
	}

	.cwc-hero__lead {
		font-size: 0.98rem;
	}

	.cwc-hero__actions .cwc-hero__btn {
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------------------------
   Reduced motion

   The banners still change when a dot is pressed — that is a response
   to a deliberate action, not motion asked for. What goes is the
   movement between them, the stagger, and the rotation itself: with no
   ring animation there is no animationend, so nothing advances on its
   own and the reader is left in charge.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.cwc-hero__slide,
	.cwc-hero__slide.is-active {
		transform: none;
		transition: opacity 0.2s ease, visibility 0s;
	}

	.cwc-hero--js .cwc-hero__rise,
	.cwc-hero--js .is-active .cwc-hero__rise {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.cwc-hero__dot.is-active .cwc-hero__ringrun {
		animation: none;
		stroke-dashoffset: 0;
	}

	.cwc-hero__btn,
	.cwc-hero__card,
	.cwc-hero__arrow,
	.cwc-hero__dotcore {
		transition: none;
	}

	.cwc-hero__btn:hover,
	.cwc-hero__card:hover,
	.cwc-hero__dot:hover .cwc-hero__dotcore {
		transform: none;
	}

	.cwc-hero__card:hover .cwc-hero__arrow {
		transform: none;
	}
}


/* ===================================================================
   41. THE COUPON BOX ON THE COURSE PAGE

   Sits under Pay Now and the signed-in line, in the white area at the
   foot of the entry card. A code that covers the whole price enrols the
   learner outright; anything else is carried into checkout.

   Styled to sit with Tutor's card rather than to stand out from it: the
   Apply button is deliberately the quieter of the two on the card, so
   Pay Now stays the obvious action for the many people who have no
   coupon at all.
   =================================================================== */

.cwc-coupon {
	padding: 18px 20px 20px;
	border-top: 1px solid #E4E8EC;
	/* Queried below, so the field can lay itself out from the width it
	   actually has rather than the width of the window. */
	container-type: inline-size;
}

.cwc-coupon__label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #152430;
}

/* Stacked, not side by side. The entry card is a narrow sidebar — about
   190px inside its padding — and splitting that between a field and a
   button left roughly eight characters visible, which is not enough to
   read back a code you have just typed. Stacked, the field gets the whole
   width. It pairs up again only if the box is ever given real room. */
.cwc-coupon__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@container (min-width: 340px) {
	.cwc-coupon__row {
		flex-direction: row;
	}
}

.cwc-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #D9E6EC;
	border-radius: 6px;
	background: #FFFFFF;
	/* 16px: anything smaller and iOS Safari zooms the page when the field
	   is tapped, which is section 1's whole subject. */
	font-size: 16px;
	color: #152430;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cwc-coupon__input::placeholder {
	color: #8A9AA4;
}

.cwc-coupon__input:focus {
	outline: none;
	border-color: #0F779A;
	box-shadow: 0 0 0 3px rgba(15, 119, 154, 0.16);
}

.cwc-coupon__btn {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 20px;
	border: 1px solid #0F779A;
	border-radius: 6px;
	background: #FFFFFF;
	color: #0F779A;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cwc-coupon__btn:hover,
.cwc-coupon__btn:focus-visible {
	background: #0F779A;
	color: #FFFFFF;
}

.cwc-coupon__btn:focus-visible {
	outline: 2px solid #0B4A61;
	outline-offset: 2px;
}

.cwc-coupon__hint {
	margin: 10px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #6B7C86;
}

/* --- what happened to the code they typed --- */

.cwc-coupon__msg {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 6px;
	border-left: 3px solid;
	font-size: 0.86rem;
	line-height: 1.5;
}

.cwc-coupon__msg.is-ok {
	border-left-color: #1E8E63;
	background: #E8F6EF;
	color: #14603F;
}

.cwc-coupon__msg.is-error {
	border-left-color: #C0554B;
	background: #FBEDEB;
	color: #8A3A32;
}

@media (prefers-reduced-motion: reduce) {
	.cwc-coupon__input,
	.cwc-coupon__btn {
		transition: none;
	}
}


/* ===================================================================
   42. BLOG ARTICLES — the reading layout

   The card grid at /blogs/ is section 34; this is what an article looks
   like once you open one. Built for the kind of piece this site
   publishes: evidence-led, full of figures, and read by administrators
   and families deciding who should manage a wound.

   So the furniture earns its place rather than decorating. A contents
   list, because these run long and the reader is usually looking for one
   section. A figures strip, because the numbers are the argument and
   they would otherwise be buried mid-paragraph. A sources line set apart
   from the body, because citations are what make the claims usable.

   Everything is generated from the article itself — see
   inc/blog-article.php — so a heading renamed in the editor renames
   itself in the contents list, and nothing has to be kept in step by
   hand.
   =================================================================== */

.cwc-art {
	--cwc-art-brand: #0F779A;
	--cwc-art-deep: #0B4A61;
	--cwc-art-ink: #123845;
	--cwc-art-body: #45606B;
	--cwc-art-line: #DCE7EC;
	--cwc-art-tint: #F2F9FC;

	color: var(--cwc-art-body);
	font-size: clamp(16px, 0.95rem + 0.2vw, 17.5px);
	line-height: 1.75;
}

.cwc-art p {
	margin: 0 0 1.15em;
}

/* The site sets every heading in title case, which rewrote this
   article's own headline as "Improves Outcomes Vs. Traditional Models".
   Article titles are written as sentences and are set as written. */
.single-post .entry-title {
	text-transform: none;
}

/* Scrolled to from the contents list, so they need room above them when
   they land rather than sitting hard against the top of the window. */
.cwc-art h2,
.cwc-art h3 {
	scroll-margin-top: 24px;
}

.cwc-art h2 {
	margin: 2.1em 0 0.7em;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
	line-height: 1.25;
	text-transform: none;
}

.cwc-art h3 {
	margin: 1.7em 0 0.5em;
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.28rem);
	line-height: 1.3;
	text-transform: none;
}

/* --- how long it takes to read, and when it was published --- */

.cwc-art__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 1.6em;
	padding-bottom: 1.1em;
	border-bottom: 1px solid var(--cwc-art-line);
	font-size: 0.85rem;
	color: #6C838D;
}

.cwc-art__time {
	font-weight: 600;
	color: var(--cwc-art-brand);
}

/* --- contents --- */

.cwc-art__toc {
	margin: 0 0 2em;
	padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--cwc-art-line);
	border-left: 4px solid var(--cwc-art-brand);
	border-radius: 10px;
	background: var(--cwc-art-tint);
}

.cwc-art__toctitle {
	margin: 0 0 0.7em;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cwc-art-deep);
}

.cwc-art__toclist {
	margin: 0;
	padding-left: 1.25em;
	columns: 2;
	column-gap: clamp(20px, 3vw, 40px);
	font-size: 0.94rem;
	line-height: 1.6;
}

.cwc-art__toclist li {
	margin-bottom: 0.4em;
	break-inside: avoid;
}

.cwc-art__toclist a {
	color: var(--cwc-art-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.cwc-art__toclist a:hover,
.cwc-art__toclist a:focus-visible {
	color: var(--cwc-art-brand);
	border-bottom-color: currentColor;
}

@media (max-width: 640px) {
	.cwc-art__toclist {
		columns: 1;
	}
}

/* --- the opening paragraph carries more weight than the rest --- */

.cwc-art__lead {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
	line-height: 1.68;
	color: var(--cwc-art-ink);
}

/* --- the numbers that make the argument --- */

.cwc-art__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 16px);
	margin: 2em 0;
}

.cwc-art__figure {
	padding: clamp(16px, 1.8vw, 22px);
	border-radius: 10px;
	background: var(--cwc-art-deep);
	color: #FFFFFF;
	text-align: center;
}

.cwc-art__fignum {
	display: block;
	font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem);
	font-weight: 700;
	line-height: 1.15;
}

.cwc-art__figlabel {
	display: block;
	margin-top: 8px;
	font-size: 0.79rem;
	line-height: 1.45;
	color: #A9D8E8;
}

@media (max-width: 620px) {
	.cwc-art__figures {
		grid-template-columns: 1fr;
	}

	.cwc-art__figure {
		display: flex;
		align-items: baseline;
		gap: 14px;
		text-align: left;
	}

	.cwc-art__fignum {
		flex: 0 0 auto;
	}

	.cwc-art__figlabel {
		margin-top: 0;
	}
}

/* --- lists --- */

.cwc-art__list {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
}

.cwc-art__list li {
	position: relative;
	margin-bottom: 0.7em;
	padding-left: 1.6em;
}

.cwc-art__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cwc-art-brand);
}

/* --- a line that draws the conclusion from what was just listed --- */

.cwc-art__note {
	margin: 1.6em 0;
	padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
	border-left: 3px solid var(--cwc-art-brand);
	border-radius: 0 8px 8px 0;
	background: var(--cwc-art-tint);
	font-style: italic;
	color: var(--cwc-art-ink);
}

/* --- where to go next --- */

.cwc-art__cta {
	margin: 2.2em 0;
	padding: clamp(20px, 2.4vw, 28px);
	border-radius: 12px;
	background: linear-gradient(135deg, #0B4A61 0%, #0F779A 100%);
	color: #FFFFFF;
}

.cwc-art__ctatitle {
	margin: 0 0 0.8em;
	font-size: 1.05rem;
	font-weight: 700;
	color: #FFFFFF;
}

.cwc-art__ctalist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.cwc-art__ctalist a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: border-color 0.25s ease;
}

.cwc-art__ctalist a::after {
	content: "\2192";
	transition: transform 0.3s cubic-bezier(0.16, 0.8, 0.28, 1);
}

.cwc-art__ctalist a:hover,
.cwc-art__ctalist a:focus-visible {
	border-bottom-color: #FFFFFF;
}

.cwc-art__ctalist a:hover::after,
.cwc-art__ctalist a:focus-visible::after {
	transform: translateX(4px);
}

/* --- citations --- */

.cwc-art__sources {
	margin: 2em 0 0;
	padding-top: 1.2em;
	border-top: 1px solid var(--cwc-art-line);
	font-size: 0.85rem;
	line-height: 1.6;
	color: #6C838D;
}

.cwc-art__sources strong {
	color: var(--cwc-art-ink);
}

/* --- numbered citations, for articles that cite their sources in the text --- */

/* The marker after a claim. Small and lifted so it does not break the line,
   and a link down to the reference it stands for. */
.cwc-art__cite {
	font-size: 0.7em;
	line-height: 0;
	vertical-align: super;
	white-space: nowrap;
}

.cwc-art__cite a {
	margin-left: 2px;
	font-weight: 600;
	color: var(--cwc-art-brand);
	text-decoration: none;
}

.cwc-art__cite a:hover,
.cwc-art__cite a:focus-visible {
	text-decoration: underline;
}

/* The list those markers point to, set apart from the body like the sources
   line, with each entry numbered to match its marker. */
.cwc-art__refs {
	margin: 0;
	padding: 1.1em 0 0 1.5em;
	border-top: 1px solid var(--cwc-art-line);
	font-size: 0.86rem;
	line-height: 1.6;
	color: #6C838D;
}

.cwc-art__refs li {
	margin-bottom: 0.75em;
	padding: 4px 8px;
	border-radius: 6px;
	scroll-margin-top: 24px;
	transition: background-color 0.4s ease;
}

.cwc-art__refs li::marker {
	font-weight: 700;
	color: var(--cwc-art-brand);
}

.cwc-art__refs em {
	color: var(--cwc-art-ink);
}

/* Arriving from a marker, the entry it points to is briefly tinted so the
   eye lands on the right line. */
.cwc-art__refs li:target {
	background: var(--cwc-art-tint);
}

/* --- a closing line that sums the article up --- */

.cwc-art__tagline {
	margin: 1.6em 0;
	padding: 0.2em 0 0.2em 18px;
	border-left: 4px solid var(--cwc-art-brand);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	font-weight: 600;
	line-height: 1.55;
	color: var(--cwc-art-deep);
}

@media (prefers-reduced-motion: reduce) {
	.cwc-art__refs li {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwc-art__ctalist a,
	.cwc-art__ctalist a::after,
	.cwc-art__toclist a {
		transition: none;
	}

	.cwc-art__ctalist a:hover::after {
		transform: none;
	}
}

/* ===================================================================
   43. PHONES — THE MENU, THE "WHY FACILITIES CHOOSE CWC" PHOTO, AND THE
       SPACE UNDER THE SERVICES CAROUSEL

   Laptop and desktop screens are left exactly as they were.
   =================================================================== */

/* Astra gives each top-level menu link height:100% of its row. In the phone
   menu an open row holds both the link and its sub-menu, so the two shared
   the row's height between them, and the sub-menu (which clips to its
   rounded panel) lost its second item — In-Service under Education. The
   link keeps its own height instead, and the panel never shrinks. Only the
   phone and tablet header carries .ast-header-break-point. */
.ast-header-break-point .main-header-menu > .menu-item > .menu-link {
	height: auto;
}

.ast-header-break-point .main-header-menu .sub-menu {
	flex-shrink: 0;
}

/* The photo beside "Why Facilities Choose CWC" is a tall portrait. Stacked
   above the text on a phone it filled most of the screen, so there it is
   framed as a landscape that keeps the faces in view. */
@media (max-width: 767px) {
	.elementor-319 .elementor-element-fa7164b img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 50% 15%;
	}
}

/* On tablets (768px to 1024px wide) the photo still sits above the text at
   the full width of the column, and the portrait covered nearly the whole
   screen. There it is framed as a wide landscape that keeps the faces, and
   held to just over half the screen's height when the tablet is turned
   sideways. From 1025px up the photo sits beside the text as before. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-319 .elementor-element-fa7164b img {
		width: 100%;
		aspect-ratio: 16 / 10;
		max-height: 55vh;
		object-fit: cover;
		object-position: 50% 10%;
	}
}

/* The services carousel sits alone in a flex column, and the browser sized
   that column from the carousel's widest content (all the cards side by
   side), leaving about 2,500px of empty space under the dots on phones and
   tablets. As a plain block the column is just as tall as the carousel. */
@media (max-width: 1024px) {
	.elementor-319 .elementor-element.elementor-element-71506a5 {
		display: block;
	}
}

/* "What People Say About Us" on tablets (768px to 1024px). Elementor
   already gives the heading column a full width on tablet, meaning it to
   sit on top, but the row only wraps on phones. So instead of stacking,
   the two columns were squeezed side by side: the heading took 461px of a
   768px screen and left the testimonial card 233px wide and 480px tall.
   Letting the row wrap puts the heading and intro on top and gives the
   card the full width below, the way phones already show it. The heading
   column's 80px right padding existed to keep it off the card beside it,
   so it goes too. Phones and screens from 1025px up are unchanged. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-319 .elementor-element.elementor-element-1d39aaf > .e-con-inner {
		flex-wrap: wrap;
	}

	.elementor-319 .elementor-element.elementor-element-3d0d4c1.e-con {
		--width: 100%;
		--padding-right: 0px;
	}

	.elementor-319 .elementor-element.elementor-element-fd7eda0.e-con {
		--width: 100%;
	}
}

/* "Why Facilities Choose CWC" on phones (767px and below): the four points
   as a two-by-two grid, the way tablets and PCs show them, instead of one
   long column.

   Each row of two points is its own Elementor container, stacked on phones.
   Here each row lays its points side by side instead, half the width each
   with a 16px gap. The rows are boxed containers, so their points actually
   sit in an inner box: the direction and gap are set on that too, or the
   two columns of text touch.

   Each point also carried 32px of space on its right and 48px below, which
   on a phone made every point 235px tall for about 115px of text. That is
   cut to a 26px gap below, and the title and text are set a little smaller
   (17px and 13.5px) to suit a column half a phone wide. The icons are
   unchanged. Tablets and PCs are not affected. */
@media (max-width: 767px) {
	.elementor-319 .elementor-element.elementor-element-0395daf.e-con,
	.elementor-319 .elementor-element.elementor-element-9f4ace4.e-con,
	.elementor-319 .elementor-element.elementor-element-0395daf.e-con > .e-con-inner,
	.elementor-319 .elementor-element.elementor-element-9f4ace4.e-con > .e-con-inner {
		--flex-direction: row;
		--flex-wrap: nowrap;
		--gap: 0px 16px;
		--row-gap: 0px;
		--column-gap: 16px;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0 16px;
	}

	.elementor-319 .elementor-element.elementor-element-0395daf.e-con {
		margin-top: 0;
	}

	.elementor-319 .elementor-element.elementor-element-9f4ace4.e-con {
		margin-top: 4px;
	}

	.elementor-319 .elementor-element-20ee710 .elementor-element.elementor-widget-icon-box {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.elementor-319 .elementor-element-20ee710 .elementor-element.elementor-widget-icon-box > .elementor-widget-container {
		padding: 0 0 26px;
	}

	.elementor-319 .elementor-element-20ee710 .elementor-element.elementor-widget-icon-box .elementor-icon-box-title {
		margin: 0 0 6px;
		font-size: 17px;
		line-height: 1.3;
	}

	.elementor-319 .elementor-element-20ee710 .elementor-element.elementor-widget-icon-box .elementor-icon-box-description {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.6;
	}
}

/* ===================================================================
   44. THE SERVICE MAP, FULL SCREEN

   Click or tap the "Growing Across the U.S." map on the front page and it
   zooms from its place on the page to fill the screen over a dark
   backdrop; any click, the close button or Escape zooms it back. The
   behaviour is in inc/map-lightbox.php. The map on the page is unchanged
   apart from the zoom-in pointer.
   =================================================================== */

#service-map .cwc-zoomable {
	cursor: zoom-in;
}

#service-map .cwc-zoomable:focus-visible {
	outline: 3px solid #0F779A;
	outline-offset: 4px;
}

.cwc-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 44px);
	cursor: zoom-out;
}

.cwc-zoom[hidden] {
	display: none;
}

/* The backdrop is its own layer, so it can fade while the map zooms. */
.cwc-zoom::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(6, 28, 40, 0.92);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.cwc-zoom.is-open::before {
	opacity: 1;
}

/* As large as the window allows at the map's own proportions. Scaled from
   its top-left corner, which is what the script's start and end positions
   are measured from. */
.cwc-zoom__img {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	transform-origin: 0 0;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: transform;
}

/* Stated at (0,2,0) so Astra's own button colours and padding do not
   apply. At least 44px, a comfortable size for a finger. */
.cwc-zoom .cwc-zoom__close {
	position: absolute;
	top: clamp(10px, 2vw, 22px);
	right: clamp(10px, 2vw, 22px);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: none;
	color: #FFFFFF;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease 0.12s, background-color 0.2s ease;
}

.cwc-zoom.is-open .cwc-zoom__close {
	opacity: 1;
}

.cwc-zoom .cwc-zoom__close:hover,
.cwc-zoom .cwc-zoom__close:focus-visible {
	background: rgba(255, 255, 255, 0.26);
	color: #FFFFFF;
}

.cwc-zoom .cwc-zoom__close:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* The page stays where it was while the map is open. The gutter stands in
   for the scrollbar that overflow:hidden removes, so nothing shifts. */
html.cwc-zoom-lock {
	overflow: hidden;
}

html.cwc-zoom-lock body {
	padding-right: var(--cwc-zoom-gutter, 0px);
}

@media (prefers-reduced-motion: reduce) {
	.cwc-zoom::before,
	.cwc-zoom__img,
	.cwc-zoom .cwc-zoom__close {
		transition: none;
	}
}