/*
 * hero.css — the front page opening section.
 *
 * Figma: "Hero" frame node 45:2067. Artboard geometry, for reference while
 * reading the clamps below: section 1920x1012 under the 59px notice bar,
 * content block 751px wide starting at x143 / y267 (from the top of the
 * section), and a booking card (45:2105) 308px tall sitting flush with the
 * bottom edge.
 */

/*
 * Display type is scaled to this site's 1280px column. The artboard sets its
 * sizes against a 1634px content width, so every heading here is that size
 * multiplied by 1280/1634 (~0.78) at the top of its clamp, with the slope
 * recomputed so the curve still reaches that maximum at 1920. Body copy and
 * button labels are untouched — 16px is a floor, not a scaled value.
 */

.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: clamp(640px, 52.7vw, 1012px);
	overflow: hidden;
	color: var(--white);
}

/*
 * The service templates' shorter band (Figma node 1:811). Only the height
 * changes: the artboard's photo runs 834px there against the front page's
 * 1012px, while the content still starts 267px down in both, so .heroInner's
 * padding carries over untouched. Everything else on .hero — the scrim, the
 * media, the content column — is shared as-is.
 */
.hero.isCompact {
	min-height: clamp(560px, 43.4vw, 834px);
}

/*
 * A narrower measure than the front page's 12.5em. The artboard gives this
 * headline a 751px column of its 1920, which is ~500px of this site's 1280 —
 * 10.4em at the 48px size. That is what breaks "Conquer Alcohol Addiction"
 * after the accent word exactly as the artboard does, and it keeps longer
 * treatment names wrapping to two lines rather than running the full width.
 */
.hero.isCompact .heroTitle {
	max-width: min(10.4em, 100%);
}

/*
 * A heavier scrim than the front page's. The treatment photograph blows out to
 * white sky directly behind the accent word, and measured against that patch
 * --accent-on-dark came to 2.44:1 — under the 3:1 a 48px headline owes. These
 * stops bring the same spot to 4.2:1 (measured, not estimated). It also reads
 * closer to the artboard, whose left side is darker than the front page's.
 */
.hero.isCompact::after {
	background:
		linear-gradient(to right, rgba(6, 26, 22, 0.88) 0%, rgba(6, 26, 22, 0.78) 45%, rgba(6, 26, 22, 0.34) 75%, rgba(6, 26, 22, 0.16) 100%),
		linear-gradient(to bottom, rgba(6, 26, 22, 0.45) 0%, rgba(6, 26, 22, 0) 32%);
}

/* ---------------------------------------------------------- Background */

/*
 * A real <img> rather than a CSS background: it is the LCP element, so it needs
 * to be preloadable, carry width/height against CLS, and swap to the cropped
 * mobile file through <source> instead of a second background declaration.
 */
.heroMedia {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.heroMediaImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

/*
 * The front page's photograph is the whole, unframed 3:2 picture, so object-fit
 * can crop it to whatever box the section becomes (640px at 1024 wide, 1012px
 * from 1920 up, anything in between). Anchoring low keeps the house in frame
 * and lets the crop come off the sky, which is where the booking card is not.
 * Desktop only — the phone band below sets its own focal point.
 */
@media (min-width: 768px) {
	.hero:not(.isCompact) .heroMediaImg {
		object-position: 50% 85%;
	}
}

/*
 * Every darkening the headline needs lives here, not in the image. The photo
 * used to be exported from Figma with the left-edge fade and the booking card's
 * pale frame baked into its pixels; any crop or resize then slid those away
 * from the real card and left a visible seam. With a clean photo the section
 * is just a full-width picture plus this overlay, and it holds at any size.
 *
 * Three layers, top to bottom: the left-to-right fade that seats the copy, a
 * short fade under the header, and a flat tint that stops the bright sky patch
 * behind the headline from washing it out. Measured on the photo at 1024, 1280,
 * 1440 and 1920 wide: white copy stays above 6:1 and the teal accent word above
 * 3.7:1 (it is 56px, so the large-text 3:1 bar applies).
 */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(6, 26, 22, 0.82) 0%, rgba(6, 26, 22, 0.66) 45%, rgba(6, 26, 22, 0.3) 75%, rgba(6, 26, 22, 0.18) 100%),
		linear-gradient(to bottom, rgba(6, 26, 22, 0.4) 0%, rgba(6, 26, 22, 0) 30%),
		rgba(6, 26, 22, 0.25);
	pointer-events: none;
}

