/*
Theme Name: Camber Joint Institute
Theme URI: https://camberjoint.com
Author: Camber Joint Institute
Description: Bespoke classic PHP theme for Camber Joint Institute — navy/gold institutional register (HSS/Mayo at boutique scale), Playfair Display + Montserrat, hand-authored templates, no page builder, no block-editor dependency. Design system lives entirely in this stylesheet; layout in PHP templates and template-parts.
Version: 1.1.18
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: camber
*/

/* ==========================================================================
   1. FONTS  (self-hosted variable woff2 — no external requests)
   ========================================================================== */
@font-face {
	font-family: "Playfair Display";
	src: url("assets/fonts/playfair-display-variable.woff2") format("woff2");
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat";
	src: url("assets/fonts/montserrat-variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. DESIGN TOKENS  (ported 1:1 from the block theme's theme.json)
   ========================================================================== */
:root {
	/* Navy scale */
	--navy-950: #0a1628;
	--navy-900: #0e2038;
	--navy-800: #132a4a;
	--navy-700: #1c3a63;
	--navy-600: #2b4d7d;
	/* Gold scale */
	--gold-500: #c6a15b;   /* accent */
	--gold-400: #d4b578;
	--gold-100: #f4ead2;   /* tint */
	--gold-role: #96762c;  /* darker gold — legible for small uppercase labels on white */
	/* Neutrals */
	--cream: #faf7f0;      /* page background */
	--paper: #ffffff;      /* card background */
	--ink: #1a2333;        /* body text */
	--ink-soft: #4a5568;   /* secondary text */
	--line: #e4dfd3;       /* borders */

	/* Type */
	--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--fs-small: 0.9375rem;
	--fs-medium: 1.0625rem;
	--fs-large: 1.375rem;
	--fs-xlarge: 2rem;
	--fs-xxlarge: 2.375rem;
	--fs-huge: clamp(2.75rem, 5.4vw, 4.25rem);

	/* Spacing scale */
	--sp-20: 0.5rem;
	--sp-30: 0.875rem;
	--sp-40: 1.25rem;
	--sp-50: 1.75rem;
	--sp-60: 2.5rem;
	--sp-70: 3.5rem;
	--sp-80: 5rem;

	/* Layout */
	--content: 740px;
	--wide: 1180px;
	--gutter: 1.75rem;
}

/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	line-height: 1.65;
	color: var(--ink);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--navy-950);
	line-height: 1.2;
	margin: 0 0 var(--sp-40);
}
p { margin: 0 0 var(--sp-40); }
a { color: var(--navy-800); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--gold-500); }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   Sections span the full viewport width; an inner .container constrains the
   content. This is what makes color-blocked bands run edge-to-edge cleanly.
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--content); }
.section { padding-block: var(--sp-80); }
.section--tight { padding-block: var(--sp-70); }

/* Reusable helpers */
.eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-500);
	margin: 0 0 var(--sp-30);
}
.text-center { text-align: center; }
.review-flag { /* [CLINICAL REVIEW] / [OPS REVIEW] inline marks */
	background: none; /* override the UA default yellow <mark> highlight */
	color: var(--gold-500);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 11px;
	/* No white-space:nowrap — flags range from short tags to full sentences
	   ("[CLINICAL REVIEW — confirm reviewer + review date]"); nowrap forced
	   the long ones past the viewport at narrow widths (real bug, found in
	   the .page-header__badge / .reviewed-badge pills). Wrapping is safe for
	   the short tags too since they never needed to wrap anyway. */
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.84375rem;
	line-height: 1;
	padding: 15px 26px;
	border-radius: 2px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn--gold { background: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); }
