/* =============================================================
STRIVE WITH SANTI, Design System
Premium-but-approachable personal training brand
Aesthetic: warm boutique (Focus Athletics), oat, rosewood taupe, cocoa,
plum charcoal + one confident berry accent. Arch motifs.
Load fonts in BEFORE this stylesheet:
============================================================= */
/* -------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------- */
:root {
/* --- Core palette (warm-premium, Focus Athletics anchored) ---
All text/background pairs below meet WCAG AA (>=4.5:1 body,
>=3:1 large/UI). Contrast notes inline. */
/* Dark / ink family (warm near-black charcoal) */
--ink: #2B2126; /* primary dark bg + text on light (15.7:1 on bone) */
--ink-2: #342930; /* elevated dark surface */
--espresso: #41333B; /* dark accent panel / footer top */
/* Light / bone family (off-white, warm) */
--bone: #F7F3EE; /* primary light background */
--paper: #FCFAF7; /* lightest surface (cards on bone) */
--sand: #EFE5DE; /* soft neutral panel */
--sand-deep: #E3D4CB; /* deeper neutral panel */
/* Neutrals (taupe / oak) */
--border: #E0D2C9; /* hairline borders on light */
--border-2: #CDBAAF; /* stronger border */
--taupe: #B09195; /* decorative taupe (NOT for small text) */
--oak: #7C5560; /* oak, deep warm neutral, AA on bone (4.8:1) */
--muted: #6B5D62; /* secondary body text on light (5.4:1 on bone) */
/* Accent, energetic ember / copper-orange */
--ember: #A83A5E; /* accent: buttons, fills, highlights */
--ember-ink: #93304F; /* accent text/links on light (5.6:1 on bone) */
--ember-warm: #F291AC; /* brighter ember for accents on dark ink */
--ember-tint: #F8E2E9; /* faint ember wash for pill/badge bg */
/* Text-on-dark */
--on-ink: #F7F3EE; /* bone text on ink (15.7:1) */
--on-ink-soft: #CBB9BE; /* muted text on ink (7.9:1) */
/* Functional */
--focus-ring: #A83A5E;
--success: #4E7A54;
--error: #B23B2E;
/* --- Typography --- */
--font-display: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
--font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Fluid type scale (min ~320px → max ~1440px) */
--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
--step-2: clamp(1.44rem, 1.3rem + 0.7vw, 2rem);
--step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.75rem);
--step-4: clamp(2.07rem, 1.72rem + 1.75vw, 3.75rem);
--step-5: clamp(2.49rem, 1.95rem + 2.7vw, 5rem);
--step-6: clamp(2.99rem, 2.2rem + 3.9vw, 6.5rem);
--leading-tight: 1.05;
--leading-snug: 1.2;
--leading-body: 1.65;
/* --- Spacing scale --- */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4.5rem;
--space-3xl: 7rem;
--section-y: clamp(4rem, 3rem + 6vw, 8.5rem);
/* --- Layout --- */
--container: 1200px;
--container-narrow: 780px;
--container-wide: 1360px;
--gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
/* --- Radii (arches) --- */
--radius-s: 8px;
--radius-m: 14px;
--radius-l: 24px;
--radius-pill: 999px;
--arch: 999px 999px 24px 24px; /* Focus Athletics arched-doorway mask */
--arch-soft: 999px 999px 999px 999px;
/* --- Shadows (warm, soft) --- */
--shadow-s: 0 1px 2px rgba(28,24,21,0.05), 0 2px 6px rgba(28,24,21,0.05);
--shadow-m: 0 6px 16px rgba(28,24,21,0.08), 0 2px 4px rgba(28,24,21,0.05);
--shadow-l: 0 18px 48px rgba(28,24,21,0.14), 0 6px 14px rgba(28,24,21,0.07);
--shadow-ember: 0 10px 30px rgba(194,81,40,0.28);
/* --- Motion --- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 160ms;
--dur: 320ms;
--dur-slow: 620ms;
--nav-h: 74px;
}
/* -------------------------------------------------------------
2. RESET / BASE
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: var(--leading-body);
color: var(--ink);
background: var(--bone);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-x: clip;
}
/* Root-level horizontal clip so pre-reveal transforms (translateX on
[data-reveal]) can't create a 7px horizontal scroll on at
mobile widths. `clip` is used (with hidden fallback) because it does
not establish a scroll container and therefore never breaks the
position:sticky header. */
html {
overflow-x: hidden;
overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 3px;
}
::selection { background: var(--ember); color: #fff; }
.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; left: 50%; top: -60px; transform: translateX(-50%);
background: var(--ink); color: var(--on-ink); padding: 0.7em 1.2em;
border-radius: var(--radius-pill); z-index: 200; transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 12px; }
/* -------------------------------------------------------------
3. TYPOGRAPHY
------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
line-height: var(--leading-snug);
letter-spacing: -0.015em;
color: var(--ink);
font-optical-sizing: auto;
text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: var(--leading-tight); font-weight: 500; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: 68ch; }
.lead {
font-size: var(--step-1);
line-height: 1.5;
color: var(--muted);
font-weight: 400;
}
strong { font-weight: 600; }
em { font-style: italic; }
.display-serif { font-family: var(--font-display); }
.italic-serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.text-accent { color: var(--ember-ink); }
.text-muted { color: var(--muted); }
.text-oak { color: var(--oak); }
/* Fancy inline accent, italic serif ember (used inside headlines) */
h1 .accent, h2 .accent {
font-style: italic;
font-weight: 400;
color: var(--ember-ink);
}
a.link {
color: var(--ember-ink);
position: relative;
font-weight: 500;
}
a.link::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
background: currentColor; transform: scaleX(0); transform-origin: right;
transition: transform var(--dur) var(--ease-out);
}
a.link:hover::after { transform: scaleX(1); transform-origin: left; }
/* -------------------------------------------------------------
4. LAYOUT PRIMITIVES
------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--on-ink); }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.stack > * + * { margin-top: var(--flow, 1.25rem); }
.stack-lg > * + * { margin-top: var(--space-l); }
.grid { display: grid; gap: var(--space-l); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.split {
display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 860px) {
.split { grid-template-columns: 1fr 1fr; }
.split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
.split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
}
.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 62ch; }
/* -------------------------------------------------------------
5. SECTION HEADERS + EYEBROWS
------------------------------------------------------------- */
.eyebrow {
display: inline-flex; align-items: center; gap: 0.6em;
font-family: var(--font-sans);
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember-ink);
}
.eyebrow::before {
content: ""; width: 26px; height: 1.5px; background: var(--ember); display: inline-block;
}
.eyebrow.eyebrow--center::before { display: none; }
.section--ink .eyebrow { color: var(--ember-warm); }
.section--ink .eyebrow::before { background: var(--ember-warm); }
.section-header { max-width: 44ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-header.center { margin-inline: auto; }
.section-header .eyebrow { margin-bottom: var(--space-s); }
.section-header h2 { margin-bottom: var(--space-s); }
.section-header p { color: var(--muted); }
.section--ink .section-header p { color: var(--on-ink-soft); }
/* -------------------------------------------------------------
6. BUTTONS
------------------------------------------------------------- */
.btn {
--btn-bg: var(--ember);
--btn-fg: #fff;
display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
font-family: var(--font-sans);
font-size: var(--step-0);
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1;
padding: 1.05em 1.6em;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
background: var(--btn-bg);
color: var(--btn-fg);
cursor: pointer;
text-align: center;
transition: transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
background-color var(--dur) var(--ease-soft),
border-color var(--dur) var(--ease-soft),
color var(--dur) var(--ease-soft);
will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--ember); color: #fff; box-shadow: var(--shadow-s); }
.btn--secondary {
background: transparent; color: var(--ink); border-color: var(--border-2);
}
.btn--secondary:hover { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.btn--ghost-light { background: var(--ink); color: var(--on-ink); }
.btn--on-ink { background: var(--ember); color: #fff; }
.btn--outline-ink {
background: transparent; color: var(--on-ink); border-color: rgba(246,241,233,0.3);
}
.btn--outline-ink:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.btn--text {
background: transparent; color: var(--ember-ink); padding-inline: 0.2em;
border-radius: 0;
}
.btn--text::after {
content: ""; position: absolute;
}
.btn--lg { padding: 1.2em 2em; font-size: var(--step-1); }
.btn--sm { padding: 0.75em 1.15em; font-size: var(--step--1); }
.btn--block { display: flex; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
.btn--primary:hover, .btn--on-ink:hover {
transform: translateY(-2px); box-shadow: var(--shadow-ember);
}
.btn--secondary:hover, .btn--outline-ink:hover, .btn--ghost-light:hover {
transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }
}
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.btn-group--center { justify-content: center; }
/* -------------------------------------------------------------
7. BADGES / PILLS
------------------------------------------------------------- */
.pill {
display: inline-flex; align-items: center; gap: 0.5em;
font-size: var(--step--1); font-weight: 500;
padding: 0.5em 0.95em; border-radius: var(--radius-pill);
background: var(--paper); border: 1px solid var(--border);
color: var(--ink);
}
.pill--accent { background: var(--ember-tint); border-color: transparent; color: var(--ember-ink); font-weight: 600; }
.pill--ink { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.section--ink .pill { background: rgba(246,241,233,0.08); border-color: rgba(246,241,233,0.16); color: var(--on-ink); }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* -------------------------------------------------------------
8. NAV, sticky translucent w/ blur
------------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 100;
transition: background-color var(--dur) var(--ease-soft),
box-shadow var(--dur) var(--ease-soft),
border-color var(--dur) var(--ease-soft);
border-bottom: 1px solid transparent;
background: transparent;
}
.site-header.is-stuck {
background: rgba(246,241,233,0.82);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom-color: var(--border);
box-shadow: 0 2px 20px rgba(28,24,21,0.05);
}
.nav {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
height: var(--nav-h);
}
.brand {
display: inline-flex; align-items: baseline; gap: 0.4ch;
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em;
color: var(--ink); white-space: nowrap;
}
.brand .brand-strive { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 1.1rem; }
.brand .brand-with { font-style: italic; font-weight: 400; color: var(--ember-ink); font-size: 1.15rem; }
.nav-links {
display: none; align-items: center; gap: clamp(0.5rem, 1.5vw, 1.75rem);
list-style: none;
}
@media (min-width: 980px) { .nav-links { display: flex; } }
.nav-links a {
position: relative; font-size: 0.95rem; font-weight: 500; color: var(--ink);
padding: 0.4em 0.1em;
transition: color var(--dur) var(--ease-soft);
}
.nav-links a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--ember); border-radius: 2px; transform: scaleX(0); transform-origin: right;
transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--ember-ink); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current="page"] { color: var(--ember-ink); }
.nav-cta { display: none; }
@media (min-width: 980px) { .nav-cta { display: inline-flex; } }
/* Mobile menu toggle */
.nav-toggle {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 46px; height: 46px; padding: 11px; border: 1px solid var(--border-2);
border-radius: var(--radius-pill); background: var(--paper); cursor: pointer;
}
@media (min-width: 980px) { .nav-toggle { display: none; } }
.nav-toggle span {
display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu panel */
.mobile-menu {
position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
background: var(--bone);
padding: var(--space-l) var(--gutter) var(--space-2xl);
display: flex; flex-direction: column; gap: var(--space-xs);
transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
padding: 0.4em 0; border-bottom: 1px solid var(--border);
}
.mobile-menu a[aria-current="page"] { color: var(--ember-ink); }
.mobile-menu .btn { margin-top: var(--space-m); }
@media (min-width: 980px) { .mobile-menu { display: none; } }
/* -------------------------------------------------------------
9. HERO
------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(2rem, 4vw, 4rem); padding-bottom: var(--section-y); overflow: hidden; }
.hero__grid {
display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 920px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero__eyebrow { margin-bottom: var(--space-m); }
.hero h1 { margin-bottom: var(--space-m); }
.hero .lead { margin-bottom: var(--space-l); max-width: 46ch; }
.hero__cta { margin-bottom: var(--space-l); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-xl); align-items: center; }
.hero__meta .stat-inline { display: flex; flex-direction: column; }
.hero__meta .stat-inline b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; color: var(--ink); line-height: 1; }
.hero__meta .stat-inline span { font-size: var(--step--1); color: var(--muted); }
.hero__media { position: relative; }
/* -------------------------------------------------------------
10. ARCHED IMAGE MASKS + FIGURES
------------------------------------------------------------- */
.figure { position: relative; }
.figure img, .figure svg, .figure video { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure figcaption { margin-top: var(--space-xs); font-size: var(--step--1); color: var(--muted); }
/* Real vertical (9:16) photos/video dropped into landscape placeholders.
Give the container a portrait-friendly box and cover-fit the media so
nothing distorts. Applied per-element so untouched SVG figures are unaffected. */
.figure.photo-real { aspect-ratio: 3 / 4; overflow: hidden; }
.photo-real > img, .photo-real > video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Real photo inside a fixed-ratio (4:3) service-card media box just needs
cover-fit; bias slightly toward the top so subjects' faces stay in frame. */
.service-card__media img.photo-real { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.arch {
border-radius: var(--arch);
overflow: hidden;
box-shadow: var(--shadow-l);
}
.arch--full { border-radius: var(--radius-pill); }
.arch--soft { border-radius: var(--radius-l); overflow: hidden; }
.arch-frame {
position: relative; border-radius: var(--arch); overflow: hidden;
background: var(--sand);
}
.arch-frame::after {
content: ""; position: absolute; inset: 0; border-radius: var(--arch);
box-shadow: inset 0 0 0 1px rgba(28,24,21,0.06); pointer-events: none;
}
/* Decorative floating accent tag on media */
.media-tag {
position: absolute; left: -10px; bottom: 28px; z-index: 3;
background: var(--paper); border: 1px solid var(--border);
border-radius: var(--radius-m); padding: 0.85em 1.1em; box-shadow: var(--shadow-m);
display: flex; align-items: center; gap: 0.7em; max-width: 250px;
}
.media-tag .media-tag__icon {
width: 40px; height: 40px; border-radius: 50%; background: var(--ember-tint);
display: grid; place-items: center; color: var(--ember-ink); flex-shrink: 0;
}
.media-tag b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.media-tag span { font-size: var(--step--1); color: var(--muted); }
.media-blob {
position: absolute; z-index: 0; background: var(--ember-tint);
border-radius: 50%; filter: blur(2px); opacity: 0.6;
}
/* -------------------------------------------------------------
11. CARDS
------------------------------------------------------------- */
.card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: clamp(1.5rem, 3vw, 2.25rem);
transition: transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-soft);
height: 100%;
display: flex; flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: var(--border-2); }
}
.card__icon {
width: 56px; height: 56px; border-radius: 16px;
display: grid; place-items: center; margin-bottom: var(--space-m);
background: var(--ember-tint); color: var(--ember-ink);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: var(--step-1); margin-bottom: 0.5em; }
.card p { color: var(--muted); font-size: var(--step-0); }
.card__link { margin-top: auto; padding-top: var(--space-m); font-weight: 600; color: var(--ember-ink); display: inline-flex; align-items: center; gap: 0.4em; }
.card__link svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease-out); }
.card:hover .card__link svg { transform: translateX(4px); }
/* Service card w/ arched media */
.service-card { padding: 0; overflow: hidden; }
.service-card .service-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.service-card .service-card__body { padding: clamp(1.35rem, 3vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.service-card__media img, .service-card__media svg { transition: transform var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
.service-card:hover .service-card__media img,
.service-card:hover .service-card__media svg { transform: scale(1.04); }
}
/* Numbered / list card */
.card--outline { background: transparent; border-color: var(--border-2); }
.card--ink { background: var(--ink-2); border-color: rgba(246,241,233,0.12); color: var(--on-ink); }
.card--ink h3 { color: var(--on-ink); }
.card--ink p { color: var(--on-ink-soft); }
/* Step / process card */
.step__num {
font-family: var(--font-display); font-size: var(--step-3); font-weight: 500;
color: var(--ember-ink); line-height: 1; display: block; margin-bottom: var(--space-s);
}
.section--ink .step__num { color: var(--ember-warm); }
/* -------------------------------------------------------------
12. STAT BLOCKS
------------------------------------------------------------- */
.stat-block { display: flex; flex-direction: column; gap: 0.15em; }
.stat-block .stat-num {
font-family: var(--font-display); font-weight: 600; line-height: 1;
font-size: var(--step-4); color: var(--ink);
letter-spacing: -0.02em;
}
.stat-block .stat-num .unit { color: var(--ember-ink); }
.stat-block .stat-label { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.section--ink .stat-block .stat-num { color: var(--on-ink); }
.section--ink .stat-block .stat-num .unit { color: var(--ember-warm); }
.section--ink .stat-block .stat-label { color: var(--on-ink-soft); }
.stat-strip {
display: grid; gap: var(--space-l) var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.stat-strip.has-divide .stat-block { position: relative; padding-left: clamp(1rem,2vw,1.75rem); border-left: 1px solid var(--border-2); }
.section--ink .stat-strip.has-divide .stat-block { border-left-color: rgba(246,241,233,0.16); }
/* -------------------------------------------------------------
13. TESTIMONIAL CARDS
------------------------------------------------------------- */
.testimonial {
background: var(--paper); border: 1px solid var(--border);
border-radius: var(--radius-l); padding: clamp(1.6rem, 3vw, 2.4rem);
display: flex; flex-direction: column; gap: var(--space-m); height: 100%;
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
}
.testimonial__stars { color: var(--ember); letter-spacing: 0.15em; font-size: 1rem; }
.testimonial blockquote {
font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45;
font-weight: 400; color: var(--ink); letter-spacing: -0.01em;
}
.testimonial__result {
display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5em;
background: var(--ember-tint); color: var(--ember-ink); font-weight: 600;
padding: 0.4em 0.85em; border-radius: var(--radius-pill); font-size: var(--step--1);
}
.testimonial footer { display: flex; align-items: center; gap: 0.85em; margin-top: auto; }
.testimonial__avatar {
width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--taupe), var(--oak));
display: grid; place-items: center; color: var(--paper); font-family: var(--font-display);
font-weight: 600; font-size: 1.05rem;
}
.testimonial__meta b { display: block; font-size: var(--step-0); }
.testimonial__meta span { font-size: var(--step--1); color: var(--muted); }
.section--ink .testimonial { background: var(--ink-2); border-color: rgba(246,241,233,0.12); }
.section--ink .testimonial blockquote { color: var(--on-ink); }
.section--ink .testimonial__meta span { color: var(--on-ink-soft); }
/* -------------------------------------------------------------
14. FAQ ACCORDION
------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-m);
padding: clamp(1.15rem, 2.5vw, 1.6rem) 0;
font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--ink);
line-height: 1.3;
}
.faq__q:hover { color: var(--ember-ink); }
.faq__icon {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
border: 1.5px solid var(--border-2); position: relative; margin-top: 0.15em;
transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.faq__icon::before, .faq__icon::after {
content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink);
transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}
.faq__icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--ember); border-color: var(--ember); }
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after { background: #fff; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a {
overflow: hidden; height: 0;
transition: height var(--dur) var(--ease-out);
}
.faq__a-inner { padding-bottom: clamp(1.15rem, 2.5vw, 1.6rem); color: var(--muted); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }
/* -------------------------------------------------------------
15. PRICING ANCHOR BLOCK
------------------------------------------------------------- */
.pricing {
display: grid; gap: var(--space-l);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.price-card {
background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-l);
padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-s);
position: relative; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.price-card--featured { border-color: var(--ember); box-shadow: var(--shadow-m); }
.price-card--featured::before {
content: "Most popular"; position: absolute; top: -13px; left: clamp(1.75rem,3vw,2.5rem);
background: var(--ember); color: #fff; font-size: var(--step--1); font-weight: 600;
padding: 0.35em 0.9em; border-radius: var(--radius-pill); letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: no-preference) {
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }
}
.price-card h3 { font-size: var(--step-1); }
.price-card .price {
font-family: var(--font-display); font-size: var(--step-4); font-weight: 600; color: var(--ink);
line-height: 1; display: flex; align-items: baseline; gap: 0.2em;
}
.price-card .price .from { font-family: var(--font-sans); font-size: var(--step--1); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.price-card .price .per { font-family: var(--font-sans); font-size: var(--step-0); color: var(--muted); font-weight: 500; }
.price-card ul { display: flex; flex-direction: column; gap: 0.7em; margin-top: var(--space-xs); }
.price-card ul li { display: flex; gap: 0.65em; align-items: flex-start; color: var(--muted); font-size: var(--step-0); }
.price-card ul li svg { width: 20px; height: 20px; color: var(--ember-ink); flex-shrink: 0; margin-top: 0.15em; }
.price-card .btn { margin-top: auto; }
.price-note { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-m); }
/* -------------------------------------------------------------
16. FORMS
------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-m); }
.form-row { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-row.form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.45em; }
.field label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em; }
.field label .req { color: var(--ember-ink); }
.field .hint { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select {
width: 100%; padding: 0.85em 1em; border-radius: var(--radius-m);
border: 1.5px solid var(--border-2); background: var(--paper); color: var(--ink);
font-size: var(--step-0); transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.field input::placeholder, .field textarea::placeholder { color: #9a9086; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(194,81,40,0.14);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--error); }
.field .error-msg { color: var(--error); font-size: var(--step--1); font-weight: 500; display: none; }
.field.has-error .error-msg { display: block; }
.form-success {
display: none; align-items: flex-start; gap: 0.85em;
background: #EEF4EE; border: 1px solid #CBE0CB; border-radius: var(--radius-m);
padding: 1.1em 1.25em; color: #2F5735;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--success); margin-top: 2px; }
.form-consent { font-size: var(--step--1); color: var(--muted); }
/* Card that wraps the form on dark or paper */
.form-card {
background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-l);
padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-m);
}
/* -------------------------------------------------------------
17. CREDIBILITY MARQUEE / TICKER
------------------------------------------------------------- */
.marquee {
overflow: hidden; border-block: 1px solid var(--border);
padding-block: 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.section--ink .marquee { border-color: rgba(246,241,233,0.14); }
.marquee__track { display: flex; width: max-content; gap: 0; }
.marquee__group { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding-right: clamp(1.5rem, 4vw, 3rem); }
.marquee__item {
display: inline-flex; align-items: center; gap: 0.7em; white-space: nowrap;
font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); font-weight: 500;
}
.section--ink .marquee__item { color: var(--on-ink); }
.marquee__item .star { color: var(--ember); }
.marquee__item .sep { color: var(--taupe); }
@media (prefers-reduced-motion: no-preference) {
.marquee__track { animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* -------------------------------------------------------------
18. CTA BAND
------------------------------------------------------------- */
.cta-band {
position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink);
border-radius: var(--radius-l); padding: clamp(2.5rem, 6vw, 5rem);
text-align: center;
}
.cta-band::before, .cta-band::after {
content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta-band::before { width: 340px; height: 340px; background: radial-gradient(circle, rgba(194,81,40,0.55), transparent 70%); top: -120px; right: -80px; }
.cta-band::after { width: 260px; height: 260px; background: radial-gradient(circle, rgba(232,138,90,0.28), transparent 70%); bottom: -120px; left: -60px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--on-ink); margin-bottom: var(--space-s); }
.cta-band p { color: var(--on-ink-soft); margin-inline: auto; margin-bottom: var(--space-l); }
/* Arched top decoration (echo doorway) on full-bleed CTA */
.cta-band--arch { border-radius: var(--arch); }
/* -------------------------------------------------------------
19. FOOTER
------------------------------------------------------------- */
.site-footer { background: var(--espresso); color: var(--on-ink-soft); padding-top: var(--space-3xl); }
.site-footer a { color: var(--on-ink-soft); transition: color var(--dur) var(--ease-soft); }
.site-footer a:hover { color: var(--on-ink); }
.footer-top {
display: grid; gap: var(--space-xl);
grid-template-columns: 1fr; padding-bottom: var(--space-2xl);
border-bottom: 1px solid rgba(246,241,233,0.14);
}
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-brand .brand { color: var(--on-ink); margin-bottom: var(--space-m); }
.footer-brand .brand .brand-with { color: var(--ember-warm); }
.footer-brand p { color: var(--on-ink-soft); max-width: 34ch; }
.footer-brand .social { display: inline-flex; gap: 0.7em; margin-top: var(--space-m); }
.footer-brand .social a {
width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid rgba(246,241,233,0.2); color: var(--on-ink);
transition: background-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out);
}
.footer-brand .social a:hover { background: var(--ember); border-color: var(--ember); transform: translateY(-2px); }
.footer-brand .social svg { width: 20px; height: 20px; }
.footer-col h3 { color: var(--on-ink); font-family: var(--font-sans); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; margin-bottom: var(--space-m); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7em; }
.footer-col address { font-style: normal; line-height: 1.7; }
.footer-col address b { color: var(--on-ink); font-weight: 600; display: block; }
.footer-hours { margin-top: var(--space-s); font-size: var(--step--1); }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); justify-content: space-between;
align-items: center; padding-block: var(--space-l) var(--space-xl);
font-size: var(--step--1);
}
.footer-bottom .legal { color: var(--on-ink-soft); }
.footer-disclaimer { max-width: 70ch; font-size: 0.78rem; color: rgba(201,190,175,0.7); line-height: 1.6; }
/* -------------------------------------------------------------
20. LOCAL / MAP / DIRECTIONS
------------------------------------------------------------- */
.map-embed {
border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border);
box-shadow: var(--shadow-m); background: var(--sand);
}
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.nap-card {
background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-l);
padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: var(--space-m);
}
.nap-card .nap-line { display: flex; gap: 0.85em; align-items: flex-start; }
.nap-card .nap-line svg { width: 22px; height: 22px; color: var(--ember-ink); flex-shrink: 0; margin-top: 3px; }
.nap-card .nap-line b { display: block; }
.nap-card address { font-style: normal; line-height: 1.6; }
/* -------------------------------------------------------------
21. BREADCRUMB / PAGE INTRO
------------------------------------------------------------- */
.page-hero { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5em; font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-m); }
.breadcrumb a:hover { color: var(--ember-ink); }
.breadcrumb .sep { color: var(--taupe); }
/* -------------------------------------------------------------
22. MISC UTILITIES
------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--space-xl); }
.section--ink .divider { background: rgba(246,241,233,0.14); }
.bg-arch-motif { position: relative; }
.check-list { display: flex; flex-direction: column; gap: 0.85em; }
.check-list li { display: flex; gap: 0.7em; align-items: flex-start; color: var(--muted); }
.check-list li svg { width: 22px; height: 22px; color: var(--ember-ink); flex-shrink: 0; margin-top: 2px; }
.check-list.check-list--ink li { color: var(--on-ink-soft); }
.check-list.check-list--ink li svg { color: var(--ember-warm); }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }
/* -------------------------------------------------------------
23. MOTION, scroll reveal (wrapped in reduced-motion guard)
------------------------------------------------------------- */
[data-reveal] { will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
[data-reveal] { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal="fade-up"] { transform: translateY(28px); }
[data-reveal="fade-in"] { transform: none; }
[data-reveal="fade-left"] { transform: translateX(28px); }
[data-reveal="fade-right"]{ transform: translateX(-28px); }
[data-reveal="zoom"] { transform: scale(0.96); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* staggered children */
[data-reveal-group] > * { opacity: 0; transform: translateY(24px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
[data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 450ms; }
/* hero entrance */
.hero__grid > * { animation: hero-in var(--dur-slow) var(--ease-out) both; }
.hero__grid > *:nth-child(2) { animation-delay: 140ms; }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* subtle float on decorative blobs */
.media-blob { animation: floaty 7s var(--ease-soft) infinite alternate; }
@keyframes floaty { to { transform: translateY(-14px); } }
}
/* Reduced motion: ensure everything visible, no animation */
@media (prefers-reduced-motion: reduce) {
[data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
.marquee__track { animation: none !important; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* -------------------------------------------------------------
24. RESPONSIVE HELPERS
------------------------------------------------------------- */
@media (max-width: 620px) {
.hero__meta { gap: var(--space-m) var(--space-l); }
.btn-group .btn { flex: 1 1 auto; }
.media-tag { position: static; margin-top: var(--space-m); max-width: none; }
}