/* =========================================================================
Drip Tonic — landing page stylesheet
Tokens · type · layout · components · sections (§1 → §9)
Spec: designkit.md §14 (tokens) + §15 (per-section build).
========================================================================= */
/* ---- Self-hosted fonts --------------------------------------------------
Latin-subset variable WOFF2 (built by tools/build-fonts.sh from the VF TTFs
in tools/fonts-source/). Replaces the third-party Google Fonts request —
removes a ~830ms cross-origin round trip from the critical path. url() is
resolved relative to this file (/styles.css), so /fonts/* works site-wide.
font-display: swap keeps text visible during load. -------------------- */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("fonts/cormorant-garamond.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url("fonts/cormorant-garamond-italic.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("fonts/manrope.woff2") format("woff2");
}
/* ---- Tokens -------------------------------------------------------------- */
:root {
/* Color */
--color-bg-deep: #2E1517;
--color-bg-espresso: #1B0D0D;
--color-surface-deep: #3A1E20;
--color-border-deep: #5A3437;
--color-bg-cream: #ECDFC9;
--color-bg-ivory: #F5EDDD;
--color-surface-cream: #E4D3B8;
--color-border-cream: #C9B393;
--color-accent: #9B5145; /* terracotta — passes WCAG AA on cream/ivory/surface-cream */
--color-accent-hover: #804238;
--color-accent-soft: #D9A199;
--color-accent-bright: #D88376; /* brighter terracotta for italics on dark sections only */
--color-accent-line: #C2766B; /* original brand coral, used for thin hairlines/dots */
--color-blush: #F2DAD6; /* pale blush rose — harmonizes with terracotta; ink-deep passes AA */
--color-blush-deep: #E7C0B8; /* deeper blush rose — banner fills, ink-deep passes AA */
--color-ink-deep: #1B0D0D;
--color-ink-muted: #5C463C;
--color-ink-soft: #695543; /* darkened from #8A7565 to meet 4.5:1 on surface-cream */
--color-ink-cream: #F5EDDD;
--color-ink-cream-mute: #C9B393;
/* Type */
--font-serif: "Cormorant Garamond", "Canela", Georgia, "Times New Roman", serif;
--font-sans: "Manrope", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.5rem;
--font-size-xl: 2rem;
--font-size-2xl: clamp(2.25rem, 4vw + 1rem, 3.5rem);
--font-size-3xl: clamp(2.75rem, 6vw + 1rem, 5rem);
--font-size-4xl: clamp(3.5rem, 8vw + 1rem, 6.5rem);
/* Space */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--space-11: 192px;
/* Motion */
--ease-settle: cubic-bezier(0.2, 0, 0, 1);
--duration-micro: 200ms;
--duration-component: 350ms;
--duration-section: 600ms;
/* Radius */
--radius-sm: 2px;
--radius-md: 4px;
--radius-arch: 9999px 9999px 6px 6px;
/* Layout */
--container-max: 1280px;
--content-max: 1120px;
--reading-max: 640px;
--gutter-mobile: 24px;
--gutter-desktop: 64px;
}
/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-bg-cream);
color: var(--color-ink-deep);
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.6;
font-feature-settings: "kern", "ss02";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--color-accent); color: var(--color-ink-cream); }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: -100px; left: var(--space-4);
background: var(--color-bg-espresso); color: var(--color-ink-cream);
padding: var(--space-3) var(--space-5);
z-index: 100; border-radius: 2px;
font-family: var(--font-sans); font-size: var(--font-size-sm);
letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link:focus { top: var(--space-4); }
/* ---- Layout helpers ----------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 900px) {
.container { padding-inline: var(--gutter-desktop); }
}
.section {
position: relative;
padding-block: var(--space-9);
overflow: hidden;
}
@media (min-width: 900px) {
.section { padding-block: var(--space-10); }
}
.section--deep { background: var(--color-bg-deep); color: var(--color-ink-cream); }
.section--cream { background: var(--color-bg-cream); color: var(--color-ink-deep); }
.section--ivory { background: var(--color-bg-ivory); color: var(--color-ink-deep); }
.section--espresso { background: var(--color-bg-espresso); color: var(--color-ink-cream); }
/* ---- Typography --------------------------------------------------------- */
.h-display, .h-section, .h-closer {
font-family: var(--font-serif);
font-weight: 500;
text-wrap: balance;
letter-spacing: -0.02em;
margin: 0;
/* Defend against horizontal overflow when long headlines hit narrow viewports. */
overflow-wrap: break-word;
hyphens: auto;
}
.h-display {
font-size: var(--font-size-3xl);
line-height: 1.05;
}
.h-section {
font-size: var(--font-size-2xl);
line-height: 1.1;
}
.eyebrow + .h-section,
.eyebrow--rule + .h-section { margin-top: var(--space-4); }
.section--deep .h-section { color: var(--color-ink-cream); }
.h-closer {
font-size: var(--font-size-4xl);
line-height: 1.02;
}
.h-display em, .h-section em, .h-closer em {
font-style: italic;
color: var(--color-accent-bright);
font-weight: 500;
}
.section--cream .h-display em,
.section--ivory .h-display em,
.section--cream .h-section em,
.section--ivory .h-section em {
color: var(--color-accent);
}
.eyebrow {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-soft);
margin: 0;
}
.section--deep .eyebrow,
.section--espresso .eyebrow { color: var(--color-ink-cream-mute); }
.eyebrow--rule::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin-right: var(--space-3);
opacity: 0.55;
}
.lede {
font-size: var(--font-size-md);
line-height: 1.6;
color: var(--color-ink-muted);
max-width: 56ch;
margin: 0;
}
.section--deep .lede,
.section--espresso .lede { color: var(--color-ink-cream-mute); }
/* ---- Buttons ------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 14px 28px;
min-height: 48px;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition:
background var(--duration-micro) var(--ease-settle),
color var(--duration-micro) var(--ease-settle),
transform var(--duration-micro) var(--ease-settle),
border-color var(--duration-micro) var(--ease-settle);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.btn .arrow {
display: inline-block;
transition: transform var(--duration-micro) var(--ease-settle);
}
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary {
background: var(--color-accent);
color: var(--color-ink-cream);
}
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--outline-cream {
background: transparent;
color: var(--color-ink-cream);
border-color: var(--color-ink-cream-mute);
}
.btn--outline-cream:hover {
background: var(--color-ink-cream);
color: var(--color-ink-deep);
border-color: var(--color-ink-cream);
}
.btn--outline-ink {
background: transparent;
color: var(--color-ink-deep);
border-color: var(--color-ink-deep);
}
.btn--outline-ink:hover {
background: var(--color-ink-deep);
color: var(--color-ink-cream);
}
.btn--link {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: inherit;
background: transparent;
border: 0;
padding: 0;
border-bottom: 1px solid var(--color-accent);
padding-bottom: 4px;
transition: color var(--duration-micro) var(--ease-settle);
}
.btn--link .arrow {
display: inline-block;
transition: transform var(--duration-micro) var(--ease-settle);
}
.btn--link:hover { color: var(--color-accent); }
.btn--link:hover .arrow { transform: translateX(3px); }
/* ---- Hairline rule ------------------------------------------------------ */
.hairline {
width: 100%;
height: 1px;
background: currentColor;
opacity: 0.18;
border: 0;
}
/* ---- Grain overlay (used on hero) -------------------------------------- */
.grain {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.18;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* =========================================================================
NAV
Absolute over the hero — chrome speaks first, navigation second.
========================================================================= */
.nav {
position: absolute;
inset: 0 0 auto 0;
z-index: 10;
padding-block: var(--space-5);
color: var(--color-ink-cream);
}
.nav__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.nav__brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.nav__logo {
height: clamp(48px, 5.2vw, 70px);
width: auto;
display: block;
filter: drop-shadow(0 1px 6px rgba(27, 13, 13, 0.35));
}
.nav__brand-mark {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: var(--color-ink-cream);
}
.nav__links {
display: none;
gap: var(--space-6);
}
.nav__links > ul {
display: contents;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-cream-mute);
white-space: nowrap;
transition: color var(--duration-micro) var(--ease-settle);
}
.nav__links a:hover { color: var(--color-ink-cream); }
.nav__links a[aria-current="page"] { color: var(--color-ink-cream); }
.nav__cta { padding: 12px 22px; min-height: 44px; font-size: 0.75rem; }
.nav__toggle {
/* Default visible — this is the mobile nav affordance. The
@media (min-width: 900px) block below hides it once the inline
nav__links row takes over on desktop. */
display: flex;
flex-direction: column;
gap: 5px;
background: transparent;
border: 0;
padding: var(--space-3);
margin: calc(var(--space-3) * -1);
}
.nav__toggle span {
width: 22px;
height: 1px;
background: var(--color-ink-cream);
transition: transform var(--duration-micro) var(--ease-settle), opacity var(--duration-micro);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__drawer {
display: none;
position: absolute;
inset: 100% 0 auto 0;
background: rgba(27, 13, 13, 0.96);
backdrop-filter: blur(8px);
border-top: 1px solid var(--color-border-deep);
padding: var(--space-7) var(--gutter-mobile) var(--space-8);
}
.nav__drawer[data-open="true"] { display: block; }
.nav__drawer ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
.nav__drawer a {
display: block;
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 500;
color: var(--color-ink-cream);
}
@media (min-width: 1080px) {
.nav__links { display: inline-flex; }
.nav__toggle { display: none; }
.nav__drawer { display: none !important; }
}
/* Below the inline-nav breakpoint the links collapse into the hamburger
drawer. Keep the booking CTA hugging the toggle on the right instead of
letting space-between strand it mid-row. */
@media (max-width: 1079px) {
.nav__cta { margin-left: auto; }
}
/* ---- Nav: Education dropdown (desktop) + accordion (mobile drawer) ------- */
.nav__sub { position: relative; display: inline-flex; align-items: center; }
.nav__sub-btn {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-cream-mute);
background: transparent;
border: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
transition: color var(--duration-micro) var(--ease-settle);
}
.nav__sub-btn:hover,
.nav__sub:hover .nav__sub-btn,
.nav__sub-btn[aria-expanded="true"],
.nav__sub.is-current .nav__sub-btn { color: var(--color-ink-cream); }
.nav__caret {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--duration-micro) var(--ease-settle);
}
.nav__sub:hover .nav__caret,
.nav__sub-btn[aria-expanded="true"] .nav__caret { transform: translateY(1px) rotate(-135deg); }
.nav__submenu {
display: none;
position: absolute;
top: calc(100% + var(--space-4));
left: 50%;
transform: translateX(-50%);
min-width: 236px;
list-style: none;
margin: 0;
padding: var(--space-3);
background: rgba(27, 13, 13, 0.97);
backdrop-filter: blur(8px);
border: 1px solid var(--color-border-deep);
border-radius: var(--radius-md);
box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.75);
z-index: 20;
}
/* invisible hover-bridge across the gap so the menu doesn't flicker shut */
.nav__sub::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: var(--space-4);
}
.nav__sub:hover .nav__submenu,
.nav__sub-btn[aria-expanded="true"] + .nav__submenu { display: block; }
.nav__submenu li { display: block; }
.nav__submenu a {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
white-space: nowrap;
transition: background var(--duration-micro), color var(--duration-micro);
}
.nav__submenu a:hover,
.nav__submenu a[aria-current="page"] {
background: var(--color-surface-deep);
color: var(--color-ink-cream);
}
/* Mobile drawer — Education accordion */
.nav__drawer-sub { display: block; }
.nav__drawer-subbtn {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 500;
color: var(--color-ink-cream);
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
}
.nav__drawer-subbtn .nav__caret { width: 9px; height: 9px; border-width: 2px; }
.nav__drawer-submenu {
display: none;
list-style: none;
margin: var(--space-4) 0 0;
padding: 0 0 0 var(--space-4);
border-left: 1px solid var(--color-border-deep);
gap: var(--space-4);
}
.nav__drawer-subbtn[aria-expanded="true"] + .nav__drawer-submenu { display: grid; }
.nav__drawer-subbtn[aria-expanded="true"] .nav__caret { transform: translateY(1px) rotate(-135deg); }
.nav__drawer-submenu a { font-size: 1.25rem; color: var(--color-ink-cream-mute); }
.nav__drawer-submenu a[aria-current="page"] { color: var(--color-ink-cream); }
/* =========================================================================
§1 — HERO
Beat 1: Recognition. Editorial atmosphere — "this is for me."
========================================================================= */
.hero {
position: relative;
/* Trimmed from 100dvh — the bag photograph's interesting content (bags,
stand, chambers, tubing) sits in the top ~80% of the frame, and a full-
viewport hero left a band of empty dark floor under the visible content.
Clamp gives enough room for the text stack + bags at any width without
pushing dead space below them. */
min-height: clamp(620px, 82dvh, 840px);
background: var(--color-bg-deep);
color: var(--color-ink-cream);
display: flex;
align-items: stretch;
padding-top: clamp(72px, 7vw, 108px);
padding-bottom: clamp(16px, 1.8vw, 36px);
overflow: hidden;
}
.hero__plate {
position: absolute;
inset: 0;
z-index: 1;
}
/* The wrapper must fill the plate too — the global
`img, picture, svg { height: auto }` reset (see top of file) otherwise
leaves at auto height, so the img's height:100% has no definite
parent to resolve against and collapses to the photo's natural height,
leaving a bare dark band below it. (Same pattern the contact + page heroes use.) */
.hero__plate picture {
display: block;
width: 100%;
height: 100%;
}
.hero__plate img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Dimmed so the cream headline pops off the photo; the bags keep their warm
glow through the scrim above. Scaled up (zoomed toward the bags) so the
drips read larger behind the text. overflow:hidden on .hero crops the
overscan cleanly. */
opacity: 0.68;
transform: scale(1.14);
transform-origin: 50% 36%;
}
/* Legibility scrim — heavier on left where headline sits, lighter toward right.
A second vertical pass darkens top + bottom to keep nav and credentials readable. */
/* Legibility scrim — preserves a heavier left side (so the headline reads),
tapers softly through the centre so the bags retain their warm colour,
and adds a gentle vignette + ambient glow that makes the bags feel lit
from within rather than dropped on top of a dark plate. */
.hero__plate::before {
content: "";
position: absolute;
inset: 0;
background:
/* Soft ambient glow centred behind the bags */
radial-gradient(
ellipse 58% 50% at 52% 42%,
rgba(255, 220, 190, 0.10) 0%,
rgba(255, 220, 190, 0.04) 40%,
rgba(46, 21, 23, 0) 72%
),
/* Left-to-right legibility scrim */
linear-gradient(
90deg,
rgba(27, 13, 13, 0.82) 0%,
rgba(46, 21, 23, 0.55) 32%,
rgba(46, 21, 23, 0.18) 58%,
rgba(46, 21, 23, 0.10) 80%,
rgba(46, 21, 23, 0.22) 100%
),
/* Top + bottom vignette so nav and credentials stay readable */
linear-gradient(
180deg,
rgba(27, 13, 13, 0.55) 0%,
rgba(27, 13, 13, 0.08) 26%,
rgba(27, 13, 13, 0) 52%,
rgba(27, 13, 13, 0.22) 100%
);
z-index: 1;
}
/* Bleed-and-fade: the bottom of the hero dissolves into §2 in two stages —
wine-on-wine for the first third (so the image silently disappears), then
a warm terracotta inflection into cream so the seam is invisible. */
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* Cream still resolves at the hero's bottom edge (100%), but the visible
warm/cream band now climbs ~25% higher — its top sits just below the
trust-line/city text so that text stays on dark and readable. */
height: clamp(200px, 28vh, 340px);
background: linear-gradient(
180deg,
rgba(46, 21, 23, 0) 0%,
rgba(46, 21, 23, 0.55) 14%,
rgba(120, 70, 56, 0.75) 42%,
rgba(176, 138, 100, 0.85) 70%,
var(--color-bg-cream) 92%,
var(--color-bg-cream) 100%
);
z-index: 4;
pointer-events: none;
}
.hero__nmark {
position: absolute;
top: 92px;
right: var(--gutter-mobile);
z-index: 8;
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.hero__nmark::before {
content: "";
width: 32px;
height: 1px;
background: var(--color-accent);
}
@media (min-width: 900px) {
.hero__nmark {
top: 150px;
right: var(--gutter-desktop);
}
}
.hero__rail {
display: none;
position: absolute;
left: var(--gutter-desktop);
top: 50%;
z-index: 8;
transform: translateY(-50%) rotate(-90deg);
transform-origin: left center;
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
white-space: nowrap;
}
.hero__rail span { color: var(--color-ink-cream); }
.hero__rail::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--color-accent);
margin-right: var(--space-3);
vertical-align: middle;
}
@media (min-width: 1100px) { .hero__rail { display: inline-flex; align-items: center; } }
.hero__inner {
position: relative;
z-index: 5;
width: 100%;
display: grid;
grid-template-columns: 1fr;
/* Anchor content to the top so the trust line lands at a known
distance below the headline — never in the bottom fade region. */
align-items: start;
padding-block: clamp(24px, 4vh, 56px) var(--space-6);
}
@media (min-width: 980px) {
.hero__inner {
grid-template-columns: 1.05fr 0.95fr;
align-items: start;
padding-top: clamp(32px, 5vh, 64px);
padding-bottom: var(--space-7);
}
}
.hero__content {
display: grid;
gap: var(--space-5);
max-width: 640px;
}
.hero__eyebrow {
color: var(--color-ink-cream-mute);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.hero__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--color-accent);
}
.hero__headline {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--font-size-3xl);
line-height: 1.02;
letter-spacing: -0.025em;
text-wrap: balance;
margin: 0;
color: var(--color-ink-cream);
}
.hero__headline em {
font-style: italic;
color: var(--color-accent-bright);
font-weight: 500;
}
/* Keyword-bearing line inside the H1 — small caps Manrope so the H1
carries the search-relevant phrase without breaking the editorial
composition. The display phrase below is the visual hero. */
.hero__headline-kicker {
display: block;
font-family: var(--font-sans);
font-size: clamp(0.7rem, 0.4vw + 0.6rem, 0.875rem);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
line-height: 1.45;
margin-bottom: var(--space-4);
max-width: 22ch;
}
.hero__headline-display {
display: block;
}
.hero__sub {
font-size: var(--font-size-md);
line-height: 1.55;
color: var(--color-ink-cream-mute);
max-width: 520px;
margin: 0;
}
/* Inline price anchors. The numbers ($50 / $175) carry the value claim,
so they step one notch brighter than the surrounding muted body and
take a heavier weight — without becoming a separate visual block. */
.hero__sub strong {
color: var(--color-ink-cream);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.hero__cred {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-ink-cream);
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
align-items: center;
}
.hero__cred .dash { color: var(--color-accent); }
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-3);
}
.hero__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
align-items: center;
padding-top: var(--space-5);
border-top: 1px solid var(--color-border-deep);
margin-top: var(--space-5);
}
.hero__chips li {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-cream);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.hero__chips li::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-accent);
}
.hero__chips ul {
list-style: none; margin: 0; padding: 0;
display: contents;
}
/* -------------------------------------------------------------------------
§1 — Hero mobile rebuild
On narrow viewports the bag photograph IS the brand recognition — not
the text stack. This block reclaims vertical room for the image by
retiring elements the sticky bottom CTA + content below the fold
already cover. Drip overlay anchoring is untouched: .hero__plate,
.hero__plate img, and .drip-overlay__frame all stay exactly as is —
the falling-drip animation continues to align with the bag photo.
------------------------------------------------------------------------- */
@media (max-width: 700px) {
/* Drop the inline nav booking button on mobile. The sticky bottom CTA +
the hero primary CTA already give two booking entry points within
tap reach, and removing this unblocks the top-right of the photograph. */
.nav__cta { display: none; }
/* Drop the secondary "See featured drips" outline CTA on mobile. A
390-wide viewport with two equally weighted stacked buttons diffuses
click intent; the primary CTA wins alone. The full drips section is
one short scroll away. */
.hero__ctas .btn--outline-cream { display: none; }
/* Keep the SEO kicker inside the darker left-side scrim so it doesn't
bleed into the bag photograph on the right and lose contrast. Wraps
to ~2 lines in the legibility zone instead of running edge-to-edge. */
.hero__headline-kicker {
max-width: 18ch;
letter-spacing: 0.10em;
margin-bottom: var(--space-3);
}
/* Same legibility floor for the byline — keep names + RN credentials
in the dark area so they don't get visually swallowed by the bags. */
.hero__byline {
max-width: 22ch;
}
/* Tighten the hero text stack so the bag photograph behind/above it
has more room to breathe before the content overlay begins. */
.hero__content { gap: var(--space-4); }
}
/* =========================================================================
§2 — Four-feature grid (cream)
Beat 2: Permission. Authority whispered.
========================================================================= */
/* =========================================================================
§2 — SERVICES PREVIEW · Three-tile shopping-mode entry
Curated menu preview between the trust bar and the §3 educational
explainer. Type-driven, editorial menu feel — italic Cormorant
numerals as decorative markers, serif tile names, sans body, hairline
accent line that lifts on hover. Three columns desktop, stack mobile.
========================================================================= */
.services__head {
text-align: center;
max-width: 760px;
margin: 0 auto var(--space-8);
display: grid;
gap: var(--space-4);
justify-items: center;
}
.services__title {
margin: 0;
font-size: clamp(2rem, 3vw + 1rem, 3rem);
}
.services__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
max-width: var(--content-max);
margin: 0 auto;
}
@media (min-width: 760px) {
.services__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
/* -------------------------------------------------------------------------
Quiz lead card — the "not sure where to start?" default path.
Sits above the three service tiles as the dominant first move for a
novice (paradox-of-choice fix). Warmer surface + filled CTA + accent
bar give it visual primacy over the flat ivory tiles below.
------------------------------------------------------------------------- */
.quiz-lead {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-4) var(--space-8);
margin: 0 0 var(--space-7);
padding: var(--space-6) var(--space-7);
background: var(--color-surface-cream);
border: 1px solid var(--color-border-cream);
text-decoration: none;
color: var(--color-ink-deep);
transition: transform var(--duration-component) var(--ease-settle),
box-shadow var(--duration-component) var(--ease-settle),
border-color var(--duration-component) var(--ease-settle);
}
.quiz-lead::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px;
height: 3px;
background: var(--color-accent);
}
.quiz-lead:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px -22px rgba(46, 21, 23, 0.30);
border-color: var(--color-accent);
}
.quiz-lead__label {
display: block;
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.quiz-lead__title {
display: block;
font-family: var(--font-serif);
font-size: var(--font-size-lg);
line-height: 1.2;
color: var(--color-ink-deep);
max-width: 34ch;
}
.quiz-lead__btn { white-space: nowrap; }
@media (max-width: 640px) {
.quiz-lead { grid-template-columns: 1fr; }
.quiz-lead__btn { justify-self: start; }
}
.service-tile {
position: relative;
background: var(--color-bg-ivory);
border: 1px solid var(--color-border-cream);
padding: var(--space-7) var(--space-6) var(--space-6);
display: grid;
grid-template-rows: auto auto auto 1fr auto;
gap: var(--space-3);
transition: transform var(--duration-component) var(--ease-settle),
box-shadow var(--duration-component) var(--ease-settle),
border-color var(--duration-component) var(--ease-settle);
}
.service-tile::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px;
height: 3px;
background: var(--color-accent);
transform-origin: center;
transition: height var(--duration-component) var(--ease-settle);
}
.service-tile:hover {
transform: translateY(-3px);
box-shadow: 0 18px 36px -22px rgba(46, 21, 23, 0.30);
border-color: var(--color-accent);
}
.service-tile:hover::before {
height: 4px;
}
.service-tile__numeral {
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: 1.5rem;
color: var(--color-accent);
letter-spacing: 0.04em;
line-height: 1;
}
.service-tile__name {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.75rem;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--color-ink-deep);
margin: 0;
}
.service-tile__price {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-soft);
margin: 0;
}
.service-tile__price strong {
font-weight: 600;
color: var(--color-ink-deep);
letter-spacing: 0;
font-size: 1rem;
}
.service-tile__desc {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-ink-muted);
margin: 0;
}
.service-tile__cta {
margin-top: var(--space-3);
align-self: start;
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.features {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 600px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.feature {
background: var(--color-bg-ivory);
border: 1px solid var(--color-border-cream);
padding: var(--space-7);
display: grid;
gap: var(--space-4);
transition: transform var(--duration-component) var(--ease-settle),
box-shadow var(--duration-component) var(--ease-settle);
}
/* Alternating maroon accent: cards 2 & 4 take the deep-wine background
from the hero so the row reads as the brand's signature two-tone
rhythm — ivory · maroon · ivory · maroon. */
.feature:nth-child(even) {
background: var(--color-bg-deep);
border-color: rgba(245, 237, 221, 0.10);
}
.feature:nth-child(even) .feature__name { color: var(--color-ink-cream); }
.feature:nth-child(even) .feature__desc { color: var(--color-ink-cream-mute); }
.feature:nth-child(even):hover {
box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.55);
}
.feature:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -24px rgba(46, 21, 23, 0.35);
}
.feature__icon {
width: 28px; height: 28px;
color: var(--color-accent);
stroke: currentColor;
fill: none;
stroke-width: 1.4;
}
.feature__name {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0;
color: var(--color-ink-deep);
}
.feature__desc {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-ink-muted);
margin: 0;
max-width: 32ch;
}
/* =========================================================================
§3 — What an IV therapy is (ivory)
Beat 3: Permission deepening.
========================================================================= */
.therapy {
text-align: center;
display: grid;
gap: var(--space-6);
justify-items: center;
}
.therapy__head {
max-width: 880px;
display: grid;
gap: var(--space-5);
justify-items: center;
}
.therapy__lede {
text-align: center;
max-width: 640px;
}
.therapy__benefits {
width: 100%;
max-width: var(--content-max);
list-style: none;
margin: var(--space-5) 0 0;
padding: var(--space-7) 0 0;
border-top: 1px solid var(--color-border-cream);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
text-align: left;
}
@media (min-width: 600px) { .therapy__benefits { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); } }
@media (min-width: 1000px) { .therapy__benefits { grid-template-columns: repeat(4, 1fr); gap: var(--space-7); } }
.therapy__benefit {
display: grid;
gap: var(--space-3);
align-content: start;
}
.therapy__benefit__icon {
width: 28px;
height: 28px;
color: var(--color-accent);
margin-bottom: var(--space-1);
}
.therapy__benefit h3 {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-ink-deep);
margin: 0;
}
.therapy__benefit p {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-ink-muted);
margin: 0;
max-width: 32ch;
}
.therapy__benefit p sup {
color: var(--color-accent);
font-weight: 600;
font-size: 0.65em;
padding-left: 0.05em;
}
.therapy__benefit h3 sup {
font-size: 0.7em;
letter-spacing: 0;
}
/* Cited-references line under the benefit grid. Reads as a journal footnote:
small sans, justified center, italic journal titles, narrow dot separators. */
.therapy__refs {
width: 100%;
max-width: var(--content-max);
margin: var(--space-7) 0 0;
padding: var(--space-5) 0 0;
border-top: 1px solid var(--color-border-cream);
font-family: var(--font-sans);
font-size: 0.75rem;
line-height: 1.8;
letter-spacing: 0.04em;
color: var(--color-ink-soft);
text-align: center;
}
.therapy__refs sup {
color: var(--color-accent);
font-weight: 600;
margin-right: 0.1em;
}
.therapy__refs em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.05em;
color: var(--color-ink-muted);
}
.therapy__refs-sep {
display: inline-block;
margin-inline: 0.6em;
color: var(--color-border-cream);
}
/* Health Canada / CNO disclaimer. Smaller, italic, fine-print restraint. */
.therapy__disclaimer {
width: 100%;
max-width: 64ch;
margin: var(--space-5) auto 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.8125rem;
line-height: 1.6;
color: var(--color-ink-soft);
text-align: center;
opacity: 0.85;
}
/* =========================================================================
§4 — Featured drips (deep wine)
Beat 4: Desire. Bottle as fragrance.
========================================================================= */
.drips__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: end;
margin-bottom: var(--space-9);
}
@media (min-width: 900px) {
.drips__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.drips__title { color: var(--color-ink-cream); }
.drips__carousel { position: relative; }
/* Mobile (<800px): one full-width drip at a time, horizontal swipe with snap.
≥800px it reverts to the three-up grid below. */
.drips__grid {
display: flex;
gap: var(--space-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.drips__grid::-webkit-scrollbar { display: none; }
.drips__grid > .drip {
flex: 0 0 100%;
scroll-snap-align: center;
min-width: 0;
}
/* Pagination dots + prev/next — cream-toned for the dark wine section.
Shown only while the carousel is active (<800px). */
.drips__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-6);
}
.drips__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.drips__dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(247, 242, 233, 0.40);
background: transparent;
padding: 0;
cursor: pointer;
transition: background 180ms ease-out, border-color 180ms ease-out, width 180ms ease-out;
}
.drips__dot[aria-current="true"] {
width: 24px;
background: var(--color-ink-cream);
border-color: var(--color-ink-cream);
}
.drips__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid rgba(247, 242, 233, 0.40);
background: transparent;
color: var(--color-ink-cream);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
transition: background 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}
.drips__nav:hover,
.drips__nav:focus-visible { background: rgba(247, 242, 233, 0.12); }
.drips__nav:active { transform: scale(0.94); }
.drips__nav:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 800px) {
.drips__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
align-items: stretch;
overflow: visible;
}
.drips__grid > .drip { flex: 0 1 auto; scroll-snap-align: none; }
.drips__controls,
.drips__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.drips__nav:active { transform: none; }
}
.drips__lede { align-self: end; padding-bottom: 0.35em; }
.drip {
display: flex;
flex-direction: column;
background: var(--color-bg-cream);
color: var(--color-ink-deep);
border-radius: var(--radius-arch);
overflow: hidden;
position: relative;
box-shadow: 0 30px 60px -40px rgba(0,0,0,0.6);
transition: transform var(--duration-component) var(--ease-settle);
}
.drip:hover { transform: translateY(-4px); }
.drip--center {
background: var(--color-surface-cream);
box-shadow: 0 50px 80px -40px rgba(0,0,0,0.7);
}
/* All three cards share the same top baseline — distinction comes from
the centre card's deeper shadow + surface, not from a vertical stagger. */
.drip__art {
position: relative;
aspect-ratio: 3 / 4;
background: transparent;
display: grid;
place-items: center;
padding: var(--space-5) var(--space-3);
}
/* The bag lives inside a ; left unstyled it blockifies to the full
content width and the ![]()
sits left-aligned within it, pulling the bag
off-centre. display:contents removes the wrapper from layout so the ![]()
is the direct grid child and gets centred. */
.drip__art picture { display: contents; }
.drip__art img {
max-height: 100%;
max-width: 80%;
width: auto;
height: auto;
object-fit: contain;
filter: contrast(1.02) saturate(1.05);
}
/* Athletes Recovery was shot with crisper plastic edges and stronger
highlights than Myers / Glutathione — softens it slightly so the three
bags read as one consistent product family rather than a sharper bag
sitting next to two softer ones. */
.drip__art img[src*="athletes-recovery"] {
filter: contrast(0.93) saturate(0.9) brightness(1.04);
}
.drip__body {
padding: var(--space-6);
display: flex; /* flex column so the CTA can be pushed to the bottom */
flex-direction: column;
gap: var(--space-3);
flex: 1;
border-top: 1px solid var(--color-border-cream);
background: var(--color-surface-cream);
}
.drip--center .drip__body { background: var(--color-bg-cream); }
.drip__body .eyebrow { color: var(--color-ink-soft); }
.drip__name {
font-family: var(--font-serif);
font-size: 1.875rem;
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.05;
margin: 0;
color: var(--color-ink-deep);
}
.drip__desc {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-ink-muted);
margin: 0;
max-width: 32ch;
}
/* Push the CTA to the bottom regardless of description length so the
three "Book your drip" buttons sit on the same horizontal baseline. */
.drip .btn {
margin-top: auto;
align-self: start;
}
.drips__tail {
text-align: center;
margin-top: var(--space-9);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.drips__tail .drips__lede {
align-self: center;
padding-bottom: 0;
max-width: 56ch;
margin: 0;
color: var(--color-ink-cream-mute);
}
/* =========================================================================
§6 — Guest notes / Reviews (ivory)
Two editorial pull-quotes pulled verbatim from Google reviews. Cormorant
Garamond italic serif for the quote body, a large coral open-quote
glyph as the only decoration, a thin coral hairline + caps Manrope
attribution echoing the eyebrow language used elsewhere on the page.
Two columns at >=800px, stacked below.
========================================================================= */
.reviews__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: end;
margin-bottom: var(--space-9);
}
@media (min-width: 900px) {
.reviews__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.reviews__lede { align-self: end; padding-bottom: 0.35em; }
ol.reviews,
ul.reviews {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 800px) {
ol.reviews,
ul.reviews {
grid-template-columns: 1fr 1fr;
gap: var(--space-7) var(--space-9);
}
}
.review {
position: relative;
padding: var(--space-7) 0 0;
/* Quiet hairline above each quote — sets the editorial frame without
boxing the quotation into a card. */
border-top: 1px solid var(--color-border-cream);
}
/* Decorative oversized open-quote glyph. Sits just above the quote
text in the padded gutter, in the brand coral so it reads as a
visual signature rather than punctuation. */
.review__mark {
position: absolute;
top: 0;
left: -0.05em;
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(3.5rem, 5vw + 1.5rem, 5.5rem);
line-height: 0.7;
color: var(--color-accent);
user-select: none;
pointer-events: none;
}
.review__quote {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.25rem, 0.7vw + 1.05rem, 1.625rem);
line-height: 1.35;
color: var(--color-ink-deep);
margin: 0 0 var(--space-5);
text-wrap: pretty;
max-width: 34ch;
}
.review__cite {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-muted);
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.review__cite::before {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: var(--color-accent);
flex: none;
}
.review__cite-name { color: var(--color-ink-deep); font-weight: 600; }
.review__cite-sep { color: var(--color-ink-muted); }
.reviews__tail {
text-align: center;
margin-top: var(--space-9);
}
/* =========================================================================
§6.b — Google Reviews block (cream)
Centred editorial header ("Google Reviews" display title), circular 5.0
badge floated top-right, large coral italic open-quote glyph used as a
background ornament, soft peach arch sitting behind the left card to
echo the apothecary-alcove motif from §4. Asymmetric grid: one tall
featured card on the left, two stacked cards on the right; collapses
to a single column under 800px.
========================================================================= */
.gr-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Soft tonal arch behind the featured card — a quiet echo of the
drip-card arch motif (§4) without competing with it. */
.gr-section__arch {
position: absolute;
top: 18%;
left: -160px;
width: 420px;
height: 520px;
border-radius: 9999px;
background: radial-gradient(
closest-side,
rgba(217, 161, 153, 0.32) 0%,
rgba(217, 161, 153, 0.18) 45%,
rgba(217, 161, 153, 0) 75%
);
z-index: 0;
pointer-events: none;
}
@media (max-width: 900px) {
.gr-section__arch { width: 320px; height: 380px; top: 32%; left: -120px; }
}
/* Oversized italic open-quote sitting between the head and the grid.
Sits ABOVE the review cards (z-index 2) so both marks of the “
glyph remain visible — the second mark would otherwise hide behind
the featured card's edge. Translucent + accent-soft tint keeps the
overlap subtle, reading as a wash on the card corner. */
.gr-section__quote {
position: absolute;
left: 6%;
top: 36%;
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(10rem, 18vw, 18rem);
line-height: 0.7;
color: var(--color-accent-soft);
opacity: 0.42;
z-index: 2;
pointer-events: none;
user-select: none;
mix-blend-mode: multiply;
}
/* Closing mark — mirrors the opening flourish at the lower-right so the
section reads as a properly opened AND closed quotation. */
.gr-section__quote--close {
left: auto;
right: 6%;
top: auto;
bottom: 12%;
}
@media (max-width: 900px) {
.gr-section__quote { left: 4%; top: 30%; font-size: 8rem; opacity: 0.32; }
.gr-section__quote--close { left: auto; right: 4%; top: auto; bottom: 8%; }
}
.gr-reviews {
position: relative;
z-index: 1;
display: grid;
gap: var(--space-7);
}
/* ----- Header ------------------------------------------------------------ */
.gr-reviews__head {
text-align: center;
margin-inline: auto;
max-width: none;
display: grid;
justify-items: center;
gap: var(--space-3);
}
/* Small-caps eyebrow above the headline, styled like the rest of the page
so the section locks into the editorial system instead of relying on a
one-off wordmark. */
.gr-reviews__eyebrow-top {
margin: 0 0 var(--space-3);
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-accent);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.gr-reviews__eyebrow-top::before,
.gr-reviews__eyebrow-top::after {
content: "";
width: 24px;
height: 1px;
background: var(--color-accent);
display: inline-block;
}
.gr-reviews__title {
margin: 0;
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2.75rem, 6vw + 0.5rem, 5.25rem);
line-height: 1;
letter-spacing: -0.025em;
color: var(--color-ink-deep);
text-wrap: balance;
}
.gr-reviews__title em {
font-style: italic;
color: var(--color-accent);
font-weight: 500;
}
.gr-reviews__eyebrow {
margin: var(--space-2) 0 0;
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-ink-soft);
line-height: 1.9;
}
/* ----- Rating badge (top-right circle) ----------------------------------- */
.gr-reviews__badge {
align-self: center;
justify-self: center;
display: grid;
justify-items: center;
align-content: center;
gap: 6px;
width: 172px;
height: 172px;
padding: var(--space-4);
border-radius: 50%;
background: rgba(245, 237, 221, 0.92);
border: 1px solid var(--color-border-cream);
box-shadow: 0 24px 50px -36px rgba(46, 21, 23, 0.55);
text-align: center;
}
@media (min-width: 900px) {
.gr-reviews__badge {
position: absolute;
top: 0;
right: var(--space-2);
}
}
.gr-reviews__badge-stars {
display: inline-flex;
gap: 2px;
color: var(--color-accent);
}
.gr-reviews__badge-stars svg {
width: 13px; height: 13px;
fill: currentColor;
}
.gr-reviews__badge-score {
font-family: var(--font-serif);
font-weight: 500;
font-size: 2.875rem;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-ink-deep);
}
.gr-reviews__badge-label {
font-family: var(--font-sans);
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-soft);
line-height: 1.5;
}
/* ----- Asymmetric grid (1 featured + 2 stacked) -------------------------- */
.gr-reviews__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.gr-reviews__grid {
grid-template-columns: 1.05fr 0.95fr;
grid-template-rows: 1fr 1fr;
gap: var(--space-5);
}
.gr-card--featured {
grid-column: 1;
grid-row: 1 / span 2;
}
}
.gr-card {
position: relative;
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-6);
background: rgba(245, 237, 221, 0.94);
border: 1px solid var(--color-border-cream);
border-radius: var(--radius-md);
box-shadow:
0 1px 0 rgba(245, 237, 221, 0.6) inset,
0 30px 50px -40px rgba(46, 21, 23, 0.45);
transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}
.gr-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(245, 237, 221, 0.6) inset,
0 40px 60px -36px rgba(46, 21, 23, 0.55);
}
.gr-card--featured {
padding: var(--space-7);
gap: var(--space-4);
}
/* Oversized open-quote tucked into the featured card's top-left corner.
First child in the DOM so it paints BEHIND the stars/name/quote — reads
as a translucent accent watermark anchored to the corner, not a glyph
sitting on top of the copy. */
.gr-card__quotemark {
position: absolute;
top: -0.18em;
left: 0.14em;
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(5.5rem, 7vw, 7.5rem);
line-height: 0.7;
color: var(--color-accent-soft);
opacity: 0.5;
pointer-events: none;
user-select: none;
}
.gr-card__stars {
display: inline-flex;
gap: 4px;
color: var(--color-accent);
}
.gr-card__stars svg {
width: 16px; height: 16px;
fill: currentColor;
}
.gr-card--featured .gr-card__stars svg { width: 18px; height: 18px; }
.gr-card__name {
margin: var(--space-2) 0 var(--space-3);
padding-bottom: var(--space-3);
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(1.625rem, 1.4vw + 1rem, 2.125rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--color-ink-deep);
position: relative;
}
.gr-card__name::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 1px;
background: var(--color-accent);
}
.gr-card--featured .gr-card__name {
font-size: clamp(2rem, 1.8vw + 1.4rem, 2.75rem);
margin-top: var(--space-3);
}
.gr-card__quote {
margin: 0;
font-family: var(--font-sans);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-ink-deep);
max-width: 38ch;
}
.gr-card--featured .gr-card__quote {
font-size: 1.0625rem;
line-height: 1.7;
max-width: 36ch;
}
/* ----- Tail CTA ---------------------------------------------------------- */
.gr-reviews__tail {
display: flex;
justify-content: center;
margin-top: var(--space-3);
}
.gr-reviews__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 0 0 6px;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-ink-deep);
border-bottom: 1px solid var(--color-accent);
text-decoration: none;
transition: color 200ms ease, border-color 200ms ease;
}
.gr-reviews__cta .arrow {
display: inline-block;
transition: transform 220ms ease-out;
}
.gr-reviews__cta:hover,
.gr-reviews__cta:focus-visible {
color: var(--color-accent-hover);
border-bottom-color: var(--color-accent-hover);
}
.gr-reviews__cta:hover .arrow,
.gr-reviews__cta:focus-visible .arrow {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.gr-card,
.gr-reviews__cta,
.gr-reviews__cta .arrow { transition: none; }
.gr-card:hover { transform: none; }
}
/* =========================================================================
§5 — Process (cream)
"Three easy steps to feeling better." Centred head, three arched photo
cards on desktop with the middle card staggered downward. Italic coral
numerals sit upper-left of each card and a thin dotted curve hops
between them, mirroring the editorial-medical reference layout.
========================================================================= */
.process__head--center {
text-align: center;
display: grid;
justify-items: center;
gap: var(--space-4);
margin-bottom: var(--space-9);
max-width: 880px;
margin-inline: auto;
}
.process__eyebrow {
color: var(--color-accent);
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
}
.process__title {
margin: 0;
text-wrap: balance;
color: var(--color-ink-deep); /* explicit so it never inherits a light hue on cream */
}
.process__title em {
font-style: italic;
color: var(--color-accent-hover); /* deeper terracotta — stronger contrast on cream */
}
/* ---- Process steps — mobile accordion, desktop 3-up arched cards --------
Mobile: each step is a collapsible . The collapsed row shows the
numeral, a small arched thumbnail and the title; tapping drops the detail
down. Desktop (≥800px) reverts to the full arched photo cards — a script
keeps all three open there so they read as static cards. */
.process__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
align-items: start;
position: relative;
}
@media (min-width: 800px) {
.process__grid {
grid-template-columns: repeat(3, 1fr);
gap: clamp(var(--space-6), 4vw, var(--space-8));
}
}
.step-card { position: relative; }
/* Mobile: the accordion panel. */
.step-card__details {
border: 1px solid var(--color-border-cream);
border-radius: 14px;
background: var(--color-bg-ivory);
overflow: hidden;
}
/* Summary = the tappable header row. Native disclosure marker removed. */
.step-card__summary {
list-style: none;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.step-card__summary::-webkit-details-marker { display: none; }
.step-card__summary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.step-card__num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.375rem;
line-height: 1;
color: var(--color-accent);
letter-spacing: -0.02em;
flex: 0 0 auto;
}
/* Arched thumbnail (mobile). The photo IS the shape — a small arch. */
.step-card__media {
position: relative;
margin: 0;
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50% 50% 24% 24% / 58% 58% 28% 28%;
overflow: hidden;
box-shadow: 0 6px 14px -8px rgba(46, 21, 23, 0.42);
}
.step-card__media::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(46, 21, 23, 0.10);
pointer-events: none;
}
.step-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(1.04) contrast(1.03);
}
.step-card__title {
flex: 1 1 auto;
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.0625rem;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
color: var(--color-ink-deep);
text-align: left;
}
/* Chevron — points down when closed, flips up when open. */
.step-card__chevron {
flex: 0 0 auto;
width: 10px;
height: 10px;
margin-right: 4px;
border-right: 2px solid var(--color-accent);
border-bottom: 2px solid var(--color-accent);
transform: rotate(45deg);
transition: transform 200ms ease;
}
.step-card__details[open] .step-card__chevron { transform: rotate(-135deg); }
/* Detail body drops down under the row, indented to line up with the title. */
.step-card__body {
padding: 0 var(--space-3) var(--space-4);
padding-left: calc(var(--space-3) + 1.5rem + var(--space-3) + 56px + var(--space-3));
}
.step-card__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-ink-muted);
margin: 0;
max-width: 60ch;
}
/* ---- Desktop: the original 3-up arched photo cards -------------------- */
@media (min-width: 800px) {
.step-card { padding-top: var(--space-7); }
.step-card__details {
border: 0;
border-radius: 0;
background: none;
overflow: visible;
}
.step-card__summary {
display: grid;
justify-items: center;
gap: var(--space-5);
padding: 0;
cursor: default;
pointer-events: none;
}
/* Italic numeral floats above each card at top-left. */
.step-card__num {
position: absolute;
top: -16px;
left: -8px;
font-size: clamp(3.5rem, 5vw + 1rem, 5.75rem);
line-height: 0.9;
z-index: 2;
pointer-events: none;
}
.step-card__media {
flex: none;
width: 100%;
max-width: 440px;
height: auto;
aspect-ratio: 4 / 5;
border-radius: 50% 50% 8% 8% / 60% 60% 4% 4%;
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.35) inset,
0 38px 60px -34px rgba(46, 21, 23, 0.42);
transition: transform var(--duration-component) var(--ease-settle),
box-shadow var(--duration-component) var(--ease-settle);
}
/* Middle card takes the organic-blob silhouette. */
.step-card:nth-child(2) .step-card__media {
border-radius: 56% 44% 60% 40% / 62% 38% 60% 40%;
}
.step-card:hover .step-card__media {
transform: translateY(-4px);
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.35) inset,
0 46px 70px -32px rgba(46, 21, 23, 0.48);
}
.step-card__title {
flex: none;
text-align: center;
font-size: clamp(1.5rem, 1.2vw + 1.1rem, 1.875rem);
line-height: 1.15;
}
.step-card__chevron { display: none; }
.step-card__body {
text-align: center;
max-width: 38ch;
margin-inline: auto;
padding: var(--space-3) var(--space-3) 0;
}
.step-card__desc {
font-size: 0.9375rem;
line-height: 1.65;
}
}
/* ---- Dotted curve between cards (decorative, desktop only) -------------
Sits in the gap above each pair of cards, level with the floating italic
numeral, so the curve threads step → step at eye height without ever
crossing onto the photographic media beneath. */
.step-card__link {
display: none;
}
@media (min-width: 800px) {
.step-card__link {
display: block;
position: absolute;
/* Lifted above the card top edge — the curve now arcs above the
numerals through the cream margin, never onto the photographs. */
top: clamp(-12px, -1vw, -4px);
width: clamp(120px, 12vw, 180px);
height: clamp(56px, 5.5vw, 84px);
color: var(--color-accent);
opacity: 0.7;
z-index: 1;
pointer-events: none;
overflow: visible;
}
/* Anchor each connector to the gap to the right of its card, fully
outside the card body — the right edge of card N meets the left edge
of card N+1 here. */
.step-card__link--right { right: calc(clamp(120px, 12vw, 180px) * -0.5); }
.step-card__link--left { left: calc(clamp(120px, 12vw, 180px) * -0.5); }
}
.process__cta {
display: flex;
justify-content: center;
margin-top: clamp(var(--space-7), 8vw, var(--space-10));
}
/* =========================================================================
§6 — Testimonials (ivory)
Beat 6: Belonging. Mirror, not rating.
========================================================================= */
.testi__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: end;
margin-bottom: var(--space-9);
}
@media (min-width: 900px) {
.testi__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.testi__split {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
align-items: stretch;
}
@media (min-width: 900px) {
.testi__split { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-9); }
}
.testi__figure {
position: relative;
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
min-height: 420px;
box-shadow: 0 30px 60px -40px rgba(46, 21, 23, 0.5);
}
@media (min-width: 900px) { .testi__figure { min-height: 540px; } }
.testi__figure img {
width: 100%; height: 100%;
object-fit: cover;
}
.testi__figure figcaption {
position: absolute;
inset: auto 0 0 0;
padding: var(--space-9) var(--space-7) var(--space-7);
background: linear-gradient(0deg, rgba(27,13,13,0.85) 0%, rgba(27,13,13,0) 100%);
color: var(--color-ink-cream);
font-family: var(--font-serif);
font-style: italic;
font-size: 1.5rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
.testi__figure figcaption::before {
content: "";
display: block;
width: 28px; height: 1px;
background: var(--color-accent);
margin-bottom: var(--space-3);
}
.testi__quotes {
display: grid;
gap: 0;
align-content: start;
}
.testi__quote {
padding-block: var(--space-6);
border-bottom: 1px solid var(--color-border-cream);
display: grid;
gap: var(--space-3);
}
.testi__quote:first-child { padding-top: 0; }
.testi__quote:last-child { border-bottom: 0; }
.testi__quote-tag {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.testi__quote-tag::before {
content: "";
width: 22px; height: 1px;
background: currentColor;
opacity: 0.6;
}
.testi__quote blockquote {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-ink-deep);
text-indent: -0.4em;
}
.testi__quote blockquote::before {
content: "“";
color: var(--color-accent);
font-style: normal;
font-weight: 500;
margin-right: 0.05em;
}
.testi__quote cite {
font-family: var(--font-sans);
font-style: normal;
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: var(--color-ink-soft);
}
/* =========================================================================
§7 — Events (deep wine)
Beat 7: Aspiration. The room.
========================================================================= */
.events {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
align-items: center;
}
@media (min-width: 900px) {
.events { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-10); }
}
.events__figure {
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
aspect-ratio: 5 / 6;
box-shadow: 0 30px 60px -40px rgba(0,0,0,0.6);
}
.events__figure img {
width: 100%; height: 100%; object-fit: cover;
}
.events__figure::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(27,13,13,0.45), rgba(0,0,0,0) 55%);
}
.events__content { display: grid; gap: var(--space-5); }
.events__bullets {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3) var(--space-7);
border-top: 1px solid var(--color-border-deep);
padding-top: var(--space-5);
margin-top: var(--space-3);
}
@media (min-width: 600px) {
.events__bullets { grid-template-columns: 1fr 1fr; }
}
.events__bullets li {
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-ink-cream);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.events__bullets li::before {
content: "";
width: 14px; height: 1px;
background: var(--color-accent);
}
/* =========================================================================
§8 — Closing (espresso)
Beat 8: Resolution. Single sentence, single CTA.
========================================================================= */
.closing {
position: relative;
text-align: center;
/* Sized so the whole closer fits within one viewport (one scroll): tight on
mobile where height is scarce, generous on desktop where there's room. */
padding-block: clamp(var(--space-7), 6vw + 0.5rem, var(--space-10));
background:
radial-gradient(ellipse at 50% 0%, rgba(194,118,107,0.10) 0%, rgba(194,118,107,0) 55%),
radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%),
var(--color-bg-espresso);
}
.closing__inner {
display: grid;
gap: var(--space-6);
justify-items: center;
max-width: 880px;
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
.closing__title { color: var(--color-ink-cream); }
.closing__lede {
color: var(--color-ink-cream-mute);
font-size: var(--font-size-md);
line-height: 1.55;
max-width: 56ch;
}
.closing__note {
margin-top: var(--space-6);
color: var(--color-ink-cream-mute);
font-family: var(--font-sans);
font-size: 0.75rem;
line-height: 1.6;
letter-spacing: 0.01em;
max-width: 60ch;
opacity: 0.7;
}
/* =========================================================================
§9 — Footer (espresso)
Quiet utility — Instagram override per build-plan.
========================================================================= */
.footer {
background: var(--color-bg-espresso);
color: var(--color-ink-cream);
/* No top divider: the closing CTA above is the same espresso, so the page
resolves into one continuous dark base. Generous top padding + the link
grid separate the footer — no drawn line. */
padding-block: var(--space-7) var(--space-6);
}
.footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--color-border-deep);
}
@media (min-width: 600px) {
.footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
}
.footer__brand { display: grid; gap: var(--space-4); align-content: start; }
/* Mobile: center the wordmark above the brand copy. From 720px up it returns
to a left-aligned column (rules below + the brand override further down).
The PNG carries ~8% transparent left padding, so the small negative margin
re-centers the visible "DRIP…TONIC" inside its box. (Footer has
overflow:clip, so the transparent overhang never creates scroll.) */
.footer__brand img { height: 112px; width: auto; max-width: 100%; justify-self: center; margin-left: -11px; }
@media (min-width: 720px) {
.footer__brand {
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-5);
}
.footer__brand img { height: 80px; justify-self: start; margin-left: -24px; }
}
.footer__brand p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-ink-cream-mute);
max-width: 36ch;
}
.footer__col h3,
.footer__col h4 {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-ink-cream);
margin: 0 0 var(--space-5);
}
/* Short terracotta rule under each column heading (mockup detail). */
.footer__col h3::after,
.footer__col h4::after {
content: "";
display: block;
width: 28px;
height: 2px;
margin-top: var(--space-3);
background: var(--color-accent);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer__col a {
font-size: 0.9375rem;
color: var(--color-ink-cream-mute);
transition: color var(--duration-micro) var(--ease-settle);
}
.footer__col a:hover { color: var(--color-ink-cream); }
.footer__disclaimer {
margin: var(--space-5) 0 0;
padding: var(--space-4) 0 0;
max-width: none;
font-family: var(--font-sans);
font-size: 0.78rem;
line-height: 1.6;
color: var(--color-ink-cream-mute);
letter-spacing: 0.005em;
opacity: 0.86;
}
.footer__disclaimer strong {
color: var(--color-ink-cream);
font-weight: 500;
letter-spacing: 0.02em;
}
.footer__disclaimer a {
color: var(--color-ink-cream);
text-decoration: none;
border-bottom: 1px solid var(--color-accent-line);
transition: border-color .18s ease, color .18s ease;
}
.footer__disclaimer a:hover,
.footer__disclaimer a:focus-visible {
color: var(--color-ink-cream);
border-bottom-color: var(--color-ink-cream);
}
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
padding-top: var(--space-5);
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
}
.footer__bottom .tagline { color: var(--color-ink-cream); }
.footer__legal {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.footer__legal a {
color: var(--color-ink-cream-mute);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .18s ease, border-color .18s ease;
}
.footer__legal a:hover,
.footer__legal a:focus-visible {
color: var(--color-ink-cream);
border-bottom-color: var(--color-accent-line);
}
.footer__legal .sep {
color: var(--color-accent-line);
opacity: 0.6;
}
.footer__social {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-ink-cream-mute);
transition: color var(--duration-micro) var(--ease-settle);
}
.footer__social:hover { color: var(--color-ink-cream); }
.footer__social svg { width: 22px; height: 22px; }
/* =========================================================================
Footer — mockup detailing (CSS-only; shared across all 18 pages)
Crown splash in the brand column + faint droplet watermark bottom-right +
column hairlines + iconified contact list. Both images are decorative CSS
backgrounds; url() resolves relative to this stylesheet, so one path serves
every page regardless of its directory depth.
========================================================================= */
/* Watermark + content stacking. overflow:clip keeps the droplet from ever
producing horizontal scroll at 390px. */
.footer { position: relative; overflow: clip; }
.footer > .container { position: relative; z-index: 1; }
.footer::before {
content: "";
position: absolute;
right: clamp(-180px, -12vw, -90px);
bottom: clamp(-90px, -6vw, -30px);
width: clamp(300px, 42vw, 620px);
height: clamp(300px, 42vw, 620px);
background: url(img/footer/footer-droplet.webp) no-repeat right center / contain;
opacity: 0.375;
pointer-events: none;
z-index: 0;
}
/* Brand column: stacked logo over copy (matches the mockup). */
@media (min-width: 720px) {
.footer__brand { grid-template-columns: 1fr; align-items: start; }
.footer__brand img { height: 124px; margin-left: -24px; }
}
/* Thin vertical hairlines between the nav columns (desktop only). */
@media (min-width: 960px) {
.footer__grid--5 > .footer__col,
.footer__grid--6 > .footer__col {
border-left: 1px solid var(--color-border-deep);
padding-left: var(--space-5);
}
}
/* Contact column (always the last .footer__col) — leading icons + group rules.
Icons are masked so they inherit the terracotta hairline colour. */
.footer__col:last-child ul { gap: var(--space-4); }
.footer__col:last-child li {
position: relative;
padding-left: 28px;
/* Plain text in a list item (e.g. the "Serving the" prefix) otherwise
inherits the brighter footer ink and the base 1rem size; match both to
the muted link styling so the row reads as one consistent tone and size. */
color: var(--color-ink-cream-mute);
font-size: 0.9375rem;
}
.footer__col:last-child li::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 16px;
height: 16px;
background: var(--color-accent-line);
-webkit-mask: var(--ic) no-repeat center / contain;
mask: var(--ic) no-repeat center / contain;
}
/* calendar / book-an-appointment */
.footer__col:last-child li:nth-child(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); }
/* party-popper / inquire for events */
.footer__col:last-child li:nth-child(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l5.5-13 7.5 7.5L3 21z'/%3E%3Cpath d='M14 6.5l1-1M18 10l1.5-.5M16.5 3l.5-1.5M20.5 6l1.5-.5M19 13l1 1'/%3E%3C/svg%3E"); }
/* mail / email */
.footer__col:last-child li:nth-child(3) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E"); }
/* phone */
.footer__col:last-child li:nth-child(4) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l2 4-2 1a11 11 0 0 0 7 7l1-2 4 2v3a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
/* map-pin / service area */
.footer__col:last-child li:nth-child(5) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 0 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
/* group dividers: before email and before service-area */
.footer__col:last-child li:nth-child(3),
.footer__col:last-child li:nth-child(5) {
border-top: 1px solid var(--color-border-deep);
margin-top: var(--space-3);
padding-top: var(--space-4);
}
.footer__col:last-child li:nth-child(3)::before,
.footer__col:last-child li:nth-child(5)::before {
top: calc(var(--space-4) + 0.15em);
}
/* =========================================================================
Hero — trust strip below CTAs (replaces credentials line + chips)
Same .hero__cred typographic register, with a thin top rule for separation.
========================================================================= */
.hero__trust {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-deep);
font-size: 0.6875rem;
letter-spacing: 0.14em;
line-height: 1.7;
color: var(--color-ink-cream-mute);
max-width: 640px;
/* Override .hero__cred's display:flex so the three phrases flow as one
inline run (wrapping to ~2 lines) instead of stacking as three lines. */
display: block;
/* Lifted ~5% of viewport height so the trust line sits well clear
of the bottom fade band. */
transform: translateY(-5vh);
}
.hero__trust .dash {
/* Prominent terracotta separators that clearly differentiate the
three credential phrases. */
color: var(--color-accent);
opacity: 1;
margin: 0 0.7em;
font-weight: 500;
}
@media (max-width: 768px) {
.hero__trust {
font-size: 0.625rem;
letter-spacing: 0.12em;
line-height: 1.7;
}
}
/* =========================================================================
§10 — FAQ (cream)
Placeholder block before footer. Editorial details: hairline divider list,
numbered eyebrow per row, italic display question, body sans answer.
========================================================================= */
.faq__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: end;
margin-bottom: var(--space-9);
}
@media (min-width: 900px) {
.faq__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.faq__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--color-border-cream);
}
.faq__item {
display: block;
border-bottom: 1px solid var(--color-border-cream);
}
.faq__summary {
display: grid;
grid-template-columns: minmax(56px, auto) 1fr 18px;
gap: var(--space-5) var(--space-7);
align-items: start;
padding-block: var(--space-7);
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { content: ''; }
.faq__summary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: 2px;
}
@media (min-width: 800px) {
.faq__summary { grid-template-columns: 88px 1fr 18px; gap: var(--space-9); }
}
.faq__num {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 500;
margin-top: 0.7em;
transition: opacity 250ms ease-out;
}
.faq__q {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.625rem;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-ink-deep);
margin: 0;
text-wrap: balance;
transition: color 250ms ease-out;
}
.faq__q em { font-style: italic; color: var(--color-accent); font-weight: 500; }
.faq__summary:hover .faq__q { color: var(--color-accent); }
.faq__icon {
position: relative;
width: 18px;
height: 18px;
margin-top: 0.6em;
align-self: start;
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
background: var(--color-accent);
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease-out;
}
.faq__icon::before {
top: 50%;
left: 0;
width: 100%;
height: 1.25px;
transform: translateY(-50%);
}
.faq__icon::after {
top: 0;
left: 50%;
width: 1.25px;
height: 100%;
transform: translateX(-50%);
}
.faq__item[open] .faq__icon::after {
transform: translateX(-50%) rotate(90deg);
opacity: 0;
}
.faq__body {
display: grid;
grid-template-columns: minmax(56px, auto) 1fr 18px;
gap: var(--space-5) var(--space-7);
padding-bottom: var(--space-7);
}
@media (min-width: 800px) {
.faq__body { grid-template-columns: 88px 1fr 18px; gap: var(--space-9); }
}
.faq__body > .faq__a,
.faq__body > .faq__a-list { grid-column: 2; }
.faq__a-list {
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-ink-muted);
margin: var(--space-3) 0 var(--space-3);
padding-left: 1.25rem;
max-width: 64ch;
list-style: none;
}
.faq__a-list li {
position: relative;
padding: 0.35rem 0 0.35rem 0.5rem;
border-left: 1px solid var(--color-border-cream);
margin-bottom: 0.45rem;
}
.faq__a-list li:last-child { margin-bottom: 0; }
.faq__a-list li strong { color: var(--color-ink-deep); }
.faq__a {
font-size: var(--font-size-base);
line-height: 1.65;
color: var(--color-ink-muted);
margin: 0;
max-width: 64ch;
animation: faqReveal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.faq__a a {
color: var(--color-accent);
text-decoration: none;
border-bottom: 1px solid currentColor;
overflow-wrap: anywhere;
}
.faq__a a:hover,
.faq__a a:focus-visible { color: var(--color-accent-hover); }
@keyframes faqReveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.faq__icon::before,
.faq__icon::after,
.faq__q,
.faq__a { transition: none; animation: none; }
}
.faq__placeholder {
font-style: italic;
color: var(--color-ink-soft);
opacity: 0.85;
}
.faq__cta {
display: flex;
justify-content: center;
margin-top: var(--space-9);
}
/* =========================================================================
Sticky mobile CTA — full-width terracotta band, mobile only.
Always-visible booking action; clears safe-area on notched devices.
========================================================================= */
.sticky-cta {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 50;
background: var(--color-accent);
color: var(--color-ink-cream);
text-align: center;
padding: 16px var(--gutter-mobile);
padding-bottom: calc(16px + env(safe-area-inset-bottom));
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 -10px 30px -16px rgba(27, 13, 13, 0.55);
transition: background var(--duration-micro) var(--ease-settle);
}
.sticky-cta:hover,
.sticky-cta:focus-visible {
background: var(--color-accent-hover);
}
.sticky-cta .arrow {
display: inline-block;
margin-left: var(--space-2);
transition: transform var(--duration-micro) var(--ease-settle);
}
.sticky-cta:hover .arrow { transform: translateX(3px); }
/* When the footer scrolls into view, slide the sticky CTA out of the way
so the legal row, social, and disclaimer aren't covered. JS toggles
the .is-hidden class via IntersectionObserver on .footer. */
.sticky-cta {
transition: background var(--duration-micro) var(--ease-settle),
transform 320ms var(--ease-settle),
opacity 240ms var(--ease-settle);
}
.sticky-cta.is-hidden {
transform: translateY(120%);
opacity: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.sticky-cta { transition: opacity 120ms linear; }
.sticky-cta.is-hidden { transform: none; }
}
@media (max-width: 768px) {
.sticky-cta { display: block; }
/* Reserve clearance for the fixed sticky CTA on the FOOTER (espresso), not
the body (cream) — otherwise the body's bottom padding shows as a cream
band beneath the footer. */
.footer { padding-bottom: calc(var(--space-7) + 60px + env(safe-area-inset-bottom)); }
}
/* =========================================================================
Reveal — kept as a hook for future entrance motion; presently a no-op
so content is visible by default (better for SSR, no-JS, screenshot
capture, and matches the brand's preference for restraint over motion).
========================================================================= */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* =========================================================================
============================ IV BLENDS PAGE ============================
Layered on top of the landing tokens & components. Reuses .nav, .footer,
.section--*, .btn, .eyebrow, .h-section, .step, .faq__*, .closing, etc.
========================================================================= */
/* ---- Nav variant: blends pages use a deep-wine bar (no hero image) ------ */
.nav--blends {
position: relative;
background: var(--color-bg-deep);
border-bottom: 1px solid var(--color-border-deep);
padding-block: var(--space-4);
}
.nav--blends .nav__brand-mark,
.nav--blends .nav__logo { opacity: 1; }
/* =========================================================================
§1 — Page hero (IV Blends)
Editorial text-only hero on deep wine. Reuses hero typography from §1.
========================================================================= */
.page-hero {
position: relative;
background:
radial-gradient(ellipse at 78% 0%, rgba(194, 118, 107, 0.10) 0%, rgba(46, 21, 23, 0) 50%),
radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.45) 0%, rgba(46, 21, 23, 0) 55%),
var(--color-bg-deep);
color: var(--color-ink-cream);
padding-block: clamp(96px, 14vw, 200px);
overflow: hidden;
}
.page-hero .grain { opacity: 0.12; }
.page-hero__inner {
position: relative;
z-index: 5;
display: grid;
gap: var(--space-7);
}
.page-hero__content {
display: grid;
gap: var(--space-5);
max-width: 760px;
}
.page-hero__headline {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2.75rem, 6.5vw + 0.5rem, 5.5rem);
line-height: 1.0;
letter-spacing: -0.025em;
text-wrap: balance;
margin: 0;
color: var(--color-ink-cream);
}
.page-hero__headline em {
font-style: italic;
color: var(--color-accent-bright);
font-weight: 500;
}
.page-hero__sub {
font-size: var(--font-size-md);
line-height: 1.65;
color: var(--color-ink-cream-mute);
max-width: 560px;
margin: 0;
}
.page-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-3);
}
.page-hero__trust {
margin-top: var(--space-6);
}
/* --- Hero badges — icon trust strip (replaces prose sub + dot trust line)
Five compact icon+label units. SVG icons match the existing 0 0 48 48
stroke-1.4 vocabulary so they sit naturally with the rest of the page.
---------------------------------------------------------------------------- */
.hero-badges {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
margin: var(--space-4) 0 0;
padding: var(--space-4) 0 0;
border-top: 1px solid var(--color-border-deep);
max-width: 620px;
}
.hero-badge {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
min-width: 0;
}
.hero-badge__link {
display: flex;
flex-direction: column;
align-items: center;
gap: inherit;
text-decoration: none;
color: inherit;
transition: transform 180ms ease, color 180ms ease;
border-radius: 2px;
}
.hero-badge__link:hover,
.hero-badge__link:focus-visible {
transform: translateY(-1px);
color: var(--color-ink-cream);
}
.hero-badge__link:hover .hero-badge__icon,
.hero-badge__link:focus-visible .hero-badge__icon {
color: var(--color-accent);
}
.hero-badge__link:focus-visible {
outline: 1px solid var(--color-accent);
outline-offset: 6px;
}
.hero-badge__icon {
display: inline-grid;
place-items: center;
width: 35px;
height: 35px;
color: var(--color-accent-line);
transition: color 180ms ease;
}
.hero-badge__icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Optical centering — the syringe icon hangs diagonally bottom-left,
so badge #3 reads visually left-shifted. Nudge 5px right. */
.hero-badge:nth-child(3) .hero-badge__icon {
transform: translateX(5px);
}
.hero-badge__label {
font-family: var(--font-sans);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.10em;
line-height: 1.4;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
margin: 0;
}
@media (max-width: 768px) {
.hero-badges {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
gap: var(--space-4) var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
}
.hero-badge:nth-child(3):last-child {
grid-column: 1 / -1;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-badge__link {
transition: color 80ms ease;
}
.hero-badge__link:hover,
.hero-badge__link:focus-visible {
transform: none;
}
}
/* --- Hero photograph (integrated background) --------------------------------
The photo IS the hero — bleeds edge-to-edge behind the text. A two-layer
veil (deep wine washing left→right, plus a softer top-and-bottom fade)
keeps the headline legible while the bag cluster reads clearly as the
subject of the composition.
---------------------------------------------------------------------------- */
.page-hero--imaged {
position: relative;
isolation: isolate;
min-height: clamp(560px, 78vh, 820px);
padding-block: clamp(56px, 7vw, 96px);
display: grid;
align-items: center;
overflow: hidden;
/* Wine fallback for any region the photo doesn't cover (e.g. extreme
ultra-wide viewports). Overrides the radial gradients on .page-hero. */
background: var(--color-bg-deep);
}
.page-hero--imaged .page-hero__inner {
position: relative;
z-index: 3;
}
/* Photo layer — fills the entire hero. */
.page-hero--imaged .page-hero__plate {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.page-hero--imaged .page-hero__plate picture,
.page-hero--imaged .page-hero__plate picture > * {
display: block;
width: 100%;
height: 100%;
}
.page-hero--imaged .page-hero__plate-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Anchor toward the right so the side-table + wine-wall claim the left
half (text column), leaving the bag cluster in the right half. */
object-position: 78% 52%;
/* The plate spans the full viewport width, so object-position X can't pan.
Zoom toward the bag cluster (~78% across) to push the stray left stand
pole off-frame and pull the bags in so the right edge isn't dead wine. */
transform: scale(1.2);
transform-origin: 82% 50%;
filter: saturate(1.05) contrast(1.03);
}
/* Veil one — left-to-right wine wash. Pinned dark across the entire text
column (left ~52%), then dissolves toward the bag cluster on the right. */
.page-hero--imaged .page-hero__plate::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
96deg,
rgba(46, 21, 23, 0.94) 0%,
rgba(46, 21, 23, 0.88) 28%,
rgba(46, 21, 23, 0.62) 48%,
rgba(46, 21, 23, 0.22) 66%,
rgba(46, 21, 23, 0) 82%
);
z-index: 1;
}
/* Veil two — soft top + bottom fade. Anchors the nav bar into the wine,
lets the marble base of the photo dissolve at the bottom edge. */
.page-hero--imaged .page-hero__plate::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(46, 21, 23, 0.55) 0%,
rgba(46, 21, 23, 0.20) 22%,
rgba(46, 21, 23, 0) 45%,
rgba(46, 21, 23, 0) 70%,
rgba(46, 21, 23, 0.42) 100%
);
z-index: 2;
}
/* Mobile — text column claims the upper 65–70% of the hero. Bags
drop into the lower band. Veil deepens to a near-solid wine so every
line of the text reads cleanly against the wall. */
@media (max-width: 768px) {
.page-hero--imaged {
min-height: clamp(720px, 100svh, 940px);
padding-block: clamp(96px, 16vw, 140px) clamp(56px, 9vw, 96px);
align-items: start;
}
.page-hero--imaged .page-hero__plate-img {
object-position: 62% 88%;
}
.page-hero--imaged .page-hero__plate::before {
background:
linear-gradient(
180deg,
rgba(46, 21, 23, 0.96) 0%,
rgba(46, 21, 23, 0.95) 35%,
rgba(46, 21, 23, 0.88) 60%,
rgba(46, 21, 23, 0.68) 78%,
rgba(46, 21, 23, 0.30) 92%,
rgba(46, 21, 23, 0) 100%
);
}
.page-hero--imaged .page-hero__plate::after {
background:
linear-gradient(
180deg,
rgba(46, 21, 23, 0.32) 0%,
rgba(46, 21, 23, 0) 30%,
rgba(46, 21, 23, 0) 70%,
rgba(46, 21, 23, 0.50) 100%
);
}
}
/* =========================================================================
§2 — Editorial intro: what an IV drip is + how Drip Tonic delivers it
Single-column flow at a reading measure: heading → body → editorial
founder pull-quote → references list. Quote pattern mirrors .safety__quote
on the About page (italic serif, accent left border, oversized open glyph).
========================================================================= */
.choose {
display: grid;
/* Mobile: founders photo sits beside the heading; the testimonial quote runs
full-width underneath so the long copy stays readable (not squeezed into a
narrow column). Desktop reshapes this into text-col + full-height photo. */
grid-template-columns: minmax(0, 1fr) minmax(104px, 0.62fr);
grid-template-areas:
"intro photo"
"quote quote"
"more more";
gap: var(--space-5);
max-width: 1120px;
margin-inline: auto;
align-items: start;
}
.choose__intro {
grid-area: intro;
display: grid;
gap: var(--space-4);
align-content: start;
min-width: 0;
}
.choose__figure--founders { grid-area: photo; }
.choose__quote { grid-area: quote; }
.choose__more { grid-area: more; margin-top: 0; }
.choose__heading {
margin: 0;
text-wrap: balance;
}
.choose__heading em { color: var(--color-accent); }
.choose__body p {
font-family: var(--font-sans);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-ink-deep);
margin: 0;
}
.choose__body p + p { margin-top: var(--space-5); }
.choose__body sup {
font-size: 0.625rem;
vertical-align: super;
line-height: 0;
margin-left: 0.12em;
}
.choose__body sup + sup { margin-left: 0.06em; }
.choose__body sup a {
color: var(--color-accent);
text-decoration: none;
font-weight: 600;
}
.choose__body sup a:hover { text-decoration: underline; }
.choose__figure {
margin: 0;
align-self: stretch;
position: relative;
display: flex;
}
.choose__figure-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 55% 50%;
aspect-ratio: 4 / 5;
min-height: 100%;
mix-blend-mode: multiply;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
@media (max-width: 879px) {
.choose__figure-img {
aspect-ratio: 5 / 4;
max-height: 60vh;
margin-inline: calc(var(--space-5) * -1);
width: calc(100% + var(--space-5) * 2);
}
}
.choose__quote {
margin: 0;
padding: clamp(var(--space-5), 2.2vw, var(--space-7)) clamp(var(--space-5), 2.4vw, var(--space-8));
background: var(--color-surface-cream);
border-radius: 8px 8px 8px 28px;
position: relative;
}
.choose__quote blockquote { margin: 0; padding-left: clamp(1.75rem, 2.4vw, 2.5rem); }
.choose__quote blockquote p {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.0625rem, 0.9vw + 0.78rem, 1.3125rem);
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--color-ink-deep);
margin: 0;
text-wrap: balance;
}
.choose__quote blockquote p::before {
content: "\201C";
position: absolute;
top: clamp(var(--space-2), 1vw, var(--space-4));
left: clamp(var(--space-4), 2vw, var(--space-6));
font-family: var(--font-serif);
font-style: normal;
font-weight: 500;
font-size: clamp(2.75rem, 4vw + 0.5rem, 3.75rem);
line-height: 1;
color: var(--color-accent);
}
.choose__quote figcaption {
display: grid;
gap: var(--space-1);
margin-top: var(--space-5);
padding-left: clamp(1.75rem, 2.4vw, 2.5rem);
}
.choose__quote cite {
font-family: var(--font-sans);
font-style: normal;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink-deep);
font-weight: 600;
}
.choose__quote-sep { color: var(--color-ink-soft); margin-inline: 0.25em; }
.choose__quote-role {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-soft);
}
.choose__refs {
list-style: decimal;
padding: var(--space-5) 0 0 1.25rem;
margin: 0;
border-top: 1px solid var(--color-border-cream);
display: grid;
gap: var(--space-3);
grid-column: 1 / -1;
}
.choose__refs li {
font-family: var(--font-sans);
font-size: 0.8125rem;
line-height: 1.55;
color: var(--color-ink-soft);
}
.choose__refs em {
font-family: var(--font-serif);
font-style: italic;
color: var(--color-ink-deep);
}
.choose__refs a {
color: var(--color-accent);
text-decoration: none;
border-bottom: 1px solid currentColor;
overflow-wrap: anywhere;
}
.choose__refs a:hover { color: var(--color-accent-hover); }
@media (min-width: 880px) {
.choose {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
grid-template-areas:
"intro photo"
"quote photo"
"more photo";
gap: var(--space-7) clamp(var(--space-7), 5vw, var(--space-10));
align-items: start;
}
/* Photo fills the full height of the text column, as before. */
.choose__figure--founders { align-self: stretch; }
.choose__figure-img {
max-width: none;
margin-inline: 0;
}
}
/* =========================================================================
§3 — Featured Blends grid (5 cards)
Arch-top apothecary cards. Center card visually featured (warmer surface,
deeper shadow, lift). Mobile = single column stack, no offsets.
========================================================================= */
.blends__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: end;
margin-bottom: var(--space-9);
}
@media (min-width: 900px) {
.blends__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.blends__title em { color: var(--color-accent); }
.blends__carousel { position: relative; }
/* Mobile (<700px): one full-width card at a time, horizontal swipe with snap.
≥700px it reverts to the expanded comparison grid below. */
.blends__grid {
display: flex;
gap: var(--space-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.blends__grid::-webkit-scrollbar { display: none; }
.blends__grid > .blend {
flex: 0 0 100%;
scroll-snap-align: center;
min-width: 0;
}
/* Pagination dots — shown only while the carousel is active. */
.blends__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: var(--space-5);
}
.blends__dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(46, 21, 23, 0.30);
background: transparent;
padding: 0;
cursor: pointer;
transition: background 180ms ease-out, border-color 180ms ease-out, width 180ms ease-out;
}
.blends__dot[aria-current="true"] {
width: 24px;
background: var(--color-accent);
border-color: var(--color-accent);
}
/* Prev/next arrows — identical treatment to the packages + add-ons carousels:
ink-on-cream outline circles, never a coral fill (coral is CTA-only per the
brand kit). The carousel JS wires these up. */
.blends__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-7);
}
.blends__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid var(--color-border-cream, rgba(46, 21, 23, 0.18));
background: transparent;
color: var(--color-ink-deep, #2e1517);
font-size: 1.125rem;
cursor: pointer;
flex: 0 0 auto;
transition: background 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}
.blends__nav:hover,
.blends__nav:focus-visible {
background: rgba(46, 21, 23, 0.06);
border-color: var(--color-accent);
}
.blends__nav:active { transform: scale(0.94); }
.blends__nav:disabled { opacity: 0.3; cursor: default; }
.blends__swipe-hint {
margin: var(--space-4) 0 0;
text-align: center;
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
@media (min-width: 700px) {
.blends__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
overflow: visible;
}
.blends__grid > .blend { flex: 0 1 auto; scroll-snap-align: none; }
.blends__dots,
.blends__controls,
.blends__swipe-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.blends__nav:active { transform: none; }
}
@media (min-width: 1100px) {
.blends__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
}
.blend {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-bg-ivory);
color: var(--color-ink-deep);
border-radius: var(--radius-arch);
overflow: hidden;
border: 1px solid var(--color-border-cream);
box-shadow: 0 24px 50px -40px rgba(46, 21, 23, 0.45);
transition: transform var(--duration-component) var(--ease-settle),
box-shadow var(--duration-component) var(--ease-settle);
}
.blend:hover {
transform: translateY(-4px);
box-shadow: 0 32px 60px -36px rgba(46, 21, 23, 0.55);
}
.blend--feature {
background: var(--color-surface-cream);
box-shadow: 0 36px 72px -36px rgba(46, 21, 23, 0.65);
}
@media (min-width: 1100px) {
.blend--feature:hover { transform: translateY(-4px); }
}
.blend__badge {
position: absolute;
top: var(--space-3);
left: 50%;
transform: translateX(-50%);
z-index: 4;
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-ink-cream);
background: var(--color-accent);
padding: 6px 12px;
border-radius: 2px;
white-space: nowrap;
}
.blend__art {
position: relative;
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-ivory);
border-bottom: 1px solid var(--color-border-cream);
overflow: hidden;
}
.blend__art-img {
position: relative;
z-index: 2;
display: block;
width: auto;
height: auto;
max-width: 62%;
max-height: 86%;
object-fit: contain;
margin: 0 auto;
filter: saturate(1.18) contrast(1.06);
}
.blend__art-frame {
position: absolute;
inset: var(--space-4) var(--space-4) 0 var(--space-4);
border: 1px solid rgba(27, 13, 13, 0.06);
border-radius: 9999px 9999px 0 0;
pointer-events: none;
z-index: 1;
}
.blend__art-label {
position: absolute;
bottom: var(--space-5);
left: 0;
right: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(0.875rem, 1.2vw + 0.25rem, 1.0625rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: rgba(27, 13, 13, 0.32);
text-align: center;
text-transform: none;
user-select: none;
z-index: 3;
pointer-events: none;
}
/* Per-blend variations — flat, uniform ivory; image carries the color. */
.blend__art--myers,
.blend__art--energy,
.blend__art--immunity,
.blend__art--glow,
.blend__art--detox,
.blend__art--reset,
.blend__art--athletes { background: var(--color-bg-ivory); }
.blend__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
flex: 1;
background: var(--color-bg-ivory);
}
.blend--feature .blend__body { background: var(--color-bg-cream); }
.blend__tag {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-accent);
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.blend__tag::before {
content: "";
width: 18px; height: 1px;
background: currentColor;
opacity: 0.55;
}
.blend__name {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.5rem;
letter-spacing: -0.015em;
line-height: 1.05;
margin: 0;
color: var(--color-ink-deep);
}
.blend__goal {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.9375rem;
line-height: 1.4;
color: var(--color-ink-muted);
margin: 0;
max-width: 28ch;
min-height: calc(2 * 1.4em);
}
.blend__meta {
margin: var(--space-3) 0 0;
padding: var(--space-4) 0 0;
border-top: 1px solid var(--color-border-cream);
display: grid;
gap: var(--space-3);
}
.blend__meta > div { display: grid; gap: 2px; }
.blend__meta dt {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-ink-soft);
}
.blend__meta dd {
margin: 0;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-ink-deep);
min-height: calc(2 * 1.5em);
}
.blend__meta dd.is-tight { min-height: 0; }
/* Feeling-first bullet list inside the meta block */
.blend__meta-feeling dd { min-height: 0; }
.blend__meta-feeling ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.blend__meta-feeling li {
position: relative;
padding-left: 14px;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-ink-deep);
}
.blend__meta-feeling li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 1px;
background: var(--color-accent);
}
.blend__foot {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-cream);
display: grid;
gap: var(--space-3);
}
.blend__price {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 500;
color: var(--color-accent);
margin: 0;
line-height: 1;
letter-spacing: -0.01em;
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.blend__price span {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-soft);
}
.blend__cta {
width: 100%;
justify-content: center;
padding: 12px 18px;
min-height: 44px;
font-size: 0.6875rem;
letter-spacing: 0.2em;
}
.blends__note {
margin: var(--space-9) auto 0;
max-width: 64ch;
text-align: center;
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--color-ink-soft);
line-height: 1.7;
}
/* =========================================================================
§4 — Add-ons (deep wine)
Two elevated cards. Quiet "optional add-on" eyebrow, bullet list, price.
========================================================================= */
.addons__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: end;
margin-bottom: var(--space-9);
}
@media (min-width: 900px) {
.addons__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.addons__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 800px) {
.addons__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
}
.addons__more {
margin: var(--space-8) 0 0;
text-align: center;
}
.addons__more-link {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-family: var(--font-sans);
font-size: 0.8125rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-cream);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--color-border-deep);
transition: color 220ms ease-out, border-color 220ms ease-out;
}
.addons__more-link .arrow {
display: inline-block;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.addons__more-link:hover,
.addons__more-link:focus-visible {
color: var(--color-accent-bright, var(--color-accent));
border-bottom-color: currentColor;
}
.addons__more-link:hover .arrow,
.addons__more-link:focus-visible .arrow {
transform: translateX(4px);
}
.addon {
background: var(--color-surface-deep);
color: var(--color-ink-cream);
border: 1px solid var(--color-border-deep);
border-radius: var(--radius-md);
padding: var(--space-8) var(--space-7);
display: grid;
gap: var(--space-4);
position: relative;
}
.addon__art {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 4 / 3;
margin: 0 0 var(--space-2);
background: var(--color-bg-ivory);
border-radius: var(--radius-md);
overflow: hidden;
}
.addon__art-img {
display: block;
width: auto;
height: auto;
max-width: 36%;
max-height: 72%;
object-fit: contain;
margin: 0 auto;
filter: saturate(1.18) contrast(1.06);
}
.addon::before {
content: "";
position: absolute;
top: 0; left: var(--space-7);
width: 36px; height: 2px;
background: var(--color-accent-bright);
}
.addon__tag {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-accent-bright);
margin: 0;
}
.addon__name {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
letter-spacing: -0.015em;
line-height: 1.05;
margin: 0;
color: var(--color-ink-cream);
}
.addon__desc {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-ink-cream-mute);
margin: 0;
max-width: 48ch;
}
.addon__benefits {
list-style: none;
margin: 0;
padding: var(--space-3) 0 0;
border-top: 1px solid var(--color-border-deep);
display: grid;
gap: var(--space-2);
}
.addon__benefits li {
font-family: var(--font-sans);
font-size: 0.875rem;
color: var(--color-ink-cream);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.addon__benefits li::before {
content: "";
width: 12px; height: 1px;
background: var(--color-accent);
}
.addon__foot {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
align-items: center;
margin-top: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border-deep);
}
@media (min-width: 600px) {
.addon__foot { grid-template-columns: auto 1fr; gap: var(--space-7); }
}
.addon__price {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.875rem;
color: var(--color-accent-bright);
margin: 0;
line-height: 1;
letter-spacing: -0.01em;
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.addon__price span {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-cream-mute);
}
.addon__cta { justify-self: start; }
@media (min-width: 600px) { .addon__cta { justify-self: end; } }
/* Vitamin D lab-required note — quiet, reassuring, framed as precise care. */
.addon__note {
display: flex;
gap: var(--space-3);
align-items: flex-start;
margin: 0;
padding: var(--space-3) var(--space-4);
font-family: var(--font-sans);
font-size: 0.75rem;
line-height: 1.5;
color: var(--color-ink-cream-mute);
background: rgba(243, 232, 216, 0.05);
border: 1px solid var(--color-border-deep);
border-radius: var(--radius-sm, 8px);
}
.addon__note-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--color-accent-bright);
}
.addon__note-icon svg { width: 100%; height: 100%; display: block; }
/* --- Boosters & Add-ons carousel ------------------------------------------
Lives on the light cream section, so controls are ink-toned (the packages
carousel reuses the same JS but cream-toned controls). Responsive slide
widths: one card + peek on mobile, two on tablet, three on desktop. */
.addons__carousel { position: relative; }
.addons__viewport { overflow: hidden; }
.addons__track {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: clamp(16px, 2.5vw, 32px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.addons__track::-webkit-scrollbar { display: none; }
.addons__slide {
flex: 0 0 86%;
scroll-snap-align: center;
min-width: 0;
}
@media (min-width: 640px) {
.addons__slide { flex-basis: calc((100% - clamp(16px, 2.5vw, 32px)) / 2); }
}
@media (min-width: 1024px) {
.addons__slide { flex-basis: calc((100% - 2 * clamp(16px, 2.5vw, 32px)) / 3); }
}
/* Equal-height cards with the CTA pinned to the bottom edge of each. */
.addons__slide .addon {
height: 100%;
display: flex;
flex-direction: column;
}
.addons__slide .addon__foot { margin-top: auto; }
.addons__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-7);
}
.addons__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid var(--color-border-cream, rgba(46, 21, 23, 0.18));
background: transparent;
color: var(--color-ink-deep, #2e1517);
font-size: 1.125rem;
cursor: pointer;
flex: 0 0 auto;
transition: background 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}
.addons__nav:hover,
.addons__nav:focus-visible {
background: rgba(46, 21, 23, 0.06);
border-color: var(--color-accent);
}
.addons__nav:active { transform: scale(0.94); }
.addons__nav:disabled { opacity: 0.3; cursor: default; }
.addons__dots {
display: flex;
align-items: center;
gap: 10px;
}
.addons__dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(46, 21, 23, 0.3);
background: transparent;
padding: 0;
cursor: pointer;
transition: background 180ms ease-out, border-color 180ms ease-out, width 180ms ease-out;
}
.addons__dot[aria-current="true"] {
width: 24px;
background: var(--color-accent);
border-color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
.addons__track { scroll-behavior: auto; }
.addons__nav:active { transform: none; }
}
/* =========================================================================
§5 — Quiz mockup
2-col split. Left: intro + CTA. Right: mock first-question card.
========================================================================= */
.quiz {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 900px) {
.quiz { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-10); }
}
.quiz__intro { display: grid; gap: var(--space-4); }
.quiz__intro .h-section em { color: var(--color-accent); }
.quiz__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
align-items: center;
margin-top: var(--space-5);
}
/* Medical / legal disclaimer — quiet, italic, no-frame paragraph beneath
the quiz CTA. Reuses the established ivory section ink hierarchy. */
.quiz__disclaimer {
/* Full-width note sitting below the quiz (spans both columns on desktop). */
grid-column: 1 / -1;
margin: var(--space-7) auto 0;
padding-top: var(--space-5);
border-top: 1px solid var(--color-border-cream);
font-family: var(--font-sans);
font-size: 0.8125rem;
line-height: 1.6;
letter-spacing: 0.005em;
color: var(--color-ink-soft);
max-width: 68ch;
}
.quiz__disclaimer strong {
font-weight: 600;
color: var(--color-ink-deep);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.625rem;
display: block;
margin-bottom: var(--space-2);
}
.quiz__disclaimer em {
font-family: var(--font-serif);
font-style: italic;
color: var(--color-ink-deep);
}
.quiz__card {
background: var(--color-bg-deep);
color: var(--color-ink-cream);
border-radius: var(--radius-md);
padding: var(--space-7);
box-shadow: 0 40px 80px -40px rgba(46, 21, 23, 0.55);
display: grid;
gap: var(--space-5);
position: relative;
overflow: hidden;
}
.quiz__card::after {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse, rgba(216, 131, 118, 0.18) 0%, rgba(216, 131, 118, 0) 60%);
pointer-events: none;
}
.quiz__progress {
display: flex;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.quiz__progress li {
flex: 1;
height: 2px;
background: var(--color-border-deep);
border-radius: 1px;
}
.quiz__progress li.is-active { background: var(--color-accent-bright); }
.quiz__qmeta {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-cream-mute);
margin: 0;
}
.quiz__q {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.625rem;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-ink-cream);
margin: 0;
}
.quiz__q::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--color-accent-bright);
vertical-align: middle;
margin-right: var(--space-3);
transform: translateY(-6px);
}
.quiz__opts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
position: relative;
z-index: 2;
}
.quiz__opt {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-border-deep);
border-radius: var(--radius-sm);
background: rgba(245, 237, 221, 0.025);
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-ink-cream-mute);
cursor: pointer;
transition: border-color var(--duration-micro) var(--ease-settle),
color var(--duration-micro) var(--ease-settle),
background var(--duration-micro) var(--ease-settle);
}
.quiz__opt:hover {
border-color: var(--color-accent-bright);
color: var(--color-ink-cream);
}
.quiz__opt.is-selected {
border-color: var(--color-accent-bright);
color: var(--color-ink-cream);
background: rgba(216, 131, 118, 0.10);
}
.quiz__radio {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid var(--color-ink-cream-mute);
flex-shrink: 0;
position: relative;
}
.quiz__opt.is-selected .quiz__radio {
border-color: var(--color-accent-bright);
background:
radial-gradient(circle, var(--color-accent-bright) 0 5px, transparent 5px 100%);
}
/* =========================================================================
§7 — Mobile Service Area (deep wine, two-column)
Editorial content on the left (eyebrow, headline, lede, 6-card
"where we come" grid, "Proudly serving" locale, CTA + trust line).
Glowing service-area map on the right, with a centred caption.
Stacks to one column under 1024px (map drops below content).
========================================================================= */
.service-area { padding-block: clamp(40px, 5vw, 64px); }
/* Desktop: keep the whole block within a single viewport — padding scales
with viewport height so the section never spills past one screen of scroll. */
@media (min-width: 1024px) {
.service-area { padding-block: clamp(28px, 4vh, 64px); }
}
.service-area__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
}
@media (min-width: 1024px) {
.service-area { min-height: clamp(620px, 88vh, 900px); }
.service-area .container.service-area__inner {
max-width: none;
padding-inline-end: 0;
grid-template-columns: minmax(440px, 560px) 1fr;
gap: clamp(var(--space-7), 4vw, var(--space-9));
align-items: stretch;
min-height: inherit;
}
.service-area__content {
align-self: center;
gap: var(--space-4);
}
}
.service-area__content { display: grid; gap: var(--space-5); }
.service-area__title { max-width: 14ch; margin-top: var(--space-2); }
.service-area__lede { max-width: 44ch; }
.service-area__cards {
list-style: none;
margin: var(--space-3) 0 0;
padding: 0;
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
}
@media (min-width: 520px) { .service-area__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-area__cards { grid-template-columns: repeat(3, 1fr); } }
.sa-card {
background: var(--color-surface-deep);
border: 1px solid var(--color-border-deep);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
display: grid;
gap: 6px;
align-content: start;
}
.sa-card__icon {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
color: var(--color-accent-line);
margin-bottom: 2px;
}
.sa-card__icon svg { width: 100%; height: 100%; display: block; }
.sa-card__label {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1rem;
color: var(--color-ink-cream);
margin: 0;
line-height: 1.2;
}
.sa-card__body {
font-family: var(--font-sans);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--color-ink-cream-mute);
margin: 0;
}
.service-area__locale {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-border-deep);
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgba(58, 30, 32, 0.55), rgba(46, 21, 23, 0.85));
margin-top: 0;
}
.service-area__pin {
width: 22px;
height: 22px;
color: var(--color-accent-line);
margin-top: 2px;
}
.service-area__pin svg { width: 100%; height: 100%; display: block; }
.service-area__locale-body { min-width: 0; }
.service-area__region {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.125rem;
color: var(--color-ink-cream);
margin: 2px 0 var(--space-2);
line-height: 1.2;
}
.service-area__cities {
font-family: var(--font-sans);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-ink-cream-mute);
margin: 0 0 var(--space-2);
max-width: 56ch;
}
.service-area__inquire {
font-family: var(--font-sans);
font-size: 0.875rem;
color: var(--color-accent-bright);
text-decoration: underline;
text-underline-offset: 3px;
}
.service-area__inquire:hover { color: var(--color-ink-cream); }
.service-area__foot {
display: grid;
gap: var(--space-4);
margin-top: 0;
}
@media (min-width: 720px) {
.service-area__foot {
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-6);
}
}
.service-area__trust {
font-family: var(--font-sans);
font-size: 0.875rem;
color: var(--color-ink-cream-mute);
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--space-3);
line-height: 1.5;
}
.service-area__trust em {
color: var(--color-ink-cream);
font-style: italic;
}
.service-area__shield {
width: 22px;
height: 22px;
color: var(--color-accent-line);
flex-shrink: 0;
}
.service-area__shield svg { width: 100%; height: 100%; display: block; }
.service-area__map {
margin: 0;
display: grid;
gap: var(--space-4);
justify-items: center;
position: relative;
}
/* Aspect-ratio frame keeps the whole map visible (no cover-crop) and
gives overlay city pins a stable percentage coordinate system. */
.service-area__map-frame {
position: relative;
width: 100%;
aspect-ratio: 1448 / 1086;
overflow: hidden;
}
.service-area__map img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
border-radius: 0;
box-shadow: none;
/* Feather the map plate so its edges dissolve into the section bg —
reads as a painted region of the page, not an image card. */
-webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 48%, #000 48%, rgba(0,0,0,0.78) 70%, transparent 100%);
mask-image: radial-gradient(ellipse 78% 82% at 50% 48%, #000 48%, rgba(0,0,0,0.78) 70%, transparent 100%);
mix-blend-mode: lighten;
opacity: 0.95;
}
/* A warm amber wash painted under the map blends its cool plate into the deep maroon section
and gives the topography a candlelit, atmospheric depth instead of card-on-bg flatness. */
.service-area__map-frame::before {
content: "";
position: absolute;
inset: -8% -6%;
background:
radial-gradient(ellipse 58% 62% at 52% 50%, rgba(245, 184, 106, 0.10) 0%, transparent 70%),
radial-gradient(ellipse 82% 88% at 50% 50%, rgba(72, 28, 32, 0.55) 40%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.service-area__map-frame { isolation: isolate; }
@media (min-width: 1024px) {
.service-area__map {
align-self: center;
display: grid;
gap: var(--space-4);
padding-inline-end: clamp(var(--space-5), 3vw, var(--space-7));
}
.service-area__map-frame {
max-width: min(100%, 760px);
margin-inline: auto;
}
}
/* Overlay city dots — glowing amber markers that sit over the map's baked-in
city labels to highlight the served cities. Positioned with --x / --y as %
of the natural 1448×1086 image. Text-free on purpose: the names live in the
map art and the served-areas list, so a dot never doubles a baked-in label. */
.sa-pin {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
pointer-events: none;
}
.sa-pin__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f5b86a;
box-shadow:
0 0 0 1.5px rgba(245, 184, 106, 0.35),
0 0 10px 2px rgba(245, 184, 106, 0.55),
0 0 22px 6px rgba(245, 184, 106, 0.25);
}
@media (min-width: 1280px) {
.sa-pin__dot { width: 7px; height: 7px; }
}
/* Major cities — bigger, brighter dot with a soft pulse, so the anchor cities
(Toronto, Hamilton, Niagara, Lambton Shores, …) clearly stand out from the
secondary markers and the dim baked-in city glow. */
.sa-pin--major { z-index: 2; }
.sa-pin--major .sa-pin__dot {
position: relative;
width: 12px;
height: 12px;
background: #ffd27a;
box-shadow:
0 0 0 2px rgba(245, 184, 106, 0.45),
0 0 16px 4px rgba(245, 184, 106, 0.75),
0 0 34px 12px rgba(245, 184, 106, 0.35);
}
.sa-pin--major .sa-pin__dot::after {
content: "";
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1.5px solid rgba(245, 184, 106, 0.55);
animation: saPulse 2.8s ease-out infinite;
}
@keyframes saPulse {
0% { transform: scale(0.5); opacity: 0.9; }
70% { opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (min-width: 1280px) {
.sa-pin--major .sa-pin__dot { width: 14px; height: 14px; }
}
@media (max-width: 700px) {
.sa-pin--major .sa-pin__dot { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-pin--major .sa-pin__dot::after { animation: none; opacity: 0; }
}
.service-area__map-caption {
display: grid;
gap: 4px;
justify-items: center;
text-align: center;
}
/* Caption sits in normal flow beneath the map frame at every width — never
overlaid on the topography (it used to collide with the southern cities). */
.service-area__map-caption {
margin-top: calc(var(--space-4) * -1);
z-index: 1;
}
.service-area__map-caption .eyebrow { color: var(--color-ink-cream-mute); }
.service-area__map-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--color-ink-cream);
letter-spacing: 0.01em;
}
.service-area__map-note {
font-family: var(--font-sans);
font-size: 0.75rem;
font-style: italic;
letter-spacing: 0.01em;
color: var(--color-ink-cream-mute);
opacity: 0.85;
}
.service-area__map-caption::after {
content: "";
width: clamp(120px, 18vw, 200px);
height: 1px;
background: var(--color-accent-line);
opacity: 0.5;
margin-top: var(--space-2);
}
/* =========================================================================
§8 — RN-led safety (ivory)
4-up badge grid + an italic founder quote.
========================================================================= */
.safety { display: grid; gap: var(--space-9); }
.safety__head {
display: grid;
gap: var(--space-5);
max-width: 820px;
}
.safety__head .h-section em { color: var(--color-accent); }
.section--deep .safety__head .h-section em { color: var(--color-accent-bright); }
.safety__lede { max-width: 56ch; }
.section--deep .safety__quote p { color: var(--color-ink-cream); }
.section--deep .safety__quote cite { color: var(--color-ink-cream-mute); }
.safety__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 600px) { .safety__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .safety__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.safety__card {
background: var(--color-bg-cream);
border: 1px solid var(--color-border-cream);
padding: var(--space-7);
display: grid;
gap: var(--space-3);
align-content: start;
transition: transform var(--duration-component) var(--ease-settle),
box-shadow var(--duration-component) var(--ease-settle);
}
.safety__card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -24px rgba(46, 21, 23, 0.3);
}
.safety__sym {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 500;
color: var(--color-accent);
line-height: 1;
margin: 0 0 var(--space-2);
}
.safety__name {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-ink-deep);
margin: 0;
}
.safety__desc {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-ink-muted);
margin: 0;
max-width: 32ch;
}
.safety__quote {
margin: 0;
max-width: 820px;
padding-left: var(--space-7);
border-left: 2px solid var(--color-accent);
}
.safety__quote p {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--color-ink-deep);
margin: 0;
text-wrap: balance;
}
.safety__quote p::before {
content: "“";
color: var(--color-accent);
font-style: normal;
font-weight: 500;
margin-right: 0.05em;
}
.safety__quote cite {
display: block;
margin-top: var(--space-4);
font-family: var(--font-sans);
font-style: normal;
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-soft);
}
/* =========================================================================
Section-head shared (eyebrow lede above headline) — used in §4 addons,
§6 process, §8 safety. .lede on deep needs cream-mute color.
========================================================================= */
.section--deep .addons__head .lede { color: var(--color-ink-cream-mute); }
/* =========================================================================
=== ABOUT PAGE ===========================================================
Beat: Authority + Belonging. Six sections, no image plate in the hero,
text-led. Placeholders for founder portraits ship until real photos
land in ../img/founders/.
========================================================================= */
/* §1 — About hero (deep wine, no image plate) -------------------------- */
.about-hero {
position: relative;
background: var(--color-bg-deep);
color: var(--color-ink-cream);
padding-block: clamp(160px, 22vh + 60px, 240px) clamp(120px, 16vh + 40px, 180px);
overflow: hidden;
isolation: isolate;
}
.about-hero::after {
/* Long, multi-stop bleed so deep wine dissolves into §2 cream without
a visible band. Intermediate maroon tones bridge the two colours. */
content: "";
position: absolute;
inset: auto 0 0 0;
height: clamp(160px, 22vh, 260px);
background: linear-gradient(
to bottom,
rgba(46,21,23,0) 0%,
rgba(46,21,23,0.35) 28%,
rgba(110,52,52,0.55) 56%,
rgba(214,188,170,0.85) 82%,
var(--color-bg-cream) 100%
);
z-index: 2;
pointer-events: none;
}
.about-hero__inner {
position: relative;
z-index: 3;
max-width: 1120px;
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
.about-hero__content {
max-width: 720px;
display: grid;
gap: var(--space-5);
}
.about-hero__headline {
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--font-size-3xl);
line-height: 1.04;
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0;
color: var(--color-ink-cream);
}
.about-hero__headline em {
font-style: italic;
color: var(--color-accent-bright);
font-weight: 500;
}
.about-hero__sub {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.25rem, 1.6vw + 0.5rem, 1.625rem);
line-height: 1.35;
color: var(--color-ink-cream-mute);
max-width: 36ch;
margin: 0;
}
.about-hero__anchor {
margin: 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: clamp(0.9375rem, 0.5vw + 0.78rem, 1.0625rem);
line-height: 1.5;
letter-spacing: 0.005em;
color: var(--color-ink-cream);
max-width: 52ch;
}
.about-hero__anchor .dash {
color: var(--color-accent-line);
margin: 0 0.45em;
font-style: normal;
}
.about-hero__signoff {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-deep);
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-cream-mute);
max-width: 640px;
}
.about-hero__signoff .dash { color: var(--color-accent-line); margin: 0 4px; }
/* §1b — Founders portrait, feathered into the deep wine.
Mask is a radial gradient so every edge is soft — no rectangle,
no border, no hard line where the photo meets the background.
Sits behind the editorial content on desktop and ghosts behind
the headline on mobile so the letter still reads first. */
.about-hero__portrait {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
display: flex;
justify-content: flex-end;
align-items: stretch;
overflow: hidden;
}
.about-hero__portrait img {
/* Fill the full height of the hero block; crop with object-fit so the
faces (near the top of the source frame) stay in shot and the legs/floor
fall away below. */
height: 100%;
width: clamp(380px, 50vw, 680px);
object-fit: cover;
object-position: 50% 12%;
margin-right: clamp(-32px, -1.5vw, 0px);
/* Two-layer mask, intersected: feather the LEFT edge into the text column
and feather TOP + BOTTOM into the wine — no rectangular plate, but the
faces in the right-centre stay fully solid and legible. */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.22) 14%, #000 44%),
linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,0.22) 14%, #000 44%),
linear-gradient(to bottom, transparent 0%, #000 13%, #000 82%, transparent 100%);
mask-composite: intersect;
/* Keep the photo in true colour so the founders' faces actually read —
just a hair of warmth to sit it in the wine palette. */
filter: saturate(0.98) contrast(1) brightness(0.99);
opacity: 0;
transform: translate3d(0, 8px, 0) scale(1.012);
animation: aboutHeroPortraitIn 1600ms cubic-bezier(.2,.7,.2,1) 120ms forwards;
}
/* Second blend pass: warm wine wash bleeding from the left of the
portrait so the photo doesn't read as a separate plate. */
.about-hero__portrait::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
var(--color-bg-deep) 0%,
rgba(46,21,23,0.92) 26%,
rgba(46,21,23,0.55) 46%,
rgba(46,21,23,0.18) 64%,
rgba(46,21,23,0) 82%
);
z-index: 2;
pointer-events: none;
}
/* Keep the editorial text above the image stack. */
.about-hero__inner { z-index: 3; }
.about-hero .hero__nmark { z-index: 3; }
@keyframes aboutHeroPortraitIn {
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (max-width: 860px) {
/* On mobile the portrait becomes a clear full-width band pinned to the top
of the hero — faces visible at full strength — and the letter drops below
it. The band feathers into the wine at its base; no hard edge. */
.about-hero { padding-top: 0; }
.about-hero__portrait {
inset: 0 0 auto 0;
height: clamp(300px, 50vh, 420px);
justify-content: center;
align-items: flex-start;
}
.about-hero__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 16%;
margin-right: 0;
filter: saturate(0.98) contrast(1) brightness(1);
/* full-bleed sides, feather only the bottom into the wine */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
-webkit-mask-composite: source-over;
mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
mask-composite: add;
animation-name: aboutHeroPortraitInMobile;
}
.about-hero__portrait::before {
background: linear-gradient(
to bottom,
rgba(46,21,23,0) 42%,
rgba(46,21,23,0.55) 78%,
var(--color-bg-deep) 100%
);
}
.about-hero__content {
padding-top: clamp(284px, 48vh, 400px);
}
@keyframes aboutHeroPortraitInMobile {
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
}
@media (prefers-reduced-motion: reduce) {
.about-hero__portrait img {
animation: none;
opacity: 1;
transform: none;
}
@media (max-width: 860px) {
.about-hero__portrait img { opacity: 1; }
}
}
/* §2 — Brand story (cream) --------------------------------------------- */
.about-story {
max-width: 640px;
margin-inline: auto;
padding-block: var(--space-2);
display: grid;
gap: var(--space-5);
}
.about-story .eyebrow--rule {
margin-bottom: var(--space-3);
color: var(--color-ink-soft);
}
.about-story__lede {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(1.5rem, 1.8vw + 0.6rem, 1.875rem);
line-height: 1.25;
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0 0 var(--space-3);
color: var(--color-ink-deep);
}
.about-story__lede em {
font-style: italic;
color: var(--color-accent);
font-weight: 500;
}
.about-story p:not(.about-story__lede):not(.eyebrow) {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.65;
color: var(--color-ink-deep);
margin: 0;
max-width: 60ch;
}
.about-story p em {
font-style: italic;
/* Darker coral to meet WCAG AA 4.5:1 on cream — display ledes keep --color-accent. */
color: #8A4538;
font-weight: 500;
}
/* Mobile-only: editorial recap heroes (.about-story inside .section--deep)
have long magazine-style H1s that overflow the 390px viewport at the
default .h-section size. Scale down on narrow widths and switch to
text-wrap: pretty so balance doesn't fight overflow-wrap. */
@media (max-width: 600px) {
.section--deep .about-story .h-section,
.section--espresso .about-story .h-section {
font-size: clamp(1.625rem, 5.5vw + 0.5rem, 2.125rem);
line-height: 1.15;
text-wrap: pretty;
word-break: normal;
}
}
/* Dark-section overrides for .about-story body copy.
Without these, .about-story p:not(...) (specificity 0,0,3) wins over
.section--deep .lede (0,0,2) and renders body text invisible on deep wine. */
.section--deep .about-story p:not(.about-story__lede):not(.eyebrow),
.section--espresso .about-story p:not(.about-story__lede):not(.eyebrow) {
color: var(--color-ink-cream);
}
.section--deep .about-story .eyebrow--rule,
.section--espresso .about-story .eyebrow--rule {
color: var(--color-ink-cream-mute);
}
.section--deep .about-story p em,
.section--espresso .about-story p em {
/* Brighter coral for AA contrast on deep wine. */
color: var(--color-accent-bright, #D88376);
}
.section--deep .about-story a,
.section--espresso .about-story a {
color: var(--color-ink-cream);
text-decoration-color: var(--color-accent-bright, #D88376);
}
/* §3 — Founders (ivory) ------------------------------------------------- */
.founders__head {
text-align: center;
margin-bottom: var(--space-8);
}
.founders__head .eyebrow--rule {
display: inline-flex;
color: var(--color-ink-soft);
}
.founders {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
max-width: 360px;
justify-content: center;
}
@media (min-width: 800px) {
.founders {
grid-template-columns: repeat(2, minmax(0, 400px));
gap: var(--space-9);
max-width: 860px;
justify-content: center;
}
}
.founder-card {
display: grid;
gap: var(--space-5);
width: 100%;
}
.founder-card__portrait {
aspect-ratio: 4 / 5;
background: var(--color-surface-cream);
border: 1px solid var(--color-border-cream);
border-radius: var(--radius-md, 4px);
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
.founder-card__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.founder-card__placeholder {
display: grid;
gap: var(--space-3);
padding: var(--space-6);
text-align: center;
max-width: 32ch;
margin: 0 auto;
}
.founder-card__placeholder-tag {
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-ink-soft);
}
.founder-card__placeholder-name {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
color: var(--color-ink-deep);
}
.founder-card__placeholder-note {
font-family: var(--font-sans);
font-size: 0.8125rem;
line-height: 1.55;
color: var(--color-ink-muted);
}
.founder-card__body {
display: grid;
gap: var(--space-2);
padding-inline: var(--space-1);
}
.founder-card__body .eyebrow {
color: var(--color-ink-soft);
}
.founder-card__name {
font-family: var(--font-serif);
font-weight: 500;
font-size: 1.75rem;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
color: var(--color-ink-deep);
}
.founder-card__name em {
font-style: italic;
color: var(--color-accent);
font-weight: 500;
}
.founder-card__bio {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.6;
color: var(--color-ink-muted);
margin: 0;
max-width: 36ch;
}
.about-np {
max-width: 640px;
margin: var(--space-9) auto 0;
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-cream);
text-align: center;
display: grid;
gap: var(--space-3);
font-family: var(--font-sans);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-ink-muted);
}
.about-np .eyebrow {
display: inline-block;
color: var(--color-ink-soft);
}
/* §4 — Three pillars (deep wine) --------------------------------------- */
.pillars__head {
max-width: 640px;
margin: 0 auto var(--space-8);
text-align: left;
display: grid;
gap: var(--space-3);
}
.pillars__head .eyebrow--rule { color: var(--color-ink-cream-mute); }
.pillars__head .h-section { margin: 0; color: var(--color-ink-cream); }
.pillars__head .h-section em {
font-style: italic;
color: var(--color-accent-bright);
font-weight: 500;
}
.pillars {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 880px;
display: grid;
gap: 0;
}
.pillar {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
padding-block: var(--space-7);
border-top: 1px solid var(--color-border-deep);
}
.pillar:last-child { border-bottom: 1px solid var(--color-border-deep); }
@media (min-width: 800px) {
.pillar {
grid-template-columns: 200px 1fr;
gap: var(--space-8);
align-items: start;
}
}
.pillar .eyebrow--rule {
color: var(--color-ink-cream);
font-size: 0.75rem;
letter-spacing: 0.24em;
}
.pillar__body {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.65;
color: var(--color-ink-cream-mute);
margin: 0;
max-width: 60ch;
}
/* §5 — Editorial photo (ivory) ----------------------------------------- */
.about-photo-section { padding-block: var(--space-9); }
.about-photo {
max-width: 1120px;
margin: 0 auto;
padding-inline: var(--gutter-mobile);
display: grid;
gap: var(--space-4);
}
.about-photo picture,
.about-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--radius-md, 4px);
}
/* Portrait variant: a tall phone photo (e.g. a booth shot) reads as an
editorial plate — capped width, natural ratio, no crop. */
.about-photo--portrait { max-width: 600px; }
.about-photo--portrait picture,
.about-photo--portrait img {
aspect-ratio: auto;
object-fit: contain;
}
/* Inline story figure: a portrait phone photo dropped beside body copy inside
a 640px .about-story column. Capped narrow and centered so it reads as an
editorial inset, not a full-bleed plate. */
.story-figure {
margin: 0;
display: grid;
gap: var(--space-3);
justify-items: center;
}
.story-figure picture,
.story-figure img {
display: block;
width: 100%;
max-width: 340px;
height: auto;
border-radius: var(--radius-md, 4px);
box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.5);
}
.story-figure figcaption {
max-width: 340px;
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.0625rem;
line-height: 1.45;
text-align: center;
color: var(--color-ink-muted);
}
/* Vertical reel: capped width, intrinsic 9:16 ratio drives the height. No
object-fit — the video and poster are already 9:16, so cropping would only
introduce distortion. */
.reel-video {
display: block;
width: 100%;
max-width: 360px;
height: auto;
background: var(--color-ink, #1a1a1a);
border-radius: var(--radius-md, 4px);
box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.55);
}
/* §5 "Why it works at events" paired with the vertical reel on the right.
Scoped to .why-with-video so the shared .standards layout is untouched
elsewhere. The three points become a left-aligned vertical list beside the
tall 9:16 video. */
.why-with-video__layout { display: grid; gap: var(--space-7); }
.why-with-video .standards__head { text-align: left; margin-bottom: var(--space-6); }
.why-with-video .standards__title { margin-inline: 0; max-width: 28ch; }
.why-with-video .standards__grid {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 0;
max-width: none;
border-top: 1px solid var(--color-border-deep);
}
.why-with-video .standard {
grid-template-columns: 28px 1fr;
grid-template-rows: auto auto;
grid-row: auto;
column-gap: var(--space-4);
row-gap: 6px;
text-align: left;
justify-items: stretch;
align-items: start;
padding-block: var(--space-5);
border-bottom: 1px solid var(--color-border-deep);
}
.why-with-video .standard__icon {
grid-row: 1 / span 2;
grid-column: 1;
width: 28px;
height: 28px;
align-self: start;
margin: 2px 0 0;
}
.why-with-video .standard__label {
grid-row: 1;
grid-column: 2;
text-align: left;
align-self: start;
min-height: 0;
max-width: none;
display: block;
}
.why-with-video .standard__body {
grid-row: 2;
grid-column: 2;
text-align: left;
max-width: none;
align-self: start;
}
.why-with-video__media { display: flex; justify-content: center; }
@media (min-width: 880px) {
.why-with-video__layout {
grid-template-columns: 1fr minmax(300px, 360px);
align-items: center;
gap: var(--space-9);
}
}
.about-photo__caption {
max-width: 640px;
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 1.125rem;
line-height: 1.5;
color: var(--color-ink-muted);
display: flex;
gap: var(--space-3);
align-items: baseline;
}
.about-photo__caption .dash {
color: var(--color-accent);
font-style: normal;
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
flex-shrink: 0;
}
.about-photo__occasions {
max-width: 640px;
margin: var(--space-3) 0 0;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-cream);
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-soft);
}
.about-photo__occasions .dot {
color: var(--color-accent);
margin: 0 6px;
}
/* Empower Her recap — text-beside-photo split (portrait, never cropped).
Photo sits next to the prose, not stacked under it; sides alternate. */
.recap-split {
max-width: 1120px;
margin: 0 auto;
display: grid;
gap: var(--space-6);
}
.recap-split .about-story {
max-width: none;
margin-inline: 0;
}
.recap-split__photo {
margin: 0;
display: grid;
gap: var(--space-4);
max-width: 380px;
justify-self: center;
}
.recap-split__photo figure { margin: 0; }
.recap-split__photo picture,
.recap-split__photo img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md, 4px);
}
@media (min-width: 860px) {
.recap-split {
grid-template-columns: 1fr minmax(300px, 360px);
gap: var(--space-8);
align-items: center;
}
.recap-split__photo { max-width: none; justify-self: end; }
/* Reverse: photo on the left, prose on the right */
.recap-split--reverse { grid-template-columns: minmax(300px, 360px) 1fr; }
.recap-split--reverse .about-story { order: 2; }
.recap-split--reverse .recap-split__photo { order: 1; justify-self: start; }
}
/* EmpowerHER recap hero — the flyer's own sunburst rebuilt in CSS (its purples,
no lettering), radiating from behind the flyer, under a near-opaque veil so
cream copy stays AA and the text holds focus. */
.recap-hero--empower {
background:
linear-gradient(150deg, rgba(140, 82, 159, 0.86) 0%, rgba(109, 61, 128, 0.9) 42%, rgba(83, 46, 99, 0.94) 100%),
repeating-conic-gradient(from 0deg at 72% 34%, #b090c0 0deg 5deg, #7c4894 5deg 10deg);
}
.recap-hero--empower .h-section em { color: #dcc4ec; }
.section--deep.recap-hero--empower .about-story .eyebrow--rule { color: var(--color-ink-cream); }
.section--deep.recap-hero--empower .about-story p em { color: #f2c4b8; }
.recap-hero__photo { position: relative; }
.recap-hero__photo picture {
position: relative;
display: block;
border-radius: var(--radius-md, 4px);
overflow: hidden;
}
/* Purple veil melts the flyer into the hero so the text holds focus. */
.recap-hero__photo picture::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(140, 82, 159, 0.38), rgba(83, 46, 99, 0.58));
pointer-events: none;
}
@media (min-width: 860px) {
.recap-hero__split { grid-template-columns: 1fr minmax(320px, 400px); }
}
/* A small two-up "moments from the day" detail pair */
.recap-pair {
max-width: 880px;
margin: var(--space-7) auto 0;
padding-inline: var(--gutter-mobile);
}
.recap-pair__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.recap-pair img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md, 4px);
}
.recap-pair .about-photo__caption {
margin-top: var(--space-4);
}
/* =========================================================================
About §7.5 — Google Reviews (deep wine, full-bleed)
Compact one-viewport block: horizontal header row (title + Google
badge), three cream quote cards, single-line italic foot + CTA.
Designed to sit fully within the fold — no scroll needed.
========================================================================= */
.section.reviews {
padding-block: var(--space-7);
}
@media (min-width: 900px) {
.section.reviews { padding-block: var(--space-8); }
}
/* Editorial header — top meta row (eyebrow left, Google badge right),
then a full-bleed banner title beneath the hairline rule. */
.section.reviews .reviews__head {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
padding-bottom: var(--space-5);
margin-bottom: var(--space-6);
border-bottom: 1px solid rgba(244, 233, 220, 0.14);
}
.reviews__head-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.reviews__head-meta .eyebrow { margin: 0; }
.reviews__title {
margin: 0;
max-width: none;
width: 100%;
font-size: clamp(2.5rem, 6vw + 0.5rem, 5.25rem);
line-height: 1.02;
letter-spacing: -0.025em;
}
/* Google rating badge — cream pill, sits inline under the lede. */
.reviews__badge {
display: inline-flex;
align-items: center;
gap: var(--space-4);
align-self: start;
margin-top: var(--space-3);
padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
border-radius: 12px;
background: var(--color-bg-ivory);
color: var(--color-ink-deep);
box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.6);
}
.reviews__badge-logo {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
flex-shrink: 0;
}
.reviews__badge-logo svg { display: block; width: 26px; height: 26px; }
.reviews__badge-body { display: grid; gap: 2px; line-height: 1; }
.reviews__badge-row { display: inline-flex; align-items: baseline; gap: var(--space-3); }
.reviews__badge-score {
font-family: var(--font-serif);
font-weight: 600;
font-size: 1.375rem;
color: var(--color-ink-deep);
letter-spacing: -0.01em;
}
.reviews__badge-stars {
color: var(--color-accent);
letter-spacing: 0.05em;
font-size: 0.9rem;
}
.reviews__badge-label {
font-family: var(--font-sans);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
/* Quote grid — three cream review cards across the container. */
.reviews__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.reviews__quote {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--space-3);
padding: var(--space-5) var(--space-5) var(--space-4);
background: var(--color-bg-ivory);
color: var(--color-ink-deep);
border-radius: var(--radius-md);
box-shadow: 0 20px 45px -30px rgba(0, 0, 0, 0.55);
}
.reviews__quote::before {
content: "\201C";
position: absolute;
top: 0.1em;
left: var(--space-4);
font-family: var(--font-serif);
font-style: italic;
font-weight: 600;
font-size: clamp(5rem, 7vw, 7rem);
line-height: 0.7;
color: var(--color-accent-soft);
opacity: 0.5;
pointer-events: none;
user-select: none;
}
.reviews__quote-stars {
justify-self: end;
align-self: start;
color: var(--color-accent);
letter-spacing: 0.1em;
font-size: 0.85rem;
}
.reviews__quote-text {
margin: 0;
padding: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: 0.9375rem;
line-height: 1.4;
color: var(--color-ink-deep);
}
.reviews__quote-text::after {
content: "\201D";
color: var(--color-accent-soft);
font-style: italic;
font-weight: 600;
}
.reviews__quote-attr {
display: grid;
gap: 2px;
padding-top: var(--space-3);
border-top: 1px solid rgba(155, 81, 69, 0.20);
font-family: var(--font-sans);
}
.reviews__quote-name {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink-deep);
}
.reviews__quote-city {
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
}
/* Foot: italic close + underlined CTA, one inline row below the cards. */
.reviews__foot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
margin-top: var(--space-6);
}
.reviews__foot-line {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.0625rem, 1.2vw + 0.7rem, 1.25rem);
line-height: 1.3;
color: var(--color-ink-cream);
}
.reviews__foot-cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding-bottom: 6px;
border-bottom: 1px solid var(--color-accent-line);
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-accent-soft);
text-decoration: none;
transition: color 180ms ease, border-color 180ms ease;
}
.reviews__foot-cta:hover,
.reviews__foot-cta:focus-visible {
color: var(--color-ink-cream);
border-color: var(--color-ink-cream);
}
.reviews__foot-cta .arrow { transition: transform 220ms ease; }
.reviews__foot-cta:hover .arrow,
.reviews__foot-cta:focus-visible .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.reviews__foot-cta,
.reviews__foot-cta .arrow { transition: none; }
}
/* §3 — Our Mission (ivory) — short declarative paragraph --------------- */
.about-mission {
max-width: 760px;
margin-inline: auto;
padding-block: var(--space-2);
display: grid;
gap: var(--space-5);
}
.about-mission .eyebrow--rule {
margin-bottom: var(--space-3);
color: var(--color-ink-soft);
}
.about-mission .h-section {
margin: 0;
max-width: 16ch;
color: var(--color-ink-deep);
}
.about-mission .h-section em {
font-style: italic;
color: var(--color-accent);
font-weight: 500;
}
.about-mission__body {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1.25rem, 1.4vw + 0.5rem, 1.5rem);
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--color-ink-deep);
margin: 0;
max-width: 40ch;
text-wrap: pretty;
}
.about-mission__body em {
font-style: normal;
color: var(--color-accent);
font-weight: 500;
}
/* §6 — Our Clinical Standard (cream) — hairline proof list ------------- */
.clinical-standard__head {
max-width: 640px;
margin: 0 auto var(--space-7);
display: grid;
gap: var(--space-3);
text-align: left;
}
.clinical-standard__head .eyebrow--rule {
color: var(--color-ink-soft);
}
.clinical-standard__head .h-section {
margin: 0;
color: var(--color-ink-deep);
}
.clinical-standard__head .h-section em {
font-style: italic;
color: var(--color-accent);
font-weight: 500;
}
.clinical-standard {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 880px;
display: grid;
gap: 0;
}
.clinical-line {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
padding-block: var(--space-5);
border-top: 1px solid var(--color-border-cream);
}
.clinical-line:last-child {
border-bottom: 1px solid var(--color-border-cream);
}
@media (min-width: 800px) {
.clinical-line {
grid-template-columns: 220px 1fr;
gap: var(--space-8);
align-items: baseline;
padding-block: var(--space-6);
}
}
.clinical-line .eyebrow--rule {
color: var(--color-ink-soft);
font-size: 0.75rem;
letter-spacing: 0.22em;
}
.clinical-line__body {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.55;
color: var(--color-ink-deep);
margin: 0;
max-width: 60ch;
}
.clinical-line__body em {
font-style: italic;
color: #8A4538;
font-weight: 500;
}
/* §4b — Moments (ivory) — "When the room is right" --------------------
Hairline-ruled use-case scan. Mirrors the .clinical-standard pattern
so the page reads as one editorial system, not a list of borrowed
components. Sits between §4 (Founders, cream) and §5 (Pillars, deep). */
.moments__head {
max-width: 640px;
margin: 0 auto var(--space-7);
display: grid;
gap: var(--space-3);
text-align: left;
}
.moments__head .eyebrow--rule { color: var(--color-ink-soft); }
.moments__head .h-section {
margin: 0;
color: var(--color-ink-deep);
}
.moments__head .h-section em {
font-style: italic;
color: var(--color-accent);
font-weight: 500;
}
.moments {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 880px;
display: grid;
gap: 0;
}
.moment {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
padding-block: var(--space-5);
border-top: 1px solid var(--color-border-cream);
}
.moment:last-child {
border-bottom: 1px solid var(--color-border-cream);
}
@media (min-width: 800px) {
.moment {
grid-template-columns: 220px 1fr;
gap: var(--space-8);
align-items: baseline;
padding-block: var(--space-6);
}
}
.moment .eyebrow--rule {
color: var(--color-ink-soft);
font-size: 0.75rem;
letter-spacing: 0.22em;
}
.moment__body {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.55;
color: var(--color-ink-deep);
margin: 0;
max-width: 60ch;
}
.moment__body em {
font-style: italic;
color: #8A4538;
font-weight: 500;
}
/* §8 closing — italic accent inside lede on espresso bg ---------------- */
.closing__lede em {
font-style: italic;
color: var(--color-accent-bright);
font-weight: 500;
}
/* =========================================================================
IV Blends — functional quiz augmentations
Pairs with the [data-quiz] state machine in scripts.js. Reuses the
existing .quiz__card / .quiz__opt / .quiz__progress visual language and
adds: button reset on option triggers, step navigation row, result panel.
========================================================================= */
/* The quiz__opts is now a of