/* ------------------------------------------------------------- Content */

.heroInner {
	/* Clears the overlaid header — 267px from the top of the section at 1920. */
	flex: 1 1 auto;
	padding-top: clamp(120px, 13.9vw, 267px);
	padding-bottom: clamp(48px, 5vw, 96px);
}

.heroContent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 813px;
}

.heroEyebrow,
.heroBookingEyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--white);
}

.eyebrowRule {
	flex: 0 0 auto;
	height: 14px;
}

.heroEyebrow .eyebrowRule {
	color: var(--accent);
}

/*
 * The headline breaks after "Addiction Treatment", as on the artboard.
 *
 * The measure is in em, not px, so the 12.5em cap still tracks the font-size
 * even though the size itself is now fixed rather than fluid. In Marcellus
 * the full string measures ~20.5em and "Addiction Treatment" ~9.6em, so the
 * cap fits the first line and pushes the rest onto the second.
 *
 * font-size is a flat 48px by explicit request, not a clamp. Below 768px that
 * would otherwise wrap the title to 4+ lines — responsive-fixes.css restores
 * a smaller size there (34px, what this heading's old clamp() bottomed out
 * at), which is where the mobile safety net for this kind of fixed-size
 * regression belongs.
 *
 * text-wrap: balance is deliberately absent — it evens the lines out and breaks
 * after "Addiction" instead.
 */
.heroTitle {
	max-width: min(12.5em, 100%);
	font-size: 56px;
	line-height: 1.28;
	font-weight: 400;
	text-transform: capitalize;
}

/*
 * The emphasis colour arrives as an inline style on a <span>, set by the editor
 * and remapped to the dark-surface palette by tfr_heading_html(). Deliberately
 * not restyled here — an inline style wins anyway, so a rule at this level
 * would be dead code that looks authoritative.
 */
.heroTitle span,
.heroBookingTitle span {
	color: inherit;
}

/*
 * Anything an editor writes in the banner field after the headline. The
 * headline is the first block and becomes .heroTitle; this is the rest, at
 * body size rather than display size, so a sentence under a headline reads as
 * a sentence. See tfr_banner_html().
 */
.heroCopy {
	max-width: min(42em, 100%);
	font-family: var(--font-body);
	font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
	line-height: 1.625;
	color: var(--white);
}

.heroCopy > * + * {
	margin-top: 12px;
}

.heroCopy h2,
.heroCopy h3 {
	font-family: var(--font);
	font-size: 24px;
	line-height: 1.3;
	font-weight: 400;
	color: inherit;
}

.heroCopy h3 {
	font-size: 20px;
}

/* base.css strips list markers site-wide for the nav and card lists; running
   copy is the one place they carry meaning. */
.heroCopy ul,
.heroCopy ol {
	margin-left: 22px;
	list-style: disc;
}

.heroCopy ol {
	list-style: decimal;
}

