/* ==========================================================================
 * tmj-lean.css — components ported from the Raleigh build
 *   1. SIGNAL GRID   (.ac-signal-grid) — 2026-08-19
 *   2. HERO CALLOUTS (.hero-callouts)  — 2026-08-25, home page only
 *
 * Both came across from anchor-tmj-raleigh/assets/css/tmj-lean.css at the client's
 * request; the signal grid replaced the older .conditions-grid / .condition-card
 * pattern site-wide. The Raleigh file's other components (.ac-steps,
 * .ac-faq-compact, .s--lean) were not requested and are not included, nor is its
 * §7a full-viewport hero "stage" — see the note above component 2 for why.
 *
 * Every token it consumes (--white, --gray-light, --accent, --dark, --dark-mid,
 * --light, --text-dark, --text-muted-dark, --text-light) is already defined in
 * this theme's tmj-tokens.css, so the component inherits the Utah palette
 * without modification.
 * ========================================================================== */

/* ------------------------------------------------------------
   1. SIGNAL GRID — .ac-signal-grid
   Designed for .s--mist. Use .ac-signal-grid--on-dark on .s--dark.
   ------------------------------------------------------------ */

/* DIAMOND GEOMETRY — one side length for the whole system.
   A square of side S rotated 45deg is S*sqrt(2) tall, so it bleeds
   S*(sqrt(2)-1)/2 = 0.2071*S past its own box, top and bottom. Every margin and
   flex `gap` is measured from the BOX, so that bleed silently eats the spacing:
   the peach diamond sat 1.2px above its heading while the CSS said 12px.
   --ac-diamond-bleed is that overhang, precomputed, and every rule that needs
   clearance around a diamond adds it explicitly.
   Client, 2026-08-18: the peach diamonds must match the green ones. They were 52px
   against the steps' 40px. */
.ac-signal-grid {
	--ac-diamond: 2.5rem;
	--ac-diamond-bleed: 0.5178rem;
}

/* FLEX, not grid, and centred — 2026-08-19.
   The Raleigh source used `grid-template-columns: repeat(auto-fit, minmax(230px,1fr))`
   with explicit rules for 2/3/4 items only. Any other count fell through to auto-fit,
   which packs as many 230px tracks as fit (four, at the 1080px max-width) and strands
   the remainder hard-left: five cards rendered 4 + 1, with the orphan alone on row two.

   A centred flex row fixes the alignment, and --ac-row fixes the count. Each card's
   flex-basis is derived FROM the row width, so N per row always fits exactly and can
   never be five-across-then-one. Set --ac-row per data-count below; the basis follows. */
.ac-signal-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--ac-gap);
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	--ac-gap: 1.25rem;
	--ac-row: 3;          /* cards per row; overridden per data-count */
}

/* Basis = (row width - the gaps between N cards) / N. Percentage resolves against the
   grid's content box, so this is exact at any container width. */
.ac-signal {
	flex: 0 1 calc((100% - (var(--ac-row) - 1) * var(--ac-gap)) / var(--ac-row));
	/* The floor must stay BELOW the basis --ac-row implies, or it wins and fewer cards
	   fit than intended — at 240px a four-card row broke to 3 + 1 on a 1024px screen,
	   the same orphan this component exists to avoid. 180px keeps three-across alive all
	   the way down to the 640px phone breakpoint, where the two-up rules take over. */
	min-width: 180px;
}

/* Cards per row by item count, chosen so the last row is never a lone orphan.
   5 -> 3+2, 6 -> 3+3, 7 -> 4+3, 8 -> 4+4. Anything else uses the 3 default. */
.ac-signal-grid[data-count="1"] { --ac-row: 1; max-width: 380px; }
.ac-signal-grid[data-count="5"],
.ac-signal-grid[data-count="6"] { --ac-row: 3; }
.ac-signal-grid[data-count="7"],
.ac-signal-grid[data-count="8"] { --ac-row: 4; }

/* 4 items should read as one row on desktop, not 3 + 1 orphan. */
@media (min-width: 1100px) {
	.ac-signal-grid[data-count="4"] { --ac-row: 4; }
	.ac-signal-grid[data-count="3"] { --ac-row: 3; }
	.ac-signal-grid[data-count="2"] { --ac-row: 2; max-width: 760px; }
}

