/* ============================================================
   Clean section system (replaces Divi's et_pb_section/row/column
   scaffolding). Values taken from the live site's computed styles.
   ============================================================ */

.s { position: relative; }

/* Site-wide container — mirrors the header's .nav-container EXACTLY at every viewport
   (width:90% capped at 1440; below 1365 it goes full width with 15px inset). Using the
   same rule, not a fixed 72px pad, so content lines up with the header at ALL widths,
   not just at 1440px. */
.s > .s-container,
.ac-container {
	width: 90%;
	max-width: 1440px;
	margin: 0 auto;
}
@media (max-width: 1365px) {
	.s > .s-container,
	.ac-container { width: 100%; padding-left: 15px; padding-right: 15px; }
}

/* Vertical rhythm (from live computed section padding) */
.s--pt-0  { padding-top: 0; }
.s--pt-27 { padding-top: 27px; }
.s--pt-30 { padding-top: 30px; }
.s--pt-40 { padding-top: 40px; }
.s--pt-60 { padding-top: 60px; }
.s--pt-70 { padding-top: 70px; }
.s--pt-80 { padding-top: 80px; }
.s--pt-hero { padding-top: 167px; } /* fixed header is 138px tall; clears it + ~35px like the live site */
/* Restores the 27px/27px vertical padding Divi put on each content .et_pb_row.
   Add to text sections that in Divi had a single content row so the clean section
   keeps the original inner rhythm. */
.s--rowpad > .s-container { padding-top: 27px; padding-bottom: 27px; }
.s--pb-0  { padding-bottom: 0; }
.s--pb-27 { padding-bottom: 27px; }
.s--pb-30 { padding-bottom: 30px; }
.s--pb-40 { padding-bottom: 40px; }
.s--pb-54 { padding-bottom: 54px; }
.s--pb-60 { padding-bottom: 60px; }
.s--pb-70 { padding-bottom: 70px; }
.s--pb-80 { padding-bottom: 80px; }
.s--pb-82 { padding-bottom: 82px; }

