/* ============================================================
CAR T-Cell Therapy China β V2 (Editorial / Xymera-inspired)
- Cormorant Garamond (display/headings >=24px) + Source Sans 3 (everything
else) + Atkinson Hyperlegible (criteria table, forms, CTAs).
[DECISION - Jacob, 4 Aug 2026]. Cormorant reinstated: the chrome spec 4
prohibition rested on the false claim that it was never implemented, when
this file had been loading and applying it on all 36 pages. DM Sans stays
out - Source Sans 3 for body was decided on the merits.
Loaded by the page-level only; the old @import is NOT restored.
- Bigger, more dramatic editorial display
- Clinic palette β cool neutrals + terracotta (swappable via data-palette)
`[DECISION - Jacob, 7 Aug 2026]`. Was sage/cream/coral until that date;
the warm palette is intact at :root[data-palette="sage"], not deleted.
============================================================ */
/* ---------- Palette 1: Sage & Coral β now at data-palette="sage" ---------- */
/* ================================================================
π΄ DEFAULT PALETTE β Palette 7a "Clinic + terracotta"
`[DECISION β Jacob, 7 Aug 2026]`
================================================================
β οΈ THIS SUPERSEDES the sage/cream default that shipped until 7 Aug.
The warm palette is NOT deleted β it moves intact, comments and all,
to :root[data-palette="sage"] below and is one attribute away.
WHY: Dr. Zhou asked for something closer to suhhealth.com. Sampling
that site returned blue/navy/grey (#1D64C8 at 266 uses, #242F43 navy,
#97A3B7 slate) β no teal anywhere, despite "teal" being the word used.
Jacob ruled out the corporate blue itself, kept the cool neutral
direction, and chose the terracotta accent over the slate-blue one.
π΄ THE THREE SCHEMES, all live, switched by one attribute on :
(nothing) β 7a Clinic + terracotta β DEFAULT
data-palette="sage" β the original warm cream/sage
data-palette="clinic-slate" β 7b Clinic + slate blue
β οΈ WHY THE ACCENT MAPPING STAYS IN :root AND THE VARIANTS ONLY SET
--coral*: solid.css:22 remaps --accent with a plain `:root` and wins on
load order alone. If a palette block set --accent directly it would
carry [data-palette] specificity (0,2,0), beat solid.css (0,1,0), and
silently kill the sage accent on both solid-tumour pages. Setting only
--coral* keeps --accent: var(--coral) resolving at use time at the
original specificity. β Do not "simplify" this by moving --accent into
the variant blocks.
β οΈ THE LOGO still does not follow these tokens (see the accent note
below). 7a uses terracotta, so the existing lockup is already correct
and no new artwork is needed. 7b has no logo β it renders the
terracotta mark until one is drawn.
---------------------------------------------------------------- */
:root {
/* Grounds β three steps, same relationship the warm palette had:
bg-card lighter than bg, bg-alt deeper. */
--bg: #FAFBFC; /* near-white, faintly cool */
--bg-alt: #F1F3F6; /* deeper, for alternate sections */
--bg-card: #FFFFFF; /* card / inset */
/* The structural family. Still named "sage" so all 299 accent/panel
declarations across 24 sheets keep working untouched β the names are
structural roles now, not colour descriptions. */
--sage-pale: #E8EDF3; /* panel wash */
/* β FILL ONLY, never text β 2.46:1 on --bg. This is Jacob's #97A3B7,
which was a text colour in his swatch and could not stay one. On
suhhealth.com it is a border/fill tone too. --slate-mid below picks
up the secondary-text job at a legible weight. */
--sage-mid: #97A3B7;
/* 6.75 / 6.29 / 7.00 / 5.94 on bg / bg-alt / bg-card / sage-pale.
Colours most eyebrows site-wide and is the programme accent on the
two solid-tumour pages (solid.css remaps --accent to it), so it has
to clear 4.5:1 on every ground β it does, with margin. */
--sage-deep: #4A5A73;
--sage-ink: #242F43; /* Jacob's navy */
/* Editorial dark */
--ink: #1A2130;
--ink-soft: #2B3444;
/* ============================================================
π΄ ACCENT SCHEME β ONE SWITCH `[UNDER REVIEW β Jacob, 7 Aug 2026]`
============================================================
The site is EITHER coral OR terracotta. Never a mix.
TO SWITCH: comment out the active block, uncomment the other, and copy the
matching logo over the two live files:
assets/cart-lockup-.svg -> assets/cart-lockup.svg
assets/cart-lockup-cream-.svg -> assets/cart-lockup-cream.svg
β οΈ The logo is the ONLY thing not driven by these tokens. Its Y mark is a
hardcoded hex inside the SVG, and an cannot read a CSS variable.
`content: url(var(--x))` was tried and collapses the image to 0 width, so
both variants are kept on disk instead. Everything else on the site β 97
declarations across 22 sheets β reads the three tokens below.
π΄ THE DIVISION OF LABOUR, and it holds in every scheme and palette:
β --accent is DECORATION AND FILL ONLY. Never text. It is 3.63:1 on the
clinic ground and 2.59:1 on the sage cream β both fail the 4.5:1
normal-text threshold, and the coral scheme also fails the 3:1
large-text one. Asterisk, dots, rules, borders, hover washes,
progress bars β yes. Words β no.
π΄ --accent-deep is the ONLY accent permitted on text.
β --coral-soft is a DARK-PANEL colour (6.37:1 on the clinic dark, 7.61 on
the sage dark, 1.56β1.87 on any light ground).
β Never put it on a light ground β that was the /medical-team defect.
---------- TERRACOTTA (active) ----------
accent-deep clears AA on both palettes: 5.77 / 5.20 / 4.90 on the clinic
grounds, 4.94 on the sage cream. White on the fill 3.76:1 β fill only. */
--coral: #C16C60;
--coral-soft: #CE958C;
--coral-deep: #9C5043;
/* ---------- CORAL (original) β swap the three lines above for these ----
--coral: #D97A6C;
--coral-soft: #E8A89E;
--coral-deep: #B05A4C;
β οΈ accent-deep on cream is 4.08:1 in this scheme β under the 4.5 AA line.
The division of labour above still applies and still moves accent text up
from 2.59:1, but the coral scheme does NOT reach AA on accent text.
------------------------------------------------------------------- */
/* ============================================================
π΄ HEADING EMPHASIS β ONE SWITCH `[Jacob, 7 Aug 2026]`
============================================================
Whether an inside a heading takes the accent colour, or is carried by
the italic alone. Both were built and compared; colour is active because it
gives the page more life. β Do not re-add `color` to a page-sheet heading
em rule β 56 of those were removed so this switch could exist. One place.
β οΈ TWO tokens, and they flip together. A dark CTA panel needs a LIGHT tone:
--accent-deep is 1.4:1 on --bg-dark and would vanish. The seven dark panels
below re-point --heading-em at --heading-em-dark locally, so the cascade
does the work and no panel needs its own colour rule.
---------- COLOUR (active) ---------- */
--heading-em: var(--accent-deep);
--heading-em-dark: var(--coral-soft);
/* ---------- ITALIC ONLY β swap the two lines above for these ----
--heading-em: inherit;
--heading-em-dark: inherit;
Measured either way: 0 AA failures. Colour is 4.94:1 on cream, italic-only
inherits --fg-strong at ~13:1.
---------------------------------------------------------------- */
/* Button fill β navy. Was #4A3A30 warm brown in the sage palette. */
--btn-fill: #242F43;
--btn-fill-hi: #33405A;
/* Button fill on a DARK panel. --btn-fill is 1.20:1 on --bg-dark, so the
primary CTA had no readable shape at all on the three dark closing
panels β the label was legible and the button was not.
π΄ It cannot be --accent. The label is 15px/500, which is normal text at
4.5:1, and NOTHING clears that on #C16C60: white is 3.76 and ink 4.28.
A fill light enough to read against the dark ground is too light to
carry white text, so the button inverts β light terracotta, ink label.
β Do not point this at --coral. In the coral scheme --coral IS #D97A6C
and it would work; in the default terracotta scheme it is #C16C60 and
the label silently drops below 4.5:1. Its own token, deliberately.
[DECISION β Jacob, 9 Aug 2026] */
--btn-fill-on-dark: #D97A6C;
--btn-fill-on-dark-hi: #E38F82;
/* Slate text scale */
--slate-light: #C8CEDA;
/* π΄ This one carries most small labels and secondary copy site-wide, so
it is the token that must clear 4.5:1 on all four grounds β the same
defect fixed in the warm palette on 7 Aug (#8C8278 β #6C645D). Not
worth reintroducing in a new palette. #5A6475 gives 5.77 / 5.38 /
5.98 / 5.08 on bg / bg-alt / bg-card / sage-pale.
β οΈ Jacob's swatch used #97A3B7 here. That measures 2.46:1 and cannot
carry text at any size; it lives on as --sage-mid, a fill token. */
--slate-mid: #5A6475;
--slate-dark: #3D4654;
/* Dark sections */
--bg-dark: #1A2130;
--bg-dark-alt: #242F43;
/* Semantic */
--fg: var(--slate-dark);
--fg-strong: var(--ink);
--fg-muted: var(--slate-mid);
--border: #D9DEE7;
--border-soft: rgba(36,47,67,0.10);
/* β Do NOT move these two into a [data-palette] block β see the
solid.css specificity note at the top of this section. */
--accent: var(--coral);
--accent-deep: var(--coral-deep);
--panel: var(--sage-pale);
--panel-ink: var(--sage-ink);
}
/* ================================================================
data-palette="sage" β the original warm palette, intact
================================================================
Shipped as the default until 7 Aug 2026. Moved here unchanged rather
than deleted: it is the fallback if the clinic direction is rejected,
and every value below is the AA-corrected version from that day's pass
(406 failures β 0), not the pre-fix original.
β Sets no --accent / --accent-deep, deliberately. Those stay mapped
from --coral* in :root so solid.css can still win. */
:root[data-palette="sage"] {
--bg: #F2EDE4; /* page cream β slightly warmer than v1 */
--bg-alt: #ECE6D9; /* a touch deeper for alternate sections */
--bg-card: #FAF7F1; /* card / inset cream */
--sage-pale: #DCE6DC;
--sage-mid: #A8BFA8;
/* π΄ Was #5F7A5F `[DECISION β Jacob, 7 Aug 2026]`. Same defect the coral had,
in the second accent: 4.06 / 3.81 / 4.43 / 3.70 on bg / bg-alt / bg-card /
sage-pale β all under 4.5:1, and this colours most eyebrows site-wide and
is the programme accent on the two solid-tumour pages (solid.css remaps
--accent to it). #536A53 gives 5.07 / 4.75 / 5.53 / 4.61, and white on it
goes 4.73 -> 5.91 so the chip fills clear too.
β οΈ --sage-pale is the binding ground, not the page cream. An intermediate
#546C54 computed 4.50 on paper and RENDERED 4.49 β right on the line and
the wrong side of it. #536A53 carries real margin. */
--sage-deep: #536A53;
--sage-ink: #2D3E2D;
/* Editorial dark β green-black, Γ la Xymera headlines */
--ink: #1F2A26;
--ink-soft: #2E3934;
/* Warm brown (button fill) */
--btn-fill: #4A3A30;
--btn-fill-hi: #5C463A;
--slate-light: #C8BFB4;
/* π΄ Was #8C8278 `[Jacob, 7 Aug 2026]`. That measured 3.23:1 on --bg, 3.03 on
--bg-alt, 3.52 on --bg-card and 2.94 on --sage-pale β every one below the
4.5:1 threshold. #6C645D is the LIGHTEST hue-preserving darkening that
clears it on all four grounds (4.96 / 4.65 / 5.41 / 4.51). */
--slate-mid: #6C645D;
--slate-dark: #4A4440;
--bg-dark: #2A2520; /* deep warm umber for credentials/footer */
--bg-dark-alt: #1F2A26; /* sage-ink alternative */
--border: #D8D0C2;
--border-soft: rgba(31,42,38,0.08);
}
/* ---------- Palette 3: Plum & Blush (histology / H&E stain) ---------- */
/* ---------- Palette 4: Coral Γ Plum (hybrid β warmth + sophistication) ---------- */
/* ---------- Palette 5: Garnet & Rose (softened β haematology) ---------- */
/* ---------- Palette 6: Amber & Oxblood (vitality) ---------- */
/* ================================================================
data-palette="clinic-slate" β Palette 7b, the slate-blue accent
================================================================
The runner-up. Kept live rather than deleted so it can be shown or
switched to without rebuilding it.
β NOT #1D64C8. Jacob ruled the corporate blue out explicitly. This is
a desaturated slate drawn from his own #97A3B7 and darkened until it
carries text: 6.30 / 5.88 / 6.53 / 5.55 on the four grounds.
β οΈ --coral-deep here is deliberately BLUER and darker than --sage-deep
(#3F5F8A vs #4A5A73). If they matched, the accent would collapse into
the structural family and the site would lose its second layer of
hierarchy β the same failure mode that rules navy out as an accent.
Keep them distinct.
β Sets no --accent / --accent-deep. See the solid.css note above. */
:root[data-palette="clinic-slate"] {
--coral: #6E86AD; /* fill only β 3.57:1, never text */
--coral-soft: #9FB0C9; /* dark panels only β 7.31 / 6.10 */
--coral-deep: #3F5F8A; /* the text accent */
}
/* β οΈ data-palette="clinic" is NOT a selector. 7a is the default and lives
in :root above β an explicit block would set --accent at [data-palette]
specificity and break solid.css, which is the whole reason the accent
mapping stays where it is. To force 7a, remove the attribute. */
/* ============================================================
TYPOGRAPHY
============================================================ */
:root {
/* π΄ The `β¦ Fallback` families are load-bearing, not decoration. They are
metric-matched faces defined in fonts.css: same line count, same block
height as the real font, so the swap when the woff2 lands moves nothing.
Without them mobile CLS was 0.236 on /journey. β Do not drop them from
these two lists β the generic families after them are still the real
fallback if the adjusted face cannot resolve a local font. */
--font-serif: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Garamond, Georgia, serif;
--font-sans: 'Source Sans 3', 'Source Sans 3 Fallback', system-ui, -apple-system, Helvetica, Arial, sans-serif;
/* ---------- Type scale `[TRIAL β 7 Aug 2026]` ----------
Raised for the 50+ audience. Age-related contrast-sensitivity loss degrades
thin strokes before small glyphs, so the weight change below matters more
than the size change β see the body rule.
π΄ Two scales, deliberately. Reading text is prose a patient must actually
read and has a 13px floor. Labels are uppercase/tracked ornament (eyebrows,
stat captions, chips) and stay small because raising them turns decoration
into noise. β Do not merge these into one ramp. */
--fs-note: 13px; /* footnotes, disclaimers, meta β the reading floor */
--fs-sm: 15px; /* card body, secondary and supporting copy */
--fs-body: 17px; /* primary body copy */
--fs-lede: 19px; /* lede */
/* ---------- Measure `[TRIAL β 7 Aug 2026]` ----------
π΄ `ch` is the width of the "0" glyph, which in Source Sans is WIDER than
an average lowercase letter. Measured on rendered lines, not assumed:
52ch β 61 characters Β· 56ch β 66 Β· 60ch β 80 Β· 70ch β 84 Β· 105ch β 122.
So roughly 1.2β1.25 characters per ch.
β Do NOT read a ch number as a character count. The site's 52β56ch caps
were already landing at 61β66 characters β the optimum for prose β so
widening them to 75ch would give ~94 characters and make the page HARDER
to read, not easier, for exactly the 50+ audience this site serves. The
comfortable band is 45β75 characters and shorter is safer for low vision.
These two tokens replace seven near-identical values (52/54/56/58/60/62
and 64/66/68/70/72/100) that were all doing the same job. */
--measure: 58ch; /* ~68 characters β standard prose */
--measure-wide: 66ch; /* ~78 characters β the practical maximum */
--lh-body: 1.65;
--lh-sm: 1.6;
--lh-note: 1.55;
/* UI + ornament β not prose, not subject to the 13px reading floor */
--fs-ui: 15px; /* nav, controls, buttons `[Jacob, 7 Aug 2026]` */
--fs-label: 12px; /* tracked uppercase labels */
--fs-label-sm: 11px; /* the smallest tracked labels */
/* Spacing */
--gutter: 40px;
--section-py: 128px;
--section-py-sm: 80px;
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
}
* { box-sizing: border-box; }
/* [hidden] must beat explicit display values (e.g. .nav-cta flex) */
[hidden] { display: none !important; }
/* π΄ weight 400, not 300. The chrome spec Β§4 has said "Source Sans **400**
body, **600** UI" since 4 Aug 2026; the CSS shipped 300 the whole time, so
this closes a spec violation rather than making a design change. It is also
the single largest legibility gain available here: a 300-weight stem is what
a reader with reduced contrast sensitivity loses first, before they lose a
small glyph. β Do not take this back to 300 to "lighten" the page. */
html, body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* height:auto is load-bearing, not tidying. Images carry intrinsic width/height
attributes so the browser can reserve their box before the bytes arrive (CLS).
The height attribute maps to a used height at the lowest precedence, so
without this any image CSS sizes by width alone would render squashed to its
intrinsic height. It changes nothing on its own β auto is already the default
β and every page rule that sets an explicit height or aspect-ratio still wins
on specificity. Do not remove it while the attributes are present. */
img { max-width: 100%; height: auto; display: block; }
/* Display family β Xymera-style large editorial serif */
.display {
font-family: var(--font-serif);
font-weight:500;
line-height: 1.02;
letter-spacing: -0.012em;
color: var(--fg-strong);
text-wrap: balance;
margin: 0;
}
.display.hero { font-size: clamp(56px, 8.4vw, 132px); line-height: 0.98; letter-spacing: -0.018em; font-weight: 500; }
.display.x-large { font-size: clamp(48px, 5.4vw, 88px); }
.display.large { font-size: clamp(40px, 4.2vw, 68px); }
.display.medium { font-size: clamp(32px, 3.2vw, 48px); }
.display.small { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.18; }
/* Arrow glyphs are UI, not display type β Β§4 assigns UI to Source Sans at
any size. Declared once here rather than on the ~70 .arrow rules. */
.arrow { font-family: var(--font-sans); }
/* π΄ Emphasis in a display heading is carried by ITALIC, and inherits its
colour `[DECISION β Jacob, 7 Aug 2026]`.
This briefly set `color: var(--accent)` to fix a real inconsistency β of 106
heading s across 17 pages, 57 were coloured and 49 were not. It fixed the
inconsistency and introduced a contrast regression: --accent is 2.59:1 on
--bg, which fails not only the 4.5:1 normal-text threshold but the 3:1 LARGE
text threshold too. Those 49 headings went from ~13:1 to 2.59:1.
β Do not colour this with --accent. The bright coral is not usable for text
at any size on this cream β see the token block above. Inheriting --fg-strong
gives ~13:1, and the italic already carries the distinction; colour on top of
it was doubled emphasis.
β οΈ Spec Β§4 says "emphasis inside a display heading is carried by colour,
never by weight". Read in context that line is about NOT using bold β it
offers colour as the alternative to weight and does not consider italic, and
it predates the contrast measurement. Raised, not overruled silently. */
/* π΄ THE ONE PLACE heading emphasis is coloured. Driven by --heading-em, which
is a switch in the token block above (colour | italic only).
β οΈ .display em must be listed here even though `h1 em` covers most cases:
.display is (0,1,0) and `h1 em` is (0,0,2), so a bare `.display em { color:
inherit }` would outrank the element selector and pin those headings to
inherit regardless of the switch. Same reason .lead em and .verdict em are
here β they are display-scale text that carried colour before.
β Do not add `color` to a heading em rule in a page sheet. 56 such rules
were removed so this switch could exist; one re-added rule silently opts that
heading out of it. */
h1 em, h2 em, h3 em, h4 em,
.display em, .lead em, .verdict em {
color: var(--heading-em);
}
/* The seven dark panels that contain heading emphasis. They do not set a
colour β they re-point the token, so they follow the switch too. Measured, not
assumed: these are the containers whose painted background is below 0.2
relative luminance and which hold an inside a heading. */
/* β .credentials is NOT in this list, though base.css styles it dark. It is
used on index.html alone, and index.css repaints it LIGHT β adding it here
put --coral-soft on a cream ground at 2.17:1. Measured, caught, removed.
The list below is exactly what measurement returned; do not add to it by
eye. */
.rx-cta-panel,
.bio-gate-panel,
.co-exact-panel,
.hs-designation,
.hs-cta-panel,
.jn-cta-panel,
.wc-suh {
--heading-em: var(--heading-em-dark);
}
.display em {
font-style: italic;
font-weight: 500;
}
/* The signature coral asterisk */
.asterisk {
display: inline-block;
color: var(--accent);
font-family: var(--font-serif);
font-style: normal;
font-weight:500;
transform: translateY(-0.35em);
font-size: 0.55em;
line-height: 1;
margin-left: 0.04em;
padding-left: 0.04em;
}
/* Numeric display β big section numerals Γ la Xymera 01 02 */
.numeral {
font-family: var(--font-serif);
font-weight:500;
font-size: clamp(80px, 8vw, 140px);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--fg-strong);
font-feature-settings: "lnum";
}
.numeral.small { font-size: clamp(48px, 5vw, 80px); }
.numeral.muted { color: var(--slate-light); }
/* Eyebrow β small tracked label */
.eyebrow {
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sage-deep);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 18px; height: 1px;
background: currentColor;
display: inline-block;
}
.eyebrow.plain::before { display: none; }
.eyebrow.muted { color: var(--slate-mid); }
/* Tracking text β small ornamental tracking labels (TGAC vibe) */
.tracking-text {
font-family: var(--font-sans);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.6em;
text-transform: uppercase;
color: var(--slate-mid);
}
/* Body / lede */
p, .body {
margin: 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--slate-dark);
text-wrap: pretty;
}
.lede {
font-size: var(--fs-lede);
line-height: 1.55;
color: var(--slate-dark);
}
/* β οΈ --slate-mid on --bg is 3.23:1 β below the 4.5:1 AA threshold for normal
text. Captions carry real information (image credits, figure notes), so they
take --slate-dark at 8.2:1. --slate-mid survives only on genuine ornament. */
.caption {
font-size: var(--fs-note);
line-height: var(--lh-note);
color: var(--slate-dark);
letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
/* ============================================================
LAYOUT
============================================================ */
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 var(--gutter);
}
.container.narrow { max-width: 960px; }
section { padding: var(--section-py) 0; }
section.tight { padding: var(--section-py-sm) 0; }
/* ============================================================
NAV
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border-soft);
}
/* --nav-maxw matches .container above so the logo lines up with body copy.
It was 1440px β 60px wider than the content on all 36 pages β and nothing
needed the room: the nav's intrinsic width is 1063px (logo 269 + menu 448
+ CTA cluster 202 + 64 gap + 80 padding). journey.css already corrected
this for its own page; that override is now redundant and removed. */
.nav-inner {
max-width: min(var(--nav-maxw, 1320px), 100%);
margin: 0 auto;
padding: 18px var(--nav-padx, var(--gutter));
display: grid;
/* auto | 1fr | auto β the menu centres in the space BETWEEN the flanks,
not on the page axis. `1fr auto 1fr` made the flanking tracks equal, so
the 67px by which the logo (269) outweighs the CTA cluster (202) fell
entirely into the gaps: 127 / 194 at 1440, and 67 / 134 at 1200, where
the menu sat exactly twice as close to the logo as to the button. The
67px was constant at every width above 1100 β it is a difference of
flank content, not of viewport. Equal gaps at every width now, and the
tight side improves everywhere (58 / 58 at 1101, was 32 / 84).
β οΈ The trade: the menu's midpoint is ~33px right of the page centre.
Nothing below the nav references that axis. */
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 32px;
}
.nav-left {
display: flex;
align-items: center;
gap: 14px;
}
.nav-mark {
display: flex;
align-items: center;
gap: 14px;
}
.nav-icon {
height: 35px;
width: 35px;
display: block;
background: var(--accent);
-webkit-mask: url('assets/cart-icon.svg') no-repeat center / contain;
mask: url('assets/cart-icon.svg') no-repeat center / contain;
}
.nav-wordmark {
height: 34px;
width: auto;
display: block;
}
.nav-mark .glyph {
display: inline-block;
width: 26px; height: 14px;
color: var(--fg-strong);
}
.nav-mark .glyph svg { width: 100%; height: 100%; }
.nav-center {
display: flex;
align-items: center;
/* The middle track is 1fr, so .nav-center stretches across it; this centres
the items inside that stretch. Without it they left-align and the whole
point of the auto|1fr|auto change is lost. */
justify-content: center;
gap: 28px;
font-size: var(--fs-ui);
font-weight: 500;
/* β οΈ was --slate-mid (#8C8278) at 12px β 3.23:1 on --bg, a WCAG AA failure
for normal text (4.5:1). --slate-dark is 8.2:1. The nav is the one element
on every page, so it was the site's most-served contrast defect. */
color: var(--slate-dark);
}
.nav-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
transition: color 160ms var(--ease);
cursor: pointer;
}
/* β οΈ --slate-light (#C8BFB4) on --bg is 1.56:1 β effectively invisible, and at
10px it was decoration pretending to be information. Kept as ornament but
moved to --slate-mid (3.23:1), which clears the 3:1 bar that applies to
incidental/decorative text. β Do not use --slate-light for anything a
reader is expected to parse. */
.nav-item .n {
font-size: var(--fs-label-sm);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--slate-mid);
}
.nav-item:hover { color: var(--fg-strong); }
.nav-item.active { color: var(--fg-strong); }
.nav-item.active .n { color: var(--accent-deep); }
/* π΄ grid-column: 3 is load-bearing below 1100px. .nav-inner is a three-track
grid and .nav-center goes display:none at 1100 (see RESPONSIVE), which
removes it from flow β so auto-placement slid .nav-right into the middle
`auto` track and left track 3 empty. Measured: 403px of dead space to its
right at 1024, 235px at 768, 74px at 390. Pinning it to track 3 is a no-op
above 1100, where it already lands there. */
.nav-right {
grid-column: 3;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
font-size: var(--fs-ui);
font-weight: 500;
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--slate-dark);
cursor: pointer;
}
.nav-cta:hover { color: var(--fg-strong); }
.nav-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-card);
cursor: pointer;
color: var(--fg-strong);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 20px 14px 22px;
background: var(--btn-fill);
color: #F5F1E8;
border: 0;
border-radius: 6px;
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-ui);
letter-spacing: 0.04em;
cursor: pointer;
transition: background 160ms var(--ease), transform 160ms var(--ease);
text-transform: none;
}
.btn:hover { background: var(--btn-fill-hi); }
/* The three CTA panels that sit on --bg-dark. The other four closing panels
(.ab-cta-panel .bio-cta-panel .final-cta-panel .st-cta-panel) are on
--sage-pale or white, where --btn-fill is already 11β13:1 β β do not add
them here, it would make the button invisible on a light ground.
Listed by name rather than scoped to a shared class because the panels
live in three different page sheets and the button is chrome. */
.rx-cta-panel .btn,
.jn-cta-panel .btn,
.hs-cta-panel .btn {
background: var(--btn-fill-on-dark);
color: var(--ink);
}
.rx-cta-panel .btn:hover,
.jn-cta-panel .btn:hover,
.hs-cta-panel .btn:hover { background: var(--btn-fill-on-dark-hi); }
.btn:active { transform: scale(0.98); }
.btn .arrow {
display: inline-block;
transition: transform 200ms var(--ease);}
.btn:hover .arrow { transform: translateX(3px);}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
background: transparent;
border: 0;
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-ui);
color: var(--fg-strong);
letter-spacing: 0.02em;
cursor: pointer;
border-bottom: 1px solid var(--fg-strong);
padding-bottom: 4px;
}
.btn-ghost:hover { opacity: 0.6; }
.btn.on-dark { background: var(--bg-card); color: var(--ink); }
.btn.on-dark:hover { background: #fff; }
/* ============================================================
HERO β full-bleed photographic background
============================================================ */
.hero {
position: relative;
padding: 24px 0 72px;
overflow: hidden;
}
.hero.hero-bg {
background: none;
min-height: 680px;
}
/* Real photo layer on the right. The image is opaque + landscape, so we
fade its rectangle into the page cream with cream gradients stacked
ON TOP of the image (no CSS mask β reliable everywhere). */
.hero-photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60%;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 60%, transparent) 18%, transparent 38%),
linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 84%, var(--bg) 100%),
url('assets/hero-cart-cells.webp');
background-size: cover, cover, cover;
background-position: right center, right center, right center;
background-repeat: no-repeat, no-repeat, no-repeat;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 600px) 1fr;
gap: 56px;
align-items: start;
padding-top: 36px;
}
.hero-text { padding-bottom: 0; }
.hero-text .lede {
margin-top: 22px;
max-width: 540px;
color: var(--slate-dark);
}
.hero-ctas {
margin-top: 30px;
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
}
.hero-tags {
margin-top: 40px;
display: flex;
gap: 32px;
color: var(--slate-mid);
flex-wrap: wrap;
}
/* Trust strip directly under hero */
.trust-strip {
position: relative;
z-index: 1;
background: var(--bg);
margin-top: 40px;
padding: 28px 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.trust-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.trust-item .n {
font-family: var(--font-serif);
font-weight:500;
font-size: 36px;
line-height: 1;
color: var(--fg-strong);
letter-spacing: -0.01em;
}
.trust-item .n em { color: var(--accent-deep); font-style: italic; }
.trust-item .l {
font-size: var(--fs-note);
color: var(--slate-mid);
line-height: 1.4;
}
/* ============================================================
SECTION HEADERS
============================================================ */
.section-head {
margin-bottom: 64px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: end;
}
.section-head .right {
max-width: 480px;
color: var(--slate-dark);
}
.section-head.center {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* Subtle Y-mark ornament used in centered headers β a quiet watermark
tint of the logo icon, a touch darker than the surface it sits on. */
.ornament {
width: 30px;
height: 30px;
margin: 0 auto 26px;
display: block;
background: color-mix(in oklab, var(--fg-strong) 22%, transparent);
-webkit-mask: url('assets/cart-icon.svg') no-repeat center / contain;
mask: url('assets/cart-icon.svg') no-repeat center / contain;
}
/* ============================================================
CONDITION TILES (Section 2)
============================================================ */
.conditions-panel {
background: var(--sage-pale);
border-radius: 8px;
padding: 88px clamp(40px, 6vw, 96px);
}
.condition-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.condition-card {
background: var(--bg-card);
border-radius: 6px;
padding: 32px 34px 28px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 230px;
transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
cursor: pointer;
}
.condition-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(31,42,38,0.06);
}
.condition-card.dashed {
background: transparent;
border: 1.5px dashed color-mix(in oklab, var(--sage-deep) 50%, transparent);
}
.condition-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 4px;
}
.condition-card h3 {
font-family: var(--font-serif);
font-weight:500;
font-size: 28px;
line-height: 1.12;
color: var(--fg-strong);
margin: 0;
letter-spacing: -0.01em;
}
.condition-card p { font-size: var(--fs-sm); line-height: 1.55; color: var(--slate-dark); }
.condition-card .more {
margin-top: auto;
padding-top: 12px;
font-size: var(--fs-note);
font-weight: 500;
color: var(--fg-strong);
display: inline-flex;
align-items: center;
gap: 6px;
}
.condition-card.dashed .more { color: var(--sage-deep); }
/* ============================================================
OUTCOMES (Section 3) β bar chart + testimonials
============================================================ */
.outcomes-headline {
text-align: center;
margin-bottom: 80px;
}
.outcomes-headline .ornament { display: block; margin: 0 auto 24px; }
.outcome-block {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
align-items: start;
}
.outcome-block .numeral { margin-bottom: 18px; }
.outcome-block .o-copy { max-width: 360px; }
.outcome-block .o-copy p { color: var(--slate-dark); }
.bar-chart {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: end;
padding: 32px 0 16px;
min-height: 340px;
}
.bar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.bar .label-top {
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--fg-strong);
}
.bar .label-top sup { font-size: 0.55em; vertical-align: super; padding-left: 1px; }
.bar .fill {
border-radius: 3px;
width: 100%;
position: relative;
}
.bar .fill.tall { height: 280px; }
.bar .fill.mid { height: 220px; }
.bar .fill.short { height: 160px; }
.bar .fill.cream { background: linear-gradient(180deg, #C9B697 0%, #E8DCC4 100%); }
.bar .fill.sage { background: linear-gradient(180deg, #B6C9B8 0%, var(--sage-deep) 100%); }
.bar .fill.coral { background: linear-gradient(180deg, var(--coral-soft) 0%, var(--coral) 100%); }
.bar .legend {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-note);
color: var(--slate-mid);
letter-spacing: 0.05em;
}
.bar .legend::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.bar .legend.cream { color: #C9B697; }
.bar .legend.sage { color: var(--sage-deep); }
.bar .legend.coral { color: var(--coral); }
/* Testimonial cards */
.testimonials {
margin-top: 96px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.testimonial {
background: var(--bg-card);
border-radius: 6px;
padding: 36px 40px 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.testimonial .quote {
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
line-height: 1.32;
letter-spacing: -0.005em;
color: var(--fg-strong);
text-wrap: pretty;
}
.testimonial .quote .accent { color: var(--accent-deep); font-style: italic; }
.testimonial .attribution {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--border-soft);
}
.testimonial .avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--sage-pale);
color: var(--sage-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
}
.testimonial .meta { line-height: 1.35; }
.testimonial .meta .name { font-weight: 500; color: var(--fg-strong); font-size: var(--fs-sm); }
.testimonial .meta .where { font-size: var(--fs-note); color: var(--slate-mid); }
/* ============================================================
WHY CHINA (Section 4)
============================================================ */
.why-panel {
background: var(--bg-alt);
border-radius: 8px;
padding: 88px clamp(40px, 6vw, 96px);
position: relative;
overflow: hidden;
}
.why-grid {
display: grid;
grid-template-columns: 1fr 0.55fr;
gap: 80px;
}
.why-points { display: flex; flex-direction: column; }
.why-point {
display: grid;
grid-template-columns: 90px 1fr;
gap: 28px;
padding: 28px 0;
border-top: 1px solid var(--border-soft);
align-items: start;
}
.why-point:last-child { border-bottom: 1px solid var(--border-soft); }
.why-point .pn {
font-family: var(--font-serif);
font-weight:500;
font-size: 44px;
line-height: 1;
color: var(--accent-deep);
letter-spacing: -0.01em;
}
.why-point h4 {
font-family: var(--font-serif);
font-weight:500;
font-size: 24px;
margin: 0 0 8px;
color: var(--fg-strong);
letter-spacing: -0.005em;
}
.why-point p { font-size: var(--fs-sm); }
.why-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.why-art svg { width: 100%; height: auto; max-width: 360px; }
/* ============================================================
JOURNEY (Section 5)
============================================================ */
.journey-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border-soft);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.journey-step {
background: var(--bg);
padding: 40px 28px 36px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 280px;
position: relative;
}
.journey-step.highlight {
background: var(--sage-pale);
}
.journey-step.highlight::before {
content: "REMOTE Β· FREE";
position: absolute;
top: 16px; right: 20px;
font-size: 9.5px;
letter-spacing: 0.18em;
font-weight: 500;
color: var(--accent-deep);
}
.journey-step .sn {
font-family: var(--font-serif);
font-weight:500;
font-size: 64px;
line-height: 0.95;
color: var(--fg-strong);
letter-spacing: -0.01em;
}
.journey-step h4 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
margin: 0;
color: var(--fg-strong);
letter-spacing: -0.005em;
}
.journey-step p { font-size: var(--fs-sm); line-height: 1.55; }
/* ============================================================
SUPPORT (Section 6)
============================================================ */
.support-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: start;
}
.support-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 48px;
}
.support-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.support-item .icon {
width: 22px; height: 22px;
color: var(--accent);
margin-bottom: 4px;
}
.support-item h5 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 19px;
margin: 0;
color: var(--fg-strong);
letter-spacing: -0.005em;
}
.support-item p { font-size: var(--fs-sm); line-height: 1.5; }
/* ============================================================
CREDENTIALS (Section 7) β dark institutional
============================================================ */
.credentials {
background: var(--bg-dark);
color: rgba(255,255,255,0.85);
border-radius: 0;
padding: var(--section-py) 0;
position: relative;
}
.credentials .eyebrow { color: var(--coral-soft); }
.credentials .display { color: #F2EDE4; }
.credentials p,
.credentials .section-head .right { color: rgba(255,255,255,0.7); }
.credentials .stat-row {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding: 36px 0;
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.credentials .stat .n {
font-family: var(--font-serif);
font-weight:500;
font-size: 52px;
line-height: 1;
color: #F2EDE4;
letter-spacing: -0.01em;
}
.credentials .stat .l {
margin-top: 8px;
font-size: var(--fs-note);
color: rgba(255,255,255,0.55);
line-height: 1.4;
}
.physicians {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.physician {
padding: 32px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 14px;
}
.physician .portrait {
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 500;
color: rgba(255,255,255,0.5);
font-size: 22px;
}
.physician h4 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
margin: 8px 0 4px;
color: #F2EDE4;
}
.physician .role {
font-size: 12px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.physician .bio { font-size: var(--fs-sm); line-height: 1.55; color: rgba(255,255,255,0.7); }
.physician .langs {
margin-top: 8px;
font-size: 11px;
color: var(--coral-soft);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ============================================================
SCIENCE (Section 8)
============================================================ */
.science-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.science-stages {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stage-card {
padding: 28px 24px;
background: var(--bg-card);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 12px;
}
.stage-card .sn {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--accent-deep);
letter-spacing: 0.04em;
}
.stage-card h5 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 19px;
margin: 0;
color: var(--fg-strong);
}
.stage-card p { font-size: var(--fs-sm); line-height: 1.55; }
.stage-card .icon {
margin-top: 8px;
width: 100%;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sage-deep);
}
/* ============================================================
FAQ (Section 9)
============================================================ */
.faq-panel {
background: var(--sage-pale);
border-radius: 8px;
padding: 88px clamp(40px, 6vw, 96px);
}
.faq-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
align-items: start;
}
.faq-list {
display: flex;
flex-direction: column;
}
.faq-item {
border-top: 1px solid rgba(31,42,38,0.12);
padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid rgba(31,42,38,0.12); }
.faq-q {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
cursor: pointer;
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
line-height: 1.25;
color: var(--fg-strong);
letter-spacing: -0.005em;
}
.faq-q .toggle {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 300;
color: var(--accent-deep);
flex-shrink: 0;
transition: transform 200ms var(--ease);
}
.faq-item.open .faq-q .toggle { transform: rotate(45deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 320ms var(--ease), margin-top 320ms var(--ease);
}
.faq-item.open .faq-a {
max-height: 800px;
margin-top: 16px;
}
.faq-a p { font-size: var(--fs-sm); line-height: 1.65; color: var(--slate-dark); max-width: 640px; }
/* ============================================================
FINAL CTA (Section 10)
============================================================ */
.final-cta-panel {
background: var(--bg-card);
border-radius: 8px;
padding: 88px clamp(40px, 6vw, 96px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.reassurance { display: flex; flex-direction: column; gap: 28px; }
.reassurance-list {
list-style: none;
padding: 0; margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.reassurance-list li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--slate-dark);
}
.reassurance-list li::before {
content: "";
display: block;
width: 14px; height: 14px;
margin-top: 6px;
border-radius: 50%;
background: var(--accent);
position: relative;
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.form {
display: flex;
flex-direction: column;
gap: 18px;
}
.form .field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form .field label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-mid);
font-weight: 500;
}
.form .field input,
.form .field select,
.form .field textarea {
font-family: var(--font-sans);
font-size: var(--fs-sm);
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg);
color: var(--fg-strong);
outline: none;
transition: border-color 160ms var(--ease);
}
.form .field textarea { resize: vertical; line-height: 1.6; }
.form .field input:focus,
.form .field select:focus,
.form .field textarea:focus { border-color: var(--accent-deep); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .submit { margin-top: 12px; align-self: flex-start; }
.form .micro {
font-size: var(--fs-note);
color: var(--slate-mid);
line-height: 1.5;
margin-top: 6px;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--bg-dark);
color: rgba(255,255,255,0.7);
padding: 96px 0 40px;
margin-top: 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer .mark {
display: flex; align-items: center; gap: 13px;
}
.footer-icon {
height: 31px;
width: 31px;
display: block;
background: var(--coral-soft);
-webkit-mask: url('assets/cart-icon.svg') no-repeat center / contain;
mask: url('assets/cart-icon.svg') no-repeat center / contain;
}
.footer-wordmark {
height: 30px;
width: auto;
display: block;
}
.footer .blurb { font-size: var(--fs-sm); line-height: 1.55; max-width: 320px; margin-top: 18px; }
.footer h6 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin: 0 0 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a {
font-size: var(--fs-sm);
color: rgba(255,255,255,0.75);
border-bottom: 0;
}
.footer ul a:hover { color: var(--coral-soft); }
/* Footer links render 21px tall, under the 24px WCAG 2.2 AA minimum, on all 37
pages. The hit area grows through a pseudo-element so nothing moves β adding
real padding would make the footer taller on every page.
36px, not 44. Measured at 390: these sit 17px apart, so 44 would make
neighbouring hit areas overlap by 3px and a tap between two links would land
on whichever won the cascade. 36 leaves 2px of dead space between them, which
is the point β targets that overlap are worse than targets that are small. */
.footer ul a { position: relative; }
.footer ul a::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 36px;
transform: translateY(-50%);
}
.footer-bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-note);
color: rgba(255,255,255,0.4);
letter-spacing: 0.04em;
}
/* .footer-tracking removed 11 Aug 2026 β the "S H A N G H A I Β· δΈ ζ΅·" lockup
in the footer bottom bar. Dropped at Jacob's call; the rule went with the
markup rather than being left to match nothing.
β οΈ .footer-bottom above is `justify-content: space-between` and now has four
children instead of five, so the Cookie choices button becomes the rightmost
item. Measured after the change: one row at 1440, two at 1200 and 768, three
at 390 β the bar is `flex-wrap: wrap` and the long copyright sentence is what
drives the wrapping, not the removed span. Dropping a flex child cannot add a
row, so every width is the same or tighter than before. No overflow at any of
the four. */
/* ============================================================
FLOATING WHATSAPP
============================================================ */
.whatsapp {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
background: #25D366;
color: #FFFFFF;
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: 0 10px 24px rgba(31,42,38,0.18), 0 2px 6px rgba(31,42,38,0.08);
cursor: pointer;
transition: transform 200ms var(--ease);
}
.whatsapp:hover { transform: translateY(-2px); }
.whatsapp svg { width: 22px; height: 22px; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.nav-center { display: none; }
/* Two tracks once the primary menu is gone. Keeping the three-track
`1fr auto 1fr` here would hold the logo track equal to the right track
even though the right track only needs the CTA cluster β measured at
390 as a 143px logo box against a 36px hamburger. `1fr auto` gives the
wordmark every pixel the cluster does not use: 282px at 390, so the
269px lockup renders at full size. */
.nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
.nav-right { grid-column: 2; }
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.hero.hero-bg { min-height: 0; }
/* Photo becomes a clean banner above the text instead of overlapping it */
.hero-photo {
position: relative;
width: 100%;
height: 300px;
margin-bottom: 8px;
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(180deg, transparent 0%, transparent 78%, var(--bg) 100%),
url('assets/hero-cart-cells.webp');
background-size: cover, cover;
background-position: center 26%, center 26%;
background-repeat: no-repeat, no-repeat;
}
.section-head { grid-template-columns: 1fr; gap: 24px; }
.outcome-block, .why-grid, .support-grid, .science-grid, .faq-grid, .final-cta-panel {
grid-template-columns: 1fr;
gap: 48px;
}
.journey-grid { grid-template-columns: 1fr; }
.credentials .stat-row, .condition-grid, .support-list, .science-stages, .testimonials {
grid-template-columns: 1fr 1fr;
}
.physicians { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
:root { --gutter: 20px; --section-py: 80px; }
.hero-photo { height: 220px; }
.credentials .stat-row, .condition-grid, .support-list, .science-stages, .testimonials, .footer-grid {
grid-template-columns: 1fr;
}
.trust-strip { grid-template-columns: 1fr 1fr; }
.form .row { grid-template-columns: 1fr; }
/* Hand-placed in a display heading is typesetting for wide viewports.
At phone widths the line has already wrapped on its own, so the break only
strands a word and drops the italic phrase onto a line of its own. Collapse
them site-wide and let text-wrap: balance set the lines. Scoped to headings
so address blocks and body copy keep their intended breaks. */
h1 br, h2 br { display: none; }
}