.ac-signal {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem 1.5rem;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--gray-light);
	/* No border-radius. Hard corners are the design language. */
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.ac-signal:hover {
	transform: translateY(-4px);
	border-color: var(--light);
	box-shadow: 0 12px 30px rgba(21, 59, 55, 0.09);
}

/* Diamond icon ground — the same construction as .quiz-icon: a square rotated
   45deg behind an unrotated SVG. Rotating the box and counter-rotating the icon
   would blur the strokes, so only the ::before turns. */
.ac-signal__icon {
	position: relative;
	width: var(--ac-diamond);
	height: var(--ac-diamond);
	flex: 0 0 auto;
	/* Push the box down by the bleed so the diamond's top point starts at the
	   card padding rather than above it, and pad the bottom by the bleed plus a
	   little, so the visual gap to the heading is ~20px and not ~1px. */
	margin-top: var(--ac-diamond-bleed);
	margin-bottom: calc(var(--ac-diamond-bleed) + 0.25rem);
}

.ac-signal__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent);
	transform: rotate(45deg);
	transition: transform 0.4s ease;
}

.ac-signal:hover .ac-signal__icon::before { transform: rotate(45deg) scale(1.08); }

.ac-signal__icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--dark);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Pediatric pages may use the client's own illustrations (Website-Icons-16..21).
   They are full-colour artwork, so they get no diamond ground.

   Their footprint MUST equal the diamond's, or a grid that mixes the two breaks:
   an 84px drawing beside a 40px diamond pushed the card titles ~44px out of line,
   which forced one page to go all-illustration including two loose matches. The
   diamond occupies --ac-diamond * sqrt(2) of visual height (the rotation) plus its
   margins, so the illustration is sized to exactly that and drops the bleed
   margins it does not need. Mixed rows now align. */
.ac-signal__icon--illus {
	width: calc(var(--ac-diamond) * 1.4142);
	height: calc(var(--ac-diamond) * 1.4142);
	margin-top: 0;
	margin-bottom: 0.25rem;
}

.ac-signal__icon--illus::before { display: none; }

.ac-signal__icon--illus img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ac-signal__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--text-dark);
}

.ac-signal__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text-muted-dark);
}

/* On a dark band. Stated explicitly — do NOT rely on .white inheritance. */
.ac-signal-grid--on-dark .ac-signal {
	background: var(--dark-mid);
	border-color: rgba(62, 133, 124, 0.3);
}

