/* Per-page CSS ported from Cleveland's bespoke pages.
   Cleveland stores these in each page's `_ac_custom_css`; Raleigh loads them
   once from the theme so every ported page is styled without duplication. */

/* ---- ported from Cleveland page 1093228 (about-us) ---- */
/* About Us (Anchor) — page-specific CSS */

/* "Non Surgical Solutions" accent span (Divi module custom_css: selector span{color:#E8A087}).
   Only the symptom-cards header has a <span> inside a .section-title on this page;
   .info-title spans (intro/team) are intentionally left uncolored. */
.section-title span { color: var(--accent, #e8a087); }

/* Quiz CTA cards — module CSS relocated by Divi, restored (media-scoped) */
.quiz-cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.quiz-card{position:relative;padding:3rem;background:linear-gradient(135deg,#1a4a45,#153b37);border:1px solid rgba(62,133,124,0.3);overflow:hidden;transition:transform 0.4s ease,box-shadow 0.4s ease}
.quiz-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px rgba(21,59,55,0.3)}
.quiz-card::before{content:'';position:absolute;top:0%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(232,160,135,0.1) 0%,transparent 70%);transition:transform 0.6s ease}
.quiz-card:hover::before{transform:scale(1.8)}
.quiz-card-content{position:relative;z-index:2}
.quiz-icon{width:60px;height:60px;margin-bottom:1.5rem;position:relative}
.quiz-icon::before{content:'';position:absolute;inset:0;background:#e8a087;transform:rotate(45deg);transition:transform 0.4s ease}
.quiz-card:hover .quiz-icon::before{transform:rotate(45deg) scale(1.1)}
.quiz-icon svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;stroke:#153b37;stroke-width:1.5;fill:none}
.quiz-card h3{font-size:1.75rem;font-weight:400;color:#d4e5e2;margin-bottom:0.75rem}
#page-container .quiz-card .p-text{font-weight:300;font-size:0.95rem;line-height:1.7;color:rgba(212,229,226,0.6)!important;margin-bottom:1.5rem!important}
.quiz-link{display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1.5rem;background:transparent;border:1px solid #e8a087;color:#e8a087;text-decoration:none;font-family:'Libre Franklin',sans-serif;font-size:0.8rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;transition:all 0.4s ease;position:relative;overflow:hidden;width:fit-content;margin-top:1.5rem}
.quiz-link::before{content:'';position:absolute;inset:0;background:#e8a087;transform:translateX(-100%);transition:transform 0.4s ease}
.quiz-link span,.quiz-link svg{position:relative;z-index:1}
.quiz-link:hover::before{transform:translateX(0)}
.quiz-link:hover{color:#153b37}
.quiz-link svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform 0.3s ease}
.quiz-link:hover svg{transform:translateX(4px)}
@media (max-width:1024px){.quiz-cta-inner{grid-template-columns:1fr}}
@media (max-width:600px){.quiz-card{padding:2rem 1.5rem}.quiz-card h3{font-size:1.5rem}}

/* Symptom-cards section had TWO Divi rows (header + cards) each 27/27; .s--rowpad
   restores one, this restores the gap between them. */
.symptom-cards-grid { margin-top: 54px; }

/* ---- ported from Cleveland page 1093024 (tmj-disorder) ---- */
/* ===== Orofacial Pain & TMJ Disorder Treatment in Raleigh-Durham (Anchor) — page-specific CSS =====
   Clean-section build. Only per-page overrides live here; the .s / .s-- system,
   info-content, info-features, conditions-grid, hero-diamonds come from shared theme CSS. */

/* Hero background: Cleveland's tmj-disorder page overrode .s-hero__bg with
   AdobeStock_170505259__1704898331_25421.jpg. Same defect as the sleep-apnea
   override below -- promoted here UNSCOPED, and the asset was never imported.
   Removed; see the longer note further down in this file. */

/* Parallax "Diagnose the Cause" band uses iStock-2181115630.jpg. */
.s-prf {
	background-image:
		linear-gradient(180deg, rgba(21,59,55,0.84) 0%, rgba(21,59,55,0.89) 100%),
		url('/wp-content/uploads/2025/09/iStock-2181115630.jpg');
}

/* Card titles are <p> that in live inherit Divi's global p{padding-bottom:1em}; the anchor reset
   stripped it. Restore it, scoped to condition-card titles only. */
.condition-title { padding-bottom: 1em; }

/* Parallax CTA button breathing room (live had inline .btn-primary.cta{margin-top:2em}). */
.btn-primary.cta { margin-top: 2em; }

/* (mobile .s-hero__bg override removed with the desktop one above -- same
   missing asset, same unscoped-leak defect.) */

/* ===== Adults / Children tabbed component (ac-ofp) — module CSS not in shared theme ===== */
.ac-ofp {
	--ofp-radius: 16px;
	--theme-main: #153b37;
	--theme-accent: #153b37;
	padding: 0;
	box-sizing: border-box;
}
.ac-ofp * { box-sizing: border-box; }

/* Tabs */
.ac-ofp__tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
.ac-ofp__tab {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 34px !important;
	border: 2px solid var(--theme-main) !important;
	background: transparent !important;
	color: var(--theme-main) !important;
	border-radius: 50px !important;
	font-size: 17px; font-weight: 700; cursor: pointer;
	transition: all .25s ease; line-height: 1;
}
.ac-ofp__tab i { font-size: 18px; }
/* Was `.ac-ofp__tab:hover` (specificity 0,2,0), which outranks
   `.ac-ofp__tab--active` (0,1,0) no matter the source order -- so the tab you
   just clicked kept white text on a near-transparent hover background and was
   unreadable until you moved the mouse away. Exclude the active tab. */
.ac-ofp__tab:not(.ac-ofp__tab--active):hover { background: rgba(0,0,0,.04) !important; }
.ac-ofp__tab--active {
	background: var(--theme-main) !important;
	color: #fff !important;
	box-shadow: 0 8px 22px -8px var(--theme-main);
}

/* Panels */
.ac-ofp__panel { display: none; animation: ac-ofp-fade .35s ease; }
.ac-ofp__panel--active { display: block; }
@keyframes ac-ofp-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Intro */
.ac-ofp__intro { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.ac-ofp__title { font-size: clamp(26px, 4vw, 38px); line-height: 1.2; color: var(--theme-main) !important; margin: 0 0 14px; }
.ac-ofp__title span { color: var(--theme-accent) !important; font-weight: 600; }
.ac-ofp__intro p { font-size: 17px; line-height: 1.7; opacity: .85; margin: 0; }

/* Grid */
.ac-ofp__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }

/* Cards */
.ac-ofp__card {
	background: #fff; border-radius: var(--ofp-radius); padding: 32px;
	box-shadow: 0 18px 45px -28px rgba(0,0,0,.35);
	border: 1px solid rgba(0,0,0,.05); height: 100%;
}
.ac-ofp__card--symptoms { background: linear-gradient(160deg, var(--theme-main) 0%, var(--theme-accent) 140%); color: #fff; }
.ac-ofp__card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ac-ofp__card-head i { font-size: 26px; color: var(--theme-accent); }
.ac-ofp__card--symptoms .ac-ofp__card-head i { color: #fff; }
.ac-ofp__card-head h3 { font-size: 21px; margin: 0; line-height: 1.25; color: var(--theme-main) !important; }
.ac-ofp__card--symptoms .ac-ofp__card-head h3 { color: #fff !important; }
.ac-ofp__card-note { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 4px 0 20px; }

/* Service list */
.ac-ofp__list { list-style: none; margin: 0 0 22px; padding: 0; }
.ac-ofp__list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 15.5px; line-height: 1.5; }
.ac-ofp__list li:last-child { border-bottom: none; }
.ac-ofp__list i { color: var(--theme-accent); margin-top: 4px; font-size: 13px; }
.ac-ofp__emphasis { font-size: 14.5px; line-height: 1.65; opacity: .8; border-left: 3px solid var(--theme-accent); padding-left: 16px; margin: 0; }

/* Symptoms list */
.ac-ofp__symptoms { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.ac-ofp__symptoms li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 14.5px; line-height: 1.45; border-bottom: 1px solid rgba(255,255,255,.15); }
.ac-ofp__symptoms i { margin-top: 3px; font-size: 14px; opacity: .9; width: 18px; text-align: center; flex-shrink: 0; }

/* Responsive */
@media (max-width: 980px) { .ac-ofp__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
	.ac-ofp__card { padding: 24px; }
	.ac-ofp__symptoms { grid-template-columns: 1fr; }
	.ac-ofp__tab { padding: 12px 24px !important; font-size: 15px; }
}

/* ===== Screening quiz cards (module CSS not in shared theme; contains the SVG icons) ===== */
.quiz-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.quiz-card { position: relative; padding: 3rem; background: linear-gradient(135deg, #1a4a45, #153b37); border: 1px solid rgba(62,133,124,0.3); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.quiz-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(21,59,55,0.3); }
.quiz-card::before { content: ''; position: absolute; top: 0%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(232,160,135,0.1) 0%, transparent 70%); transition: transform 0.6s ease; }
.quiz-card:hover::before { transform: scale(1.8); }
.quiz-card-content { position: relative; z-index: 2; }
.quiz-icon { width: 60px; height: 60px; margin-bottom: 1.5rem; position: relative; }
.quiz-icon::before { content: ''; position: absolute; inset: 0; background: #e8a087; transform: rotate(45deg); transition: transform 0.4s ease; }
.quiz-card:hover .quiz-icon::before { transform: rotate(45deg) scale(1.1); }
.quiz-icon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 28px; height: 28px; stroke: #153b37; stroke-width: 1.5; fill: none; }
.quiz-card h3 { font-size: 1.75rem; font-weight: 400; color: #d4e5e2; margin-bottom: 0.75rem; }
#page-container .quiz-card .p-text { font-weight: 300; font-size: 0.95rem; line-height: 1.7; color: rgba(212,229,226,0.6) !important; margin-bottom: 1.5rem !important; }
.quiz-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.5rem; background: transparent; border: 1px solid #e8a087; color: #e8a087; text-decoration: none; font-family: 'Libre Franklin', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.4s ease; position: relative; overflow: hidden; width: fit-content; margin-top: 1.5rem; }
.quiz-link::before { content: ''; position: absolute; inset: 0; background: #e8a087; transform: translateX(-100%); transition: transform 0.4s ease; }
.quiz-link span, .quiz-link svg { position: relative; z-index: 1; }
.quiz-link:hover::before { transform: translateX(0); }
.quiz-link:hover { color: #153b37; }
.quiz-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.3s ease; }
.quiz-link:hover svg { transform: translateX(4px); }
@media (max-width: 1024px) { .quiz-cta-inner { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .quiz-card { padding: 2rem 1.5rem; } .quiz-card h3 { font-size: 1.5rem; } }

/* ---- ported from Cleveland page 1093154 (sleep-apnea) ---- */
/* ===== Sleep-Related Breathing Disorders (Anchor) — page-specific CSS ===== */

/* Hero background: Cleveland's sleep-apnea page overrode .s-hero__bg with
   2026/06/betterSleep.avif. That override was promoted here UNSCOPED, so it hit
   every page carrying .s-hero__bg -- and the asset was never imported, so it
   blanked the hero image sitewide (About Us rendered with an empty dark panel).
   Removed: the theme default in tmj-sections.css (hero-doctor-patient.avif,
   present) is correct for Raleigh. When the sleep-apnea page is rebuilt, add a
   body-class-scoped rule and a real Raleigh hero asset -- see
   docs/superpowers/reference/open-client-decisions.md. */

/* Card titles are <p> that in live inherit Divi p{padding-bottom:1em}. */
.condition-title { padding-bottom: 1em; }

/* ===== Adults / Children tabbed component (ac-ofp) — module CSS not in shared theme ===== */
.ac-ofp { --ofp-radius: 16px; --theme-main: #153b37; --theme-accent: #153b37; padding: 0; box-sizing: border-box; }
.ac-ofp * { box-sizing: border-box; }
.ac-ofp__tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
.ac-ofp__tab { display: inline-flex; align-items: center; gap: 10px; padding: 14px 34px !important; border: 2px solid var(--theme-main) !important; background: transparent !important; color: var(--theme-main) !important; border-radius: 50px !important; font-size: 17px; font-weight: 700; cursor: pointer; transition: all .25s ease; line-height: 1; }
.ac-ofp__tab i { font-size: 18px; }
/* Was `.ac-ofp__tab:hover` (specificity 0,2,0), which outranks
   `.ac-ofp__tab--active` (0,1,0) no matter the source order -- so the tab you
   just clicked kept white text on a near-transparent hover background and was
   unreadable until you moved the mouse away. Exclude the active tab. */
.ac-ofp__tab:not(.ac-ofp__tab--active):hover { background: rgba(0,0,0,.04) !important; }
.ac-ofp__tab--active { background: var(--theme-main) !important; color: #fff !important; box-shadow: 0 8px 22px -8px var(--theme-main); }
.ac-ofp__panel { display: none; animation: ac-ofp-fade .35s ease; }
.ac-ofp__panel--active { display: block; }
@keyframes ac-ofp-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ac-ofp__intro { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.ac-ofp__title { font-size: clamp(26px, 4vw, 38px); line-height: 1.2; color: var(--theme-main) !important; margin: 0 0 14px; }
.ac-ofp__title span { color: var(--theme-accent) !important; font-weight: 600; }
.ac-ofp__intro p { font-size: 17px; line-height: 1.7; opacity: .85; margin: 0; }
.ac-ofp__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }
.ac-ofp__card { background: #fff; border-radius: var(--ofp-radius); padding: 32px; box-shadow: 0 18px 45px -28px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.05); height: 100%; }
.ac-ofp__card--symptoms { background: linear-gradient(160deg, var(--theme-main) 0%, var(--theme-accent) 140%); color: #fff; }
.ac-ofp__card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ac-ofp__card-head i { font-size: 26px; color: var(--theme-accent); }
.ac-ofp__card--symptoms .ac-ofp__card-head i { color: #fff; }
.ac-ofp__card-head h3 { font-size: 21px; margin: 0; line-height: 1.25; color: var(--theme-main) !important; }
.ac-ofp__card--symptoms .ac-ofp__card-head h3 { color: #fff !important; }
.ac-ofp__card-note { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; margin: 4px 0 20px; }
.ac-ofp__list { list-style: none; margin: 0 0 22px; padding: 0; }
.ac-ofp__list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 15.5px; line-height: 1.5; }
.ac-ofp__list li:last-child { border-bottom: none; }
.ac-ofp__list i { color: var(--theme-accent); margin-top: 4px; font-size: 13px; }
.ac-ofp__emphasis { font-size: 14.5px; line-height: 1.65; opacity: .8; border-left: 3px solid var(--theme-accent); padding-left: 16px; margin: 0; }
.ac-ofp__symptoms { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.ac-ofp__symptoms li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 14.5px; line-height: 1.45; border-bottom: 1px solid rgba(255,255,255,.15); }
.ac-ofp__symptoms i { margin-top: 3px; font-size: 14px; opacity: .9; width: 18px; text-align: center; flex-shrink: 0; }
@media (max-width: 980px) { .ac-ofp__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ac-ofp__card { padding: 24px; } .ac-ofp__symptoms { grid-template-columns: 1fr; } .ac-ofp__tab { padding: 12px 24px !important; font-size: 15px; } }

/* ===== Screening quiz cards (module CSS not in shared theme) ===== */
.quiz-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.quiz-card { position: relative; padding: 3rem; background: linear-gradient(135deg, #1a4a45, #153b37); border: 1px solid rgba(62,133,124,0.3); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.quiz-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(21,59,55,0.3); }
.quiz-card::before { content: ''; position: absolute; top: 0%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(232,160,135,0.1) 0%, transparent 70%); transition: transform 0.6s ease; }
.quiz-card:hover::before { transform: scale(1.8); }
.quiz-card-content { position: relative; z-index: 2; }
.quiz-icon { width: 60px; height: 60px; margin-bottom: 1.5rem; position: relative; }
.quiz-icon::before { content: ''; position: absolute; inset: 0; background: #e8a087; transform: rotate(45deg); transition: transform 0.4s ease; }
.quiz-card:hover .quiz-icon::before { transform: rotate(45deg) scale(1.1); }
.quiz-icon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 28px; height: 28px; stroke: #153b37; stroke-width: 1.5; fill: none; }
.quiz-card h3 { font-size: 1.75rem; font-weight: 400; color: #d4e5e2; margin-bottom: 0.75rem; }
#page-container .quiz-card .p-text { font-weight: 300; font-size: 0.95rem; line-height: 1.7; color: rgba(212,229,226,0.6) !important; margin-bottom: 1.5rem !important; }
.quiz-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.5rem; background: transparent; border: 1px solid #e8a087; color: #e8a087; text-decoration: none; font-family: 'Libre Franklin', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.4s ease; position: relative; overflow: hidden; width: fit-content; margin-top: 1.5rem; }
.quiz-link::before { content: ''; position: absolute; inset: 0; background: #e8a087; transform: translateX(-100%); transition: transform 0.4s ease; }
.quiz-link span, .quiz-link svg { position: relative; z-index: 1; }
.quiz-link:hover::before { transform: translateX(0); }
.quiz-link:hover { color: #153b37; }
.quiz-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.3s ease; }
.quiz-link:hover svg { transform: translateX(4px); }
@media (max-width: 1024px) { .quiz-cta-inner { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .quiz-card { padding: 2rem 1.5rem; } .quiz-card h3 { font-size: 1.5rem; } }

/* Raleigh's condition cards are links (each goes to its /condition/<slug>/ page),
   where Cleveland's were static divs. Only the anchor defaults need neutralising;
   all visual styling still comes from .condition-card in tmj-modules.css. */
a.condition-card { display: block; text-decoration: none; color: inherit; }


/* Cleveland's ac-ofp panels always held two cards, so .ac-ofp__grid is a fixed
   two-column grid. Raleigh's source content for several pages yields a single
   card per panel, which left an empty right-hand column. Let a lone card span
   the full row rather than forcing invented filler content into a second card. */
.ac-ofp__grid > .ac-ofp__card:only-child { grid-column: 1 / -1; }

/* .btn-secondary is built for dark sections: it takes var(--text-light) and a
   pale rule, which on Cleveland's pages only ever sat on .s--dark. Raleigh's
   symptom/condition bodies also place it on white card surfaces, where it was
   barely legible. Re-ink it wherever it sits on a light surface. */
.info-content.dark .btn-secondary,
.ac-card-content .btn-secondary { color: var(--dark); }
.info-content.dark .btn-secondary::after,
.ac-card-content .btn-secondary::after { background: var(--accent); }

/* Breathe/Sleep/Heal/Live panels put the heading INSIDE the text column beside
   the photo, so the panel needs no .ac-ofp__intro at all. .s-2col already
   centres its columns vertically (align-items:center), which is what keeps the
   heading block optically level with the image. Give the in-column heading its
   own spacing since .ac-ofp__title was written for a centred intro block. */
.s-col-text > .info-content > .ac-ofp__title { margin: 0 0 6px; }
.s-col-text > .info-content > .info-subtitle { margin: 0 0 18px; font-weight: 400; opacity: .85; }

/* Home hero photo.
   .s-hero__bg is shared by five pages (home, about-us, tmj-disorder,
   sleep-apnea, pain-sleep-quizzes), so this is scoped to the front page via
   WordPress's `home` body class instead of overriding the base rule -- the
   mistake that broke every hero on the site earlier in this branch, when two
   page-specific .s-hero__bg overrides were promoted here unscoped.
   Gradient repeated because background-image replaces the whole layer stack. */
/* Home hero — the MALE pain-receptors illustration the client supplied 2026-09-02
   (attachment 1094056), replacing the female version from 2026-08-24. Same
   composition, same whole-system read (jaw joint, airway, cervical spine, neural
   pathways in one frame), the same peach/teal palette and the same 1536x1024 crop,
   so .hero-callouts keeps its coordinate space. 88KB AVIF encoded from the PNG with
   avifenc -s 4 -q 62.
   NOTE: two earlier attempts to swap this image failed because they were written as
   a bare `.s-hero__bg` -- once in tmj-sections.css, once in the page editor's custom
   CSS box. Both are 0-1-0 and lose to this rule's 0-2-1 no matter where they appear
   in the cascade. The home hero is set HERE. */
/* THE GRADIENT BELOW. Two constraints, and they fight each other:
     1. The fade must finish BEFORE the subject's face, which sits at roughly
        31%-51% along this gradient. The original stops (solid to 22%, still 0.15
        at 72%) put her face under 50-85% green and washed out both the skin tones
        and the peach/teal neural overlay.
     2. The panel's left edge must be uniformly solid #153b37, or the join with
        the dark section shows as a seam instead of reading as one background.
   The angle is what reconciles them. At 100deg the gradient line is tilted enough
   that t varies by ~11 points down the panel's left edge, so a fade starting early
   enough to clear the face was already ~15% transparent at the BOTTOM-left corner
   -- a diagonal seam where the photo edge showed through. 95deg is nearly straight
   left-to-right (keeping a hint of the original tilt), which flattens that variance
   to ~6 points; holding solid to 11% covers it, so the edge is uniform top to
   bottom.
   The stops between 11% and 33% are a smoothstep ramp, not a linear one: a plain
   2-stop fade has a visible crease where it starts, which over the bright wall in
   this photo reads as a hard line.
   Do not push the last stop past ~33%, do not tilt much past 95deg, and do not
   shorten the solid run below ~11% -- each one brings back one of the two problems
   above. All three are specific to THIS photo; re-check them if the hero image is
   ever swapped.

   This block sat INSIDE the background-image value until 2026-09-01. That is legal
   CSS and rendered correctly, but DevTools prints a declaration's raw value, so the
   Styles pane showed 25 lines of prose where the colour stops should be and the
   rule became unreadable exactly when someone was inspecting it. Comments go ABOVE
   the declaration; bin/check-css-comments.py now enforces it. */
/* The photo itself lives in one property so the cream variant (tmj-lean.css 7d)
   can restate the gradient stack without a second copy of the URL. */
/* 2026-09-11 — the `-headroom` crop, not the original v2. Same photograph; the
   canvas is 60px taller because the top of the subject's head sits 25px from
   the top of the supplied file (2.4%), and nothing that can be done to a picture
   with no headroom will keep that head clear of the fixed chrome. The band is an
   edge-clamped continuation of row 0 -- the wall is a flat vertical gradient
   there (rows 0 and 20 differ by under 2/255), so the wall and the window simply
   carry on upward -- blurred across the join. Generated from the original AVIF
   and re-encoded with the same `avifenc -s 4 -q 62`; 78KB, slightly smaller than
   the 88KB it replaces.
   Intrinsic size is now 1536x1084, NOT 1536x1024. .hero-callouts reproduces this
   ratio in CSS to keep its coordinate space (tmj-lean.css 7b) and its --ny
   percentages were remapped onto the taller canvas; re-do both if this file is
   ever swapped again. */
body.home { --hero-photo: url('/wp-content/uploads/2026/09/TMJ-Hero-Image-Male-with-Pain-Receptors-v2-headroom.avif'); }
/* The home hero's side fade is its own: 95deg and a smoothstep ramp rather than the
   theme's 100deg two-stop, for the reasons in the block above. Set as the variable
   the stack reads (tmj-sections.css) instead of restating background-image, so the
   top fade and the photo come from the one place they are defined. */
body.home .s-hero {
	--hero-side-fade: linear-gradient(95deg,
		rgb(var(--hero-ground-rgb)) 0%,
		rgb(var(--hero-ground-rgb)) 11%,
		rgba(var(--hero-ground-rgb), 0.96) 14%,
		rgba(var(--hero-ground-rgb), 0.84) 16%,
		rgba(var(--hero-ground-rgb), 0.68) 19%,
		rgba(var(--hero-ground-rgb), 0.50) 22%,
		rgba(var(--hero-ground-rgb), 0.32) 25%,
		rgba(var(--hero-ground-rgb), 0.16) 28%,
		rgba(var(--hero-ground-rgb), 0.04) 30%,
		rgba(var(--hero-ground-rgb), 0) 33%);
}
/* --hero-focal-x is the ONE place the home hero's horizontal crop is decided. Both
   this background-position and the marker layer (.hero-callouts, tmj-lean.css 7b)
   read it, so the picture and the pills pinned to it cannot drift apart -- which is
   exactly what happened while the position lived in two files.

   Ported from the Utah build (anchor-tmj tmj-sections.css), which solved this first
   and whose reasoning applies here unchanged: `cover` on a 60%-wide box scales this
   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. Pinned hard right (`right`, i.e.
   100%) -- which is what this rule said until 2026-09-11 -- that crop walks across
   the subject as the window narrows, because both terms move the wrong way at once:
   the box is 60% of the viewport so it narrows with the window, while the hero's copy
   wraps to more lines and makes the box taller. Below ~1200px the visible slice was
   landing on hair and the back of the head with the face outside the box.

   Walking the focal point left as the crop tightens is the lever. The steps are
   measured against this photograph, not interpolated from Utah's (their subject sits
   further left in frame, so their numbers are 65/58/50). They stay bare percentages:
   .hero-callouts counter-translates by this value, and a calc() mixing vw in would
   mean one thing to background-position and something else to that transform.

   Vertically top-pinned: when `cover` has to crop height -- a wide, short window --
   it must drop the shoulders, never the crown. .hero-callouts is pinned top:0 to
   match, and the panel itself starts below the chrome (tmj-sections.css).

   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. */
body.home .s-hero__bg {
	--hero-focal-x: 78%;
	background-position: var(--hero-focal-x) 0;
}
@media (max-width: 1280px) {
	body.home .s-hero__bg { --hero-focal-x: 70%; }
}
@media (max-width: 1100px) {
	body.home .s-hero__bg { --hero-focal-x: 62%; }
}

/* Conditions cards with a photo (.condition-card--media).
   The plain .condition-card is icon-only: six identical diamonds gave the grid
   no differentiation, and because the cards stretch to equal height the short
   ones ended with a band of dead space under the text. A photo per condition
   fixes both -- it distinguishes the cards and fills the block -- and Raleigh
   already has an on-subject image for each of the six.
   Modifier, so the icon-only .condition-card used elsewhere is untouched. */
/* a.condition-card sets display:block (specificity 0,1,1) further up this file,
   which outranks a bare .condition-card--media (0,1,0). Without matching that
   specificity the card never became a flex container, so .condition-body's
   flex:1 and .condition-more's margin-top:auto were both inert and the "Learn
   more" links sat at ragged heights across a row. */
a.condition-card--media,
.condition-card--media { padding: 0; text-align: left; display: flex; flex-direction: column; }
.condition-card--media .condition-media { aspect-ratio: 3 / 2; overflow: hidden; }
.condition-card--media .condition-media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s ease;
}
.condition-card--media:hover .condition-media img { transform: scale(1.06); }
.condition-card--media .condition-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
/* .condition-title carries padding-bottom:1em from the Divi parity rule above;
   too much once the title sits in a padded body block. */
.condition-card--media .condition-title { padding-bottom: .35em; }
/* margin-top:auto pins the affordance to the bottom so it lines up across a row
   of cards whose copy runs to different lengths. */
.condition-card--media .condition-more {
	margin-top: auto; padding-top: 1.1rem;
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent, #e8a087);
}
.condition-card--media .condition-more svg {
	width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none;
	transition: transform .3s ease;
}
.condition-card--media:hover .condition-more svg { transform: translateX(4px); }

/* ============================================================
   Per-page hero photos — lean pass, 2026-08-18
   ------------------------------------------------------------
   Client: "you are using the same WRONG photo for the hero on every page. Use one
   that makes sense with the page, and if you use a doctor talking to a patient use
   the right one the home page uses."

   Two separate fixes:
   1. The THEME DEFAULT in tmj-sections.css was hero-doctor-patient.avif — the
      PORTRAIT crop (1086x1448) stretched across a 60%-wide hero, which cover-crops
      the doctor's face out of frame. Repointed to hero-doctor-patient-wide.avif,
      the landscape crop the home page already uses. That alone fixes every page
      that has no topical photo of its own, including /condition/tmj-disorder/.
   2. Pages WITH a topical photo override it below.

   SCOPED BY PAGE ID, deliberately. tmj-pages.css already carries a warning about
   this: two page-specific .s-hero__bg overrides were once promoted here unscoped
   and broke the hero on every page. Do not add an unscoped rule here.
   2026-09-11: these are now one `--hero-photo` declaration each. The instruction
   that used to stand here — "repeat the gradient in each override, because
   background-image replaces the whole layer stack" — is obsolete: nothing here
   touches background-image any more, so there is no stack to keep in step.
   ============================================================ */

/* /services/snoring-treatment/ (#1091469) — the bed-partner scene this page's copy
   is actually about. Subject sits right-of-centre, which suits the hero's
   left-to-right green fade. 5760x3840 original re-encoded 1943KB -> 43KB. */
/* /services/snoring-treatment/ (#1091469) — a CLOSE-UP of someone snoring.
   The first attempt used the wide two-person frame, which the client correctly
   read as "someone reacting to snoring" rather than someone snoring. Cropped from
   the 5760x3840 original down to the man mid-snore, mouth open, head back on the
   pillow; the partner's reaction is out of frame. 1943KB -> 29KB. */
body.page-id-1091469 { --hero-photo: url('/wp-content/uploads/2026/08/hero-snoring-closeup.avif'); }

/* /condition/tmj-disorder/ (#1089536) — jaw pain, close up: grimace plus hand at
   the joint. Subject sits right-of-centre, which is where the hero's photo area
   is, so no background-position override is needed. */
body.page-id-1089536 { --hero-photo: url('/wp-content/uploads/2026/08/hero-tmj-jaw-pain.avif'); }

/* ==== BEGIN generated hero rules — write-hero-css.py ==== */
/* Generated. Do not hand-edit — re-run bin/write-hero-css.py.
   One custom property per page. The layer stack that consumes it is assembled
   once in tmj-sections.css; these rules set only which photograph goes in it.
   Scoped by page-id deliberately: an unscoped `.s-hero__bg` override has broken
   every hero on this site before, and setting --hero-photo unscoped would do the
   same thing by a shorter route. */

/* /chronic-pain/ — hero-chronic-pain.avif (35KB) */
body.page-id-1089642 { --hero-photo: url('/wp-content/uploads/2026/08/hero-chronic-pain.avif'); }

/* /earache-relief/ — hero-earache-relief.avif (30KB) */
body.page-id-1091467 { --hero-photo: url('/wp-content/uploads/2026/08/hero-earache-relief.avif'); }

/* /facial-pain-treatment/ — hero-facial-pain-treatment.avif (35KB) */
body.page-id-1091678 { --hero-photo: url('/wp-content/uploads/2026/08/hero-facial-pain-treatment.avif'); }

/* /headache-treatment/ — hero-headache-treatment.avif (13KB) */
body.page-id-8706 { --hero-photo: url('/wp-content/uploads/2026/08/hero-headache-treatment.avif'); }

/* /laser-therapy/ — hero-laser-therapy.avif (34KB) */
body.page-id-8559 { --hero-photo: url('/wp-content/uploads/2026/08/hero-laser-therapy.avif'); }

/* /myofunctional-therapy/ — hero-myofunctional-therapy.avif (24KB) */
body.page-id-8701 { --hero-photo: url('/wp-content/uploads/2026/08/hero-myofunctional-therapy.avif'); }

/* /nuvola/ — hero-nuvola.avif (44KB) */
body.page-id-1091024 { --hero-photo: url('/wp-content/uploads/2026/08/hero-nuvola.avif'); --hero-focal: 50% 45%; }

/* /oral-appliances/ — hero-oral-appliances.avif (58KB) */
body.page-id-8705 { --hero-photo: url('/wp-content/uploads/2026/08/hero-oral-appliances.avif'); --hero-focal: 50% 50%; }

/* /pediatric-airway-breathing/ — hero-pediatric-airway-breathing.avif (38KB) */
body.page-id-1090430 { --hero-photo: url('/wp-content/uploads/2026/08/hero-pediatric-airway-breathing.avif'); --hero-focal: 50% 40%; }

/* /pediatric-osa/ — hero-pediatric-osa.avif (39KB) */
body.page-id-1090408 { --hero-photo: url('/wp-content/uploads/2026/08/hero-pediatric-osa.avif'); }

/* /pediatrics/ — hero-pediatrics.avif (46KB) */
body.page-id-1089538 { --hero-photo: url('/wp-content/uploads/2026/08/hero-pediatrics.avif'); }

/* /prf-injections/ — hero-prf-injections.avif (11KB) */
body.page-id-8703 { --hero-photo: url('/wp-content/uploads/2026/08/hero-prf-injections.avif'); --hero-focal: 50% 35%; }

/* /sleep-apnea/ — hero-sleep-apnea.avif (14KB) */
body.page-id-1089617 { --hero-photo: url('/wp-content/uploads/2026/08/hero-sleep-apnea.avif'); }

/* /sleep-appliances/ — hero-sleep-appliances.avif (20KB) */
body.page-id-8704 { --hero-photo: url('/wp-content/uploads/2026/08/hero-sleep-appliances.avif'); }

/* /snoring-treatment/ — hero-snoring-closeup.avif (28KB) */
body.page-id-1091469 { --hero-photo: url('/wp-content/uploads/2026/08/hero-snoring-closeup.avif'); --hero-focal: 50% 40%; }

/* /sphenocath/ — hero-sphenocath.avif (10KB) */
body.page-id-8707 { --hero-photo: url('/wp-content/uploads/2026/08/hero-sphenocath.avif'); }

/* /tmj-disorder/ — hero-tmj-jaw-pain.avif (33KB) */
body.page-id-1089536 { --hero-photo: url('/wp-content/uploads/2026/08/hero-tmj-jaw-pain.avif'); }

/* /tongue-tie/ — hero-tongue-tie.avif (51KB) */
body.page-id-1090411 { --hero-photo: url('/wp-content/uploads/2026/08/hero-tongue-tie.avif'); }

/* /trigger-point-therapy/ — hero-trigger-point-therapy.avif (35KB) */
body.page-id-8708 { --hero-photo: url('/wp-content/uploads/2026/08/hero-trigger-point-therapy.avif'); }

/* ==== END generated hero rules ==== */

/* ============================================================
   Contact Us (8551) — ported from the Cleveland contact page 2026-09-04.
   Hero: text column + white form card side by side, on the office photo the
   Divi page already used. Cards, map (block CSS) and the screening section
   below are shared components; only the hero layout is contact-specific.
   ============================================================ */
/* One declaration, desktop and mobile: the mobile band used to need its own copy
   of the URL to shed the gradient this page's desktop rule carried. The gradient
   is a variable now and tmj-sections.css switches it off under 900px on its own. */
/* 2026-10-06: was a stock waiting room (2025/09/Office.webp); now the practice's real lobby. */
body.page-id-8551 { --hero-photo: url('/wp-content/uploads/2026/10/tmj-hero-waiting-room.avif'); }
.contact-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.contact-hero-grid .hero-text { max-width: none; }
.chf-card { background: var(--white); padding: 2.25rem 2rem; box-shadow: 0 24px 60px rgba(0,0,0,0.18); }
.chf-title { font-family: 'Gilda Display', Georgia, serif; font-size: 1.6rem; font-weight: 500; color: var(--dark); margin: 0 0 0.25rem; }
.chf-sub { font-style: italic; font-size: 0.9rem; color: var(--text-muted-dark); margin: 0 0 1.25rem; }
@media (max-width: 980px) {
	.contact-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Link-card grids on the For Patients pages: two or three outbound cards
   (registration, printable PDFs) built on the plain .condition-card. Two
   things the plain card never needed: a styled "Open form" arrow (only the
   --media variant styles .condition-more, so the SVG rendered as a giant black
   triangle), and a stacked mobile layout — the theme's swipe row is for four
   condition cards, and with two it just cuts the second one off. */
.conditions-grid--links .condition-more {
	display: inline-flex; align-items: center; gap: 0.4rem;
	margin-top: 1rem;
	color: var(--light);
	font-family: 'Libre Franklin', sans-serif;
	font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.conditions-grid--links .condition-more svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.3s ease; }
.conditions-grid--links .condition-card:hover .condition-more svg { transform: translateX(4px); }
@media (max-width: 768px) {
	.conditions-grid--links { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; padding: 0; }
	.conditions-grid--links > .condition-card { flex: 0 0 100%; scroll-snap-align: none; }
}