.btn--gold:hover { background: var(--navy-950); color: var(--gold-400); border-color: var(--navy-950); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(198,161,91,0.75); }
@media (prefers-reduced-motion: reduce) {
	.btn:hover { transform: none; }
}
.btn--navy { background: var(--navy-950); color: var(--paper); border-color: var(--navy-950); font-size: 0.78125rem; letter-spacing: 0.04em; padding: 14px 24px; }
.btn--navy:hover { background: var(--navy-800); color: var(--gold-100); }
.btn--ghost { background: transparent; color: var(--gold-100); border-color: rgba(212,181,120,0.55); padding: 14px 26px; }
.btn--ghost:hover { background: rgba(212,181,120,0.12); color: #fff; }
.btn--pill { border-radius: 999px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ==========================================================================
   6. HEADER  (sticky, white, hairline bottom)
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Overlay state — floats transparent over the navy hero/page-header that
   opens every template, then solidifies on scroll. Ported from the Fable
   concept (2026-07-11). Fail-open: this class is added by JS only; with JS
   off the header renders solid cream from the first paint (the safe,
   pre-existing behavior) — never the other way around. */
.site-header.is-transparent {
	background: rgba(10,22,40,0.92);
	border-bottom-color: rgba(255,255,255,0.08);
	box-shadow: none;
}
.site-header.is-transparent .brand__logo--navy { display: none; }
.site-header.is-transparent .brand__logo--white { display: block; }
.site-header.is-transparent .nav-toggle { color: #fff; border-color: rgba(255,255,255,0.35); }
/* Nav-link color override is full-desktop-only: below 1360px the links live
   inside the compact dropdown, which always has a solid paper background
   regardless of header transparency — the light
   overlay color there was unreadable against it (real bug, found 2026-07-11
   via mobile screenshot, not just DOM inspection). */
@media (min-width: 1360px) {
	.site-header.is-transparent .site-nav__links a { color: #dbe3f0; }
}
/* Every page template's first section is fixed nav's height (76px) padded
   navy — since .site-header is always position:fixed now (needed so the
   hero/page-header background can extend up behind it), each of those
   sections carries its own top-padding compensation; see .hero,
   .page-header, .gae-hero below. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1400px;
	padding-block: 16px;
}
.brand { display: flex; align-items: center; min-width: 0; }
.brand__logo { display: block; width: 210px; height: auto; flex-shrink: 0; }
.brand__logo--white { display: none; }
.brand__mark { display: none; width: 44px; height: auto; flex-shrink: 0; }
.brand__mark--white { display: none; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-nav__links a { font-size: 13.5px; font-weight: 600; color: var(--navy-800); white-space: nowrap; }
.site-nav > .btn { white-space: nowrap; }
.site-nav__links a:hover { color: var(--gold-500); }
.nav-toggle { display: none; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--navy-950);
	padding-top: 154px;
	padding-bottom: 104px;
}
.hero__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10,22,40,0.98) 0%, rgba(10,22,40,0.92) 32%, rgba(10,22,40,0.68) 52%, rgba(10,22,40,0.18) 73%, rgba(10,22,40,0.04) 100%),
		linear-gradient(0deg, rgba(10,22,40,0.36), transparent 44%);
}
.hero .container { position: relative; z-index: 1; }
.hero__copy { max-width: 680px; }
.hero__eyebrow { color: var(--gold-400); }
.hero h1 { color: var(--paper); font-size: var(--fs-huge); line-height: 1.1; margin-bottom: var(--sp-40); max-width: 12ch; }
.hero h1 em { color: var(--gold-400); font-style: normal; position: relative; display: inline-block; }
/* Gold hairline under the second H1 line — ported from the concept's
   .gold-rule (2026-07-11). Static (no scroll-draw) since the home hero
   already has its own entrance animation; this is just a fixed accent. */
.hero h1 em .gold-rule {
	position: absolute; left: 2px; right: 2px; bottom: -10px; height: 3px;
	background: linear-gradient(90deg, var(--gold-500), rgba(198,161,91,0.25));
	display: block;
}
.hero__lede { color: #eef2f7; font-size: var(--fs-medium); margin-bottom: var(--sp-50); max-width: 650px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-30); }
.hero__asset-note {
	position: absolute;
	right: 20px;
	bottom: 18px;
	z-index: 2;
	max-width: 390px;
	margin: 0;
	padding: 6px 9px;
	background: rgba(10,22,40,0.72);
	color: var(--gold-100);
	font-size: 10px;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   8. TRUST CARD  (floats up over the hero's bottom edge)
   ========================================================================== */
.trustcard-wrap { position: relative; z-index: 3; margin-top: -42px; }
.trustcard {
	background: var(--paper);
	border-radius: 6px;
	box-shadow: 0 30px 70px -30px rgba(10,22,40,0.45);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: var(--sp-40) var(--sp-50);
	font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--ink-soft);
}
.trustcard__item { padding: 6px 24px; border-right: 1px solid var(--line); margin: 0; line-height: 1.6; }
.trustcard__item:last-child { border-right: none; }
/* Two-line treatment: bold lead + muted sub-line, ported from the concept
   (2026-07-11). display:block drops the sub-line without needing a <br>. */
.trustcard__item strong { display: block; color: var(--navy-950); font-size: 13px; letter-spacing: 0.05em; margin-bottom: 3px; }

/* ==========================================================================
   9. CONDITIONS / PATIENT PROBLEMS
   ========================================================================== */
.conditions { background: var(--cream); padding-top: 104px; }
.conditions__intro { max-width: 760px; margin: 0 auto var(--sp-60); text-align: center; }
.conditions__intro h2 { font-size: var(--fs-xxlarge); }
.conditions__intro .lede { color: var(--ink-soft); }
.conditions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-30); }
.condition-card {
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 7px;
	padding: var(--sp-40);
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold-500);
	border-radius: 3px;
	color: var(--ink-soft);
	box-shadow: 0 16px 35px -30px rgba(10,22,40,0.65);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.condition-card:hover, a.condition-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 20px 42px -28px rgba(10,22,40,0.7);
	border-color: var(--gold-500);
	color: var(--navy-800);
}
.condition-card__area { color: var(--gold-role); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.condition-card strong { color: var(--navy-950); font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; }
.condition-card > span:last-child { font-size: 0.8125rem; line-height: 1.55; }
.conditions__review { max-width: 720px; margin: var(--sp-30) auto 0; text-align: center; }
.conditions__cta { margin-top: var(--sp-40); text-align: center; }

/* ==========================================================================
   10. STATS BAND
   ========================================================================== */
.stats-band { background: var(--paper); border-block: 1px solid var(--line); padding-block: var(--sp-70); }
.stats-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-50); }
.stat { text-align: center; }
.stat__num { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 700; color: var(--navy-950); margin: 0; line-height: 1; }
.stat__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.09em; line-height: 1.5; text-transform: uppercase; color: var(--gold-500); margin: var(--sp-30) 0 0; }

/* ==========================================================================
   11. CONTINUUM  (4-stage diagram with connector line)
   ========================================================================== */
.continuum { background: var(--paper); }
.continuum__intro { max-width: 680px; margin-inline: auto; text-align: center; }
.continuum__intro .lede { color: var(--ink-soft); }
.continuum__track {
	position: relative;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-40);
	margin-top: var(--sp-60);
}
.continuum__track::before {
	content: ""; position: absolute; top: 22px; left: 6%; right: 6%; height: 2px;
	background: linear-gradient(90deg, var(--gold-500), var(--navy-700));
	opacity: 0.5;
}
.cstep { text-align: center; }
.cstep__num {
	position: relative; z-index: 2;
	width: 46px; height: 46px; margin: 0 auto var(--sp-40);
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--gold-500); border-radius: 999px;
	background: var(--paper);
	font-family: var(--font-heading); font-size: var(--fs-large); font-weight: 700; color: var(--navy-950);
}
.cstep__num--flagship { background: var(--gold-500); }
.cstep h3 { font-size: var(--fs-medium); margin-bottom: var(--sp-30); }
.cstep p { color: var(--ink-soft); font-size: var(--fs-small); }
.cstep__badge {
	display: inline-block; margin-top: var(--sp-20);
	background: var(--gold-100); color: var(--gold-500);
	border-radius: 20px; padding: 4px 9px;
	font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.continuum__cta { text-align: center; margin-top: var(--sp-60); }

/* ==========================================================================
   12. ABOUT CAMBER
   ========================================================================== */
.about-camber { background: linear-gradient(135deg, var(--paper), var(--cream)); border-block: 1px solid var(--line); }
.about-camber__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-70); align-items: center; }
.about-camber h2 { color: var(--navy-950); font-size: var(--fs-xxlarge); line-height: 1.18; }
.about-camber p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.75; }
.about-camber__lede { font-size: var(--fs-medium) !important; color: var(--navy-800) !important; }
.pullquote {
	max-width: 34em;
	font-family: var(--font-heading); font-style: italic; font-size: var(--fs-large);
	color: var(--navy-800) !important; line-height: 1.5;
	border-left: 3px solid var(--gold-500); padding-left: var(--sp-40);
	margin: 0 0 var(--sp-40);
}
.provider-collage {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	background: var(--navy-950);
	border: 1px solid var(--gold-500);
	border-radius: 4px;
	box-shadow: 0 28px 60px -36px rgba(10,22,40,0.75);
}
.provider-collage__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: var(--navy-800);
	color: var(--paper);
}
.provider-collage__item:hover, .provider-collage__item:focus-visible { color: var(--gold-100); }
.provider-collage__item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; }
/* Aaron's source portrait is narrower than the other two and therefore has
   extra vertical crop room. Center that crop so the three eye lines align
   without changing any card's size or creating a provider hierarchy. */