/* Backgrounds */
.s--dark   { background-color: #153b37; }
.s--dark2  { background-color: #1a4a45; }
.s--light  { background-color: #ffffff; }
.s--mist   { background-color: var(--cream); } /* owner 2026-09-09: one off-white site-wide — the hero beige */
.s--tint   { background-color: var(--cream); }
.s--diamond-bg {
	background-color: #ffffff;
	background-image: url('/wp-content/uploads/2026/02/BG-DIAMOND_1.webp');
	background-repeat: repeat;
	background-size: 5px;
}

/* Two-column (image + text) layout */
.s-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.s-2col--bottom { align-items: end; }
/* 1/3 + 2/3 bio layout (matches Divi's 1_3/2_3 columns, 72px gutter); image left, text top-aligned */
.s-2col--13 { grid-template-columns: 384fr 840fr; gap: 72px; align-items: start; }
/* Text-first two-column split whose second column is a wide widget (e.g. a social
   feed) that must not squeeze the text below a readable width. Keeps the text
   column at a real minimum instead of splitting evenly. Placed above the ≤900px
   mobile block so that rule's `.s-2col { grid-template-columns: 1fr }` still wins
   on narrow screens (same specificity, later in source). */
.s-2col--text-first { grid-template-columns: minmax(380px, 1fr) 2fr; }
/* Grid items default to min-width:auto, so the 2fr track was growing to the social
   feed widget's intrinsic (min-content) width instead of the space actually
   available, pushing the widget past the container/viewport edge. The widget's own
   card row is already an overflow-x:auto scroller (anchor-social-feed.css), so
   letting the track shrink below that content width is safe — the row scrolls
   internally instead of blowing out the layout. */
.s-2col--text-first .s-col-img { min-width: 0; }

/* ---- HERO: dark section + image faded into green on the right ---- */
.s-hero { overflow: hidden; }
.s-hero__bg {
	position: absolute;
	/* Starts BELOW the fixed header, not under it (owner 2026-09-11): the header used to
	   cover the top 138px of the picture and crop the subject's head. --hero-photo-top
	   mirrors the header's real height per breakpoint (super-header 52 + nav 86; the
	   super-header is gone and the nav is 70px at <=1100px). */
	--hero-photo-top: 138px;
	top: var(--hero-photo-top); right: 0; bottom: 0;
	width: 60%;
	/* Hero photo comes from the token so the practice's image is defined in one place
	   (tokens.css), per the theme's asset-URL variable convention. */
	background-image:
		linear-gradient(100deg, #153b37 20%, rgba(21,59,55,0) 100%),
		var(--bg-hero-photo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}
.s-hero > .s-container { position: relative; z-index: 1; }

/* Home hero photo. Scoped to the front page so the repositioned imagery does not
   land on the 43 pain/service pages that share .s-hero__bg — a restful-sleep photo
   would be off-message above "TMJ Pain" or "Trigeminal Neuralgia". */
.home .s-hero__bg {
	/* The veil has to do two jobs that pull against each other: hold enough green under
	   the TAIL of the hero copy (which overhangs this box by ~146px at 1440) for white
	   text to read, and then get out of the way fast enough that the subject's face is
	   not a green silhouette. The ported Raleigh ramp did only the first — solid to 22%
	   and still 15% opaque at 72% — and 22% along this box lands at x=793, with the face
	   at x=760-877. The face was inside the solid stop; that, not the crop, is why the
	   hero read as hair on an empty green field.
	   So: opaque to 15% (the copy ends at ~14.6% along), then off in a hurry. The stops
	   are positions along the 100deg gradient LINE, not box width — at this box's
	   proportions the line is ~1002px for 864px of width, so a stop sits ~4% further
	   left than its number suggests. */
	background-image:
		linear-gradient(100deg,
			#153b37 0 15%,
			rgba(21,59,55,0.38) 21%,
			rgba(21,59,55,0.10) 36%,
			rgba(21,59,55,0) 54%),
		var(--bg-hero-photo-home, var(--bg-hero-photo));
	/* --hero-focal-x is the ONE place the horizontal crop is decided. Both this rule's
	   background-position and the marker layer (.hero-callouts, tmj-lean.css) read it,
	   so the picture and the pills pinned to it can no longer drift apart — the failure
	   this pairing had when the position lived in two files.

	   Why it is not 100% (hard right, as Raleigh has it): `cover` on a 60%-wide box
	   scales this 3:2 picture to the box's HEIGHT, so the taller the hero the wider the
	   painted picture and the more of its LEFT edge is cropped away. Utah's hero carries
	   more than Raleigh's, and at 100% that crop ate the subject's face — the site was
	   left showing hair and a shoulder. 65% pulls the frame back far enough that the face
	   clears the copy: it puts the face (picture-x 36-45%) at box x 760-877, to the RIGHT
	   of where the hero text ends at 722, so the veil above can fade off it without
	   stranding white type on a pale background. Further left than that and the hair bun
	   starts leaving the right edge.
	   Measured, not guessed: at 1440x900 this shows picture-x 22-88%. Re-measure if the
	   hero's height changes much — height is what drives how much gets cropped. */
	--hero-focal-x: 65%;
	/* Vertically TOP-aligned (owner 2026-09-11): when `cover` has to crop height (wide,
	   short boxes) it drops the shoulders, never the crown of the head. .hero-callouts
	   in tmj-lean.css is pinned top:0 to match. */
	background-position: var(--hero-focal-x) 0;
}

/* Narrow desktop: walk the focal point left as the crop tightens.

   65% is tuned for a box that is roughly as wide as it is tall. It stops being
   right below ~1200px, and the reason is that BOTH terms move the wrong way at
   once: this box is 60% of the viewport, so it narrows as the window does, while
   the hero's height is set by its own copy — which WRAPS TO MORE LINES as the
   window narrows, making the box taller. `cover` scales the picture to the taller
   axis, so the visible slice of a 1536x1024 picture collapses fast. Measured
   box aspect (the picture's own is 1.50):

       1920 -> 1.33     1280 -> 0.81     1100 -> 0.65
       1440 -> 0.99     1200 -> 0.70     1024 -> 0.61

   At 0.61 the slice is 41% of the picture, and anchored at 65% it lands on hair
   and the back of the head: the nose, mouth and chin sit outside the box behind
   the green panel. The subject's face is the one thing this photo is for.

   Note this is NOT the fix Raleigh needed for the same symptom. There the hero
   was sized `100svh - credbar` and the cure was capping that against viewport
   WIDTH (anchor-tmj-raleigh tmj-lean.css §7a). Utah has no such rule — §2 of
   tmj-lean.css records the deliberate decision not to port it, because this hero
   carries a headline, a vision line and a trust row that Raleigh's does not. That
   decision still holds; min-height is not what sets this height, so capping it
   would do nothing. The lever here is the focal point instead.

   Values are measured, not interpolated — rendered at 65/58/50/42 and looked at.
   42% overshoots: it pushes the neural field out of frame and clips the
   "Nerves & Pain" pill off the right edge. Steps rather than a formula because
   --hero-focal-x must stay a bare percentage: .hero-callouts counter-translates
   by it (tmj-lean.css), and a calc() mixing vw into it would mean one thing to
   background-position and something else entirely to that transform.

   Changing this variable reframes the photo AND the markers together, which is
   the whole point of it being one variable. Do not set background-position
   directly here. Below 900px tmj-sections.css flattens this box into a full-width
   185px band, where `cover` scales to width and the focal point stops mattering. */
@media (max-width: 1200px) {
	.home .s-hero__bg { --hero-focal-x: 58%; }
}
@media (max-width: 1100px) {
	.home .s-hero__bg { --hero-focal-x: 50%; }
}

/* ---- CTA BAND (.s-prf): full-bleed parallax photo under a green gradient overlay ----
   Photo comes from --bg-cta-band (tokens.css) per the theme's asset-URL convention, so the
   practice's image is defined in exactly one place for all 25 pages using this section.

   background-attachment: fixed is the parallax — the image is pinned to the VIEWPORT, so
   the band slides over it as you scroll. Two consequences worth knowing before editing:

   1. `cover` sizes the image to the VIEWPORT, not to this ~475px band. For the 3:2 team
      photo on a typical 16:10 viewport that leaves only ~60px of vertical slack, so
      background-position has very little to move — do not expect it to reframe much.
   2. Because the band is ~53% of the viewport height, it sweeps the image while scrolling.
      The team reads clearly while the band sits in the upper two thirds of the screen (its
      natural reading position); lower than that, the crop rides down onto torsos. That is
      the parallax working as designed, not a bug.

   If the team ever needs to stay framed at EVERY scroll position, that requires
   `background-attachment: scroll` (image sized to the band) — which trades the parallax
   away. Deliberate choice: parallax kept. */
.s-prf {
	background-image:
		linear-gradient(180deg, rgba(21,59,55,0.82) 0%, rgba(21,59,55,0.87) 100%),
		var(--bg-cta-band);
	background-size: cover;
	/* Biased low within the ~60px of slack `fixed` allows: this drops the crop as far as
	   it will go, which keeps the faces inside the band through the longest stretch of
	   the scroll. Measured against 50%/35%/25%/20%/`bottom`: at the marginal scroll point
	   `top` still holds the faces where `bottom` has already cropped down to shoulders. */
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Generic image column: image fills the column, centered */
.s-col-img { text-align: center; }
.s-imgwrap { display: block; width: 100%; }
.s-imgwrap > img { display: block; width: 100%; height: auto; }
/* Carved-corner shape from tokens.css (--img-shape / --img-notch). */
.s-imgwrap > img { clip-path: var(--img-shape); }

/* ---- .diamond-frame : reusable, editable image effect ----
   Wrap an image in .diamond-frame to get: the image at 80% width (centered),
   a coral diamond sitting BEHIND it at the left edge (::before), and the
   TMJ-ICON.svg diamond hung off the bottom-right corner (::after).
   Tweak the two pseudo-elements below to restyle every instance at once. */
.diamond-frame {
	position: relative;
	display: inline-block;
	max-width: 80%;
	vertical-align: bottom;
}
.diamond-frame > img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.diamond-frame::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 100px; height: 100px;
	background: #e8a087;
	transform: translate(-50%, -50%) rotate(45deg);
	z-index: 0;
}
.diamond-frame::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	width: 122px; height: 122px;
	background-image: url('/wp-content/uploads/2026/01/TMJ-ICON.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateX(50%);
	z-index: 2;
}

/* Bio band: breathing room above the CTA buttons (not the hero).
   SUPERSEDED 2026-08-18 by tmj-spacing.css, which now guarantees a --flow-block floor
   above .hero-buttons in EVERY section (this rule only ever covered dark ones, which is
   why the light-section FAQ/CTA boundaries sat flush). Kept as a no-op comment so the
   spacing for this pair has exactly one owner. */

/* ---- LOCATION pages (shared frame across every /<city>/ page) ----
   Same white-rounded-card-on-green layout the blog single uses (.ac-card-*
   scaffold lives in blog.css but its frame/title are gated to .single-post).
   .s-loc re-applies that frame for the page context so every location page
   only needs its own H1 + .info-content + the (identical) contact sidebar. */
.s-loc { padding: 150px 0 60px; }
.s-loc .ac-card-row { background: #ffffff; }
.s-loc .ac-loc-title h1 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: 40px;
	font-weight: 500;
	color: #333333;
	/* 76px reproduces the live title block + the empty featured-image slot above the body */
	margin: 0 0 76px;
}
@media (max-width: 980px) {
	.s-loc { padding: 110px 0 40px; }
	.s-loc .ac-loc-title h1 { font-size: 32px; line-height: 1.1; }
}

@media (max-width: 900px) {
	.s > .s-container, .ac-container { padding-left: 24px; padding-right: 24px; }
	.s-2col { grid-template-columns: 1fr; gap: 32px; }
	/* Mobile: header is ~70px (super-header hidden) — no need for 167px */
	.s--pt-hero { padding-top: 90px; }
	/* Mobile hero image becomes a static block on top — drop the fade gradient,
	   cap the height (185px = desktop cap - 75), center the photo, add space below.
	   The fixed height + cover means NO photo is ever taller than this, any device. */
	.s-hero__bg {
		position: relative;
		top: 0; /* --hero-photo-top is for the absolute desktop box; on a relative band it would just shove it down */
		width: 100%;
		/* Grows with the viewport (owner 2026-09-11): a fixed 185px showed only a sliver of
		   the portrait mobile photo at tablet widths and cut the crown. 48vw x the 20% offset
		   below keeps the whole head in frame from 320px up; 440px caps it at ~900px. */
		height: clamp(185px, 48vw, 440px);
		margin-bottom: 28px;
		background-image: var(--bg-hero-photo-mobile, var(--bg-hero-photo));
		/* Biased toward the top (owner 2026-09-11): `cover` on a 185px band crops height at
		   tablet widths, and a centred crop took the crown off the subject's head at 768px. */
		background-position: center 20%;
	}
	/* The desktop `.home .s-hero__bg` override outranks the rule above on specificity
	   (0,2,0 vs 0,1,0), so restate it here or the home page loses the mobile treatment.
	   Deliberately NOT --bg-hero-photo-mobile: that token is the portrait crop of the
	   site-wide hero, a different photo entirely. The home page keeps its own picture at
	   every width — the markers are hidden below 1024px but the image still has to carry
	   the same message. Centred here because the 185px band is already full-bleed
	   horizontally, so `right` would only shave the subject off the left. */
	.home .s-hero__bg {
		background-image: var(--bg-hero-photo-home);
		background-position: center 20%; /* same top bias as the shared band rule above */
	}
	/* Keep the framed image at 80% on mobile; shrink the diamonds to fit */
	.diamond-frame { max-width: 80%; }
	.diamond-frame::before { width: 64px; height: 64px; }
	.diamond-frame::after { width: 82px; height: 82px; }
}

/* Design pass 2026-09-08 final review: the sticky assessment bar and the "Pay over time"
   pill covered the hero's secondary button at 375px. Give the hero room beneath them
   instead of hiding them. (Moved here from tmj-header.css — a hero rule, not header
   chrome.) */
@media (max-width: 768px) { .s-hero.s--pb-54 { padding-bottom: 110px; } }

/* ---- Per-page hero (design pass 2026-09-08) ----
   Pages set --bg-hero-photo and --hero-focal-x inline on .s-hero; the child reads them here.
   Desktop only (min-width: 901px): the <=900px block above already owns mobile centring
   (.s-hero__bg { background-position: center center; }, ~line 286) — this rule sits AFTER
   that block in source order with equal specificity and no media query of its own, so
   without this guard it would win at every width once a page sets --hero-focal-x inline,
   pulling the 185px mobile band off-center. .home keeps its own rule above (it also sets
   --hero-focal-x, scoped to min-width:1100px). */
@media (min-width: 901px) {
	.s-hero__bg { background-position: var(--hero-focal-x, center) 0; }
}
@media (max-width: 1100px) {
	.s-hero__bg { --hero-photo-top: 70px; }
}

/* ---- Single editorial column: copy that has no natural image ---- */


/* ---- Embellishments (owner request 2026-09-09) ----
   Faint teal/coral line-art motifs (assets/images/embellishments/) on the beige sections, so
   the beige reads as a warm, earthy ground rather than "the not-white section". Opt in per
   section with `s--emb` plus one placement class; bin/embellish.py assigns them by content type
   (corner beside splits, lotus behind card grids, wave under accordions, side accent beside
   prose) at most every other beige section. The motif is an ::after layer under the content. */
.s--emb { overflow: hidden; }
.s--emb > .s-container { position: relative; z-index: 1; }
.s--emb::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
.s--emb-corner::after   { right: -2vw; bottom: -2vw; width: min(560px, 44vw); aspect-ratio: 1; background-image: url('../images/embellishments/emb-corner.webp'); background-position: right bottom; opacity: .9; }
.s--emb-corner-l::after { left: -2vw; right: auto; transform: scaleX(-1); }
.s--emb-side::after     { right: 0; top: 0; height: 100%; aspect-ratio: 2 / 3; background-image: url('../images/embellishments/emb-side.webp'); background-position: right center; opacity: .9; }
.s--emb-side-l::after   { left: 0; right: auto; transform: scaleX(-1); }
.s--emb-under::after    { left: 50%; bottom: 0; transform: translate(-50%, 45%); width: min(1100px, 82vw); aspect-ratio: 1400 / 429; background-image: url('../images/embellishments/emb-under.webp'); background-position: center bottom; opacity: .9; }
.s--emb-lotus::after    { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, 72vw); aspect-ratio: 1; background-image: url('../images/embellishments/emb-lotus.webp'); background-position: center; opacity: .7; }
.s--emb-full::after     { inset: 0; background-image: url('../images/embellishments/emb-full.webp'); background-size: cover; background-position: center; opacity: .55; }
/* Crest: the lotus at 250px, centred right above a section header (owner 2026-09-09). */
.s--emb-crest .section-header::before {
	content: "";
	display: block;
	width: 250px;
	max-width: 70vw;
	aspect-ratio: 750 / 379;
	margin: 0 auto 0.75rem;
	background: url('../images/embellishments/emb-crest.webp') center / contain no-repeat;
}
/* Secondary (text) buttons on beige: the default light type vanishes on the cream ground. */
.s--mist .btn-secondary, .s--tint .btn-secondary { color: var(--dark, #153b37); }
.s--mist .btn-secondary::after, .s--tint .btn-secondary::after { background: rgba(21, 59, 55, 0.45); }
.s--mist .btn-secondary:hover, .s--tint .btn-secondary:hover { color: #2a635c; }
.s--mist .btn-secondary:hover::after, .s--tint .btn-secondary:hover::after { background: var(--accent, #e8a087); }
/* Dark grounds: the ghost button stays light even if .force-dark (a beige-section helper, !important)
   is left on it — retone.py (2026-09-09) turned beige sections dark but kept the class, which made
   Home "Take a Symptom Assessment" and Blog "Call Now" invisible. (2026-09-24)
   .s-hero--cream KEEPS .s--dark by design (tmj-lean.css) but is a light ground — excluded. */
:is(.s--dark:not(.s-hero--cream), .s--dark2, .s-prf, .section-dark) .btn-secondary,
:is(.s--dark:not(.s-hero--cream), .s--dark2, .s-prf, .section-dark) .btn-secondary.force-dark { color: var(--text-light, #d4e5e2) !important; }
:is(.s--dark:not(.s-hero--cream), .s--dark2, .s-prf, .section-dark) .btn-secondary::after { background: rgba(212, 229, 226, 0.45); }
:is(.s--dark:not(.s-hero--cream), .s--dark2, .s-prf, .section-dark) .btn-secondary:hover { color: var(--accent, #e8a087) !important; }
/* A beige section that follows a beige section carries the crest and no top padding, so the
   two read as one ground with the motif as the divider (owner 2026-09-09). */
/* Zero top padding ONLY when the crest follows a beige section (the stated intent);
   against a dark band (e.g. /our-media/ after the International banner) the section
   keeps its declared s--pt-NN. Restored 2026-09-24 (lost in the 09-21 reset). */
:is(.s--mist, .s--tint) + .s--emb-crest { padding-top: 0; }
:is(.s--mist, .s--tint) + .s--emb-crest > .s-container { padding-top: 0; }
/* Headings on the beige are the brand green, not ink (owner 2026-09-09). */
.s--mist .section-title, .s--tint .section-title, .s--mist .info-title, .s--tint .info-title,
.s--mist .info-content.dark .info-title, .s--tint .info-content.dark .info-title { color: var(--dark, #153b37); }
/* .cta-* was built for dark bands (white title, light subtitle) -- on the beige it
   went white-on-cream (Socials "We Look Forward To Meeting You", 2026-09-24). */
.s--mist .cta-title, .s--tint .cta-title { color: var(--dark, #153b37); }
.s--mist .cta-subtitle, .s--tint .cta-subtitle { color: var(--text-muted-dark, #4a5f5c); }
@media (max-width: 600px) {
	.s--emb-side::after, .s--emb-full::after { display: none; }
	.s--emb-corner::after { width: 60vw; }
}