.heroCopy a {
	color: var(--accent-on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.heroIntro {
	max-width: 813px;
	font-family: var(--font-body);
	font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
	line-height: 1.625;
	color: var(--white);
}

/* -------------------------------------------------------- Booking card */

/*
 * The card sits inside a 20px light frame, measured off the artboard rather
 * than guessed: the frame's edge is exactly 20px outside the card's on all
 * three visible sides. Both are flush with the bottom of the section, so only
 * the top corners are rounded — the frame's radius is the card's plus its own
 * inset, which is what keeps the two curves concentric.
 */
.heroBookingWrap {
	/*
	 * Right-aligned and flush with the viewport edge, not centred in the
	 * container: on the artboard the frame runs to x1919 of 1920 while the
	 * headline above it still sits on the content column. It is the one
	 * element in the design that deliberately breaks the container.
	 *
	 * 1421px is the frame's measured width (498 -> 1919), so at 1920 the left
	 * edge lands on 499 by itself. Below that it simply spans the viewport.
	 */
	width: min(100%, 1200px);
	margin-left: auto;
	margin-right: 0;
	padding: 20px 20px 0;
	border-radius: 60px 0 0 0;
	background: var(--surface-frame);
}

.heroBooking {
	display: flex;
	align-items: center;
	/*
	 * Padding is asymmetric because the artboard's is: 75px on the left, 103px
	 * on the right. With the frame back at full width this leaves the form its
	 * designed 835px without the aside having to be trimmed.
	 */
	gap: clamp(32px, 4.2vw, 80px);
	padding: 30px;
	/*
	 * All four corners are rounded. The bottom two sit on the section's bottom
	 * edge, where they reveal the light frame behind them — which is exactly
	 * what the artboard shows.
	 */
	border-radius: 40px;
	background: var(--surface-deep);
}

.heroBookingAside {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 220px;
}

/* The divider is a short rule beside the aside, not a full-height border —
   it stops well inside the card's padding on the artboard. */
.heroBookingAside::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(clamp(32px, 4.2vw, 80px) / -2);
	width: 1px;
	height: 185px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
}

.heroBookingEyebrow .eyebrowRule {
	color: var(--white);
}

/* h2. Fixed 42px by explicit request, matching every other h2 on the page.
   line-height stays the unitless Figma H2 ratio (60/44 = 1.364), which scales
   correctly with the new size without needing to be recomputed by hand. */
.heroBookingTitle {
	font-size: 32px;
	line-height: 1.264;
	font-weight: 400;
	text-transform: capitalize;
	color: var(--white);
}

.heroTrusted {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 4px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--white);
}

.heroTrustedStack {
	display: flex;
	align-items: center;
}

.heroTrustedAvatar,
.heroTrustedCount {
	width: 33px;
	height: 32px;
	border: 1.42px solid #fff;
	border-radius: 50%;
	object-fit: cover;
}

/* Each circle laps the one before it, as in the artboard. */
.heroTrustedAvatar + .heroTrustedAvatar,
.heroTrustedAvatar + .heroTrustedCount {
	margin-left: -11px;
}

.heroTrustedAvatar.isPlaceholder {
	background: #d9d9d9;
}

.heroTrustedCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-deep);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--white);
}

.heroBookingForm {
	flex: 1 1 auto;
	min-width: 0;
}

.heroFormNotice {
	margin-bottom: 16px;
	font-family: var(--font-body);
	font-size: 14px;
	color: #ffd9d0;
}

/* ------------------------------------------- Booking form (Gravity Forms) */

/*
 * Gravity Forms' own stylesheets are switched off in inc/forms.php, so every
 * rule the form needs lives here, scoped under .heroBookingForm. Nothing in
 * the plugin is edited.
 *
 * The sentence layout is a single wrapping flex row: the HTML fields are the
 * connective words and the input fields sit between them, so the line reflows
 * as one paragraph rather than as a grid of form rows.
 */

.heroBookingForm .gform_wrapper {
	margin: 0;
}

.heroBookingForm .gform_fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 15px;
	row-gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.heroBookingForm .gfield {
	margin: 0;
	padding: 0;
}

/* The connective copy — "Hey, my name is", "or", "to begin healing!". */
.heroBookingForm .heroFormText,
.heroBookingForm .gfield_html {
	font-family: var(--font);
	font-size: 20px;
	line-height: 32px;
	color: #fff;
}

/*
 * Field widths are the artboard's exactly (168 / 211 / 196 / 175).
 *
 * flex-grow is 0 on purpose. Letting the inputs grow into the row's slack
 * pushes the last field of each line onto its own row, which is what breaks
 * the sentence. They may still shrink, so the line reflows on narrow screens.
 */
.heroBookingForm .heroFormField {
	flex: 0 1 auto;
	min-width: 0;
}

.heroBookingForm .isName { width: 168px; }
.heroBookingForm .isService { width: 211px; }
.heroBookingForm .isEmail { width: 196px; }
.heroBookingForm .isPhone { width: 175px; }

/*
 * Labels are visually hidden, not removed. The placeholder alone is not an
 * accessible name — it disappears on input and is not announced consistently —
 * so every control keeps a real <label> here.
 */
.heroBookingForm .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.heroBookingForm .ginput_container {
	position: relative;
}