.provider-collage__item--aaron img { object-position: center center; }
.provider-collage__item > span:last-child {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 8px 8px;
	background: linear-gradient(0deg, rgba(10,22,40,0.96), transparent);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
.provider-collage__initials { min-height: 240px; display: flex; align-items: center; justify-content: center; font: 700 2rem var(--font-heading); color: var(--gold-400); }
.provider-collage__note {
	flex-basis: 100%;
	margin: 4px 4px 0 !important;
	color: var(--gold-100) !important;
	font-size: 0.6875rem !important;
	line-height: 1.5 !important;
	text-align: center;
}

/* Shared dark split remains in use on the GAE page. */
.split-dark { background: var(--navy-950); color: var(--paper); }
.split-dark__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-70); align-items: center; }
.split-dark .eyebrow { color: var(--gold-400); }
.split-dark h2 { color: var(--paper); font-size: var(--fs-xlarge); line-height: 1.25; }
.split-dark p { color: var(--cream); font-size: var(--fs-small); line-height: 1.75; }
.split-photo { position: relative; border: 1px solid rgba(198,161,91,0.25); border-radius: 3px; overflow: hidden; }
.split-photo img { width: 100%; height: auto; }
.stocktag {
	position: absolute; top: 12px; right: 12px; margin: 0;
	background: rgba(10,22,40,0.78); color: var(--gold-100);
	border: 1px solid rgba(198,161,91,0.4); border-radius: 2px;
	padding: 5px 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}

/* ==========================================================================
   13. TEAM GRID
   ========================================================================== */