.ac-signal-grid--on-dark .ac-signal:hover {
	border-color: var(--light);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.ac-signal-grid--on-dark .ac-signal__title { color: var(--white); }
.ac-signal-grid--on-dark .ac-signal__text { color: var(--text-light); }
/* The custom icon set (media library uploads/2026/09/, masters in assets/images/icons-src/, 2026-09-11) is a single dark-green PNG per glyph.
   On the dark card variant it vanished into the card, so flip it to cream here rather than
   shipping a second colour of every file. brightness(0) invert(1) = white; the sepia/opacity
   pair warms it toward the site's cream. */
.ac-signal-grid--on-dark .ac-signal__icon--illus img,
.s--dark .ac-signal__icon--illus img { filter: brightness(0) invert(1) sepia(0.25) brightness(0.98); }


/* ---- Tablet ----
   Between the desktop row counts and the two-up phone layout the row narrows enough
   that the desktop count no longer fits. Rather than let it fall to a remainder of
   one, drop --ac-row to a divisor that leaves 0 or >=2 in the last row.
   (7 stays at 4 -> 4+3; no count in {2,3} avoids an orphan for seven items.) */
@media (min-width: 641px) and (max-width: 1024px) {
	.ac-signal-grid[data-count="4"] { --ac-row: 2; }
	.ac-signal-grid[data-count="5"] { --ac-row: 3; }
	.ac-signal-grid[data-count="6"] { --ac-row: 3; }
	.ac-signal-grid[data-count="8"] { --ac-row: 2; }

	/* Seven can only avoid a remainder of one at four per row, and four no longer fits
	   here. Fall to three and let the seventh fill its row instead of sitting alone. */
	.ac-signal-grid[data-count="7"] { --ac-row: 3; }
	.ac-signal-grid[data-count="7"] > .ac-signal:last-child { flex-basis: 100%; }
}

/* ---- Mobile ----
   Two up regardless of item count. Overriding --ac-row (not a grid template) is all
   that is needed now the layout is flex, and min-width has to drop or the 240px floor
   would force a single column on a ~342px viewport. */
@media (max-width: 640px) {
	.ac-signal-grid,
	.ac-signal-grid[data-count="1"],
	.ac-signal-grid[data-count="2"],
	.ac-signal-grid[data-count="3"],
	.ac-signal-grid[data-count="4"],
	.ac-signal-grid[data-count="5"],
	.ac-signal-grid[data-count="6"],
	.ac-signal-grid[data-count="7"],
	.ac-signal-grid[data-count="8"] {
		--ac-row: 2;
		/* Row gap a touch wider than the column gap: stacked rows need more
		   separation than side-by-side cards, which already have their borders. */
		--ac-gap: 0.75rem;
		gap: 1rem 0.75rem;
		max-width: none;
	}

	.ac-signal { min-width: 0; }

	/* Two-up leaves an odd count stranded on the last row. Let that final card fill the
	   row rather than sit alone at half width — the pattern the client called out. */
	.ac-signal-grid[data-count="3"] > .ac-signal:last-child,
	.ac-signal-grid[data-count="5"] > .ac-signal:last-child,
	.ac-signal-grid[data-count="7"] > .ac-signal:last-child { flex-basis: 100%; }
	.ac-signal-grid { --ac-diamond: 2rem; --ac-diamond-bleed: 0.4142rem; }
	.ac-signal { padding: 1.125rem 0.875rem; gap: 0.875rem; }
	.ac-signal__icon svg { width: 17px; height: 17px; }
	.ac-signal__title { font-size: 0.9375rem; }
	.ac-signal__text  { font-size: 0.875rem; line-height: 1.5; }
}

/* Design pass 2026-09-08: one column below 480px — 2-up rendered ~350px slivers at 375. */
@media (max-width: 480px) { .ac-signal-grid { --ac-row: 1; } .ac-signal { flex-basis: 100%; } }

/* ---- Very narrow phones cannot carry two columns of text cards legibly ---- */
@media (max-width: 359px) {
	.ac-signal-grid,
	.ac-signal-grid[data-count="1"],
	.ac-signal-grid[data-count="2"],
	.ac-signal-grid[data-count="3"],
	.ac-signal-grid[data-count="4"],
	.ac-signal-grid[data-count="5"],
	.ac-signal-grid[data-count="6"],
	.ac-signal-grid[data-count="7"],
	.ac-signal-grid[data-count="8"] { --ac-row: 1; }
}

/* --------------------------------------------------------------------------
   NUMBERED VARIANT — Utah addition, not in the Raleigh source.
   A handful of cards on the quiz landing pages carried a step number in the
   icon slot (.condition-card-number) instead of a glyph. Positioned exactly
   like the SVG so the number sits centred on the diamond.
   -------------------------------------------------------------------------- */
.ac-signal__num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	color: var(--dark);
}

/* Cards that are links must not inherit the theme's underlined link styling.
   The old .condition-card carried this inline in the page HTML; owning it here
   means the markup stays clean. */
a.ac-signal,
a.ac-signal:hover,
a.ac-signal:focus {
	text-decoration: none;
	color: inherit;
}