.heroBookingForm input[type="text"],
.heroBookingForm input[type="email"],
.heroBookingForm input[type="tel"],
.heroBookingForm select {
	width: 100%;
	box-sizing: border-box;
	height: 32px;
	padding: 0 0 6px;
	background: transparent;
	border: 0;
	/*
	 * 0.45, not the 0.35 the artboard implies. The underline is the only thing
	 * that shows a field is there, so it is a UI component boundary and owes
	 * 3:1 under WCAG 1.4.11 — at 0.35 it measures 2.8:1 on this card, at 0.45
	 * it reaches 3.4:1.
	 */
	border-bottom: 1px solid rgba(241, 240, 240, 0.45);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--white);
	appearance: none;
	transition: border-color 0.18s var(--ease);
}

.heroBookingForm input:hover,
.heroBookingForm select:hover,
.heroBookingForm input:focus,
.heroBookingForm select:focus {
	border-bottom-color: var(--white);
}

.heroBookingForm input::placeholder {
	color: rgba(241, 240, 240, 0.6);
	opacity: 1;
}

/*
 * The select's caret is a data URI rather than an inline <svg>, because the
 * markup is produced by Gravity Forms and cannot carry a child element. A data
 * URI is still zero extra requests, which is the reason icons are inlined.
 */
.heroBookingForm select {
	padding-right: 22px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.43604 5.43804"><path d="M8.43589 0.639614C8.43863 0.514931 8.40249 0.392493 8.33243 0.28932C8.26237 0.186146 8.16186 0.107365 8.04495 0.0639296C7.92805 0.0204939 7.80053 0.0145617 7.6801 0.0469576C7.55967 0.0793535 7.45237 0.148468 7.37304 0.244691L4.22773 3.91618L1.08353 0.244691C1.03461 0.178129 0.9725 0.122384 0.901036 0.0809482C0.829573 0.0395124 0.750302 0.0132785 0.66823 0.00388897C0.586158 -0.00550059 0.50305 0.00215669 0.424074 0.0263812C0.345099 0.0506057 0.271952 0.0908754 0.209261 0.144669C0.14657 0.198462 0.0957169 0.264621 0.0597782 0.339C0.0238395 0.41338 0.00365409 0.494379 0.000469208 0.576925C-0.00271568 0.659471 0.0111304 0.741785 0.0412312 0.818712C0.0713319 0.89564 0.116991 0.965524 0.175351 1.02399L3.77188 5.2275C3.82821 5.29351 3.89813 5.34652 3.97693 5.38287C4.05573 5.41922 4.1415 5.43804 4.22828 5.43804C4.31507 5.43804 4.40084 5.41922 4.47964 5.38287C4.55844 5.34652 4.62843 5.29351 4.68476 5.2275L8.28475 1.02399C8.37907 0.917801 8.43255 0.781601 8.43589 0.639614Z" fill="%23f1f0f0"/></svg>');
	background-repeat: no-repeat;
	background-position: right 2px top 12px;
	background-size: 10px 7px;
}

.heroBookingForm select option {
	background: var(--forest-ink);
	color: var(--white);
}

/* ------------------------------------------------------------ Validation */

.heroBookingForm .gfield_error input,
.heroBookingForm .gfield_error select {
	border-bottom-color: #ffb4a2;
}

.heroBookingForm .gfield_validation_message,
.heroBookingForm .validation_message {
	margin-top: 6px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.4;
	/* 6.4:1 on the card — a red that passes on this dark surface. */
	color: #ffb4a2;
}

.heroBookingForm .gform_validation_errors {
	margin-bottom: 16px;
	padding: 12px 16px;
	border: 1px solid #ffb4a2;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	color: #ffb4a2;
}

.heroBookingForm .gform_validation_errors h2 {
	font-size: inherit;
	font-weight: 400;
}

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

.heroBookingForm .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

/*
 * Brand teal carries #f1f0f0 at only 3.7:1, which fails for 16px text. The
 * deepened teal reaches 5.0:1 and is visually the same colour at a glance —
 * the same substitution the notice bar makes.
 */
.heroFormSubmit,
.heroFormFallback {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	padding: 8px 56px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--accent-deep);
	/* Pure white, not --white: #f1f0f0 on this fill measures 4.4:1 and misses
	   the 4.5 bar for 16px text, where #fff reaches 5.0:1. */
	color: #fff;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

.heroFormSubmit:hover,
.heroFormSubmit:focus-visible,
.heroFormFallback:hover,
.heroFormFallback:focus-visible {
	background: var(--accent);
}