.team { background: var(--cream); }
.team__head { max-width: 680px; margin: 0 auto var(--sp-60); text-align: center; }
.team__head h2 { color: var(--navy-950); font-size: var(--fs-xxlarge); line-height: 1.2; }
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-50); }
.provider-card { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.provider-card__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.provider-card__placeholder {
	aspect-ratio: 4/5;
	background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	padding: var(--sp-50) var(--sp-40);
}
.provider-card__initials {
	width: 78px; height: 78px; margin-bottom: var(--sp-40);
	border: 1.5px solid var(--gold-500); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-size: 1.625rem; font-weight: 700; color: var(--gold-400);
}
.provider-card__placeholder .pending { color: var(--gold-100); font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5; margin: 0; }
.provider-card__placeholder .shoot { color: var(--gold-400); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin: 4px 0 0; }
.provider-card__body { padding: var(--sp-40) var(--sp-40) var(--sp-50); }
.provider-card__body h3 { font-size: 1.1875rem; margin: 0 0 2px; }
.provider-card__role { color: var(--gold-role); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 var(--sp-30); }
.provider-card__bio { color: var(--ink-soft); font-size: 0.84375rem; line-height: 1.65; margin: 0 0 var(--sp-30); }
.lang-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-tag { background: var(--gold-100); color: var(--navy-800); border-radius: 20px; padding: 4px 9px; font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.04em; }
.provider-card__profile { margin: var(--sp-30) 0 0; }
.provider-card__profile a { color: var(--navy-800); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; }
.provider-card__profile a:hover, .provider-card__profile a:focus-visible { color: var(--gold-role); text-decoration: underline; text-underline-offset: 3px; }
.camber-profile-link { margin: var(--sp-30) 0 0; }
.camber-profile-link a { color: var(--navy-800); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; }
.camber-profile-link a:hover, .camber-profile-link a:focus-visible { color: var(--gold-role); text-decoration: underline; text-underline-offset: 3px; }
.team__foot { max-width: 640px; margin: var(--sp-60) auto 0; text-align: center; }
.team__foot p { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.7; margin: 0; }

/* ==========================================================================
   13. REFER STRIP
   ========================================================================== */
.refer-strip { background: var(--gold-100); padding-block: 44px; }
.refer-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.refer-strip h3 { color: var(--navy-950); font-size: var(--fs-large); margin: 0 0 var(--sp-20); }
.refer-strip p { color: var(--ink-soft); font-size: 13.5px; margin: 0; max-width: 640px; }

/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.contact { background: var(--navy-950); color: var(--paper); }
/* The standalone Contact page renders .contact directly under the fixed
   header (no .page-header in between, unlike every other interior page) —
   give it the same top-clearance bump. Scoped to that page only via WP's
   own body class so the home page's mid-scroll contact section (which
   needs none of this) is untouched. */
.page-template-page-contact-php .contact { padding-top: 140px; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-70); align-items: start; }
.contact .eyebrow { color: var(--gold-400); }
.contact h2 { color: var(--paper); font-size: var(--fs-xlarge); }
.contact__lede { color: var(--cream); font-size: var(--fs-small); line-height: 1.7; margin-bottom: var(--sp-40); }
.contact__info { color: var(--cream); font-size: var(--fs-small); margin: 0 0 var(--sp-30); }
.contact__info dt { color: var(--gold-400); font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 3px; }
.contact__info dd { margin: 0; }
.contact__phinote { color: var(--cream); font-size: var(--fs-small); line-height: 1.6; border-top: 1px solid var(--navy-700); margin-top: var(--sp-50); padding-top: var(--sp-40); }
.form-card { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 30px; }
.form-card h3 { color: var(--navy-950); font-size: var(--fs-large); margin: 0 0 4px; }
.form-card__sub { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: var(--sp-40); }
.field { margin-bottom: var(--sp-30); }
.field label { display: block; color: var(--navy-800); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.field input, .field select {
	width: 100%; font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink);
	background: var(--cream); border: 1px solid var(--line); border-radius: 2px;
	padding: 11px 12px;
}
.field input::placeholder { color: var(--ink-soft); }
.form-card__privacy { color: var(--ink-soft); font-size: 0.75rem; line-height: 1.55; margin: -4px 0 var(--sp-30); }
.form-notice { border-left: 3px solid var(--gold-500); padding: 10px 12px; color: var(--navy-900); background: var(--gold-100); font-size: 0.8125rem; line-height: 1.5; }
.form-notice--error { border-left-color: #a33b3b; background: #f8e8e8; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer { background: var(--navy-950); color: var(--gold-100); border-top: 1px solid var(--navy-800); padding-block: 32px; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer__brand p { margin: 0; }
.site-footer__brand .name { font-family: var(--font-heading); font-size: 15px; }
.site-footer__brand .addr { color: #7c8aa3; font-size: 11.5px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.site-footer__nav a { color: var(--gold-100); font-size: 12px; }
.site-footer__nav a:hover { color: var(--gold-400); }

/* ==========================================================================
   16. PAGE HEADER  (designed interior-page header — replaces the auto title)
   ========================================================================== */
.page-header {
	background-color: var(--navy-950); color: var(--paper);
	padding-top: 140px; padding-bottom: 76px; position: relative; overflow: hidden;
	background-image:
		radial-gradient(1000px 550px at 80% 15%, rgba(43,77,125,0.5), transparent 60%),
		radial-gradient(700px 450px at 8% 90%, rgba(198,161,91,0.09), transparent 55%);
}
.page-header::after { /* faint grid texture, matches .hero */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(800px 500px at 75% 25%, rgba(0,0,0,0.8), transparent 75%);
	mask-image: radial-gradient(800px 500px at 75% 25%, rgba(0,0,0,0.8), transparent 75%);
}
.page-header .container { position: relative; z-index: 1; }
.page-header .eyebrow { color: var(--gold-400); }
.page-header h1 { color: var(--paper); font-size: var(--fs-huge); margin: 0; line-height: 1.1; max-width: 20ch; }
.page-header__lede { color: var(--gold-100); font-size: var(--fs-medium); margin: var(--sp-40) 0 0; max-width: 46em; line-height: 1.6; }
.page-header__badge { /* "Medically Reviewed by..." pill, matches .quiz-card badge */
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
	max-width: 100%;
	background: rgba(198,161,91,0.12); color: var(--gold-100);
	border: 1px solid rgba(198,161,91,0.35); border-radius: 20px;
	padding: 6px 14px; font-size: var(--fs-small); margin: var(--sp-40) 0 0;
}
.page-header__badge .dot { color: var(--gold-500); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--sp-30); margin-top: var(--sp-50); }

/* Generic page body (interior prose, rendered via the_content()) */
.page-body { padding-block: var(--sp-70); }
.page-body .container { max-width: var(--content); }
/* Breakout utility — lets a full-bleed band (e.g. .split-dark) inside
   the_content() escape the 740px prose column and reach the viewport
   edges, same "alignfull" concept as Gutenberg. This is what keeps
   Why Camber / Services hub from re-boxing the way the old generic
   page template did (the bug Nathan flagged). */
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.alignfull > .container { padding-inline: var(--gutter); }
.page-body h2 { font-size: var(--fs-xlarge); margin-top: var(--sp-70); }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: var(--fs-large); }
.page-body p, .page-body li { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.75; }
.page-body ul, .page-body ol { padding-left: 1.3em; margin: 0 0 var(--sp-40); }
.page-body li { margin-bottom: var(--sp-20); }
.page-body a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   16b. WP:HTML SECTION PAGES  (hand-authored full-bleed pages — Why Camber,
   Services hub, tier pages. Rendered raw via a core/html block so no
   wpautop/block-validity interference; classes below match front-page.php's
   conventions so these read as one system, not a bolt-on.)
   ========================================================================== */