/* ==========================================================================
   2. HOME HERO CALLOUTS — .hero-callouts / .hero-callout
   Ported from the Raleigh build (anchor-tmj-raleigh/assets/css/tmj-lean.css §7)
   2026-08-25 at the client's request, alongside the pain-receptors hero photo
   (--bg-hero-photo-home, tokens.css). Small labelled pills sitting on the
   structures the centre evaluates, so the "the symptom you notice may not be
   the whole problem" headline has a picture arguing the same thing beside it.

   Only the marker layer came across. Raleigh's §7a "stage" rules — the ones that
   size body.home .s-hero to `100vh - var(--credbar-h)` so hero + trust bar is
   exactly one screen — were NOT ported: Utah's hero carries a two-line animated
   headline, a vision line and a three-item trust row that Raleigh's does not, and
   forcing all of that into one viewport shrinks the type past legibility at
   1200x760. The markers do not depend on those rules (see below), so leaving them
   out costs nothing. (The one exception is the 90% container width, ported
   below — see the note on body.home .s-hero > .s-container.)

   WHY THE MARKERS ARE NOT POSITIONED AGAINST .s-hero__bg. That element is a
   60%-wide box painting a 3:2 picture with background-size:cover, and cover here
   scales the picture to the box's HEIGHT — so the painted image is wider than the
   box holding it and the two share no coordinate space. Percentages of the box
   would slide off the anatomy at every viewport width. Instead .hero-callouts is
   sized to the PAINTED PICTURE: aspect-ratio 1536/1024 with min-width and
   min-height at 100% reproduces `cover` exactly, and `inset: auto 0 auto auto`
   plus the translate reproduces `background-position: center right`. Percentages
   inside it are therefore picture-relative and a pill pinned to the jaw joint
   stays on the jaw joint. This is why the two must be edited together: change
   the hero's background-position or swap in a picture that is not 1536x1024 and
   this layer is describing a frame that is no longer there.
   ========================================================================== */

.hero-callouts {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Hidden by default and shown from 1024px, which is where the side-strip hero
	   layout itself exists. Below 900px tmj-sections.css flattens .s-hero__bg into a
	   185px band — pinning markers to a letterboxed strip would mean nothing. */
	display: none;
}

/* --- The copy column, kept off the subject's face -------------------------

   .hero-text is 650px flat, which was fine when the home hero was a soft photo
   behind a heavy full-width veil. With the veil pulled back to reveal the face
   (tmj-sections.css) the copy started running onto it: 255px of overrun at 1024
   against ~109px of opaque green, so the last words of every line sat as white
   type on a lit cheek.

   The photo box starts at 40vw (it is 60% wide, right-aligned), so a column wider
   than that necessarily overhangs it — the question is only whether the overhang
   stays inside the opaque part of the veil, which is the first 15% of a gradient
   line drawn across a 60vw box, i.e. roughly 9vw of cover.

   46vw is the widest that holds. Measured overrun vs. cover: 1024 -> 76px inside
   109px, 1280 -> 92 inside 134, 1920 -> 122 inside 190. At 1440 the 650px cap takes
   over first and the overrun runs 9px past the fully-opaque stop, onto green that is
   still ~95% — invisible, and worth it, because anything narrower there wraps the H1
   onto a fourth line and breaks the CTA row onto two.

   40vw was tried first and was wrong for exactly that reason: it applied the 1024
   squeeze at every width, orphaning "live." on its own line and stacking the buttons
   at 1440. The constraint belongs only where the copy would actually reach the face,
   which is below ~1414px — where the 46vw term starts winning on its own. */
@media (min-width: 1024px) {
	body.home .hero-text { max-width: min(650px, 46vw); }

	/* The one §7a rule that WAS worth porting. .s > .s-container (tmj-sections.css)
	   drops from width:90% to width:100% + 15px padding at 1365px, mirroring the
	   header. That is right for the header — the logo needs the room — but on the
	   home hero it snaps the display headline from a 68px gutter to a 15px one in a
	   single pixel of resize, and with the dark band and photo running full-bleed
	   behind it the copy reads as jammed against the edge of the window. Hold the
	   hero's container at 90% for the whole desktop range, as Raleigh does
	   (anchor-tmj-raleigh tmj-lean.css §7a). Home only: the service heroes carry a
	   short title over a plainer photo and stay aligned with the header instead. */
	body.home .s-hero > .s-container { width: 90%; }
}