.heroFormSubmit .pillBtnCircle,
.heroFormFallback .pillBtnCircle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	background: var(--surface-deep);
}

.heroFormSubmit:hover .pillBtnCircle,
.heroFormFallback:hover .pillBtnCircle {
	background: var(--surface-deep);
	transform: translateY(-50%) translateX(2px);
}

/* The submit arrow points up and to the right (node 45:2134). */
.btnArrow.isDiagonal {
	transform: rotate(-45deg);
}

/* Gravity Forms' AJAX spinner, which it injects next to the button. */
.heroBookingForm .gform_ajax_spinner {
	margin-left: 12px;
}

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

@media (max-width: 1100px) {
	/* Below this the sentence and the aside cannot sit side by side without
	   the inputs collapsing to a few characters wide. */
	.heroBooking {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.heroBookingAside {
		width: auto;
	}

	.heroBookingAside::after {
		top: auto;
		right: 0;
		bottom: -16px;
		width: 100%;
		height: 1px;
		transform: none;
	}
}

@media (max-width: 767px) {
	/*
	 * The photo stops being the section's full-bleed background and becomes
	 * its own 40%-of-screen band, with the copy that used to sit scrimmed on
	 * top of it following in normal flow underneath instead — a phone is
	 * narrow enough that the two no longer fit as one legible overlay
	 * regardless of scrim strength. .hero drops back to plain block flow to
	 * match: the flex column and its min-height clamp() were both sized for
	 * stacking the old overlay, not this.
	 */
	.hero,
	.hero.isCompact {
		display: block;
		min-height: 0;
		/*
		 * Full-bleed, not on .heroInner: that element is inset by the shared
		 * container primitive (width: min(100% - gutter*2, ...) in base.css)
		 * for its text column, so a background there would leave a pale
		 * sliver down each edge instead of a solid band behind the photo.
		 */
		background: var(--surface-deep);
	}

	.heroMedia {
		position: relative;
		inset: auto;
		z-index: 0;
		height: 40vh;
	}

	.heroMediaImg {
		/*
		 * Covers the band edge to edge, same as everywhere else this element
		 * appears — a letterboxed contain fit was tried here and read as the
		 * photo not actually filling its own banner. hero_background_mobile
		 * (see tfr_hero_background()) is what lets an editor supply a photo
		 * already framed for this band instead of a wide desktop crop, so
		 * cover on that upload still keeps the subject centred rather than
		 * trimming it hard the way the desktop photo would.
		 */
		object-position: 50% 35%;
	}

	/* The scrim existed only to keep the headline legible over the photo
	   behind it — with the copy no longer on top of the image, it would just
	   darken a plain photo band for no reason. */
	.hero::after {
		display: none;
	}

	.heroInner {
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.heroContent {
		gap: 5px;
	}

	.heroCopy {
		margin-bottom: 15px;
	}

	.hero.isCompact .heroTitle {
		margin-bottom: 20px;
	}

	.heroBookingWrap {
		padding: 12px 12px 0;
		border-radius: 32px 32px 0 0;
	}

	.heroBooking {
		padding: 28px 20px;
		border-radius: 24px;
	}

	/* On a phone the sentence reads better as stacked prose than as a wrapping
	   line, so each connective phrase takes its own row above its input. */
	.heroBookingForm .gform_fields {
		column-gap: 10px;
		row-gap: 10px;
	}

	.heroBookingForm .heroFormField {
		flex: 1 1 100%;
		width: auto;
	}

	.heroFormSubmit,
	.heroFormFallback {
		padding: 8px 56px 8px 20px;
		justify-content: flex-start;
		text-align: left;
	}

	.heroBookingForm .heroFormText,
	.heroBookingForm .gfield_html {
		font-size: 18px;
		line-height: 28px;
	}
}

/*
 * Forces the sentence to wrap after the service select, matching the artboard.
 * Paired with the zero-content HTML field of the same name in inc/forms.php.
 */
.heroBookingForm .heroFormBreak {
	flex: 0 0 100%;
	height: 0;
	margin: 0;
	padding: 0;
}

@media (max-width: 767px) {
	/* Each field already takes a full row on a phone, so the explicit break
	   would only add an empty gap. */
	.heroBookingForm .heroFormBreak {
		display: none;
	}
}