.section-band { padding-block: var(--sp-80); }
.section-band--tight { padding-block: var(--sp-70); }
.section-band--cream { background: var(--cream); }
.section-band--paper { background: var(--paper); }
.section-head { max-width: 680px; margin: 0 auto var(--sp-60); text-align: center; }
.section-head h2 { margin: 0; }
.section-head .lede { color: var(--ink-soft); font-size: var(--fs-small); margin: var(--sp-30) 0 0; }
.prose { max-width: 680px; margin: 0 auto; }
.prose p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.75; margin: 0 0 var(--sp-30); }
.prose h3 { font-size: var(--fs-large); margin: var(--sp-50) 0 4px; }

.reviewed-badge {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
	max-width: 100%;
	background: var(--gold-100); color: var(--navy-900);
	border: 1px solid var(--gold-400); border-radius: 20px;
	padding: var(--sp-20) var(--sp-30); font-size: var(--fs-small);
	margin: 0 0 var(--sp-40);
}
.reviewed-badge .dot { color: var(--gold-500); }

/* Tier row (services hub + tier-continuum lists) */
.tier-row {
	display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start;
	background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
	padding: 30px 32px; margin-bottom: var(--sp-40);
}
.tier-row--flagship { grid-template-columns: 64px 1fr auto; }
.tier-row__num {
	width: 46px; height: 46px; border: 2px solid var(--gold-500); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-size: var(--fs-large); font-weight: 700; color: var(--navy-950);
}
.tier-row__num--flagship { background: var(--gold-500); }
.tier-row h3 { font-size: var(--fs-large); margin: 0 0 4px; }
.tier-row__sub { color: var(--gold-role); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.tier-row p { color: var(--ink-soft); font-size: var(--fs-small); margin: 0 0 6px; }
.tier-row .where { margin-top: 6px; }
.tier-row-flagship-tag {
	align-self: center; white-space: nowrap;
	background: var(--gold-100); color: var(--gold-500);
	border-radius: 20px; padding: 6px 11px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
@media (max-width: 600px) {
	.tier-row--flagship { grid-template-columns: 64px 1fr; }
	.tier-row-flagship-tag { grid-column: 2; margin-top: 8px; }
}

/* Victory card (patient-story placeholder) */
.victory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-50); }
.victory-card { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.victory-card__photo {
	padding: var(--sp-50) var(--sp-40);
	background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.victory-card__plus {
	width: 46px; height: 46px; margin-bottom: var(--sp-30);
	border: 1.5px solid var(--gold-500); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--gold-400);
}
.victory-card__photo .label { color: var(--paper); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin: 0; }
.victory-card__photo .label strong { display: block; color: var(--gold-400); font-size: 11px; margin-top: 4px; }
.victory-card__body { padding: var(--sp-40) var(--sp-40) var(--sp-50); }
.victory-card__quote { font-family: var(--font-heading); font-style: italic; color: var(--navy-950); font-size: var(--fs-small); margin: 0 0 var(--sp-20); }
.victory-card__name { color: var(--gold-role); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }
@media (max-width: 899px) { .victory-grid { grid-template-columns: 1fr; } }

/* Provider bio page (page-provider.php) */
.bio-header { display: grid; grid-template-columns: 34% 1fr; gap: var(--sp-70); align-items: start; }
.bio-header__photo img { width: 100%; border-radius: 3px; }
.bio-header__cred { color: var(--gold-role); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 var(--sp-30); }
.bio-lang-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-30); }
@media (max-width: 899px) { .bio-header { grid-template-columns: 1fr; } }

/* GAE flagship — tabs + quiz card (page-gae.php) */
.gae-hero { background: var(--navy-950); color: var(--paper); padding-top: 140px; padding-bottom: var(--sp-70); position: relative; overflow: hidden;
	background-image: radial-gradient(1000px 550px at 80% 15%, rgba(43,77,125,0.5), transparent 60%); }
/* Same scale as every other page header — the H1 copy was shortened to the
   label-length target phrase "Alternatives to Knee Replacement" (Nathan
   7/11; the old 10-word sentence version moved its framing to the lede),
   so the shared huge token fits again. */