@media (min-width: 1024px) {
	.hero-callouts { display: block; }

	.home .hero-callouts {
		/* `left: P%` + `translateX(-P%)` IS the definition of background-position: P%
		   — it aligns the P% point of the picture with the P% point of the box — so this
		   tracks --hero-focal-x (set on .s-hero__bg in tmj-sections.css, inherited here)
		   for free. The old `inset: auto 0 auto auto` was just the P=100% special case
		   written out longhand, which is why moving the photo used to strand the pills. */
		inset: auto auto auto var(--hero-focal-x);
		top: 0; /* matches the photo's top-aligned background-position-y (tmj-sections.css) */

		/* REQUIRED for the linked markers above to be clickable, not cosmetic.
		   .s-hero > .s-container is `position: relative; z-index: 1` (tmj-sections.css)
		   and its box spans the full hero, so it paints over .s-hero__bg and swallows
		   every click aimed at a pill. (.s-hero__bg carries `z-index: 0`, not auto — the
		   note below is the half of the fix that deals with that.) Verified
		   at 1440: elementFromPoint on the centre of all four labels returned
		   div.s-container, not the marker. Raising the layer to 2 puts the pills above it.
		   Safe both ways: the layer itself is `pointer-events: none`, so only the pills
		   that opted back in ever take a click, and they sit on the photo in the right
		   half while .hero-text is capped at min(650px, 46vw) on the left. Still well
		   under the fixed header (z-index 40-60, anchor-header.css), so the nav keeps
		   covering the top marker on scroll as before. Raleigh has the same z-index: 1
		   container and did NOT port this — its pills are linked but unclickable.

		   This pairs with the body.home .s-hero__bg { z-index: auto } rule below and is
		   useless without it — see the note there. */
		z-index: 2;
		transform: translate(calc(-1 * var(--hero-focal-x)), 0);
		width: auto;
		height: auto;
		aspect-ratio: 1536 / 1024; /* the hero file's intrinsic ratio — see header */
		min-width: 100%;
		min-height: 100%;          /* the two minimums together == cover */
	}
}

/* The other half of the clickable-marker fix, and the non-obvious half.
   .s-hero__bg carries `z-index: 0` (tmj-sections.css) — and an explicit z-index on a
   positioned element CREATES A STACKING CONTEXT. That traps everything inside it: the
   `z-index: 2` above is then resolved against .s-hero__bg's own children, not against
   .s-container, so the whole layer stayed pinned under the container and the pills
   stayed unclickable. Setting z-index to auto removes the stacking context and lets the
   marker layer compete with .s-container directly.

   This is paint-order neutral. A positioned element at z-index auto and one at z-index 0
   both paint in the same step of the painting algorithm, so the photo and its green veil
   render exactly as before; the only thing that changes is that a descendant is now
   allowed to lift itself out. .hero-callouts is the only descendant .s-hero__bg has.

   Scoped to the home page rather than applied to .s-hero__bg outright: every inner page
   shares that rule, none of them has a marker layer, and there is no reason to alter the
   stacking of 44 heroes to fix one. Delete this (and the z-index above) if the markers
   ever stop being links — both exist only to make the pills hit-testable. */
@media (min-width: 1024px) {
	body.home .s-hero__bg { z-index: auto; }
}

/* --- The marker ---------------------------------------------------------- */

/* .hero-callout is a zero-size anchor AT the anatomical point; the pill centres
   itself on it. So --nx/--ny always mean "the structure", never "the corner of
   the label", and nudging a label never moves what it is pointing at. */
.hero-callout {
	position: absolute;
	left: var(--nx);
	top: var(--ny);
	width: 0;
	height: 0;
}

/* Linked markers, ported from Raleigh (anchor-tmj-raleigh tmj-lean.css 7c) after
   the client asked for the hero pills to go somewhere. The layer above is
   `pointer-events: none` so the pills never steal a drag across the photo; the
   ones that lead to a page opt back in. Hit testing follows the rendered pill,
   not the zero-size anchor point, because .hero-callout__label is its child.
   A marker with no page to send anyone to stays a <span> and stays inert --
   "Neck & Posture" is that case HERE ONLY. This site has no neck, posture or
   cervical page of any kind; its one neck reference is the "Ear & neck symptoms"
   card on /tmj-therapy/, which goes to /tmj-therapy/tinnitus/ -- an ear and
   tinnitus page, too far off the label to use. Raleigh does NOT share this gap:
   it has a full /symptom/neck-pain/ page and links all four pills. Link this one
   as soon as a neck/posture page exists. Note the layer also loses its
   aria-hidden once any marker is a link: a focusable anchor inside an
   aria-hidden subtree is an a11y violation, and the pills now carry real
   destinations worth announcing. */
a.hero-callout {
	pointer-events: auto;
	text-decoration: none;
	color: inherit;
}

