:root {
--paper: #F6F8FB; /* cool off-white, slightly warmer */
--paper-2: #ECF1F7; /* pale blue tint */
--white: #FFFFFF;
--ink: #0B1118; /* off-black, cool tint (not #000) */
--ink-2: #1A2230; /* secondary ink */
--ink-soft: #2A3445; /* tertiary ink */
--mute: #5A6473;
--mute-2: #828B99;
--line: #DDE5EE;
--line-2: #EAF0F6;
--accent: #1a5a91; /* primary blue */
--accent-2: #17477d; /* mid blue */
--accent-hover: #163c6f; /* deep blue */
--accent-soft: #DCE8F2; /* pale blue */
--accent-tint: #EFF4F9; /* very pale blue */
--tag-bg: #DCE8F2;
/* Tinted shadows (carry hue of the surrounding palette, not generic black) */
--shadow-sm: 0 1px 2px rgba(22,60,111,0.06), 0 1px 1px rgba(11,17,24,0.03);
--shadow: 0 1px 2px rgba(22,60,111,0.06),
0 8px 24px rgba(22,60,111,0.08),
0 2px 6px rgba(11,17,24,0.04);
--shadow-lg: 0 4px 12px rgba(22,60,111,0.10),
0 30px 60px rgba(26,90,145,0.16),
0 8px 20px rgba(11,17,24,0.06);
--shadow-press: 0 1px 1px rgba(22,60,111,0.10), 0 1px 2px rgba(11,17,24,0.04);
/* Subtle grain — used on hero / dark / image-placeholder surfaces */
--grain: url("data:image/svg+xml;utf8,");
/* Page-wide grain (more dilute, for editorial paper feel) */
--grain-page: url("data:image/svg+xml;utf8,");
/* Inner highlight tokens (machined-hardware top edge) */
--inset-hi: inset 0 1px 0 rgba(255,255,255,0.6);
--inset-hi-dark: inset 0 1px 0 rgba(255,255,255,0.10);
/* Motion tokens */
--ease-out: cubic-bezier(.2,.7,.2,1);
--ease-spring: cubic-bezier(.25,1.4,.5,1);
--ease-soft: cubic-bezier(.32,.72,0,1); /* premium "Linear" ease */
/* Z-index scale (replaces ad-hoc values) */
--z-promo: 40;
--z-header: 50;
--z-mobilecta: 60;
--z-dropdown: 100;
}
*,*::before,*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Sticky header is 78px desktop / 68px mobile + promo bar — keep anchors visible */
scroll-padding-top: 110px;
}
/* Fixed page-wide film grain (editorial paper feel).
pointer-events: none + fixed positioning means it never blocks input
and never participates in scroll repaints. */
body::after {
content: "";
position: fixed;
inset: 0;
background-image: var(--grain-page);
background-size: 220px 220px;
mix-blend-mode: multiply;
opacity: 0.85;
pointer-events: none;
z-index: 9999;
}
body {
margin: 0;
font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv11', 'cv02';
text-wrap: pretty;
}
h1,h2,h3,h4,h5 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* Tabular figures on data-heavy elements (stats, prices, years, counters) */
.stat .k, .pc-amt, .research-num .k, .qm-k, .rs-k, .pub-year, .talk-year,
.hero-fig .stat-card .k, .qr-score, .quiz-counter {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum', 'lnum';
}
/* Universal :focus-visible — keyboard accessibility ring */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible,
.filter-chip:focus-visible,
.quiz-opt:focus-visible {
outline-offset: 4px;
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Scroll reveal ----------
Gentle "premium" entry: fade-up + slight blur lift.
JS adds .is-in once the element enters viewport.
Reduced motion: no-op (block above wipes the transition).
*/
.reveal {
opacity: 0;
transform: translateY(28px);
filter: blur(8px);
transition:
opacity .9s var(--ease-soft),
transform .9s var(--ease-soft),
filter .9s var(--ease-soft);
will-change: transform, opacity, filter;
}
.reveal.is-in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Staggered reveal for sibling groups */
.reveal-group > .reveal.is-in:nth-child(2) { transition-delay: .06s; }
.reveal-group > .reveal.is-in:nth-child(3) { transition-delay: .12s; }
.reveal-group > .reveal.is-in:nth-child(4) { transition-delay: .18s; }
.reveal-group > .reveal.is-in:nth-child(5) { transition-delay: .24s; }
.reveal-group > .reveal.is-in:nth-child(6) { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; filter: none; }
}
.serif { font-family: 'Fraunces', 'Fraunces Fallback', 'Source Serif Pro', Georgia, serif; font-optical-sizing: auto; }
/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 8px 8px 22px; /* asymmetric: tighter right for nested arrow */
font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
border-radius: 999px;
border: 1px solid transparent;
min-height: 48px;
transition:
background .35s var(--ease-soft),
color .25s var(--ease-soft),
border-color .25s var(--ease-soft),
box-shadow .35s var(--ease-soft),
transform .15s var(--ease-soft);
cursor: pointer;
font-family: inherit;
line-height: 1;
will-change: transform;
position: relative;
}
/* Plain buttons (no nested arrow) keep symmetric padding */
.btn:not(:has(.arrow)) { padding: 14px 26px; }
.btn:active { transform: scale(0.97); box-shadow: var(--shadow-press); }
.btn-primary {
background: var(--accent);
color: var(--white);
box-shadow: var(--shadow), var(--inset-hi-dark);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg), var(--inset-hi-dark); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--accent); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-soft { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-soft:hover { border-color: var(--accent); color: var(--accent); }
/* Button-in-button trailing arrow: nested circular wrapper, flush right.
Replaces the naked-arrow pattern with a haptic island that catches light. */
.btn .arrow {
display: inline-grid; place-items: center;
width: 32px; height: 32px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
color: inherit;
font-size: 14px; line-height: 1;
transition:
transform .35s var(--ease-soft),
background .25s var(--ease-soft);
flex-shrink: 0;
}
.btn-primary .arrow,
.btn-ink .arrow { background: rgba(255,255,255,0.18); }
.btn-outline .arrow { background: rgba(11,17,24,0.06); color: var(--ink); }
.btn-outline:hover .arrow { background: rgba(255,255,255,0.18); color: var(--paper); }
.btn-soft .arrow { background: var(--accent-tint); color: var(--accent); }
.btn-light .arrow { background: rgba(26,90,145,0.12); color: var(--accent); }
.btn-outline-light .arrow { background: rgba(255,255,255,0.14); }
/* Magnetic hover physics: outer scales subtle, inner arrow translates */
.btn:hover .arrow {
transform: translate(2px, -1px) scale(1.04);
background: rgba(255,255,255,0.28);
}
.btn-outline:hover .arrow { background: rgba(255,255,255,0.22); }
.btn-soft:hover .arrow { background: var(--accent); color: var(--white); }
.btn-light:hover .arrow { background: var(--accent); color: var(--white); }
/* ---------- Promo bar ---------- */
.promo {
background: linear-gradient(180deg, #0E141C 0%, var(--ink) 100%);
color: var(--paper);
font-size: 13.5px;
line-height: 1.4;
position: relative;
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04);
}
.promo::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(26,90,145,0.38), transparent 65%),
linear-gradient(90deg, rgba(26,90,145,0) 0%, rgba(26,90,145,0.28) 50%, rgba(26,90,145,0) 100%);
pointer-events: none;
}
.promo-inner {
position: relative;
padding: 12px 32px;
display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
text-align: center;
}
.promo-flag {
background: var(--accent);
color: var(--white);
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
white-space: nowrap;
}
.promo-msg { white-space: nowrap; }
.promo-msg strong { color: var(--accent-soft); font-weight: 700; }
.promo-cta {
color: var(--paper);
border-bottom: 1px solid rgba(247,249,252,0.5);
font-weight: 600;
padding-bottom: 1px;
white-space: nowrap;
}
.promo-cta:hover { border-color: var(--paper); color: var(--accent-soft); }
.promo-aux {
color: rgba(247,249,252,0.7);
font-size: 13px;
white-space: nowrap;
}
.promo-phone { color: var(--accent-soft); font-weight: 600; white-space: nowrap; }
.promo-phone:hover { color: var(--paper); }
@media (max-width: 900px) {
.promo-aux { display: none; }
.promo-inner { padding: 10px 16px; gap: 12px; font-size: 12.5px; }
}
@media (max-width: 540px) {
.promo-msg { white-space: normal; font-size: 12.5px; line-height: 1.35; }
.promo-flag { font-size: 9.5px; }
}
/* ---------- Header ---------- */
header.site {
position: sticky; top: 0; z-index: var(--z-header);
background: rgba(246,248,251,0.78);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(221,229,238,0.6);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
header.site .wrap { max-width: 1440px; }
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
height: 78px;
gap: 40px;
min-width: 0;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 320px; justify-self: start; }
.brand-mark {
width: 42px; height: 42px;
display: grid; place-items: center;
background: var(--accent);
border-radius: 50%;
color: var(--white);
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-size: 19px; font-weight: 500;
flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink);
white-space: nowrap;
}
.brand-sub {
font-size: 11.5px;
color: var(--mute);
margin-top: 3px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.navmain {
display: flex;
gap: 4px;
min-width: 0;
align-items: stretch;
justify-self: center;
}
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-trigger {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14.5px; font-weight: 500; color: var(--ink-2);
padding: 6px 12px;
border-radius: 8px;
transition: color .2s, background .2s;
white-space: nowrap;
cursor: pointer;
}
.nav-trigger:hover { color: var(--accent); background: var(--accent-tint); }
.nav-trigger-flat { background: transparent; }
.nav-chev { transition: transform .25s; opacity: 0.6; }
.nav-item:hover .nav-chev,
.nav-item:focus-within .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-item:hover .nav-trigger,
.nav-item:focus-within .nav-trigger { color: var(--accent); background: var(--accent-tint); }
/* Dropdown — display:none when closed so it occupies no layout
space (prevents false overlap reports against the header CTA) */
.nav-drop {
display: none;
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
padding-top: 12px;
z-index: 100;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
display: block;
}
.nav-drop-inner {
background: var(--white);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: var(--shadow-lg);
padding: 12px;
min-width: 280px;
display: grid; gap: 2px;
}
.nav-drop-wide .nav-drop-inner { min-width: 580px; }
.nav-drop-cols {
grid-template-columns: 1fr 1fr;
gap: 2px 8px;
}
.nav-drop-link {
display: block;
padding: 10px 14px;
border-radius: 10px;
transition: background .2s;
line-height: 1.3;
}
.nav-drop-link:hover { background: var(--accent-tint); }
.nav-drop-link strong {
display: block;
font-size: 14px; font-weight: 600; color: var(--ink);
margin-bottom: 2px;
}
.nav-drop-link span {
display: block;
font-size: 12.5px; color: var(--mute);
font-weight: 400;
}
.nav-drop-link:hover strong { color: var(--accent); }
.navcta { display: flex; align-items: center; gap: 24px; flex-shrink: 0; justify-self: end; }
.navcta .btn { white-space: nowrap; }
/* phone CTA in header */
.header-phone {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 8px;
border-radius: 999px;
transition: background .2s;
color: var(--ink);
}
.header-phone:hover { background: var(--accent-tint); }
.header-phone .phone-icon {
width: 38px; height: 38px;
background: var(--accent);
color: var(--white);
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
}
.header-phone .phone-text {
display: flex; flex-direction: column;
line-height: 1.15;
}
.header-phone .phone-label {
font-size: 11px; color: var(--mute); font-weight: 500;
letter-spacing: 0.02em;
}
.header-phone .phone-number {
font-size: 14.5px; font-weight: 600; color: var(--ink);
letter-spacing: -0.005em;
white-space: nowrap;
}
.navtoggle {
display: none; width: 44px; height: 44px;
border: 1px solid var(--line); border-radius: 50%;
background: var(--white); cursor: pointer;
color: var(--ink);
flex-shrink: 0;
}
/* ≥ 1400px: full layout */
/* Hide redundant brand subtitle + phone label/number text by default on desktop
(the icon implies "call", and address is in the footer) */
@media (min-width: 1025px) {
.brand-sub { display: none; }
.header-phone .phone-text { display: none; }
.header-phone { padding: 0; }
.header-phone .phone-icon { width: 42px; height: 42px; }
}
/* 1280–1400px: tighten nav */
@media (max-width: 1400px) {
.navmain { gap: 0; }
.nav-trigger { font-size: 13.5px; padding: 6px 9px; }
.header-row { gap: 40px; }
.navcta { gap: 18px; }
}
/* 1180–1280px: tighter nav padding */
@media (max-width: 1280px) {
.nav-trigger { padding: 6px 7px; gap: 3px; font-size: 13px; }
.nav-chev { width: 9px; height: 9px; }
}
/* 1024–1180px: shorten CTA copy */
@media (max-width: 1180px) {
.navcta .btn-primary .cta-long { display: none; }
.navcta .btn-primary { padding: 11px 16px; font-size: 13px; }
.header-row { gap: 24px; }
.navcta { gap: 14px; }
}
/* hide desktop nav, show toggle */
@media (max-width: 1024px) {
.navmain { display: none; }
.navtoggle { display: grid; place-items: center; }
.brand-sub { display: block; }
.header-phone .phone-text { display: flex; }
}
@media (max-width: 900px) {
.header-phone .phone-text { display: none; }
}
@media (max-width: 720px) {
.header-row { height: 68px; gap: 10px; }
.brand-sub { display: none; }
.brand-name { font-size: 15.5px; }
.brand-mark { width: 38px; height: 38px; font-size: 17px; }
.navcta { gap: 8px; }
.header-phone .phone-icon { width: 40px; height: 40px; }
}
/* very small phones: keep only primary CTA + toggle */
@media (max-width: 480px) {
.navcta .primary-on-sm {
padding: 11px 14px;
font-size: 12.5px;
}
.navcta .primary-on-sm .cta-long { display: none; }
}
/* phone-sized: hide primary CTA, only toggle */
@media (max-width: 380px) {
.navcta .primary-on-sm { display: none; }
}
#mobile-nav { display: none; border-top: 1px solid var(--line); padding: 8px 0 20px; max-height: calc(100vh - 78px); overflow-y: auto; }
#mobile-nav.open { display: block; }
.mnav { list-style: none; padding: 0; margin: 0; }
.mnav-group { border-bottom: 1px solid var(--line-2); }
.mnav-toggle {
width: 100%;
background: transparent; border: 0;
padding: 16px 0;
font: inherit; font-size: 16px; font-weight: 600;
color: var(--ink);
display: flex; align-items: center; justify-content: space-between;
cursor: pointer;
text-align: left;
}
.mnav-toggle .mnav-chev { transition: transform .25s; color: var(--mute); }
.mnav-toggle[aria-expanded="true"] .mnav-chev { transform: rotate(180deg); color: var(--accent); }
.mnav-toggle[aria-expanded="true"] { color: var(--accent); }
.mnav-sub {
list-style: none; padding: 0; margin: 0;
max-height: 0; overflow: hidden;
transition: max-height .3s ease;
}
.mnav-group.open .mnav-sub { max-height: 600px; }
.mnav-sub li { padding-left: 4px; }
.mnav-sub a {
display: block;
padding: 10px 12px;
font-size: 14.5px; font-weight: 500;
color: var(--ink-2);
border-left: 2px solid var(--line);
margin: 2px 0;
border-radius: 0 8px 8px 0;
transition: color .2s, border-color .2s, background .2s;
}
.mnav-sub a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.mnav-sub li:last-child a { margin-bottom: 10px; }
.mnav-flat { border-bottom: 1px solid var(--line-2); }
.mnav-flat a {
display: block;
padding: 16px 0;
font-size: 16px; font-weight: 600;
color: var(--ink);
}
.mnav-flat .mnav-cta {
background: var(--accent);
color: var(--white);
padding: 14px 22px;
border-radius: 999px;
text-align: center;
margin-top: 14px;
border-bottom: 0;
}
.mnav-flat .mnav-cta:hover { background: var(--accent-hover); }
.mnav-flat:has(.mnav-cta) { border-bottom: 0; }
/* ---------- Eyebrow / chips ----------
Default: hairline + microscopic uppercase label (editorial).
The hairline grows slightly on hover within a parent .group-eyebrow if used.
*/
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
color: var(--accent);
text-transform: uppercase;
font-feature-settings: 'ss01', 'cv11';
}
.eyebrow::before {
content: ""; width: 28px; height: 1px; background: var(--accent);
transition: width .5s var(--ease-soft);
}
.eyebrow.no-line::before { display: none; }
.chip {
display: inline-flex; align-items: center;
padding: 7px 14px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
color: var(--ink-2);
}
/* ---------- Section ---------- */
section { position: relative; }
.sect { padding: 96px 0; }
.sect-lg { padding: 120px 0; }
@media (max-width: 800px) { .sect { padding: 64px 0; } .sect-lg { padding: 80px 0; } }
.sect-head { max-width: 720px; margin-bottom: 56px; }
.sect-head-centered { margin-left: auto; margin-right: auto; text-align: center; }
.sect-head-centered .eyebrow::before { display: none; }
.sect-head-centered .lede { margin-left: auto; margin-right: auto; }
.sect-head h2 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(32px, 4.4vw, 52px);
line-height: 1.1; /* italic descender clearance */
letter-spacing: -0.022em;
margin-top: 16px;
padding-bottom: 0.08em;
}
.sect-head h2 em { font-style: italic; font-weight: 300; color: var(--accent); }
.sect-head .lede {
margin-top: 20px;
font-size: 17px;
line-height: 1.6;
color: var(--mute);
max-width: 60ch;
}
/* ---------- Image placeholders ----------
Layered: subtle grain (texture) + radial highlight (warmth) + diagonal wash.
The grain breaks the flat-vector AI aesthetic and reads as a real surface.
*/
.img-ph {
position: relative;
width: 100%;
background:
radial-gradient(ellipse at 30% 20%, rgba(26,90,145,0.10), transparent 60%),
linear-gradient(160deg, var(--paper-2), var(--accent-soft));
overflow: hidden;
border-radius: 8px;
isolation: isolate;
}
.img-ph::after {
content: "";
position: absolute; inset: 0;
background-image: var(--grain);
background-size: 180px 180px;
mix-blend-mode: multiply;
opacity: 0.55;
pointer-events: none;
z-index: 1;
}
.img-ph > * { position: relative; z-index: 2; }
.img-ph svg.silhouette {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0.18;
}
/* Real photo inside .img-ph — fills the placeholder, sits below the grain overlay */
.img-ph > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
/* graceful fade-in once cached */
transition: opacity .6s var(--ease-soft);
}
/* Soften grain when a real image is present so the photo stays readable */
.img-ph:has(> img)::after {
opacity: 0.22;
mix-blend-mode: overlay;
}
/* Decorative silhouette hides automatically when a real image loads */
.img-ph:has(> img) .body-silhouette { display: none; }
/* Before/After "sample · placeholder" overlay — required disclosure on stock imagery */
.ba-half .ba-sample {
position: absolute;
bottom: 10px; right: 10px;
z-index: 3;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper);
background: rgba(11,17,24,0.78);
padding: 4px 8px;
border-radius: 4px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
line-height: 1;
}
/* ---------- Hero ---------- */
.hero { padding: 80px 0 96px; }
@media (max-width: 800px) { .hero { padding: 48px 0 64px; } }
.hero-grid {
display: grid; grid-template-columns: 1.15fr 1fr;
gap: 72px; align-items: center;
}
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
.hero h1 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(42px, 6.4vw, 86px);
line-height: 1.06; /* italic descender clearance */
letter-spacing: -0.028em;
margin-top: 24px;
padding-bottom: 0.12em; /* reserve for italic descenders */
max-width: 14ch;
}
.hero h1 .em { font-style: italic; font-weight: 300; color: var(--accent); }
.hero-lede {
margin-top: 28px;
font-size: 18.5px;
line-height: 1.55;
color: var(--ink-2);
max-width: 52ch;
}
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust {
margin-top: 44px;
padding-top: 28px;
border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 24px;
flex-wrap: wrap;
}
.hero-trust .stars { color: var(--accent); font-size: 16px; letter-spacing: 2px; }
.hero-trust .rating-text {
font-size: 13.5px; color: var(--mute);
}
.hero-trust .rating-text strong { color: var(--ink); font-weight: 600; }
.hero-trust .divider { width: 1px; height: 20px; background: var(--line); }
@media (max-width: 600px) { .hero-trust .divider { display: none; } }
/* Hero figure: double-bezel (Doppelrand) — outer shell holds the image like a tray */
.hero-fig {
position: relative;
padding: 10px; /* outer shell padding */
background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(220,232,242,0.4));
border-radius: 28px;
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 0 0 1px rgba(22,60,111,0.06),
0 30px 80px rgba(26,90,145,0.10),
0 8px 24px rgba(11,17,24,0.04);
}
.hero-fig .img-ph {
aspect-ratio: 4/5;
border-radius: 20px; /* inner core: shell radius - shell padding */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
var(--shadow);
}
.hero-fig .badge {
position: absolute;
bottom: -28px; left: 24px;
background: var(--white);
border-radius: 16px;
padding: 18px 22px;
box-shadow: var(--shadow);
display: flex; align-items: center; gap: 14px;
max-width: 260px;
}
.hero-fig .badge .avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--accent-soft);
flex-shrink: 0;
}
.hero-fig .badge .meta {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-style: italic; font-weight: 400;
font-size: 14.5px; line-height: 1.35;
color: var(--ink);
}
.hero-fig .badge .name {
margin-top: 6px;
font-family: 'Inter', 'Inter Fallback', sans-serif; font-style: normal;
font-size: 12px; color: var(--mute); font-weight: 500;
}
.hero-fig .stat-card {
position: absolute;
top: 24px; right: -16px;
background: var(--ink); color: var(--paper);
border-radius: 16px;
padding: 16px 20px;
box-shadow: var(--shadow-lg);
max-width: 200px;
}
.hero-fig .stat-card .k {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-size: 30px; line-height: 1;
letter-spacing: -0.02em;
color: var(--accent-soft);
}
.hero-fig .stat-card .l {
margin-top: 6px;
font-size: 12px;
color: rgba(248,244,237,0.7);
line-height: 1.4;
}
@media (max-width: 600px) {
.hero-fig .stat-card { top: 12px; right: 8px; padding: 12px 14px; }
.hero-fig .stat-card .k { font-size: 24px; }
.hero-fig .badge { left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 320px; }
}
/* ---------- Trust strip / stats ---------- */
.stats-band {
background: var(--white);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.stats-grid {
padding: 56px 0;
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.stat .k {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: clamp(34px, 3.6vw, 44px);
line-height: 1;
letter-spacing: -0.022em;
color: var(--accent);
}
.stat .l {
margin-top: 12px;
font-size: 13.5px; font-weight: 600;
color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em;
}
.stat p {
margin-top: 6px;
font-size: 14px;
color: var(--mute);
line-height: 1.5;
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 48px 0; } }
/* ---------- Press / Featured-in strip ---------- */
.press-band {
background: var(--white);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.press-inner {
padding: 38px 0;
display: grid;
grid-template-columns: 240px 1fr;
gap: 56px;
align-items: center;
}
.press-label {
display: flex; flex-direction: column; gap: 6px;
}
.press-label .eyebrow { color: var(--accent); }
.press-label .pl-title {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: 19px;
letter-spacing: -0.012em;
line-height: 1.25;
color: var(--ink);
}
.press-list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
align-items: center;
border-left: 1px solid var(--line-2);
}
.press-mark {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
padding: 10px 14px;
border-right: 1px solid var(--line-2);
text-align: center;
color: var(--ink-2);
min-height: 72px;
}
.press-mark:last-child { border-right: 0; }
.press-mark .pm-name {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
color: var(--ink);
}
.press-mark .pm-name.serif {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
letter-spacing: -0.015em;
font-size: 17px;
font-style: italic;
}
.press-mark .pm-name.allcaps {
text-transform: uppercase;
font-size: 11.5px;
letter-spacing: 0.18em;
font-weight: 700;
}
.press-mark .pm-name.condensed {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 600;
font-size: 18px;
letter-spacing: -0.02em;
}
.press-mark .pm-sub {
font-size: 10px;
color: var(--mute-2);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
@media (max-width: 1024px) {
.press-inner { grid-template-columns: 1fr; gap: 24px; }
.press-label { text-align: center; align-items: center; }
.press-list { grid-template-columns: repeat(3, 1fr); border-left: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.press-mark { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.press-mark:nth-child(3n) { border-right: 0; }
.press-mark:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 540px) {
.press-list { grid-template-columns: repeat(2, 1fr); }
.press-mark:nth-child(3n) { border-right: 1px solid var(--line-2); }
.press-mark:nth-child(2n) { border-right: 0; }
.press-mark:nth-last-child(-n+2) { border-bottom: 0; }
.press-mark:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; }
}
/* ---------- Trust band ---------- */
.trust-band {
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.trust-inner {
padding: 36px 0;
display: grid; grid-template-columns: 220px 1fr;
gap: 48px; align-items: center;
}
.trust-label {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mute);
line-height: 1.5;
}
.trust-logos {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.trust-logo {
display: flex; align-items: center; gap: 12px;
color: var(--accent-2);
transition: color .2s;
}
.trust-logo:hover { color: var(--accent); }
.trust-logo svg {
width: 34px; height: 34px; flex-shrink: 0;
opacity: 0.85;
}
.trust-logo span {
font-size: 11.5px;
line-height: 1.3;
color: var(--ink);
font-weight: 500;
}
.trust-logo strong {
color: var(--accent);
font-weight: 700;
font-size: 12px;
}
@media (max-width: 1100px) {
.trust-inner { grid-template-columns: 1fr; gap: 24px; }
.trust-logos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-label { text-align: center; }
}
@media (max-width: 600px) {
.trust-logos { grid-template-columns: repeat(2, 1fr); }
.trust-logo svg { width: 28px; height: 28px; }
}
/* ---------- Treatments (the core: this is a TREATMENT site) ----------
Asymmetric editorial grid:
row 1 → conservative care (1/3) + lymph-sparing surgery FEATURED (2/3, horizontal)
row 2 → recovery & aftercare (full-width, horizontal layout)
Mobile collapses to single column.
*/
.tx-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal, aligned panels (icons, no images) */
grid-auto-rows: 1fr; /* equal-height rows */
gap: 24px;
align-items: stretch;
}
@media (max-width: 960px) { .tx-grid { grid-template-columns: 1fr; gap: 20px; } }
.tx-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 22px;
padding: 0;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition:
border-color .4s var(--ease-soft),
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
}
.tx-card:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
var(--shadow-lg);
}
.tx-card:active { transform: translateY(-1px); box-shadow: var(--shadow-press); }
/* Icon badge (replaces the former AI hero image — 2026-06-11) */
.tx-icon {
width: 54px; height: 54px;
border-radius: 14px;
background: var(--accent-soft);
color: var(--accent);
display: grid; place-items: center;
margin-bottom: 20px;
flex-shrink: 0;
}
.tx-icon svg { width: 27px; height: 27px; }
/* Featured tile: same equal column, accent surround (no horizontal split) */
.tx-card-featured {
border: 1.5px solid var(--accent);
background: linear-gradient(180deg, var(--accent-tint) 0%, var(--white) 32%);
box-shadow: var(--shadow);
}
.tx-card-featured .tx-icon { background: var(--accent); color: var(--white); }
.tx-card-featured .tag { background: var(--accent); color: var(--white); }
.tx-card-featured h3 { font-size: 24px; }
.tx-card-featured .featured-flag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.tx-card-featured .featured-flag::before {
content: ""; width: 18px; height: 1px; background: var(--accent);
}
.tx-card .body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.tx-card .tag {
display: inline-block;
background: var(--accent-soft);
color: var(--accent);
font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 999px;
align-self: flex-start;
margin-bottom: 16px;
}
.tx-card h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 24px;
letter-spacing: -0.015em;
line-height: 1.2;
margin-bottom: 12px;
}
.tx-card p {
font-size: 14.5px; color: var(--mute);
line-height: 1.55;
flex: 1;
}
.tx-card ul {
list-style: none; margin: 18px 0 0; padding: 0;
border-top: 1px solid var(--line-2);
padding-top: 16px;
}
.tx-card ul li {
font-size: 13.5px; color: var(--ink-2);
padding: 5px 0;
display: flex; gap: 10px; align-items: flex-start;
}
.tx-card ul li::before {
content: ""; width: 14px; height: 14px; flex-shrink: 0;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
margin-top: 3px;
}
.tx-card .learn {
margin-top: 22px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600; color: var(--accent);
align-self: flex-start;
}
.tx-card:hover .learn .arrow { transform: translateX(3px); }
.tx-card .arrow { transition: transform .25s; display: inline-block; }
/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--white);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 16px rgba(22,60,111,0.08);
z-index: 60;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
gap: 8px;
}
.mcta-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 12px;
font-size: 14px; font-weight: 600;
transition: background .2s, color .2s, transform .15s;
text-decoration: none;
line-height: 1;
}
.mcta-btn:active { transform: scale(0.97); }
.mcta-call, .mcta-text {
flex: 0 0 60px;
padding: 12px 0;
background: var(--paper);
border: 1px solid var(--line);
color: var(--ink);
flex-direction: column;
gap: 4px;
font-size: 11px;
}
.mcta-call svg, .mcta-text svg { color: var(--accent); }
.mcta-book {
flex: 1;
background: var(--accent);
color: var(--white);
padding: 14px 18px;
}
.mcta-book:hover { background: var(--accent-hover); }
@media (max-width: 720px) {
.mobile-cta { display: flex; }
body { padding-bottom: 92px; }
/* Wide comparison tables: contain overflow inside the table itself,
not the page (prevents horizontal scrollbars on the whole site). */
main table,
.lab-article table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Phase 6 — defensive guards: any wide content element inside an article
must fit the viewport. Affects only mobile (≤720px); desktop layout
is untouched. */
.lab-article pre,
.lab-article code {
max-width: 100%;
overflow-x: auto;
word-break: break-word;
}
.lab-article img,
.lab-article video,
.lab-article iframe,
.lab-article object,
.lab-article embed {
max-width: 100%;
height: auto;
}
/* Final safety net: trim tiny sub-pixel / decorative overflows (e.g. the
6-px hero chev on the front page) without affecting layout flow. */
html, body { overflow-x: hidden; }
}
/* ---------- Pricing ---------- */
.pricing { background: var(--paper); }
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr; gap: 20px; } }
.price-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 24px;
padding: 32px 30px 30px;
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition:
border-color .4s var(--ease-soft),
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
position: relative;
}
.price-card:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.price-card-featured {
border: 1.5px solid var(--accent);
box-shadow: var(--shadow);
background: linear-gradient(180deg, var(--accent-tint) 0%, var(--white) 30%);
}
.pc-tag {
display: inline-block;
align-self: flex-start;
background: var(--paper-2);
color: var(--mute);
font-size: 11px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
margin-bottom: 16px;
}
.pc-tag-featured {
background: var(--accent);
color: var(--white);
}
.price-card h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 26px;
letter-spacing: -0.015em;
line-height: 1.15;
margin-bottom: 12px;
}
.pc-desc {
font-size: 14.5px;
color: var(--mute);
line-height: 1.55;
margin-bottom: 22px;
}
.pc-price {
padding: 22px 0;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
margin-bottom: 22px;
display: flex; flex-direction: column;
gap: 4px;
}
.pc-from {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mute);
}
.pc-amt {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 44px;
letter-spacing: -0.024em;
color: var(--ink);
line-height: 1;
}
.price-card-featured .pc-amt { color: var(--accent); }
.pc-unit {
font-size: 13px;
color: var(--mute);
margin-top: 4px;
}
.pc-incl {
list-style: none; padding: 0; margin: 0 0 28px;
flex: 1;
}
.pc-incl li {
font-size: 14px;
color: var(--ink-2);
padding: 7px 0;
display: flex; gap: 10px; align-items: flex-start;
}
.pc-incl li::before {
content: ""; width: 16px; height: 16px; flex-shrink: 0;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
margin-top: 4px;
}
.pc-cta { width: 100%; justify-content: center; }
.pc-promo {
text-align: center;
margin-top: 12px;
font-size: 12px; font-weight: 600;
color: var(--accent);
letter-spacing: 0.02em;
}
/* Financing */
.financing {
margin-top: 64px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 24px;
padding: 40px 44px;
}
.financing-head {
display: grid; grid-template-columns: 1fr 1.4fr;
gap: 40px; align-items: baseline;
padding-bottom: 32px;
border-bottom: 1px solid var(--line-2);
margin-bottom: 32px;
}
.financing-head h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.015em;
line-height: 1.2;
}
.financing-head p {
font-size: 15px;
color: var(--mute);
line-height: 1.6;
}
.financing-head strong { color: var(--accent); font-weight: 700; }
@media (max-width: 800px) {
.financing-head { grid-template-columns: 1fr; gap: 14px; }
.financing { padding: 28px; }
}
.financing-partners {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
@media (max-width: 800px) { .financing-partners { grid-template-columns: repeat(2, 1fr); } }
.fp-logo {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
transition: border-color .2s;
}
.fp-logo:hover { border-color: var(--accent); }
.fp-mark {
width: 36px; height: 36px;
background: var(--accent);
color: var(--white);
border-radius: 8px;
display: grid; place-items: center;
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 15px;
letter-spacing: -0.02em;
flex-shrink: 0;
}
.fp-name {
font-size: 13px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.financing-link {
margin-top: 28px;
display: inline-flex; align-items: center; gap: 8px;
color: var(--accent);
font-size: 14px; font-weight: 600;
padding-bottom: 3px;
border-bottom: 1px solid var(--accent);
}
.financing-link .arrow { transition: transform .25s; }
.financing-link:hover .arrow { transform: translateX(3px); }
/* ---------- Diagnostic Quiz ---------- */
.quiz {
margin-top: 64px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
display: grid; grid-template-columns: 5fr 7fr;
box-shadow: var(--shadow);
}
@media (max-width: 900px) { .quiz { grid-template-columns: 1fr; } }
.quiz-side {
background: linear-gradient(160deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--paper);
padding: 44px 40px;
display: flex; flex-direction: column; justify-content: center;
position: relative;
overflow: hidden;
}
.quiz-side::before {
content: ""; position: absolute;
width: 280px; height: 280px;
bottom: -120px; right: -100px;
background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
border-radius: 50%;
}
.quiz-side .eyebrow {
color: var(--accent-soft);
margin-bottom: 16px;
position: relative;
}
.quiz-side h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(24px, 2.6vw, 32px);
letter-spacing: -0.018em;
line-height: 1.12;
position: relative;
}
.quiz-side h3 em { font-style: italic; font-weight: 300; color: var(--accent-soft); }
.quiz-side p {
margin-top: 16px;
font-size: 15px;
line-height: 1.55;
color: rgba(247,249,252,0.8);
max-width: 38ch;
position: relative;
}
.quiz-meta {
list-style: none; padding: 0; margin: 32px 0 0;
display: flex; gap: 24px;
border-top: 1px solid rgba(247,249,252,0.18);
padding-top: 24px;
position: relative;
}
.quiz-meta li { display: flex; flex-direction: column; }
.qm-k {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 26px;
line-height: 1;
color: var(--paper);
letter-spacing: -0.018em;
}
.qm-l {
margin-top: 6px;
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent-soft);
}
.quiz-card {
padding: 44px 48px;
display: flex; flex-direction: column;
min-height: 380px;
}
@media (max-width: 600px) { .quiz-card { padding: 32px 24px; } }
.quiz-progress {
height: 4px;
background: var(--line-2);
border-radius: 999px;
overflow: hidden;
margin-bottom: 12px;
}
.qp-fill {
height: 100%;
width: 20%;
background: var(--accent);
border-radius: 999px;
transition: width .35s cubic-bezier(.4,0,.2,1);
}
.quiz-counter {
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mute);
margin-bottom: 32px;
}
.quiz-counter span { color: var(--accent); }
.quiz-stage { position: relative; flex: 1; }
.quiz-q {
display: none;
animation: qFade .35s ease both;
}
.quiz-q.active { display: block; }
@keyframes qFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.quiz-q h4 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.015em;
line-height: 1.22;
color: var(--ink);
margin-bottom: 14px;
}
.quiz-q h4 em { font-style: italic; font-weight: 400; color: var(--accent); }
.qhint {
font-size: 13.5px;
color: var(--mute);
line-height: 1.5;
margin-bottom: 28px;
max-width: 56ch;
}
.quiz-options {
display: flex; gap: 10px; flex-wrap: wrap;
}
.quiz-opt {
background: var(--white);
border: 1.5px solid var(--line);
color: var(--ink);
padding: 14px 24px;
border-radius: 12px;
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: border-color .2s, background .2s, color .2s, transform .15s;
display: inline-flex; align-items: center; gap: 12px;
min-width: 120px;
justify-content: center;
}
.quiz-opt:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.quiz-opt.selected { background: var(--accent); color: var(--white); border-color: var(--accent); }
.quiz-opt-soft { color: var(--mute); border-color: var(--line-2); font-weight: 500; }
.qo-key {
font-size: 10.5px;
background: var(--paper-2);
color: var(--mute);
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.04em;
}
.quiz-opt.selected .qo-key { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }
/* Result */
.quiz-result { text-align: left; }
.qr-badge {
display: inline-flex; align-items: baseline; gap: 12px;
background: var(--accent-tint);
border: 1px solid var(--accent-soft);
color: var(--accent);
padding: 16px 22px;
border-radius: 14px;
margin-bottom: 24px;
}
.qr-score {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 34px;
line-height: 1;
color: var(--accent);
letter-spacing: -0.018em;
}
.qr-of { font-size: 18px; color: var(--mute); font-weight: 400; }
.qr-label {
font-size: 12.5px; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--accent);
}
.quiz-result h4 { margin-bottom: 12px; }
.qr-copy {
font-size: 15px; color: var(--ink-2); line-height: 1.55;
margin-bottom: 24px;
max-width: 56ch;
}
.qr-form {
display: flex; gap: 8px; margin-bottom: 12px;
max-width: 520px;
}
.qr-form input {
flex: 1;
padding: 14px 18px;
background: var(--white);
border: 1.5px solid var(--line);
border-radius: 12px;
font: inherit;
font-size: 15px;
outline: none;
transition: border-color .2s;
}
.qr-form input:focus { border-color: var(--accent); }
@media (max-width: 540px) {
.qr-form { flex-direction: column; }
}
.qr-fine { font-size: 12px; color: var(--mute); }
.quiz-restart {
margin-top: 24px;
background: none; border: 0;
font: inherit; font-size: 13px; font-weight: 500;
color: var(--mute);
cursor: pointer;
padding: 0;
}
.quiz-restart:hover { color: var(--accent); }
/* ---------- Compare table (Why us) ---------- */
.compare-sect { background: var(--paper); }
.compare-table {
background: var(--white);
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.compare-row {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
border-bottom: 1px solid var(--line);
}
.compare-row:last-child { border-bottom: 0; }
.compare-cell {
padding: 22px 26px;
display: flex; align-items: center;
font-size: 14.5px;
line-height: 1.5;
border-right: 1px solid var(--line);
}
.compare-cell:last-child { border-right: 0; }
.compare-head { background: var(--paper); }
.compare-head .compare-cell { padding: 28px 26px 26px; display: block; }
.compare-head .compare-label-col { padding: 28px 26px; }
.ch-tag {
display: inline-block;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.ch-tag-bad { background: rgba(0,0,0,0.06); color: var(--mute); }
.ch-tag-good { background: var(--accent); color: var(--white); }
.ch-sub {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 18px;
letter-spacing: -0.012em;
color: var(--ink);
}
.compare-label {
font-weight: 600;
color: var(--ink);
font-size: 14px;
background: var(--paper);
}
.compare-good { background: var(--accent-tint); }
.compare-bad { background: var(--white); }
.cx {
display: flex; gap: 12px; align-items: flex-start;
color: var(--ink-2);
}
.cx::before {
content: "";
width: 22px; height: 22px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 1px;
background-position: center;
background-repeat: no-repeat;
}
.cx.yes::before {
background-color: var(--accent);
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px;
}
.cx.no::before {
background-color: rgba(0,0,0,0.08);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px;
}
.cx.no { color: var(--mute); }
.cx.yes { color: var(--ink); font-weight: 500; }
.compare-footer {
margin-top: 32px;
padding: 28px 36px;
background: var(--ink);
color: var(--paper);
border-radius: 20px;
display: flex; align-items: center; justify-content: space-between;
gap: 32px; flex-wrap: wrap;
}
.compare-footer p {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: 18px;
letter-spacing: -0.005em;
line-height: 1.4;
max-width: 56ch;
}
.compare-footer strong { color: var(--accent-soft); font-weight: 600; }
@media (max-width: 900px) {
.compare-row { grid-template-columns: 1fr; }
.compare-cell { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 14px 20px; }
.compare-cell:last-child { border-bottom: 0; }
.compare-label { border-bottom: 1px solid var(--line); padding: 16px 20px; font-size: 15px; }
.compare-head { display: none; }
.compare-row { padding: 12px 0; }
.compare-bad::before { content: "Generic surgeon"; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.compare-good::before { content: "The Lipedema Institute"; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.compare-bad, .compare-good { flex-direction: column; align-items: flex-start; }
.compare-footer { padding: 24px; }
.compare-footer p { font-size: 16px; }
}
/* ---------- Results / before-after gallery ---------- */
.results-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 32px;
}
.results-filters {
display: flex; gap: 8px; flex-wrap: wrap;
}
.filter-chip {
background: var(--white);
border: 1px solid var(--line);
color: var(--ink-2);
padding: 8px 16px;
border-radius: 999px;
font: inherit;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active {
background: var(--accent);
border-color: var(--accent);
color: var(--white);
}
.results-count {
font-size: 13px; color: var(--mute);
}
.results-count strong { color: var(--accent); font-weight: 700; }
.results-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 1000px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .results-grid { grid-template-columns: 1fr; } }
.result {
background: var(--white);
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition:
border-color .4s var(--ease-soft),
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
display: flex; flex-direction: column;
}
.result:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.result.hidden { display: none; }
.result-img { aspect-ratio: 4/3; position: relative; }
.ba-pair {
display: grid; grid-template-columns: 1fr 1fr;
height: 100%;
position: relative;
}
.ba-pair::after {
content: "";
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 2px; transform: translateX(-50%);
background: var(--white);
z-index: 2;
}
.ba-half {
position: relative; height: 100%;
border-radius: 0;
}
.ba-tag {
position: absolute; top: 12px; left: 12px;
background: var(--ink); color: var(--white);
font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
padding: 5px 10px; border-radius: 4px;
z-index: 3;
}
.ba-tag-after { background: var(--accent); }
.result-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.result-meta {
display: flex; gap: 10px; margin-bottom: 12px;
align-items: center;
}
.result-stage {
background: var(--accent-soft);
color: var(--accent);
font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.result-age {
color: var(--mute);
font-size: 12.5px; font-weight: 500;
}
.result-body h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 21px;
letter-spacing: -0.012em;
line-height: 1.2;
margin-bottom: 10px;
}
.result-body p {
font-size: 14px;
color: var(--mute);
line-height: 1.55;
flex: 1;
}
.result-stats {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--line-2);
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.result-stats > div { display: flex; flex-direction: column; }
.rs-k {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 19px;
color: var(--accent);
line-height: 1;
letter-spacing: -0.012em;
}
.rs-l {
margin-top: 4px;
font-size: 10.5px;
color: var(--mute);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
}
.results-cta {
margin-top: 48px;
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* ---------- Single featured before/after ----------
Composite image already contains BEFORE (left half) + AFTER (right half).
We overlay labels + caption, framed inside a hairline card to match the rest of the page.
*/
.results-feature {
margin: 0 0 24px;
border-radius: 22px;
overflow: hidden;
background: var(--white);
border: 1px solid var(--line);
box-shadow: var(--shadow);
isolation: isolate;
}
.results-feature-img {
position: relative;
isolation: isolate;
}
.results-feature-img img {
display: block;
width: 100%;
height: auto;
}
/* Tags pinned to each half of the composite. Match the .ba-tag visual family. */
.results-feature-tag {
position: absolute;
top: 18px;
z-index: 2;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--paper);
background: rgba(11,17,24,0.78);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 6px 12px;
border-radius: 4px;
line-height: 1;
box-shadow: 0 4px 12px rgba(11,17,24,0.18);
}
.results-feature-tag-before { left: 18px; }
.results-feature-tag-after { right: 18px; background: var(--accent); }
/* Optional thin separator across the visual midline (where before meets after).
Pure cosmetic hairline so the eye knows where the split is. */
.results-feature-img::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 1px;
background: rgba(255,255,255,0.45);
box-shadow: 0 0 0 1px rgba(11,17,24,0.05);
z-index: 1;
pointer-events: none;
}
.results-feature-cap {
padding: 22px 32px 26px;
border-top: 1px solid var(--line-2);
display: grid;
grid-template-columns: auto 1fr;
gap: 20px 28px;
align-items: start;
}
.rfc-meta {
display: flex; flex-direction: column; gap: 8px;
min-width: 180px;
}
.rfc-pill {
align-self: flex-start;
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
padding: 5px 11px;
border-radius: 999px;
}
.rfc-detail {
color: var(--ink-2);
font-size: 13.5px;
font-weight: 600;
}
.rfc-stage-sub {
color: var(--mute);
font-size: 12.5px;
line-height: 1.5;
}
.rfc-note {
font-size: 14.5px;
color: var(--ink-2);
line-height: 1.6;
max-width: 60ch;
}
.rfc-note strong { color: var(--accent); font-weight: 600; }
.results-gallery-link {
margin: 0 0 8px;
text-align: center;
font-size: 13.5px;
color: var(--mute);
}
.results-gallery-link strong { color: var(--accent); font-weight: 700; }
@media (max-width: 800px) {
.results-feature-cap {
grid-template-columns: 1fr;
padding: 20px 22px 24px;
gap: 14px;
}
.rfc-meta { min-width: 0; }
.results-feature-tag { font-size: 10px; padding: 5px 9px; top: 12px; }
.results-feature-tag-before { left: 12px; }
.results-feature-tag-after { right: 12px; }
}
/* ---------- Process / journey ---------- */
.journey {
background: var(--white);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.journey-track {
margin-top: 72px;
position: relative;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 56px;
}
/* connector line behind step circles */
.journey-track::before {
content: "";
position: absolute;
top: 32px;
left: 11%;
right: 11%;
height: 1px;
background: linear-gradient(to right, var(--accent-soft) 0%, var(--accent) 50%, var(--accent-soft) 100%);
z-index: 0;
}
.journey-step {
position: relative;
z-index: 1;
display: flex; flex-direction: column;
align-items: flex-start;
padding: 0;
}
.journey-step .step-n {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--white);
border: 1.5px solid var(--accent);
color: var(--accent);
display: grid; place-items: center;
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 22px;
line-height: 1;
margin-bottom: 32px;
transition: background .25s, color .25s, transform .25s;
}
.journey-step:hover .step-n {
background: var(--accent);
color: var(--white);
transform: scale(1.05);
}
.journey-step .duration {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 12px;
}
.journey-step h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 24px;
letter-spacing: -0.015em;
line-height: 1.2;
margin-bottom: 12px;
}
.journey-step p {
font-size: 15px;
color: var(--mute);
line-height: 1.6;
max-width: 28ch;
}
@media (max-width: 1024px) {
.journey-track { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
.journey-track::before { display: none; }
}
@media (max-width: 600px) {
.journey-track { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
.journey-step .step-n { margin-bottom: 20px; width: 56px; height: 56px; font-size: 20px; }
}
/* ---------- Surface variants ---------- */
.sect-on-white {
background: var(--white);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.sect-on-white-bottom {
background: var(--white);
border-top: 1px solid var(--line);
}
/* ---------- Doctor / About ---------- */
.doctor-btn { margin-top: 32px; }
.doctor-grid {
display: grid; grid-template-columns: 5fr 7fr;
gap: 80px; align-items: center;
}
@media (max-width: 1000px) { .doctor-grid { grid-template-columns: 1fr; gap: 48px; } }
.doctor-fig .img-ph { aspect-ratio: 4/5; border-radius: 16px; box-shadow: var(--shadow); }
.doctor h2 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(32px, 4.2vw, 48px);
line-height: 1.1; /* italic descender clearance */
letter-spacing: -0.022em;
margin: 16px 0 24px;
padding-bottom: 0.08em;
}
.doctor h2 em { font-style: italic; font-weight: 300; color: var(--accent); }
.doctor .bio { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.doctor .creds {
margin-top: 32px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px;
}
.doctor .creds .item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 20px;
}
.doctor .creds .label {
font-size: 12px; color: var(--mute);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.doctor .creds .value {
margin-top: 6px;
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-size: 18px; font-weight: 500;
line-height: 1.25;
letter-spacing: -0.012em;
}
@media (max-width: 600px) { .doctor .creds { grid-template-columns: 1fr; } }
/* ---------- Education cards ---------- */
.edu-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1000px) { .edu-grid { grid-template-columns: 1fr; gap: 20px; } }
.edu-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 22px;
padding: 32px 30px;
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition:
border-color .4s var(--ease-soft),
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
}
.edu-card:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.edu-card .icon {
width: 48px; height: 48px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
display: grid; place-items: center;
margin-bottom: 22px;
}
.edu-card .icon svg { width: 24px; height: 24px; }
.edu-card h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 22px;
letter-spacing: -0.012em;
line-height: 1.2;
margin-bottom: 10px;
}
.edu-card p { font-size: 14.5px; color: var(--mute); line-height: 1.55; flex: 1; }
.edu-card .more {
margin-top: 22px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600; color: var(--accent);
align-self: flex-start;
}
.edu-card:hover .more .arrow { transform: translateX(3px); }
.edu-card .arrow { display: inline-block; transition: transform .25s; }
.edu-card .read-time {
font-size: 11.5px; color: var(--mute); margin-bottom: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.06em;
}
/* ---------- Professional Memberships & Affiliations (honest, text-based)
Replaces the prior fake-engraved-SVG accreditations band. No badges,
no logos, no fabricated metadata. Memberships are presented as chips
and the HIPAA statement is plain prose. */
.affiliations .affil-inner {
padding: 56px 0;
display: grid;
grid-template-columns: 320px 1fr;
gap: 56px;
align-items: start;
}
.affil-label .eyebrow { color: var(--accent); }
.affil-label .affil-title {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: 26px;
letter-spacing: -0.018em;
line-height: 1.18;
margin-top: 14px;
color: var(--ink);
}
.affil-label .affil-sub {
margin-top: 14px;
font-size: 14.5px;
line-height: 1.55;
color: var(--mute);
max-width: 34ch;
}
.affil-chips {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 10px;
}
.affil-chip {
display: inline-block;
padding: 9px 16px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
font-size: 13.5px;
line-height: 1.3;
letter-spacing: 0.01em;
transition: background .2s, border-color .2s;
}
.affil-chip:hover { background: var(--accent-tint); border-color: var(--accent); }
.affil-extra {
margin: 20px 0 0;
font-size: 14px;
font-style: italic;
color: var(--mute);
}
.affil-hipaa {
margin: 14px 0 0;
font-size: 13.5px;
color: var(--mute-2);
padding-top: 14px;
border-top: 1px solid var(--line-2);
}
@media (max-width: 1100px) {
.affiliations .affil-inner { grid-template-columns: 1fr; gap: 28px; }
.affil-label .affil-sub { max-width: 56ch; }
}
/* ---------- Research, Publications & Speaking ---------- */
.research-sect {
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.research-numbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-bottom: 64px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
}
.research-num {
padding: 32px 28px;
border-right: 1px solid var(--line-2);
display: flex; flex-direction: column;
}
.research-num:last-child { border-right: 0; }
.research-num .k {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: clamp(36px, 3.8vw, 48px);
letter-spacing: -0.024em;
line-height: 1;
color: var(--accent);
}
.research-num .l {
margin-top: 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
.research-num .d {
margin-top: 4px;
font-size: 12.5px;
color: var(--mute);
line-height: 1.5;
}
@media (max-width: 900px) {
.research-numbers { grid-template-columns: repeat(2, 1fr); }
.research-num { border-bottom: 1px solid var(--line-2); }
.research-num:nth-child(2n) { border-right: 0; }
.research-num:nth-last-child(-n+2) { border-bottom: 0; }
}
.research-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 1000px) { .research-grid { grid-template-columns: 1fr; } }
/* Publications column */
.pubs {
background: var(--white);
border: 1px solid var(--line);
border-radius: 20px;
padding: 36px 40px;
}
.pubs-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line-2);
gap: 16px; flex-wrap: wrap;
}
.pubs-head h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 22px;
letter-spacing: -0.015em;
line-height: 1.2;
}
.pubs-head .pubs-count {
font-size: 12px; font-weight: 600;
color: var(--accent);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pubs-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
}
.pub {
padding: 20px 0;
border-bottom: 1px solid var(--line-2);
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: start;
}
.pub:last-child { border-bottom: 0; }
.pub-year {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 22px;
color: var(--accent);
letter-spacing: -0.01em;
line-height: 1;
padding-top: 2px;
}
.pub-title {
font-size: 14.5px;
color: var(--ink);
line-height: 1.45;
font-weight: 500;
letter-spacing: -0.005em;
margin-bottom: 6px;
}
.pub-cite {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-style: italic;
font-weight: 400;
font-size: 13px;
color: var(--mute);
line-height: 1.45;
}
.pub-cite strong {
font-style: normal;
font-weight: 600;
color: var(--ink-2);
}
.pub-tag {
display: inline-block;
margin-top: 8px;
font-size: 10.5px;
font-weight: 700;
color: var(--accent);
background: var(--accent-tint);
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pubs-footer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--line-2);
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.pubs-footer .small {
font-size: 12.5px;
color: var(--mute);
}
@media (max-width: 600px) {
.pubs { padding: 28px 24px; }
.pub { grid-template-columns: 1fr; gap: 6px; }
.pub-year { font-size: 18px; }
}
/* Right column: speaking + affiliations */
.speak-col { display: flex; flex-direction: column; gap: 24px; }
.speaking {
background: var(--ink);
color: var(--paper);
border-radius: 20px;
padding: 32px 32px 28px;
position: relative;
overflow: hidden;
}
.speaking::after {
content: ""; position: absolute;
width: 240px; height: 240px;
bottom: -120px; right: -100px;
background: radial-gradient(circle, rgba(26,90,145,0.32), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.speaking .eyebrow {
color: var(--accent-soft);
margin-bottom: 14px;
position: relative;
}
.speaking .eyebrow::before { background: var(--accent-soft); }
.speaking h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: 22px;
letter-spacing: -0.015em;
line-height: 1.22;
position: relative;
margin-bottom: 22px;
}
.speaking h3 em { font-style: italic; font-weight: 300; color: var(--accent-soft); }
.talk {
position: relative;
padding: 16px 0;
border-top: 1px solid rgba(247,249,252,0.12);
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 12px;
align-items: baseline;
}
.talk:last-child { padding-bottom: 4px; }
.talk-year {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 15px;
color: var(--accent-soft);
letter-spacing: 0.02em;
}
.talk-title {
font-size: 13.5px;
color: var(--paper);
line-height: 1.4;
font-weight: 500;
}
.talk-where {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-style: italic;
font-size: 12px;
color: rgba(247,249,252,0.6);
text-align: right;
white-space: nowrap;
}
@media (max-width: 500px) {
.talk { grid-template-columns: 60px 1fr; }
.talk-where { grid-column: 1 / -1; text-align: left; }
}
/* Affiliations card */
.affiliations {
background: var(--white);
border: 1px solid var(--line);
border-radius: 20px;
padding: 28px 32px 24px;
}
.affiliations h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 18px;
letter-spacing: -0.012em;
line-height: 1.2;
margin-bottom: 18px;
}
.affil-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
}
.affil-list li {
padding: 12px 0;
border-bottom: 1px solid var(--line-2);
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: center;
}
.affil-list li:last-child { border-bottom: 0; }
.affil-list .a-mark {
width: 32px; height: 32px;
border: 1px solid var(--accent-soft);
border-radius: 6px;
display: grid; place-items: center;
color: var(--accent);
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 600;
font-size: 13px;
letter-spacing: -0.02em;
}
.affil-list .a-name {
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.3;
font-weight: 500;
}
.affil-list .a-sub {
display: block;
font-size: 11.5px;
color: var(--mute);
font-weight: 400;
margin-top: 2px;
}
.testi-band {
background: var(--accent-tint);
}
.testi-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
@media (max-width: 1000px) { .testi-grid { grid-template-columns: 1fr; } }
.testi {
background: var(--white);
border: 1px solid var(--line);
border-radius: 22px;
padding: 32px;
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition:
border-color .4s var(--ease-soft),
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
}
.testi:hover {
border-color: var(--accent-soft);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.testi .stars { color: var(--accent); font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testi blockquote {
margin: 0;
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: 19px;
line-height: 1.45;
color: var(--ink);
letter-spacing: -0.01em;
flex: 1;
}
.testi .who {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 12px;
}
.testi .who .av {
width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); flex-shrink: 0;
}
.testi .who .name { font-weight: 600; font-size: 14px; }
.testi .who .meta { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
/* ---------- Patient benefits ---------- */
.benefits-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1000px) { .benefits-grid { grid-template-columns: 1fr; } }
.benefit {
background: var(--white);
border-radius: 22px;
border: 1px solid var(--line);
padding: 32px;
box-shadow: var(--shadow-sm);
transition:
border-color .4s var(--ease-soft),
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
}
.benefit:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.benefit .icon-wrap {
width: 52px; height: 52px;
background: var(--accent);
color: var(--white);
border-radius: 14px;
display: grid; place-items: center;
margin-bottom: 22px;
}
.benefit h3 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 22px;
letter-spacing: -0.012em;
line-height: 1.2;
margin-bottom: 10px;
}
.benefit p { font-size: 14.5px; color: var(--mute); line-height: 1.55; }
.benefit .more {
margin-top: 18px;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600; color: var(--accent);
}
/* ---------- Book / lead magnet ---------- */
.book {
background: var(--ink); color: var(--paper);
border-radius: 28px;
padding: 72px 72px;
display: grid; grid-template-columns: 5fr 7fr;
gap: 64px; align-items: center;
position: relative;
overflow: hidden;
}
@media (max-width: 1000px) { .book { grid-template-columns: 1fr; padding: 48px; gap: 40px; } }
@media (max-width: 600px) { .book { padding: 32px 24px; border-radius: 20px; } }
.book::before {
content: ""; position: absolute;
top: -120px; right: -120px;
width: 360px; height: 360px;
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
opacity: 0.4;
border-radius: 50%;
pointer-events: none;
}
.book .img-ph { aspect-ratio: 3/4; max-width: 320px; margin: 0 auto;
background: linear-gradient(160deg, #1f3a5e, #0c1a2e);
box-shadow: var(--shadow-lg);
}
.book h2 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1; /* italic descender clearance */
letter-spacing: -0.022em;
margin: 16px 0 20px;
padding-bottom: 0.08em;
max-width: 18ch;
}
.book h2 em { font-style: italic; font-weight: 300; color: var(--accent-soft); }
.book .lede {
font-size: 16.5px; line-height: 1.55;
color: rgba(248,244,237,0.78);
max-width: 52ch;
}
.book ul.toc {
list-style: none; padding: 0;
margin: 24px 0 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px;
}
@media (max-width: 600px) { .book ul.toc { grid-template-columns: 1fr; } }
.book ul.toc li {
font-size: 14px; color: rgba(248,244,237,0.85);
display: flex; gap: 10px; align-items: flex-start;
}
.book ul.toc li::before {
content: ""; width: 14px; height: 14px; flex-shrink: 0;
background: var(--accent-soft);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
margin-top: 3px;
}
.book form { margin-top: 28px; max-width: 480px; position: relative; z-index: 1; }
.book form .row { display: flex; gap: 8px; }
.book form input {
flex: 1; padding: 15px 20px;
background: rgba(248,244,237,0.08);
border: 1px solid rgba(248,244,237,0.2);
border-radius: 999px;
color: var(--paper);
font: inherit; font-size: 15px;
outline: none;
transition: border-color .2s, background .2s;
}
.book form input::placeholder { color: rgba(248,244,237,0.5); }
.book form input:focus { border-color: var(--accent-soft); background: rgba(248,244,237,0.12); }
.book .fineprint { margin-top: 14px; font-size: 12px; color: rgba(248,244,237,0.55); }
@media (max-width: 520px) { .book form .row { flex-direction: column; } }
/* ---------- FAQ ---------- */
.faq-list { margin: 16px auto 0; max-width: 980px; }
.faq {
border-bottom: 1px solid var(--line);
padding: 4px 0;
}
.faq summary {
list-style: none;
padding: 22px 0;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 500;
font-size: 20px;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev {
width: 32px; height: 32px;
border: 1px solid var(--line);
border-radius: 50%;
display: grid; place-items: center;
flex-shrink: 0;
transition: transform .25s, background .25s, color .25s, border-color .25s;
color: var(--ink);
}
.faq[open] .chev { transform: rotate(45deg); background: var(--accent); color: var(--white); border-color: var(--accent); }
.faq summary:hover .chev { border-color: var(--accent); color: var(--accent); }
.faq[open] summary:hover .chev { color: var(--white); }
.faq .ans {
padding: 0 60px 24px 0;
color: var(--mute);
font-size: 15.5px;
line-height: 1.6;
max-width: 70ch;
}
/* ---------- Final CTA ---------- */
.final {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
color: var(--paper);
border-radius: 32px;
padding: 96px 64px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 30px 80px rgba(22,60,111,0.20),
0 8px 24px rgba(11,17,24,0.08);
}
@media (max-width: 720px) { .final { padding: 64px 28px; border-radius: 20px; } }
.final::before, .final::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.final::before {
width: 400px; height: 400px;
top: -200px; left: -100px;
background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
}
.final::after {
width: 320px; height: 320px;
bottom: -160px; right: -80px;
background: radial-gradient(circle, rgba(31,27,26,0.2), transparent 70%);
}
.final .inner { position: relative; max-width: 760px; margin: 0 auto; }
.final h2 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(32px, 5vw, 64px);
line-height: 1.08; /* italic descender clearance */
letter-spacing: -0.024em;
margin: 20px 0 20px;
padding-bottom: 0.1em;
}
.final h2 em { font-style: italic; font-weight: 300; color: var(--accent-soft); }
.final p { font-size: 17px; line-height: 1.55; color: rgba(248,244,237,0.85); max-width: 52ch; margin: 0 auto; }
.final .actions {
margin-top: 36px;
display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.final .btn-light { background: var(--paper); color: var(--accent); }
.final .btn-light:hover { background: var(--white); }
.final .btn-outline-light { background: transparent; color: var(--paper); border-color: rgba(248,244,237,0.5); }
.final .btn-outline-light:hover { background: rgba(248,244,237,0.1); border-color: var(--paper); }
.final .eyebrow { color: var(--accent-soft); }
.final .eyebrow::before { background: var(--accent-soft); }
/* ---------- Footer ---------- */
footer.site {
background: var(--ink); color: var(--paper);
padding: 80px 0 28px;
}
.foot-grid {
display: grid; grid-template-columns: 5fr 7fr;
gap: 72px;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; gap: 48px; } }
.foot-brand .brand { color: var(--paper); }
.foot-brand .brand-name { color: var(--paper); }
.foot-brand .brand-sub { color: rgba(248,244,237,0.6); }
.foot-blurb {
margin-top: 20px;
color: rgba(248,244,237,0.75);
font-size: 14.5px;
line-height: 1.6;
max-width: 36ch;
}
.foot-addr {
margin-top: 22px;
font-style: normal;
font-size: 14px;
color: rgba(248,244,237,0.7);
line-height: 1.7;
}
.foot-addr a { color: var(--accent-soft); }
.foot-nav {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
@media (max-width: 700px) { .foot-nav { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.foot-nav h4 {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-soft);
margin-bottom: 18px;
}
.foot-nav ul { list-style: none; padding: 0; margin: 0; }
.foot-nav li { padding: 6px 0; }
.foot-nav a { color: rgba(248,244,237,0.78); font-size: 14.5px; }
.foot-nav a:hover { color: var(--paper); }
.foot-references {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid rgba(248,244,237,0.15);
}
.foot-references h4 {
color: var(--paper);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 10px;
}
.foot-references .ref-blurb {
color: rgba(248,244,237,0.65);
font-size: 13.5px;
margin: 0 0 14px;
max-width: 780px;
}
.foot-references .ref-list {
list-style: disc;
padding-left: 20px;
margin: 0;
color: rgba(248,244,237,0.70);
font-size: 13.5px;
line-height: 1.55;
}
.foot-references .ref-list li { margin: 4px 0; }
.foot-references .ref-list a { color: var(--paper); text-decoration: underline; }
.foot-references .ref-list a:hover { color: var(--paper); }
.legal {
margin-top: 56px; padding-top: 22px;
border-top: 1px solid rgba(248,244,237,0.15);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
font-size: 12.5px;
color: rgba(248,244,237,0.55);
}
.legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.legal a:hover { color: var(--paper); }
.skip { position: absolute; left: -9999px; }
/* simple silhouette helper for image placeholders */
.body-silhouette {
position: absolute;
bottom: 0; right: 10%;
width: 56%;
height: 92%;
background: linear-gradient(180deg, rgba(26,90,145,0.0) 0%, rgba(26,90,145,0.18) 100%);
border-radius: 50% 50% 0 0 / 25% 25% 0 0;
opacity: 0.5;
}
/* ---------- Real Relief / Carole's Story ----------
Editorial 2-column: text + video poster (lite-YouTube pattern, click goes to YT).
Below: full-width documented case image as clinical proof.
*/
.relief { background: var(--paper-2); }
.relief-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 64px;
align-items: center;
}
.relief-text .eyebrow { margin-bottom: 0; }
.relief-text h2 {
font-family: 'Fraunces', 'Fraunces Fallback', serif;
font-weight: 400;
font-size: clamp(32px, 4.4vw, 52px);
line-height: 1.1;
letter-spacing: -0.022em;
margin-top: 16px;
padding-bottom: 0.08em;
}
.relief-text h2 em { font-style: italic; font-weight: 300; color: var(--accent); }
.relief-text .lede {
margin-top: 20px;
font-size: 17px;
line-height: 1.6;
color: var(--mute);
max-width: 50ch;
}
.relief-text .btn { margin-top: 32px; }
.relief-video {
position: relative;
display: block;
border-radius: 22px;
overflow: hidden;
aspect-ratio: 16/9;
isolation: isolate;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 0 0 1px rgba(22,60,111,0.06),
0 30px 80px rgba(26,90,145,0.14),
0 8px 24px rgba(11,17,24,0.06);
transition:
transform .5s var(--ease-soft),
box-shadow .5s var(--ease-soft);
cursor: pointer;
}
.relief-video:hover {
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 0 0 1px var(--accent),
0 38px 90px rgba(26,90,145,0.22),
0 10px 28px rgba(11,17,24,0.08);
}
.relief-video:active { transform: translateY(-1px); }
.relief-video img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transition: transform .8s var(--ease-soft);
}
.relief-video:hover img { transform: scale(1.03); }
/* Bottom gradient for the white label legibility */
.relief-video::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 50%;
background: linear-gradient(180deg, rgba(11,17,24,0) 0%, rgba(11,17,24,0.55) 100%);
z-index: 1;
pointer-events: none;
}
.relief-video .video-label {
position: absolute;
bottom: 24px; left: 28px;
z-index: 2;
color: var(--paper);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.relief-video .play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 84px; height: 84px;
border-radius: 50%;
background: rgba(255,255,255,0.96);
display: grid;
place-items: center;
color: var(--accent);
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 8px 24px rgba(11,17,24,0.25);
transition:
transform .35s var(--ease-spring),
background .25s var(--ease-soft);
}
.relief-video .play-btn svg {
margin-left: 4px; /* optical centering of the triangle */
}
.relief-video:hover .play-btn {
transform: translate(-50%, -50%) scale(1.08);
background: var(--white);
}
/* Soft pulse on the play button to invite interaction */
@media (prefers-reduced-motion: no-preference) {
.relief-video .play-btn::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.45);
animation: relief-pulse 2.4s var(--ease-soft) infinite;
pointer-events: none;
}
@keyframes relief-pulse {
0% { transform: scale(1); opacity: 0.85; }
80% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
}
.relief-proof {
margin: 72px 0 0;
border-radius: 22px;
overflow: hidden;
background: var(--white);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.relief-proof img {
display: block;
width: 100%;
height: auto;
}
.relief-proof figcaption {
padding: 18px 28px;
font-size: 13.5px;
color: var(--mute);
border-top: 1px solid var(--line-2);
text-align: center;
font-style: italic;
font-family: 'Fraunces', 'Fraunces Fallback', serif;
}
.relief-proof figcaption strong {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-style: normal;
color: var(--ink);
font-weight: 600;
}
@media (max-width: 1000px) {
.relief-grid { grid-template-columns: 1fr; gap: 40px; }
.relief-video .play-btn { width: 68px; height: 68px; }
.relief-proof { margin-top: 48px; }
}
@media (max-width: 600px) {
.relief-video .video-label { font-size: 12px; bottom: 16px; left: 18px; }
.relief-video .play-btn { width: 56px; height: 56px; }
}
.lab-article { padding: 56px 0 80px; }
.lab-article .wrap { max-width: 820px; }
.lab-article .eyebrow { color: var(--brand, #1a5a91); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.lab-article h1 { font-family: "Fraunces", 'Fraunces Fallback', Georgia, serif; font-size: clamp(34px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--ink, #0B1118); }
.lab-article h1 .em { font-style: italic; font-weight: 300; color: var(--brand, #1a5a91); }
.lab-article .lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-2, #2A3540); max-width: 64ch; margin: 0 0 22px; }
.lab-article .meta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 24px; }
.lab-article .btn { font-size: 14px; }
.lab-article h2 { font-family: "Fraunces", 'Fraunces Fallback', Georgia, serif; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; margin: 40px 0 10px; color: var(--ink, #0B1118); }
.lab-article h3 { font-family: "Inter", 'Inter Fallback', system-ui, sans-serif; font-size: 17px; margin: 24px 0 6px; color: var(--ink, #0B1118); }
.lab-article p, .lab-article li { font-size: 16px; line-height: 1.65; color: var(--ink-2, #2A3540); }
.lab-article p { margin: 0 0 14px; }
.lab-article ul, .lab-article ol { margin: 0 0 16px; padding-left: 22px; }
.lab-article li { margin: 4px 0; }
.lab-article blockquote { margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--brand, #1a5a91); background: var(--paper-2, #ECF1F7); color: var(--ink, #0B1118); border-radius: 0 8px 8px 0; }
.lab-article .callout { padding: 18px 20px; background: var(--paper-2, #ECF1F7); border: 1px solid var(--brand-soft, #c8d6e6); border-radius: 12px; margin: 22px 0; }
.lab-article .callout h3 { margin-top: 0; color: var(--brand, #1a5a91); }
.lab-article .check-list { list-style: none; padding-left: 0; }
.lab-article .check-list li { position: relative; padding-left: 28px; margin: 8px 0; }
.lab-article .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand, #1a5a91); font-weight: 700; }
.lab-article table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.lab-article table th, .lab-article table td { padding: 10px 12px; border: 1px solid var(--line, #D4DCE6); text-align: left; vertical-align: top; }
.lab-article table th { background: var(--paper-2, #ECF1F7); color: var(--brand, #1a5a91); font-weight: 600; }
.lab-article .related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line, #D4DCE6); }
.lab-article .related h3 { font-size: 12px; color: var(--brand, #1a5a91); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; font-weight: 600; }
.lab-article .related .links { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-article .related a { display: inline-block; padding: 7px 14px; font-size: 13px; background: var(--paper-2, #ECF1F7); color: var(--brand, #1a5a91); border-radius: 14px; text-decoration: none; border: 1px solid var(--brand-soft, #c8d6e6); }
.lab-article .related a:hover { background: var(--brand, #1a5a91); color: white; }
.lab-article .cite-ref { font-size: 0.68em; line-height: 0; vertical-align: super; margin-left: 1px; }
.lab-article .cite-ref a { color: var(--brand, #1a5a91); text-decoration: none; font-weight: 600; }
.lab-article .cite-ref a:hover { text-decoration: underline; }
.lab-article .article-sources { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line, #D4DCE6); font-size: 12.5px; line-height: 1.55; color: var(--muted, #6b7280); display: flex; flex-direction: column; gap: 4px; }
.lab-article .article-sources strong { color: var(--brand, #1a5a91); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.lab-article .article-sources a { color: var(--brand, #1a5a91); }
.lab-article .cta-block { margin-top: 40px; padding: 28px 30px; background: linear-gradient(135deg, var(--brand, #1a5a91) 0%, #245fa0 100%); color: white; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.15); }
.lab-article .cta-block h3 { color: white; font-family: "Fraunces", 'Fraunces Fallback', Georgia, serif; font-size: 22px; margin: 0 0 8px; }
.lab-article .cta-block p { color: rgba(255,255,255,0.92); margin: 0 0 16px; font-size: 14px; }
.lab-article .cta-block .btn-light { display: inline-block; padding: 10px 22px; background: white; color: var(--brand, #1a5a91); font-weight: 600; border-radius: 6px; text-decoration: none; font-size: 14px; }
.lab-article .cta-block .btn-light:hover { background: rgba(255,255,255,0.92); }
.lab-article .cta-block .or-call { color: rgba(255,255,255,0.85); font-size: 13px; margin-left: 14px; }
.lab-article .cta-block .or-call a { color: white; text-decoration: underline; }
/* Phase 11a — prominent, distinct full-width end-of-content CTA band. Breaks out
of the article column (sits after in ) so it reads as a clear,
calm conversion band, not another in-column box. One per page (build-injected). */
.cta-band { margin-top: 56px; background: linear-gradient(135deg, var(--brand, #1a5a91) 0%, #245fa0 100%); color: #fff; padding: 44px 0; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band-text { flex: 1 1 380px; }
.cta-band-title { font-family: "Fraunces", 'Fraunces Fallback', Georgia, serif; font-size: 27px; line-height: 1.2; font-weight: 600; margin: 0 0 8px; color: #fff; }
.cta-band-sub { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.92); max-width: 580px; }
.cta-band-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cta-band .btn-lg { min-height: 52px; padding: 8px 8px 8px 26px; font-size: 15px; }
.cta-band .btn-primary { background: #fff; color: var(--brand, #1a5a91); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.cta-band .btn-primary:hover { background: rgba(255,255,255,0.92); }
.cta-band .btn-primary .arrow { background: rgba(26,90,145,0.14); color: var(--brand, #1a5a91); }
.cta-band .btn-primary:hover .arrow { background: rgba(26,90,145,0.22); }
.cta-band-or { font-size: 13px; color: rgba(255,255,255,0.85); }
.cta-band-or a { color: #fff; text-decoration: underline; }
@media (max-width: 760px) {
.cta-band { padding: 34px 0; }
.cta-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
.cta-band-title { font-size: 23px; }
.cta-band-actions { width: 100%; }
}
/* mobile: hide header phone icon so it cannot collide with the long brand name */
@media (max-width: 720px) {
.header-phone { display: none; }
}
/* mobile: hide the redundant top promo bar — the floating bottom CTA bar (.mobile-cta) covers CTAs <=720px */
@media (max-width: 720px) {
.promo { display: none; }
}
/* mobile (<=720, where the floating .mobile-cta bar exists): header = logo + hamburger only; floater is the sole CTA surface */
@media (max-width: 720px) {
.navcta .primary-on-sm { display: none; }
}
/* === BREADCRUMB === (added by Phase 7 SEO pass) */
.breadcrumb { background: var(--paper-2, #ECF1F7); border-bottom: 1px solid var(--line, #D4DCE6); padding: 10px 0; }
.breadcrumb .wrap { display: flex; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted, #6b7280); }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--muted, #8b95a1); margin-right: 2px; }
.breadcrumb a { color: var(--brand, #1a5a91); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: var(--ink-2, #2A3540); font-weight: 600; }
/* === Footer muted line (pending medical review) === */
.legal .muted-line { color: var(--muted, #8b95a1); font-size: 11px; }
.legal .muted-line a { color: var(--muted, #8b95a1); text-decoration: underline; }
.legal .muted-line em { font-style: italic; }
/* Vertical YouTube Short embed (9:16) — capped at 360px wide, centered.
Distinct from the Carole 16:9 landscape pattern. */
.short-frame { width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 14px 36px rgba(0,0,0,.22); }
.short-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* === Glitch fixes 2026-06-03 (PM): robust FAQ summary (inline-element + wpautop safe) + CTA-band contrast on inner pages === */
.faq summary { display: block; position: relative; padding-right: 56px; }
.faq summary .chev { position: absolute; right: 0; top: 19px; }
.lab-article .cta-band-title { color: #fff; }
.lab-article .cta-band-sub { color: rgba(255,255,255,0.92); }
.lab-article .cta-band-or { color: rgba(255,255,255,0.85); }
.lab-article .cta-band-or a { color: #fff; }
/* === CLS fix 2026-06-03: metric-matched web-font fallbacks (zero-reflow swap).
Computed from real Fraunces + Inter font files via fontTools (OS/2 +
hhea + head) using the next/font + fontaine + Capsize algorithm:
size_adjust = (target.xAvgCharWidth / target.upm)
/ (fallback.xAvgCharWidth / fallback.upm)
override(metric) = target.metric / target.upm / size_adjust * 100%
Fraunces target → Georgia fallback. Inter target → Arial fallback.
The fallback @font-face below maps a synthetic family name to the local
system font, then rewrites the ascent/descent/line-gap/size-adjust to
make the system glyphs occupy the same vertical metrics as the real
web font. When the web font swaps in, no reflow occurs.
These two @font-face declarations are paired with the Fraunces / Inter
stack rewrites above (each ', ...' now reads
', Fallback, ...'). */
@font-face {
font-family: 'Fraunces Fallback';
src: local('Georgia'), local('Times New Roman');
size-adjust: 98.96%;
ascent-override: 98.83%;
descent-override: 25.77%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica');
size-adjust: 146.24%;
ascent-override: 66.24%;
descent-override: 16.49%;
line-gap-override: 0%;
}
/* === logo badge image (2026-06-11) === */
img.brand-mark { display:block; background:none; border-radius:0; padding:0; object-fit:contain; }
.foot-brand img.brand-mark { background:var(--paper); border-radius:50%; padding:3px; }