.gae-hero h1 { color: var(--paper); font-size: var(--fs-huge); line-height: 1.1; margin: 0; max-width: 14ch; }
.gae-tabs-section { background: var(--navy-950); color: var(--paper); padding-block: var(--sp-70); }
.gae-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.gae-tabs button {
	font-family: var(--font-body); background: none; border: none; border-bottom: 2px solid transparent;
	color: rgba(255,255,255,0.45); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	font-size: 12.5px; padding: 14px 18px; cursor: pointer;
}
.gae-tabs button.is-active { color: var(--paper); border-bottom-color: var(--gold-500); }
.gae-tabs button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.gae-panels { display: grid; grid-template-columns: 55% 1fr; gap: var(--sp-70); align-items: start; }
.gae-panel { display: none; }
.gae-panel.is-active { display: block; }
.gae-panel .reviewed-badge { background: var(--gold-100); }
.gae-panel h2 { color: var(--paper); font-size: var(--fs-xlarge); margin: 0 0 var(--sp-30); }
.gae-panel p, .gae-panel li { color: var(--line); font-size: var(--fs-small); line-height: 1.7; margin: 0 0 var(--sp-30); }
.gae-callout {
	background: rgba(198,161,91,0.08); border-left: 3px solid var(--gold-500);
	padding: var(--sp-30) var(--sp-40); margin: var(--sp-40) 0;
}
.gae-callout h3 { color: var(--gold-100); font-size: var(--fs-medium); margin: 0 0 var(--sp-20); }
.gae-callout p { margin: 0; }
.quiz-card { background: var(--navy-950); border: 1px solid rgba(198,161,91,0.3); border-radius: 4px; padding: 30px 28px; }
.quiz-card h3 { color: var(--paper); font-size: 19px; margin: 0 0 var(--sp-20); }
.quiz-card__sub { color: #b9c4d9; font-size: 13px; margin: 0 0 var(--sp-40); }
.quiz-card .btn { width: 100%; text-align: center; }
.gae-quiz__progress { color: var(--gold-100); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-30); }
.gae-quiz fieldset { border: 0; margin: 0; padding: 0; }
.gae-quiz legend { color: var(--paper); font-family: var(--font-heading); font-size: 18px; line-height: 1.35; margin-bottom: var(--sp-30); }
.gae-quiz label { display: flex; gap: 10px; align-items: flex-start; color: var(--line); font-size: 13px; line-height: 1.45; padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; cursor: pointer; }
.gae-quiz label:has(input:checked) { border-color: var(--gold-500); background: rgba(198,161,91,0.1); color: var(--paper); }
.gae-quiz input { accent-color: var(--gold-500); margin-top: 2px; }
.gae-quiz__actions { display: flex; gap: 10px; margin-top: var(--sp-30); }
.gae-quiz__actions .btn { border: 1px solid var(--gold-500); cursor: pointer; }
.gae-quiz__error { color: #ffd8d8; font-size: 12px; margin: var(--sp-20) 0 0; }
.gae-quiz__result h4 { color: var(--gold-100); font-size: 20px; margin: 0 0 var(--sp-20); }
.gae-quiz__result p { color: var(--line); font-size: 13px; line-height: 1.6; }
.gae-quiz__disclaimer { color: #b9c4d9 !important; font-size: 11px !important; }
.gae-quiz__reset { display: block; margin: var(--sp-20) auto 0; border: 0; background: none; color: var(--gold-100); text-decoration: underline; cursor: pointer; }
.gae-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-30); margin: var(--sp-40) 0; }
.gae-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: var(--sp-30); font-size: 13px; color: var(--gold-100); }
.gae-steps { counter-reset: gae-step; list-style: none; padding: 0; }
.gae-steps li { counter-increment: gae-step; padding-left: 2.2em; position: relative; }
.gae-steps li::before {
	content: counter(gae-step); position: absolute; left: 0; top: 0;
	width: 1.6em; height: 1.6em; border-radius: 50%; border: 1.5px solid var(--gold-500);
	display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: 700; color: var(--gold-400);
}
.gae-faq details { border-bottom: 1px solid var(--line); padding: var(--sp-30) 0; }
.gae-faq summary { cursor: pointer; font-weight: 700; color: var(--navy-950); font-size: var(--fs-small); }
.gae-faq p { margin: var(--sp-20) 0 0; }
@media (max-width: 899px) {
	.gae-panels { grid-template-columns: 1fr; }
	.gae-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (min-width: 900px) {
	.hero { display: flex; align-items: center; min-height: 760px; }
	.hero .container { width: 100%; }
}
@media (max-width: 1359px) {
	.nav-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 42px; height: 42px; background: none; border: 1px solid var(--line); border-radius: 4px;
		cursor: pointer; color: var(--navy-900);
	}
	.site-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--paper); border-bottom: 1px solid var(--line);
		padding: var(--sp-40) var(--gutter);
		display: none;
	}
	.site-nav.is-open { display: flex; }
	.site-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__links li { border-bottom: 1px solid var(--line); }
	.site-nav__links a { display: block; padding: 12px 0; font-size: 15px; }
	.site-nav .btn { margin-top: var(--sp-40); text-align: center; }
}
@media (max-width: 899px) {
	.trustcard-wrap { margin-top: -24px; }
	.trustcard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trustcard__item:nth-child(2n) { border-right: none; }
	.trustcard__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.hero { min-height: 680px; padding-top: 138px; padding-bottom: 104px; }
	.hero__backdrop { object-position: 64% center; }
	.hero__shade {
		background:
			linear-gradient(90deg, rgba(10,22,40,0.97) 0%, rgba(10,22,40,0.88) 48%, rgba(10,22,40,0.48) 78%, rgba(10,22,40,0.24) 100%),
			linear-gradient(0deg, rgba(10,22,40,0.62), transparent 55%);
	}
	.hero__copy { max-width: 590px; }
	.conditions__grid { grid-template-columns: repeat(2, 1fr); }
	.about-camber__grid { grid-template-columns: 1fr; gap: var(--sp-60); }
	.split-dark__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--sp-50); }
	.stats-band__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-50); }
	.continuum__track { grid-template-columns: repeat(2, 1fr); gap: var(--sp-50); }
	.continuum__track::before { display: none; }
	.team__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	:root { --gutter: 1.25rem; }
	/* Use a solid mobile header so the navy mark and menu toggle stay
	   legible at the top of the page and while scrolling. */
	.site-header.is-transparent { background: var(--paper); border-bottom-color: var(--line); }
	/* Keep the staging mark + mobile toggle inside the 375px viewport.
	   The longer staging site title exposed a 12px overflow in the shared
	   header; production's shorter title benefits from the same safe geometry. */
	.site-header__inner { gap: 8px; }
	.brand__logo { display: none; }
	.site-header.is-transparent .brand__logo--white { display: none; }
	.brand__mark--navy { display: block; }
	.site-header.is-transparent .brand__mark--navy { display: block; }
	.site-header.is-transparent .brand__mark--white { display: none; }
	.site-header.is-transparent .nav-toggle { color: var(--navy-900); border-color: var(--line); }
	.nav-toggle { width: 36px; height: 36px; flex-shrink: 0; }
	.hero { min-height: 720px; padding-top: 126px; padding-bottom: 118px; }
	.hero__backdrop { object-position: 69% center; }
	.hero__shade {
		background:
			linear-gradient(90deg, rgba(10,22,40,0.96) 0%, rgba(10,22,40,0.86) 62%, rgba(10,22,40,0.52) 100%),
			linear-gradient(0deg, rgba(10,22,40,0.78), transparent 62%);
	}
	.hero h1 { font-size: clamp(2.55rem, 13vw, 3.4rem); }
	.hero__asset-note { left: var(--gutter); right: var(--gutter); bottom: 38px; max-width: none; }
	.trustcard { grid-template-columns: 1fr; }
	.trustcard__item { border-right: none; border-bottom: 1px solid var(--line); width: 100%; padding: 10px 0; }
	.trustcard__item:last-child { border-bottom: none; }
	.conditions { padding-top: var(--sp-80); }
	.conditions__grid { grid-template-columns: 1fr; }
	.condition-card { min-height: 0; }
	.provider-collage { gap: 5px; padding: 7px; }
	.provider-collage__item > span:last-child { font-size: 0.55rem; padding-inline: 3px; }
	.stats-band__grid { grid-template-columns: 1fr; }
	.refer-strip__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   18. MOTION  (progressive enhancement; class added by JS only when GSAP loads
   and prefers-reduced-motion is not set — no-JS renders fully visible/static)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Continuum connector line: full-width by default (static page); under the
   motion class it starts collapsed and is scaled by --camber-line-scale,
   which camber-motion.js drives from ScrollTrigger progress. */