a.hero-callout .hero-callout__label {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

a.hero-callout:hover .hero-callout__label,
a.hero-callout:focus-visible .hero-callout__label {
	/* The pill's resting transform IS the centring translate -- the lift has to
	   carry it, or hovering drops the marker off its anatomical point. */
	transform: translate(-50%, calc(-50% - 2px));
	background: rgba(var(--cream-rgb), 1);
	box-shadow: 0 6px 18px rgba(21, 59, 55, 0.24);
}

a.hero-callout:focus-visible .hero-callout__label {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	a.hero-callout .hero-callout__label { transition: none; }
}

.hero-callout__label {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	/* A deliberate break from the theme's hard corners — it is what separates a
	   marker floating on an illustration from the flat plates and cards making up
	   the rest of the page. */
	border-radius: 999px;
	/* The theme's warm cream. There is no cream token: the only place the value
	   exists is .s--tint's rgba(241,240,239,0.36) in tmj-sections.css, where the
	   alpha hides what the underlying colour is. Same colour, named, and stored as
	   components so this rule and the ring below can set their own alpha. Warm on
	   purpose — --mist (#f1f6f5) is the cool sibling and goes green against the
	   peach illustration. Promote to :root if a third caller appears. */
	--cream-rgb: 241, 240, 239;
	background: rgba(var(--cream-rgb), 0.9);
	box-shadow: 0 4px 14px rgba(21, 59, 55, 0.16);
	font-family: 'Libre Franklin', system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dark);
	white-space: nowrap;
}

/* The brand diamond, demoted to the pill's dot. */
.hero-callout__label::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	background: var(--accent);
	transform: rotate(45deg);
}

/* The radiate: one ring leaving the pill's own outline. Staggered per marker
   below — four pills breathing in unison reads as a page-load glitch, four
   breathing in turn reads as a live signal. */
.hero-callout__label::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid var(--accent);
	opacity: 0;
	pointer-events: none;
	animation: heroCalloutRadiate 3.2s ease-out infinite;
	animation-delay: var(--pulse-delay, 0s);
}

@keyframes heroCalloutRadiate {
	0%   { transform: scale(1);    opacity: 0.7; }
	65%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-callout__label::after { animation: none; }
}

/* Picture-relative coordinates, read off THIS hero file against a percentage grid
   overlaid on the source — not inherited. Raleigh's numbers came over with the
   component and were checked against the image before being kept; all four were
   wrong here, because they had been tuned for the illustration Raleigh used before
   this one. Plotted, they landed: nerves in the hair above the bun, jaw on the ear
   rather than the joint, airway on the cervical spine rather than the airway, and
   neck out in empty gold field to the right of the spine. Re-read:
     nerves — the dense gold fan over the temple    (58-68% x, 18-28% y)
     jaw    — the white joint just in front of the ear
     airway — the teal/blue column in the throat
     neck   — the cervical vertebrae themselves
   Anything above ~22% y puts a pill under the fixed nav, which is the floor on
   "nerves". Re-plot these if the hero photo is ever swapped — they describe one
   specific picture and mean nothing over another. */
.hero-callout--nerves { --nx: 63%;   --ny: 24%; --pulse-delay: 0s;   }
.hero-callout--jaw    { --nx: 57%;   --ny: 39%; --pulse-delay: 0.8s; }
.hero-callout--airway { --nx: 53.5%; --ny: 55%; --pulse-delay: 1.6s; }
.hero-callout--neck   { --nx: 60.5%; --ny: 68%; --pulse-delay: 2.4s; }

/* Design pass final review: at scroll 0 on phones, the fixed mobile sticky bar and the
   third-party Cherry "floatingEstimator" pill (id, not class — it's a single injected
   #floatingEstimator container, see functions.php/tmj-header.js comments) sit on top of
   the hero's own CTA buttons. body.ac-at-top is toggled by tmj-header.js while
   window.scrollY < 120; hide both bars only in that state so they still work normally
   once the visitor scrolls past the hero. */
@media (max-width: 768px) {
  body.ac-at-top .mobile-bottom-bar,
  body.ac-at-top #floatingEstimator {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
}

