/* ==========================================================================
ADRIATICA CARE — design system
Editorial, unhurried, Adriatic. Deep sea blue and pearl, one champagne
hairline for atmosphere, and the WhatsApp green reserved — always — for
the conversation itself.
No spa cliche, no aspirational-body cues, no manufactured urgency.
Photography carries the mood; type carries the argument.
========================================================================== */
/* Self-hosted fonts. Two families, two weights each, served from our own origin:
no third-party request, so no visitor IP reaches a font CDN before consent —
and no render-blocking round trip to another host. Variable files, so one
file covers 400 and 600. Licensed under the SIL Open Font License. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../assets/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../assets/fonts/source-serif-4-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallbacks. Measured against the real faces (Source Serif 4 is
0.916x the width of Georgia; Inter is 1.086x Segoe UI), so the swap when the
web font arrives barely moves the text — which is most of the layout shift on
a first visit. The families are unchanged in this redesign, so these values
still hold; re-measure rather than guess if a family is ever swapped. */
@font-face {
font-family: "Serif Fallback";
src: local("Georgia"), local("Times New Roman"), local("Times");
size-adjust: 91.6%;
ascent-override: 100%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face {
font-family: "Sans Fallback";
src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
size-adjust: 108.5%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
/* --------------------------------------------------------------- 1. tokens */
:root {
color-scheme: light dark;
/* Adriatic sea — the primary ramp */
--sea-900: #07222f;
--sea-800: #0c3346;
--sea-700: #10485f;
--sea-600: #175f7c;
--sea-500: #2a7c9b;
--sea-400: #4e9ab5;
--sea-300: #85bcd0;
--sea-200: #b9d4e0;
--sea-100: #dceaf1;
--sea-50: #eef6fa;
/* Ink — the full-bleed editorial bands */
--ink-950: #041520;
/* Pearl and stone — the ground */
--pearl: #fcfaf6;
--stone-100: #f2ede5;
--stone-200: #e4dbcd;
--stone-300: #d3c6b2;
--stone-400: #b9ab95;
--stone-700: #6f6353;
/* Champagne — atmosphere only. Hairlines, numerals, marks. Never a button.
Two weights on purpose: --champagne-500 is the ornament value, and
--champagne-700 is the same hue pushed dark enough to be read as text on
pearl (5.0:1). Light champagne on an ivory ground measures 2.7:1, which is
fine for a 1px rule and not fine for a label. */
--champagne-700: #8a6733;
--champagne-500: #b9955c;
--champagne-300: #d8bd8c;
--champagne-100: #efe3cd;
/* The conversation channel. Reserved for WhatsApp, nothing else. */
--wa: #0a6e59;
--wa-dark: #075945;
/* Semantic */
--bg: var(--pearl);
--bg-raised: #ffffff;
--bg-quiet: var(--stone-100);
--bg-deep: var(--ink-950);
--surface: #ffffff;
--text: #14242c;
--text-muted: #4a5c66;
/* Dark enough to clear 4.5:1 on the stone ground too, not just on pearl —
the disclaimer and the field hints sit on the quiet sections. */
--text-quiet: #5c6a72;
--text-invert: #f6f1e8;
--text-invert-muted: rgba(246, 241, 232, .74);
--line: #e6ddd0;
--line-soft: #efe8dc;
--line-strong: #c9bca8;
--line-invert: rgba(246, 241, 232, .20);
--accent: var(--champagne-700); /* foreground: labels, numerals, marks */
--accent-line: var(--champagne-300); /* ornament: hairlines and rules */
--link: var(--sea-700);
--focus: #0f6ea8;
/* Photographic scrims, tuned per scheme so images never go muddy. */
--scrim-strong: linear-gradient(100deg, rgba(4, 21, 32, .93) 0%, rgba(4, 21, 32, .74) 42%, rgba(4, 21, 32, .14) 78%, rgba(4, 21, 32, 0) 100%);
--scrim-soft: linear-gradient(to top, rgba(4, 21, 32, .80) 0%, rgba(4, 21, 32, .28) 46%, rgba(4, 21, 32, 0) 100%);
/* Type */
--font-head: "Source Serif 4", "Serif Fallback", Georgia, serif;
--font-body: "Inter", "Sans Fallback", system-ui, -apple-system, sans-serif;
--step--2: 0.75rem; /* 12px eyebrow, micro-label */
--step--1: 0.875rem; /* 14px fine print */
--step-0: 1.0625rem; /* 17px body */
--step-1: 1.1875rem; /* 19px lead */
--step-2: 1.375rem; /* 22px h4 */
--step-3: clamp(1.5rem, 1.32rem + 0.75vw, 1.875rem); /* h3 */
--step-4: clamp(1.75rem, 1.40rem + 1.60vw, 2.5rem); /* tile title */
--step-5: clamp(2rem, 1.50rem + 2.30vw, 3.25rem); /* h2 */
--step-6: clamp(2.5rem, 1.60rem + 4.20vw, 4.5rem); /* big statement */
/* Capped at 76px: past that the headline eats the hero and pushes the
primary call to action below the fold on a 1440 screen. */
--step-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
--step-numeral: clamp(3rem, 1.9rem + 5vw, 6.5rem);
--measure: 62ch;
--measure-editorial: 38rem;
/* Space */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--pad-section: clamp(4rem, 3rem + 7vw, 9rem);
/* Grid */
--wrap: 84rem;
--wrap-text: 42rem;
--gutter: clamp(1.25rem, 4vw, 4rem);
--radius: 4px;
--radius-lg: 8px;
--radius-pill: 999px;
--shadow: 0 1px 2px rgba(7, 34, 47, .05), 0 10px 30px rgba(7, 34, 47, .07);
--shadow-lg: 0 2px 6px rgba(7, 34, 47, .07), 0 24px 60px rgba(7, 34, 47, .13);
/* Motion. One easing, three durations — everything moves the same way. */
--ease: cubic-bezier(.22, .61, .36, 1);
--t-fast: 180ms;
--t-mid: 340ms;
--t-slow: 720ms;
--nav-h: 62px;
--bar-h: 64px; /* persistent mobile WhatsApp bar */
}
@media (min-width: 60rem) {
:root {
--step-0: 1.125rem;
--step-1: 1.3125rem;
--nav-h: 78px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #06171f;
--bg-raised: #0d2733;
--bg-quiet: #0a212b;
--bg-deep: #030f15;
--surface: #0d2733;
--text: #e9f1f4;
--text-muted: #a9bcc5;
--text-quiet: #91a6b0;
--line: #1d3d4b;
--line-soft: #16303c;
--line-strong: #2f5a6d;
--line-invert: rgba(246, 241, 232, .18);
--accent: var(--champagne-300);
--accent-line: #a98a58;
--link: #9ad2ea;
--focus: #7ec3e8;
--wa: #0e7d66;
--wa-dark: #0a6350;
--stone-100: #0a212b;
--stone-200: #1d3d4b;
--sea-50: #0d2733;
--sea-100: #16394a;
--scrim-strong: linear-gradient(100deg, rgba(3, 15, 21, .94) 0%, rgba(3, 15, 21, .80) 42%, rgba(3, 15, 21, .22) 78%, rgba(3, 15, 21, 0) 100%);
--scrim-soft: linear-gradient(to top, rgba(3, 15, 21, .86) 0%, rgba(3, 15, 21, .34) 46%, rgba(3, 15, 21, 0) 100%);
--shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 30px rgba(0, 0, 0, .32);
--shadow-lg: 0 2px 6px rgba(0, 0, 0, .40), 0 24px 60px rgba(0, 0, 0, .46);
}
}
/* ----------------------------------------------------------- 2. base reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The `hidden` attribute is how nav.js, ui.js and form.js hide things. A
component that sets its own `display` would otherwise out-specify the UA
rule and stay on screen — which is how a wizard shows its Back button on
step one. Make the attribute win, once, everywhere. */
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
html:focus-within { scroll-padding-top: calc(var(--nav-h) + var(--s-5)); }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
padding-bottom: var(--bar-h); /* room for the mobile CTA bar */
overflow-x: hidden;
}
@media (min-width: 48rem) { body { padding-bottom: 0; } }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 400;
font-optical-sizing: auto;
line-height: 1.08;
letter-spacing: -0.022em;
color: var(--text);
text-wrap: balance;
}
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); line-height: 1.18; letter-spacing: -0.015em; }
h4 { font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.012em; }
p, li { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }
a { color: var(--link); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; color: var(--text); }
small { font-size: var(--step--1); }
ul, ol { padding-left: 1.15em; }
li + li { margin-top: var(--s-2); }
button { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 2px;
}
::selection { background: var(--champagne-100); color: var(--sea-900); }
@media (prefers-color-scheme: dark) {
::selection { background: var(--sea-700); color: var(--text-invert); }
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 300;
background: var(--sea-800);
color: var(--text-invert);
padding: var(--s-3) var(--s-5);
font-weight: 600;
}
.skip-link:focus { left: 0; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------------------------------------------------------- 3. layout grid */
/* One named-line grid. Children sit in the content column by default; a .bleed
child spans the full viewport, so an image can break out without a wrapper. */
.canvas {
display: grid;
grid-template-columns:
[full-start] var(--gutter)
[content-start] minmax(0, var(--wrap))
[content-end] var(--gutter)
[full-end];
}
.canvas > * { grid-column: content; }
.canvas > .bleed { grid-column: full; }
/* Legacy container, still used by privacy / cookie / admin. */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--pad-section);
scroll-margin-top: var(--nav-h);
position: relative;
}
.section--quiet { background: var(--bg-quiet); }
.section--dark { background: var(--bg-deep); color: var(--text-invert); }
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--text-invert); }
.section--dark a { color: var(--champagne-300); }
/* The section opener: eyebrow, heading, one paragraph. Deliberately narrow. */
.section__intro,
.section__head { max-width: var(--measure-editorial); }
.section__intro > * + *,
.section__head > * + * { margin-top: var(--s-4); }
.section__intro .lead,
.section__head .lead { margin-top: var(--s-5); }
/* An opener that sits beside the content instead of above it. */
.split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 60rem) {
.split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 7rem); }
.split--sticky > :first-child { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
}
.stack > * + * { margin-top: var(--s-4); }
.list-plain { list-style: none; padding-left: 0; }
/* ----------------------------------------------------------- 4. typography */
.eyebrow {
display: flex;
align-items: center;
gap: var(--s-3);
font-family: var(--font-body);
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
line-height: 1;
color: var(--text-quiet);
}
.eyebrow::before {
content: "";
flex: none;
width: 2rem;
height: 1px;
background: var(--accent-line);
}
.section--dark .eyebrow { color: var(--text-invert-muted); }
.section--dark .eyebrow::before { background: var(--champagne-300); }
.display {
font-family: var(--font-head);
font-weight: 400;
font-size: var(--step-display);
line-height: 0.98;
letter-spacing: -0.032em;
text-wrap: balance;
}
.statement {
font-family: var(--font-head);
font-weight: 400;
font-size: var(--step-6);
line-height: 1.04;
letter-spacing: -0.028em;
text-wrap: balance;
}
.lead {
font-size: var(--step-1);
line-height: 1.62;
color: var(--text-muted);
max-width: var(--measure-editorial);
}
.section--dark .lead { color: var(--text-invert-muted); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h3 { margin-top: var(--s-6); }
.numeral {
font-family: var(--font-head);
font-weight: 400;
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -0.03em;
line-height: 1;
color: var(--accent);
}
.micro {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-quiet);
line-height: 1.4;
}
.section--dark .micro { color: var(--text-invert-muted); }
/* A fact we do not have yet. Never styled to look like a real value. */
.token {
font-size: .92em;
color: var(--stone-700);
background: var(--champagne-100);
border-bottom: 1px solid var(--accent-line);
padding: .08em .34em;
border-radius: 2px;
word-break: break-word;
}
@media (prefers-color-scheme: dark) {
.token {
color: var(--champagne-300);
background: rgba(185, 149, 92, .15);
border-bottom-color: rgba(185, 149, 92, .5);
}
}
.section--dark .token {
color: var(--champagne-300);
background: rgba(216, 189, 140, .14);
border-bottom-color: rgba(216, 189, 140, .42);
}
/* An aside carrying a caveat the reader needs but did not ask for. */
.note {
border-left: 2px solid var(--accent-line);
padding: var(--s-1) 0 var(--s-1) var(--s-5);
color: var(--text-muted);
max-width: var(--measure);
}
.note strong { color: var(--text); }
.section--dark .note { border-left-color: var(--champagne-300); color: var(--text-invert-muted); }
.section--dark .note strong { color: var(--text-invert); }
.disclaimer {
font-size: var(--step--1);
color: var(--text-quiet);
max-width: var(--measure);
padding-block: var(--s-4);
border-block: 1px solid var(--line);
}
/* --------------------------------------------------------------- 5. media */
/* Every photograph sits in a .media frame. The frame paints a duotone Adriatic
gradient and a fine grain, so a slow, missing or not-yet-shot image still
reads as an intentional surface rather than an empty box. */
.media {
position: relative;
overflow: hidden;
background-color: var(--sea-800);
background-image:
radial-gradient(120% 90% at 12% 8%, rgba(133, 188, 208, .42) 0%, rgba(133, 188, 208, 0) 58%),
linear-gradient(158deg, var(--sea-700) 0%, var(--sea-800) 44%, var(--ink-950) 100%);
isolation: isolate;
}
.media::before {
content: "";
position: absolute;
inset: 0;
opacity: .5;
mix-blend-mode: overlay;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* js/ui.js wraps the ![]()
in a once real derivatives exist.
display:contents keeps the img the positioned child either way. */
.media > picture { display: contents; }
.media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Aspect ratios, named so the markup says what shape it wants. */
.media--wide { aspect-ratio: 16 / 9; }
.media--landscape{ aspect-ratio: 4 / 3; }
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--tall { aspect-ratio: 3 / 4; }
.media--round { border-radius: var(--radius-lg); }
/* Photograph that lifts a little on hover, inside a link. */
.media--zoom img { transition: transform var(--t-slow) var(--ease); }
a:hover .media--zoom img { transform: scale(1.045); }
/* A scrim for text laid over a photograph. */
.media__scrim {
position: absolute;
inset: 0;
z-index: 2;
background: var(--scrim-soft);
pointer-events: none;
}
.media__scrim--side { background: var(--scrim-strong); }
/* --------------------------------------------------------------- 6. buttons
Exactly three levels, everywhere on the site:
.btn--wa the conversation. WhatsApp green, and nothing else is.
.btn--primary the quote request. Solid ink.
.link-cta in-page navigation. Text with a champagne underline.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-3);
min-height: 52px;
padding: var(--s-3) var(--s-6);
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: var(--step-0);
font-weight: 600;
letter-spacing: .005em;
text-decoration: none;
cursor: pointer;
text-align: center;
transition: background-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.btn--wa { background: var(--wa); color: #ffffff; }
.btn--wa:hover { background: var(--wa-dark); color: #ffffff; }
.btn--primary { background: var(--sea-900); color: var(--text-invert); }
.btn--primary:hover { background: var(--sea-800); color: var(--text-invert); }
@media (prefers-color-scheme: dark) {
.btn--primary { background: var(--pearl); color: var(--sea-900); }
.btn--primary:hover { background: #ffffff; color: var(--sea-900); }
}
.section--dark .btn--primary,
.hero .btn--primary { background: var(--pearl); color: var(--sea-900); }
.section--dark .btn--primary:hover,
.hero .btn--primary:hover { background: #ffffff; color: var(--sea-900); }
.btn--quiet {
background: transparent;
color: var(--text);
border-color: var(--line-strong);
}
.btn--quiet:hover { border-color: var(--text); background: transparent; color: var(--text); }
.section--dark .btn--quiet { color: var(--text-invert); border-color: var(--line-invert); }
.section--dark .btn--quiet:hover { border-color: var(--text-invert); }
.btn--sm { min-height: 44px; padding: var(--s-2) var(--s-5); font-size: var(--step--1); }
.btn--block { display: flex; width: 100%; }
/* Tertiary: a text link that draws its rule on hover. */
.link-cta {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-weight: 600;
font-size: var(--step-0);
color: var(--text);
text-decoration: none;
padding-block: var(--s-1);
border-bottom: 1px solid var(--accent-line);
transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.link-cta::after { content: "\2192"; transition: transform var(--t-mid) var(--ease); }
.link-cta:hover { border-bottom-color: var(--accent); gap: var(--s-3); }
.link-cta:hover::after { transform: translateX(3px); }
/* Every dark ground on the site, in one place — a tertiary link that inherits
the light-theme text colour disappears completely on these. */
.section--dark .link-cta,
.hero .link-cta,
.page-hero .link-cta,
.finale .link-cta,
.footer .link-cta { color: var(--text-invert); border-bottom-color: var(--champagne-300); }
.section--dark .link-cta:hover,
.hero .link-cta:hover,
.page-hero .link-cta:hover,
.finale .link-cta:hover,
.footer .link-cta:hover { border-bottom-color: var(--pearl); }
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4) var(--s-6);
}
/* ------------------------------------------------------------------ 7. nav */
.nav {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid transparent;
transition: border-color var(--t-mid) var(--ease),
box-shadow var(--t-mid) var(--ease);
}
/* The tinted, blurred plate is painted on a pseudo-element rather than on .nav
itself. backdrop-filter (like filter and transform) makes an element the
containing block for its position:fixed descendants — and .nav__links is
exactly that, so putting the filter on .nav collapsed the whole mobile menu
into the height of the bar. */
.nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: color-mix(in srgb, var(--bg) 82%, transparent);
transition: background-color var(--t-mid) var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
.nav::before { backdrop-filter: saturate(150%) blur(14px); }
}
.nav.is-compact::before { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav.is-compact {
border-bottom-color: var(--line);
box-shadow: 0 1px 24px rgba(7, 34, 47, .06);
}
.nav__inner {
display: flex;
align-items: center;
/* Tight at 360px, where the brand lockup plus the Menu button is the whole
row; roomier as soon as there is room. */
gap: var(--s-3);
min-height: var(--nav-h);
transition: min-height var(--t-mid) var(--ease);
}
@media (min-width: 26rem) { .nav__inner { gap: var(--s-5); } }
.nav.is-compact .nav__inner { min-height: calc(var(--nav-h) - 12px); }
/* The open panel is a positioned child of the bar, so the bar's own controls
have to be lifted above it or the Menu button becomes untappable the moment
the menu opens. */
.brand,
.nav__toggle,
.nav__cta { position: relative; z-index: 2; }
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-3);
text-decoration: none;
color: var(--text);
margin-right: auto;
}
.brand__mark { width: 30px; height: 30px; flex: none; border-radius: 6px; }
.brand__name {
display: block;
font-family: var(--font-head);
font-size: 1.1875rem;
line-height: 1.1;
letter-spacing: -0.018em;
}
/* Kept at every width — it is the line that says we are not a clinic — but it
must never wrap, or the bar grows and the sticky offsets drift. */
.brand__kicker {
display: block;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
color: var(--text-quiet);
margin-top: 2px;
}
@media (min-width: 26rem) {
.brand__kicker { font-size: 0.6875rem; letter-spacing: .13em; }
}
.nav__toggle {
display: inline-flex;
align-items: center;
gap: var(--s-3);
min-height: 44px;
padding: var(--s-2) var(--s-4);
background: transparent;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
font-size: var(--step--1);
font-weight: 600;
cursor: pointer;
}
.nav__toggle-bars { display: block; width: 16px; height: 9px; position: relative; }
.nav__toggle-bars::before,
.nav__toggle-bars::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: currentColor;
transition: transform var(--t-mid) var(--ease);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars::after { bottom: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-3.75px) rotate(-45deg); }
/* Mobile: a full-height panel, not a dropdown list. It spans the whole
viewport and pads itself clear of the bar, so a nav that is a few pixels
taller than --nav-h never leaves a seam. The bar paints over it. */
.nav__links {
position: fixed;
inset: 0;
z-index: 1;
background: var(--bg);
padding: calc(var(--nav-h) + var(--s-6)) var(--gutter) calc(var(--bar-h) + var(--s-7));
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--t-mid) var(--ease),
transform var(--t-mid) var(--ease),
visibility var(--t-mid) var(--ease);
}
.nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.nav__list li { margin: 0; }
.nav__list a {
display: block;
padding: var(--s-4) 0;
border-bottom: 1px solid var(--line-soft);
font-family: var(--font-head);
font-size: var(--step-3);
letter-spacing: -0.015em;
color: var(--text);
text-decoration: none;
}
.nav__list a[aria-current="true"] { color: var(--accent); }
.nav__aside { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.nav__aside .btn { width: 100%; }
.nav__note { font-size: var(--step--1); color: var(--text-quiet); }
.nav__cta { display: none; }
@media (min-width: 66rem) {
.nav__toggle { display: none; }
.nav__links {
position: static;
inset: auto;
padding: 0;
background: none;
overflow: visible;
opacity: 1;
visibility: visible;
transform: none;
margin-left: auto;
}
.nav__list { flex-direction: row; align-items: center; gap: var(--s-6); }
.nav__list a {
padding: var(--s-2) 0;
border-bottom: 1px solid transparent;
font-family: var(--font-body);
font-size: var(--step--1);
font-weight: 500;
letter-spacing: .01em;
color: var(--text-muted);
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__list a:hover { color: var(--text); border-bottom-color: var(--accent-line); }
.nav__list a[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }
.nav__aside { display: none; }
.nav__cta { display: inline-flex; margin-left: var(--s-6); }
}
/* Locks the page behind the open mobile panel. */
body.is-locked { overflow: hidden; }
/* ----------------------------------------------------------------- 8. hero */
.hero {
position: relative;
background: var(--bg-deep);
color: var(--text-invert);
overflow: clip;
}
.hero__media {
position: relative;
aspect-ratio: 4 / 3;
}
.hero__copy {
position: relative;
z-index: 3;
padding-block: var(--s-8) var(--s-7);
display: grid;
gap: var(--s-5);
align-content: center;
}
.hero__copy > * { max-width: 34rem; }
.hero .display { color: var(--text-invert); }
.hero__lead { color: var(--text-invert-muted); font-size: var(--step-1); line-height: 1.6; }
.hero .eyebrow { color: var(--text-invert-muted); }
.hero .eyebrow::before { background: var(--champagne-300); }
.hero__cta { margin-top: var(--s-2); }
.hero__reassure {
font-size: var(--step--1);
color: var(--text-invert-muted);
max-width: 30rem;
}
/* The trust strip: three facts, hairline-separated, along the hero floor. */
.hero__trust {
position: relative;
z-index: 3;
border-top: 1px solid var(--line-invert);
list-style: none;
padding: 0;
margin: 0;
display: grid;
}
.hero__trust li {
margin: 0;
padding: var(--s-4) 0;
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-invert-muted);
border-bottom: 1px solid var(--line-invert);
}
.hero__trust li:last-child { border-bottom: 0; }
@media (min-width: 48rem) {
.hero__trust { grid-auto-flow: column; grid-auto-columns: 1fr; }
.hero__trust li { border-bottom: 0; border-left: 1px solid var(--line-invert); padding: var(--s-5); }
.hero__trust li:first-child { border-left: 0; padding-left: 0; }
}
@media (min-width: 60rem) {
/* The photograph fills the section; the copy sits on it, left, over a scrim. */
.hero__frame {
display: grid;
grid-template-columns:
[full-start] var(--gutter)
[content-start] minmax(0, var(--wrap))
[content-end] var(--gutter)
[full-end];
align-items: stretch;
min-height: min(88svh, 52rem);
}
.hero__media {
grid-column: full;
grid-row: 1;
aspect-ratio: auto;
height: 100%;
}
.hero__inner {
grid-column: content;
grid-row: 1;
z-index: 3;
display: grid;
grid-template-rows: 1fr auto;
min-height: 0;
}
.hero__copy {
padding-block: var(--s-10) var(--s-8);
gap: var(--s-6);
}
.hero__copy > * { max-width: 30rem; }
.hero__lead { max-width: 27rem; }
}
@media (min-width: 78rem) {
.hero__copy > * { max-width: 38rem; }
.hero__lead { max-width: 32rem; }
}
/* ---------------------------------------------------- 9. positioning band */
/* Three statements about what we are and what we are not. Legally the most
important paragraph on the site, so it gets the whole width and no card. */
.stances {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
}
.stances > li { margin: 0; }
.stance {
display: grid;
gap: var(--s-3);
padding-block: var(--s-6);
border-top: 1px solid var(--line-invert);
}
.stance__label {
font-family: var(--font-head);
font-size: var(--step-3);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-invert);
}
.stance__text { color: var(--text-invert-muted); max-width: var(--measure); }
@media (min-width: 60rem) {
.stances { grid-template-columns: repeat(3, 1fr); }
.stance {
padding: var(--s-7) var(--s-6) var(--s-4) 0;
height: 100%;
align-content: start;
}
.stances > li + li .stance { padding-left: var(--s-6); border-left: 1px solid var(--line-invert); }
}
.band__foot {
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid var(--line-invert);
color: var(--text-invert-muted);
font-size: var(--step--1);
}
/* --------------------------------------------------------- 10. brand story */
.tenets {
list-style: none;
padding: 0;
margin-top: var(--s-8);
display: grid;
gap: var(--s-6);
}
.tenets > li { margin: 0; }
@media (min-width: 48rem) { .tenets { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.tenet { display: grid; gap: var(--s-3); }
.tenet__num {
font-size: var(--step-2);
font-variant-numeric: tabular-nums lining-nums;
color: var(--accent);
font-family: var(--font-head);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--accent-line);
width: fit-content;
min-width: 2.5rem;
}
.tenet h3 { font-size: var(--step-2); }
.tenet p { color: var(--text-muted); }
/* ------------------------------------------------------------- 11. journey */
.journey__head { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 60rem) {
.journey__head { grid-template-columns: minmax(0, 1fr) auto; }
}
.journey__controls { display: none; gap: var(--s-3); }
@media (min-width: 60rem) { .journey__controls { display: flex; } }
.journey__btn {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.journey__btn:hover:not(:disabled) { border-color: var(--text); }
.journey__btn:disabled { opacity: .3; cursor: default; }
.journey__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.journey__progress {
position: relative;
height: 1px;
background: var(--line);
margin-top: var(--s-7);
overflow: hidden;
}
.journey__progress span {
position: absolute;
inset: 0 auto 0 0;
width: 12%;
background: var(--accent);
transition: width var(--t-mid) var(--ease);
}
/* Desktop: a horizontal rail the reader drives. Mobile: a vertical story. */
.journey__track {
list-style: none;
padding: 0;
margin: var(--s-7) 0 0;
display: grid;
gap: 0;
}
.journey__track > li { margin: 0; }
.stage {
display: grid;
gap: var(--s-4);
padding-block: var(--s-6);
border-top: 1px solid var(--line);
position: relative;
}
.stage__num {
font-size: var(--step-4);
font-family: var(--font-head);
font-variant-numeric: tabular-nums lining-nums;
color: var(--accent);
line-height: 1;
}
.stage__when {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-quiet);
}
.stage h3 { font-size: var(--step-3); }
.stage p { color: var(--text-muted); max-width: var(--measure); }
.stage__media { margin-top: var(--s-2); }
@media (min-width: 60rem) {
.journey__track {
grid-auto-flow: column;
grid-auto-columns: minmax(21rem, 24rem);
gap: var(--s-6);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: var(--s-5);
/* Break the rail out of the content column so it runs to the right edge. */
margin-right: calc(var(--gutter) * -1);
padding-right: var(--gutter);
scrollbar-width: none;
}
.journey__track::-webkit-scrollbar { display: none; }
.journey__track > li { scroll-snap-align: start; }
.stage { height: 100%; align-content: start; padding: var(--s-6) 0 0; }
.stage__num { font-size: var(--step-numeral); margin-bottom: var(--s-2); }
}
/* ---------------------------------------------------------- 12. treatments */
.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
list-style: none;
padding: 0;
margin: var(--s-7) 0 var(--s-6);
border-bottom: 1px solid var(--line);
}
.tabs > li { margin: 0; }
.tab {
appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: var(--s-3) var(--s-4);
margin-bottom: -1px;
font-size: var(--step--1);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-quiet);
cursor: pointer;
min-height: 48px;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabpanel[hidden] { display: none; }
/* Asymmetric tiles: the first in each panel takes the full width and a wider
crop, the rest pair up. Nothing here is a card with a border. */
.tiles {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--s-7) var(--s-6);
}
.tiles > li { margin: 0; }
@media (min-width: 48rem) {
.tiles { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); }
.tiles > li:first-child { grid-column: 1 / -1; }
}
.tile { display: block; text-decoration: none; color: inherit; height: 100%; }
.tile__body { padding-top: var(--s-5); display: grid; gap: var(--s-3); }
.tile__title {
font-family: var(--font-head);
font-size: var(--step-4);
line-height: 1.1;
letter-spacing: -0.022em;
}
.tile p { color: var(--text-muted); max-width: 34rem; }
.tile__cost { font-size: var(--step--1); color: var(--text-quiet); }
.tile__go {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: var(--step--1);
font-weight: 600;
color: var(--text);
border-bottom: 1px solid var(--accent-line);
padding-bottom: 2px;
width: fit-content;
margin-top: var(--s-1);
transition: border-color var(--t-fast) var(--ease);
}
.tile__go::after { content: "\2192"; transition: transform var(--t-mid) var(--ease); }
.tile:hover .tile__go { border-bottom-color: var(--accent); }
.tile:hover .tile__go::after { transform: translateX(3px); }
@media (min-width: 48rem) {
.tiles > li:first-child .tile__title { font-size: var(--step-5); }
}
/* -------------------------------------------------------------- 13. equipe */
.surgeon {
display: grid;
gap: var(--s-6);
padding-block: var(--s-8);
border-top: 1px solid var(--line);
}
.surgeon__body { display: grid; gap: var(--s-4); align-content: start; }
.surgeon__name { font-size: var(--step-4); font-family: var(--font-head); line-height: 1.1; }
.surgeon__role { color: var(--text-muted); }
@media (min-width: 55rem) {
.surgeon { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
}
.spec-list { display: grid; gap: 0; margin: 0; }
.spec-list dt {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-quiet);
padding-top: var(--s-4);
border-top: 1px solid var(--line-soft);
}
.spec-list dd { margin: var(--s-1) 0 var(--s-4); }
@media (min-width: 34rem) {
.spec-list { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--s-5); }
.spec-list dt { grid-column: 1; }
.spec-list dd {
grid-column: 2;
margin: var(--s-4) 0;
border-top: 1px solid var(--line-soft);
padding-top: var(--s-4);
}
}
/* A disclosure that does not read as an accordion widget. */
.reveal { border-top: 1px solid var(--line); }
.reveal > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding-block: var(--s-4);
font-size: var(--step--1);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text);
min-height: 52px;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::after {
content: "";
flex: none;
width: 11px;
height: 11px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--t-mid) var(--ease);
}
.reveal[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.reveal__body { padding-bottom: var(--s-6); }
.reveal__body > * + * { margin-top: var(--s-4); }
.section--dark .reveal { border-top-color: var(--line-invert); }
.section--dark .reveal > summary { color: var(--text-invert); }
/* ------------------------------------------------- 14. recovery dashboard */
/* One panel per procedure, not a seven-column table. The reader picks the
operation they are actually considering and reads only that. */
.filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
list-style: none;
padding: 0;
margin: var(--s-6) 0 var(--s-7);
}
.filter-row > li { margin: 0; }
.chip {
appearance: none;
min-height: 44px;
padding: var(--s-2) var(--s-5);
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-muted);
font-size: var(--step--1);
font-weight: 500;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--text); color: var(--text); }
.chip[aria-pressed="true"] {
background: var(--sea-900);
border-color: var(--sea-900);
color: var(--text-invert);
}
@media (prefers-color-scheme: dark) {
.chip[aria-pressed="true"] { background: var(--pearl); border-color: var(--pearl); color: var(--sea-900); }
}
.recovery[hidden] { display: none; }
.recovery__head {
display: grid;
gap: var(--s-3);
padding-bottom: var(--s-6);
border-bottom: 1px solid var(--line);
}
.recovery__name { font-size: var(--step-4); font-family: var(--font-head); line-height: 1.1; }
.recovery__phases {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
}
.recovery__phases > li { margin: 0; }
.phase {
display: grid;
gap: var(--s-3);
padding-block: var(--s-5);
border-bottom: 1px solid var(--line-soft);
height: 100%;
align-content: start;
}
.phase__label {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.phase dl { display: grid; gap: var(--s-3); margin: 0; }
.phase dt {
font-size: var(--step--1);
color: var(--text-quiet);
}
.phase dd { margin: var(--s-1) 0 0; }
@media (min-width: 55rem) {
.recovery__phases { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.phase { border-bottom: 0; border-top: 1px solid var(--line-soft); padding-block: var(--s-5) var(--s-6); }
}
.recovery__risks { margin-top: var(--s-6); }
.recovery__risks .reveal__body p { max-width: var(--measure); color: var(--text-muted); }
.notes-grid {
display: grid;
gap: var(--s-7);
margin-top: var(--s-9);
padding-top: var(--s-7);
border-top: 1px solid var(--line);
}
@media (min-width: 55rem) { .notes-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 5rem); } }
.notes-grid h3 { margin-bottom: var(--s-4); }
.notes-grid ul { color: var(--text-muted); max-width: var(--measure); }
.notes-grid p { color: var(--text-muted); max-width: var(--measure); }
/* ------------------------------------------------------ 15. revision path */
.steps {
list-style: none;
padding: 0;
margin: var(--s-8) 0 0;
display: grid;
gap: 0;
counter-reset: step;
}
.steps > li { margin: 0; }
.step {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: var(--s-4);
align-items: start;
padding-block: var(--s-5);
border-top: 1px solid var(--line-invert);
}
.step__num {
font-family: var(--font-head);
font-size: var(--step-3);
font-variant-numeric: tabular-nums lining-nums;
color: var(--champagne-300);
line-height: 1.1;
}
.step h3 { font-size: var(--step-2); margin-bottom: var(--s-2); }
.step p { color: var(--text-invert-muted); max-width: var(--measure); }
@media (min-width: 60rem) {
.steps { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); }
.step {
grid-template-columns: 1fr;
height: 100%;
align-content: start;
padding-block: var(--s-5) 0;
}
}
.policy { margin-top: var(--s-9); }
.policy .reveal__body h4 { margin-top: var(--s-5); font-size: var(--step-2); }
.policy .reveal__body p,
.policy .reveal__body li { color: var(--text-invert-muted); max-width: var(--measure); }
.policy .reveal__body h4 { color: var(--text-invert); }
/* --------------------------------------------------- 16. before and after */
.cases {
list-style: none;
padding: 0;
margin: var(--s-7) 0 0;
display: grid;
gap: var(--s-8);
}
.cases > li { margin: 0; }
@media (min-width: 55rem) { .cases { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); } }
.case__pair {
display: grid;
grid-template-columns: 1fr 1fr; /* never stacked: social crops tall pairs in half */
gap: 2px;
background: var(--line);
}
.case__half { position: relative; margin: 0; background: var(--sea-800); }
.case__half img { width: 100%; height: auto; display: block; }
.case__half figcaption {
position: absolute;
left: var(--s-3);
bottom: var(--s-3);
padding: 4px 10px;
background: rgba(4, 21, 32, .78);
color: var(--text-invert);
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: var(--radius-pill);
}
.case__body { padding-top: var(--s-5); display: grid; gap: var(--s-2); }
.case__title { font-size: var(--step-3); }
.case__meta { color: var(--text-muted); font-size: var(--step--1); }
.case__when { font-size: var(--step--1); color: var(--text-muted); }
.case__consent { font-size: var(--step--2); color: var(--text-quiet); }
/* The empty state is a designed surface, not an apology. */
.empty-state {
margin-top: var(--s-7);
display: grid;
gap: var(--s-6);
align-items: center;
}
@media (min-width: 55rem) {
.empty-state { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); }
}
.empty-state__frame { position: relative; }
.empty-state__body { display: grid; gap: var(--s-4); align-content: start; }
.empty-state h3 { font-size: var(--step-4); font-family: var(--font-head); }
.empty-state p { color: var(--text-muted); max-width: var(--measure); }
/* --------------------------------------------------- 17. assistance levels */
.levels {
list-style: none;
padding: 0;
margin: var(--s-8) 0 0;
display: grid;
gap: var(--s-6);
align-items: stretch;
}
.levels > li { margin: 0; }
@media (min-width: 60rem) { .levels { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.level {
height: 100%;
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--s-6);
background: var(--bg-raised);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.level--featured {
background: var(--sea-900);
border-color: var(--sea-900);
color: var(--text-invert);
}
.level--featured h3,
.level--featured .level__cost strong { color: var(--text-invert); }
.level--featured .level__for,
.level--featured .level__list li,
.level--featured .level__cost,
.level--featured small { color: var(--text-invert-muted); }
.level--featured .level__list li::before { border-color: var(--champagne-300); }
@media (min-width: 60rem) {
.level--featured { transform: translateY(calc(var(--s-5) * -1)); padding-block: var(--s-7); }
}
.level__tier {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-quiet);
}
.level--featured .level__tier { color: var(--champagne-300); }
.level h3 { font-size: var(--step-3); }
.level__for { color: var(--text-muted); font-size: var(--step--1); }
.level__list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.level__list li { margin: 0; padding-left: var(--s-6); position: relative; color: var(--text-muted); font-size: var(--step--1); }
.level__list li::before {
content: "";
position: absolute;
left: 0;
top: .45em;
width: 11px;
height: 6px;
border-left: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(-45deg);
}
.level__cost {
margin-top: auto;
padding-top: var(--s-4);
border-top: 1px solid var(--line);
font-size: var(--step--1);
color: var(--text-muted);
}
.level--featured .level__cost { border-top-color: var(--line-invert); }
.level .btn { margin-top: var(--s-2); }
/* --------------------------------------------------------------- 18. faq */
.faq { margin-top: var(--s-7); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-5);
padding-block: var(--s-5);
font-family: var(--font-head);
font-size: var(--step-3);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--text);
transition: color var(--t-fast) var(--ease);
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
flex: none;
width: 13px;
height: 13px;
margin-top: .45em;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-position: center, center;
background-size: 100% 1.5px, 1.5px 100%;
background-repeat: no-repeat;
transition: background-size var(--t-mid) var(--ease);
}
/* A plus that becomes a minus: the vertical stroke collapses. */
.faq details[open] summary::after { background-size: 100% 1.5px, 1.5px 0; }
.faq__answer { padding-bottom: var(--s-6); max-width: var(--measure); }
.faq__answer > * + * { margin-top: var(--s-4); }
.faq__answer p { color: var(--text-muted); }
/* ------------------------------------------------------- 19. quote wizard */
.quote { margin-top: var(--s-8); }
/* The rail. With JavaScript off it is hidden and every step simply shows. */
.wizard__rail { display: none; }
[data-wizard="on"] .wizard__rail {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
list-style: none;
padding: 0 0 var(--s-5);
margin: 0 0 var(--s-7);
border-bottom: 1px solid var(--line);
}
.wizard__rail li { margin: 0; display: flex; align-items: baseline; gap: var(--s-2); }
.wizard__rail .num {
font-family: var(--font-head);
font-variant-numeric: tabular-nums lining-nums;
font-size: var(--step--1);
color: var(--text-quiet);
}
.wizard__rail .name {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-quiet);
}
.wizard__rail li[aria-current="step"] .num,
.wizard__rail li[aria-current="step"] .name { color: var(--text); }
.wizard__rail li[data-done="true"] .num,
.wizard__rail li[data-done="true"] .name { color: var(--accent); }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset + .fieldset { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line); }
[data-wizard="on"] .fieldset + .fieldset { margin-top: 0; padding-top: 0; border-top: 0; }
[data-wizard="on"] .fieldset[hidden] { display: none; }
.fieldset__legend {
display: block;
font-family: var(--font-head);
font-size: var(--step-4);
line-height: 1.12;
letter-spacing: -0.02em;
margin-bottom: var(--s-3);
padding: 0;
}
.fieldset__hint { color: var(--text-muted); margin-bottom: var(--s-6); max-width: var(--measure-editorial); }
.field { margin-top: var(--s-5); }
.field:first-of-type { margin-top: 0; }
.field > label {
display: block;
font-size: var(--step--1);
font-weight: 600;
margin-bottom: var(--s-2);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
width: 100%;
min-height: 52px;
padding: var(--s-3) var(--s-4);
font: inherit;
color: var(--text);
background: var(--bg-raised);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: var(--s-8);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--focus); }
.field input[type="file"] {
width: 100%;
padding: var(--s-4);
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
background: var(--bg-raised);
font-size: var(--step--1);
}
.field__hint {
display: block;
margin-top: var(--s-2);
font-size: var(--step--1);
color: var(--text-quiet);
max-width: var(--measure);
}
.field [aria-invalid="true"] { border-color: #a8322a; }
.check {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s-3);
align-items: start;
font-weight: 400;
font-size: var(--step--1);
color: var(--text-muted);
cursor: pointer;
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-raised);
}
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--sea-700); }
.field > .check { margin-bottom: 0; }
/* Honeypot. Present for bots, invisible and unreachable for people. */
.hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.wizard__actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-7);
}
.wizard__actions .btn { flex: 1 1 12rem; }
.form-status { margin-top: var(--s-5); font-size: var(--step--1); }
.form-status:empty { display: none; }
.form-status[data-state="pending"] { color: var(--text-muted); }
.form-status[data-state="ok"] { color: var(--wa-dark); }
.form-status[data-state="error"] { color: #a8322a; }
@media (prefers-color-scheme: dark) {
.form-status[data-state="ok"] { color: #6fd0b4; }
.form-status[data-state="error"] { color: #f0968c; }
}
.field-error {
margin-top: var(--s-2);
font-size: var(--step--1);
color: #a8322a;
}
@media (prefers-color-scheme: dark) { .field-error { color: #f0968c; } }
/* The confirmation is a state of the page, not a line of status text. */
.quote-done[hidden] { display: none; }
.quote-done {
display: grid;
gap: var(--s-5);
padding: var(--s-7);
background: var(--sea-900);
color: var(--text-invert);
border-radius: var(--radius-lg);
}
.quote-done h3 { font-size: var(--step-4); color: var(--text-invert); font-family: var(--font-head); }
.quote-done p { color: var(--text-invert-muted); max-width: var(--measure); }
.quote-done ol { color: var(--text-invert-muted); max-width: var(--measure); }
.quote-done .btn { justify-self: start; }
@media (prefers-color-scheme: dark) { .quote-done { background: var(--bg-raised); border: 1px solid var(--line-strong); } }
.quote__aside {
margin-top: var(--s-7);
padding-top: var(--s-6);
border-top: 1px solid var(--line);
display: grid;
gap: var(--s-4);
}
.quote__aside p { color: var(--text-muted); font-size: var(--step--1); max-width: var(--measure); }
/* ---------------------------------------------------------- 20. final CTA */
.finale { background: var(--bg-deep); color: var(--text-invert); overflow: clip; }
/* .finale__frame is a .canvas: the photograph takes the full-bleed column and
the copy takes the content column, both on row 1, so they overlap. */
.finale__media { grid-row: 1; height: 100%; }
.finale__copy {
grid-row: 1;
z-index: 3;
padding-block: clamp(5rem, 4rem + 8vw, 10rem);
display: grid;
gap: var(--s-5);
max-width: 40rem;
}
.finale .statement { color: var(--text-invert); }
.finale p { color: var(--text-invert-muted); }
.finale .cta-row { margin-top: var(--s-3); }
/* --------------------------------------------------------------- 21. footer */
.footer {
background: var(--sea-900);
color: var(--text-invert);
padding-block: var(--s-9) var(--s-7);
}
@media (prefers-color-scheme: dark) { .footer { background: var(--bg-deep); } }
.footer__brand { max-width: 34rem; }
.footer__wordmark {
font-family: var(--font-head);
font-size: var(--step-5);
line-height: 1.05;
letter-spacing: -0.028em;
color: var(--text-invert);
}
.footer__disclaimer { margin-top: var(--s-4); color: var(--text-invert-muted); }
.footer__grid {
display: grid;
gap: var(--s-7);
margin-top: var(--s-8);
padding-top: var(--s-7);
border-top: 1px solid var(--line-invert);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
@media (min-width: 66rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.footer__col h2 {
font-family: var(--font-body);
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-invert-muted);
margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer__col li { margin: 0; }
.footer__col a {
color: var(--text-invert);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--t-fast) var(--ease);
}
.footer__col a:hover { border-bottom-color: var(--champagne-300); }
.footer__col p { color: var(--text-invert-muted); font-size: var(--step--1); }
.footer__col p + p { margin-top: var(--s-2); }
.footer__linkbtn {
background: none;
border: 0;
border-bottom: 1px solid transparent;
padding: 0;
color: var(--text-invert);
cursor: pointer;
text-align: left;
font: inherit;
}
.footer__linkbtn:hover { border-bottom-color: var(--champagne-300); }
.footer__legal {
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: 1px solid var(--line-invert);
color: var(--text-invert-muted);
font-size: var(--step--1);
}
.footer__legal p + p { margin-top: var(--s-3); }
.footer__legal a { color: var(--text-invert); }
/* ------------------------------------------- 22. mobile bar, consent, misc */
.wa-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 90;
display: flex;
gap: var(--s-3);
padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--bg) 92%, transparent);
border-top: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) { .wa-bar { backdrop-filter: blur(12px); } }
.wa-bar .btn { flex: 1; min-height: 48px; font-size: var(--step--1); padding-inline: var(--s-4); }
.wa-bar .btn--quiet { flex: 0 1 auto; }
@media (min-width: 48rem) { .wa-bar { display: none; } }
.consent {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 120;
background: var(--sea-900);
color: var(--text-invert);
padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom));
box-shadow: 0 -8px 40px rgba(4, 21, 32, .3);
}
.consent[hidden] { display: none; }
.consent__inner { display: grid; gap: var(--s-4); align-items: center; }
.consent h2 { font-size: var(--step-2); color: var(--text-invert); }
.consent p { color: var(--text-invert-muted); font-size: var(--step--1); max-width: var(--measure); margin-top: var(--s-2); }
.consent a { color: var(--champagne-300); }
.consent__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 10rem; min-height: 48px; }
.consent .btn--quiet { color: var(--text-invert); border-color: var(--line-invert); }
.consent .btn--quiet:hover { border-color: var(--text-invert); }
.consent .btn--primary { background: var(--pearl); color: var(--sea-900); }
@media (min-width: 48rem) {
.consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
.consent__actions .btn { flex: 0 0 auto; }
}
/* Tables survive on privacy, cookie and admin. Restyled, not redesigned. */
.table-scroll { overflow-x: auto; margin-top: var(--s-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); min-width: 34rem; }
caption { text-align: left; color: var(--text-quiet); font-size: var(--step--1); padding-bottom: var(--s-4); }
th, td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); }
thead th {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-quiet);
border-bottom-color: var(--line-strong);
}
tbody th { font-weight: 600; }
/* ------------------------------------------------------------- 23. motion */
/* Reveals. The final state is the default; the transform is only applied once
motion.js has confirmed the reader has not asked for reduced motion. So with
JavaScript off, or under prefers-reduced-motion, nothing is ever invisible. */
[data-reveal] { opacity: 1; }
html.js-motion [data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
/* Image reveal mask: the photograph uncovers rather than fades. */
html.js-motion [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--t-slow) var(--ease); }
html.js-motion [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.js-motion [data-reveal],
html.js-motion [data-reveal="mask"] {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* -------------------------------------------------- 24. utilities + print */
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.measure { max-width: var(--measure); }
@media print {
.nav, .wa-bar, .consent, .btn, .journey__controls, .tabs { display: none !important; }
.tabpanel[hidden], .recovery[hidden] { display: block !important; }
body { padding-bottom: 0; background: #fff; color: #000; }
.section--dark, .hero, .footer, .finale { background: #fff !important; color: #000 !important; }
.section--dark *, .hero *, .footer *, .finale * { color: #000 !important; }
.media { display: none; }
}
/* ------------------------------------------ 25. component adjustments */
/* Below the desktop breakpoint the hero is a plain stack, so its copy needs
its own gutter; above it, the grid supplies one. */
.hero__inner { padding-inline: var(--gutter); }
@media (min-width: 60rem) { .hero__inner { padding-inline: 0; } }
/* .micro is used on real headings, which would otherwise inherit the serif. */
.micro { font-family: var(--font-body); }
/* Secondary destinations, phone only — the desktop bar stays short. */
.nav__sublist {
list-style: none;
padding: 0;
margin: 0 0 var(--s-5);
display: grid;
gap: var(--s-1);
border-top: 1px solid var(--line-soft);
padding-top: var(--s-5);
}
.nav__sublist li { margin: 0; }
.nav__sublist a {
display: block;
padding: var(--s-2) 0;
color: var(--text-muted);
text-decoration: none;
font-size: var(--step--1);
}
.nav__sublist a:hover { color: var(--text); }
/*