.continuum__track::before {
	transform: scaleX(1);
	transform-origin: left center;
}
html.camber-motion-on .continuum__track::before {
	transform: scaleX(var(--camber-line-scale, 0));
}

/* Start-hidden animation targets — scoped ENTIRELY under .camber-motion-on
   so any GSAP load failure or reduced-motion preference leaves the page
   fully visible. Every selector here has a matching gsap.to() in
   camber-motion.js that animates it back to opacity:1 / y:0. */
html.camber-motion-on .hero__copy > *,
html.camber-motion-on .trustcard-wrap,
html.camber-motion-on .page-header .container > *,
html.camber-motion-on .conditions__grid > .condition-card,
html.camber-motion-on .continuum__track > .cstep,
html.camber-motion-on .about-camber__grid > div,
html.camber-motion-on .split-dark__grid > div,
html.camber-motion-on .refer-strip__inner,
html.camber-motion-on .contact__grid > div,
html.camber-motion-on .team__grid > .provider-card,
html.camber-motion-on .tier-row,
html.camber-motion-on .victory-card,
html.camber-motion-on .stats-band .stat {
	opacity: 0;
	transform: translateY(26px);
}

/* Preserve the approved block presets in the classic PHP theme. */
:root {
	--wp--preset--color--navy-950: #0a1628;
	--wp--preset--color--navy-900: #0e2038;
	--wp--preset--color--navy-800: #132a4a;
	--wp--preset--color--navy-700: #1c3a63;
	--wp--preset--color--navy-600: #2b4d7d;
	--wp--preset--color--gold-500: #c6a15b;
	--wp--preset--color--gold-400: #d4b578;
	--wp--preset--color--gold-100: #f4ead2;
	--wp--preset--color--cream: #faf7f0;
	--wp--preset--color--paper: #ffffff;
	--wp--preset--color--ink: #1a2333;
	--wp--preset--color--ink-soft: #4a5568;
	--wp--preset--color--line: #e4dfd3;
	--wp--preset--spacing--20: 0.5rem;
	--wp--preset--spacing--30: 0.875rem;
	--wp--preset--spacing--40: 1.25rem;
	--wp--preset--spacing--50: 1.75rem;
	--wp--preset--spacing--60: 2.5rem;
	--wp--preset--spacing--70: 3.5rem;
	--wp--preset--spacing--80: 5rem;
	--wp--preset--font-family--playfair-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--wp--preset--font-family--montserrat: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
}
.has-navy-950-color { color: var(--wp--preset--color--navy-950) !important; }
.has-navy-950-background-color { background-color: var(--wp--preset--color--navy-950) !important; }
.has-navy-950-border-color { border-color: var(--wp--preset--color--navy-950) !important; }
.has-navy-900-color { color: var(--wp--preset--color--navy-900) !important; }
.has-navy-900-background-color { background-color: var(--wp--preset--color--navy-900) !important; }
.has-navy-900-border-color { border-color: var(--wp--preset--color--navy-900) !important; }
.has-navy-800-color { color: var(--wp--preset--color--navy-800) !important; }
.has-navy-800-background-color { background-color: var(--wp--preset--color--navy-800) !important; }
.has-navy-800-border-color { border-color: var(--wp--preset--color--navy-800) !important; }
.has-navy-700-color { color: var(--wp--preset--color--navy-700) !important; }
.has-navy-700-background-color { background-color: var(--wp--preset--color--navy-700) !important; }
.has-navy-700-border-color { border-color: var(--wp--preset--color--navy-700) !important; }
.has-navy-600-color { color: var(--wp--preset--color--navy-600) !important; }
.has-navy-600-background-color { background-color: var(--wp--preset--color--navy-600) !important; }
.has-navy-600-border-color { border-color: var(--wp--preset--color--navy-600) !important; }
.has-gold-500-color { color: var(--wp--preset--color--gold-500) !important; }
.has-gold-500-background-color { background-color: var(--wp--preset--color--gold-500) !important; }
.has-gold-500-border-color { border-color: var(--wp--preset--color--gold-500) !important; }
.has-gold-400-color { color: var(--wp--preset--color--gold-400) !important; }
.has-gold-400-background-color { background-color: var(--wp--preset--color--gold-400) !important; }
.has-gold-400-border-color { border-color: var(--wp--preset--color--gold-400) !important; }
.has-gold-100-color { color: var(--wp--preset--color--gold-100) !important; }
.has-gold-100-background-color { background-color: var(--wp--preset--color--gold-100) !important; }
.has-gold-100-border-color { border-color: var(--wp--preset--color--gold-100) !important; }
.has-cream-color { color: var(--wp--preset--color--cream) !important; }
.has-cream-background-color { background-color: var(--wp--preset--color--cream) !important; }
.has-cream-border-color { border-color: var(--wp--preset--color--cream) !important; }
.has-paper-color { color: var(--wp--preset--color--paper) !important; }
.has-paper-background-color { background-color: var(--wp--preset--color--paper) !important; }
.has-paper-border-color { border-color: var(--wp--preset--color--paper) !important; }
.has-ink-color { color: var(--wp--preset--color--ink) !important; }
.has-ink-background-color { background-color: var(--wp--preset--color--ink) !important; }
.has-ink-border-color { border-color: var(--wp--preset--color--ink) !important; }
.has-ink-soft-color { color: var(--wp--preset--color--ink-soft) !important; }
.has-ink-soft-background-color { background-color: var(--wp--preset--color--ink-soft) !important; }
.has-ink-soft-border-color { border-color: var(--wp--preset--color--ink-soft) !important; }
.has-line-color { color: var(--wp--preset--color--line) !important; }
.has-line-background-color { background-color: var(--wp--preset--color--line) !important; }
.has-line-border-color { border-color: var(--wp--preset--color--line) !important; }
.has-playfair-display-font-family { font-family: var(--wp--preset--font-family--playfair-display); }
.has-montserrat-font-family { font-family: var(--wp--preset--font-family--montserrat); }
.contact__info a { color: var(--gold-100); text-decoration: underline; text-underline-offset: 3px; }
.contact__info a:hover, .contact__info a:focus-visible { color: var(--paper); }

/* Keep fragment targets below the fixed header and honor hidden controls. */
#contact, #conditions, #gae-quiz, #tabs { scroll-margin-top: 110px; }
[hidden] { display: none !important; }

/* Prose color must follow its dark section; block markers stay circular. */
.split-dark .prose p { color: var(--cream); }
.split-dark .prose .eyebrow { color: var(--gold-400); }
.camber-cstep-num { width: 46px; height: 46px; padding: 0 !important; margin-inline: auto; display: flex; align-items: center; justify-content: center; }
.camber-continuum-track h3 { font-size: 1.125rem !important; overflow-wrap: normal; }

/* Matching circular markers for the four areas on the Services page. */
.camber-service-marker {
	width: 64px; height: 64px; min-width: 64px; aspect-ratio: 1;
	flex: 0 0 64px; display: flex; align-items: center; justify-content: center;
	padding: 0 !important; border-radius: 50%; background: var(--paper);
}
.camber-service-marker > p { margin: 0 !important; line-height: 1; }

/* Continuum numerals use marker-sized line boxes and aligned lining figures. */
.camber-cstep-num {
	font-size: 24px !important; line-height: 1 !important;
	font-variant-numeric: lining-nums;
}