/* ------------------------------------------------------------
   Cream hero (owner request 2026-09-09, ported from Raleigh's tmj-lean.css 7a/7d).
   Opt in with `s-hero--cream` on the hero <section>; `s--dark` stays so removing the
   class restores the green hero exactly. The page's own photo and focal point are
   untouched — only the panel colour, the fade colour, the type and the buttons change.
   ------------------------------------------------------------ */
.s-hero--cream {
	--hero-cream: var(--cream);
	--hero-cream-rgb: var(--cream-rgb);
	--credbar-h: 119px; /* the "Over 70 Centres" bar: 27px + 65px + 27px */
	background-color: var(--hero-cream);
}
/* Content-height variant: drops the near-full-viewport min-height below for a hero
   that is just a label + title + line (e.g. /socials/). Add s-hero--auto beside
   s-hero--cream. Specificity (0,2,0) beats the (0,1,0) min-height rule. */
.s-hero--cream.s-hero--auto { min-height: 0; }
/* Stage: hero + credibility bar fill one screen on desktop; 52vw keeps the 60%-wide
   photo box near a 1.15:1 aspect so cover never zooms into the subject's face. */
@media (min-width: 1024px) {
	.s-hero--cream {
		display: flex;
		align-items: center;
		min-height: min(calc(100vh - var(--credbar-h)), 52vw);
		min-height: min(calc(100svh - var(--credbar-h)), 52vw);
		padding-bottom: 2.5rem;
	}
}
/* Desktop only: the ≤900px block turns .s-hero__bg into a flat 185px photo band. */
.s-hero--cream {
	--hero-cream-fade: linear-gradient(95deg,
				var(--hero-cream) 0%,
				var(--hero-cream) 11%,
				rgba(var(--hero-cream-rgb), 0.96) 14%,
				rgba(var(--hero-cream-rgb), 0.84) 16%,
				rgba(var(--hero-cream-rgb), 0.68) 19%,
				rgba(var(--hero-cream-rgb), 0.50) 22%,
				rgba(var(--hero-cream-rgb), 0.32) 25%,
				rgba(var(--hero-cream-rgb), 0.16) 28%,
				rgba(var(--hero-cream-rgb), 0.04) 30%,
				rgba(var(--hero-cream-rgb), 0) 33%);
}
/* --bg-hero-photo-home lives on :root (tokens.css), so it must never be a fallback for
   other pages: inner pages read their own inline --bg-hero-photo, Home its own token. */
@media (min-width: 901px) {
	.s-hero--cream .s-hero__bg { background-image: var(--hero-cream-fade), var(--bg-hero-photo); }
	.home .s-hero--cream .s-hero__bg { background-image: var(--hero-cream-fade), var(--bg-hero-photo-home); }
}
/* Type: eyebrow coral→mid green (coral on beige is ~1.8:1); title and copy in dark ink. */
.s-hero--cream .hero-label { color: #2a635c; }
.s-hero--cream .hero-title.white,
.s-hero--cream .hero-title.white * { color: #153b37; }
.s-hero--cream .hero-desc { color: var(--text-muted-dark, #3f5b57); }
.s-hero--cream .floating-diamond { background: #153b37; opacity: 0.06; }
.s-hero--cream .floating-diamond:nth-child(5) { background: #e8a087; opacity: 0.45; }
/* Buttons inverted for a light ground: dark plate with cream type; secondary in dark ink. */
.s-hero--cream .btn-primary { background: #153b37; color: var(--hero-cream); }
.s-hero--cream .btn-primary::before { background: #2a635c; }
.s-hero--cream .btn-secondary { color: #153b37; }
.s-hero--cream .btn-secondary::after { background: rgba(21, 59, 55, 0.45); }
.s-hero--cream .btn-secondary:hover { color: #2a635c; }
.s-hero--cream .btn-secondary:hover::after { background: #e8a087; }
/* The fixed nav is transparent at rest and relied on the green hero for its white type.
   (A transparent rest state was tried 2026-09-11 and reverted the same day — owner wants the green bar.) */
body:has(.s-hero--cream) .nav-wrapper:not(.scrolled) { background: #153b37; }
/* Home's trust strip under the hero buttons: muted-light type vanished on beige. */
.s-hero--cream .hero-trust { border-top-color: rgba(21, 59, 55, 0.2); }
.s-hero--cream .trust-item { color: var(--text-muted-dark, #3f5b57); }